/* ==================================================================
 * SBA Waterless Wash — frontend stylesheet
 * Theme color: #076951 (deep emerald)
 * ================================================================== */

/* Force [hidden] to actually hide — many themes override the browser default */
.sba-ww-app [hidden],
.sba-ww-modal[hidden],
.sba-ww-toast[hidden]{display:none !important}

.sba-ww-app{
	--ww-green:#076951;
	--ww-green-2:#0a9676;
	--ww-green-3:#033d2f;
	--ww-cream:#f5faf8;
	--ww-cream-2:#e9f4f0;
	--ww-border:#c5dfd8;
	--ww-text:#0a1f18;
	--ww-text-soft:#3a5a4d;
	--ww-text-mute:#6e8a80;
	--ww-warn-bg:#fef3c7; --ww-warn-fg:#92400e;
	--ww-ok-bg:#d1fae5;   --ww-ok-fg:#065f46;
	--ww-info-bg:#dbeafe; --ww-info-fg:#1e40af;
	--ww-bad-bg:#fee2e2;  --ww-bad-fg:#991b1b;
	--ww-radius:16px;
	--ww-radius-sm:10px;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	color:var(--ww-text);
	line-height:1.55;
	position:relative;
	max-width:880px;
	margin:0 auto;
	padding:24px 18px;
}
.sba-ww-app *{box-sizing:border-box}
.sba-ww-app a{color:var(--ww-green-2);text-decoration:none}
.sba-ww-app a:hover{color:var(--ww-green-3);text-decoration:underline}
/* Anchor-styled buttons must never show the link underline in any state. */
.sba-ww-btn,
.sba-ww-app a.sba-ww-btn,
.sba-ww-app a.sba-ww-btn:hover,
.sba-ww-app a.sba-ww-btn:focus,
.sba-ww-app a.sba-ww-btn:active,
.sba-ww-btn:hover,.sba-ww-btn:focus,.sba-ww-btn:active{text-decoration:none !important}

/* Background orbs (subtle decoration) */
.sba-ww-bg-orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;border-radius:24px}
.sba-ww-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.25}
.sba-ww-orb.a{width:340px;height:340px;background:radial-gradient(circle,#0a9676,#076951);top:-60px;left:-90px}
.sba-ww-orb.b{width:280px;height:280px;background:radial-gradient(circle,#5fc9ad,#0a9676);bottom:-40px;right:-60px}
.sba-ww-orb.c{width:220px;height:220px;background:radial-gradient(circle,#a0e6d2,#5fc9ad);top:50%;left:50%;transform:translate(-50%,-50%);opacity:.15}

/* Typography */
.sba-ww-h1{font-size:24px;font-weight:700;margin:0;color:var(--ww-text)}
.sba-ww-h2{font-size:20px;font-weight:700;margin:0 0 6px;color:var(--ww-text)}
.sba-ww-lbl{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ww-text-soft);margin-bottom:8px}
.sba-ww-lbl .ti{color:var(--ww-green-2)}

/* Input styles */
.sba-ww-input{
	width:100%;
	padding:11px 14px;
	border:1px solid var(--ww-border);
	border-radius:var(--ww-radius-sm);
	background:#fff;
	font-size:14px;
	color:var(--ww-text);
	transition:border-color .15s,box-shadow .15s;
}
.sba-ww-input:focus{outline:none;border-color:var(--ww-green-2);box-shadow:0 0 0 3px rgba(10,150,118,.18)}
.sba-ww-input[disabled]{background:#f1f7f4;color:var(--ww-text-mute)}
.sba-ww-input::placeholder{color:#94b1a6}
textarea.sba-ww-input{resize:vertical;min-height:60px}

.sba-ww-field-block{margin-bottom:18px}
.sba-ww-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.sba-ww-grid-2{grid-template-columns:1fr}}
.sba-ww-row{display:flex;gap:10px;align-items:center}
.sba-ww-row .sba-ww-input{flex:1}

/* Buttons */
.sba-ww-btn{
	display:inline-flex;align-items:center;gap:8px;
	padding:11px 18px;
	border-radius:var(--ww-radius-sm);
	font-size:14px;font-weight:600;
	cursor:pointer;
	border:1px solid transparent;
	background:transparent;color:var(--ww-text);
	transition:all .15s;
}
.sba-ww-btn:hover{transform:translateY(-1px)}
.sba-ww-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.sba-ww-btn.primary{background:linear-gradient(135deg,var(--ww-green),var(--ww-green-3));color:#fff;box-shadow:0 4px 14px rgba(7,105,81,.3)}
.sba-ww-btn.primary:hover{box-shadow:0 6px 20px rgba(7,105,81,.4)}
.sba-ww-btn.ghost{background:#fff;border-color:var(--ww-border);color:var(--ww-text-soft)}
.sba-ww-btn.ghost:hover{background:var(--ww-cream-2);border-color:var(--ww-green-2);color:var(--ww-green)}
.sba-ww-btn.danger{background:#fff;border-color:#fca5a5;color:#991b1b}
.sba-ww-btn.danger:hover{background:#fee2e2}
.sba-ww-btn.full{width:100%;justify-content:center}
.sba-ww-btn.icon-only{padding:10px 11px}
.sba-ww-btn.sm{padding:7px 12px;font-size:13px}

.sba-ww-actions{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:10px}

/* Step indicator (booking form) */
.sba-ww-steps{display:flex;align-items:center;gap:8px;margin-bottom:24px}
.sba-ww-step{display:flex;align-items:center;gap:8px;color:var(--ww-text-mute);font-size:13px;font-weight:600;flex:0 0 auto}
.sba-ww-step span{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:50%;background:var(--ww-cream-2);color:var(--ww-text-mute);font-weight:700}
.sba-ww-step.active span,.sba-ww-step.done span{background:var(--ww-green);color:#fff}
.sba-ww-step.active{color:var(--ww-green-3)}
.sba-ww-step.done{color:var(--ww-green-2)}
.sba-ww-step-line{flex:1;height:2px;background:var(--ww-cream-2);border-radius:2px}
@media (max-width:560px){.sba-ww-step{font-size:11px}.sba-ww-step span{width:24px;height:24px;font-size:12px}}

.sba-ww-panel{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid var(--ww-border);border-radius:var(--ww-radius);padding:24px}

/* Pills (city / vehicle / time selection) */
.sba-ww-pills{display:flex;flex-wrap:wrap;gap:8px}
.sba-ww-pill{
	display:inline-flex;align-items:center;gap:8px;
	padding:10px 16px;border-radius:999px;
	background:#fff;border:1.5px solid var(--ww-border);
	cursor:pointer;font-size:14px;font-weight:500;
	color:var(--ww-text-soft);
	transition:all .15s;
}
.sba-ww-pill:hover{border-color:var(--ww-green-2);color:var(--ww-green-3)}
.sba-ww-pill.selected{background:linear-gradient(135deg,var(--ww-green),var(--ww-green-3));color:#fff;border-color:var(--ww-green-3);box-shadow:0 4px 12px rgba(7,105,81,.25)}
.sba-ww-pill .ico{font-size:18px}
.sba-ww-pills.sm .sba-ww-pill{padding:7px 12px;font-size:13px}

/* v2.9.31 — City / vehicle option cards: square image (or placeholder) above, label below.
   Hover/active match the package cards (lift + shadow + green border). */
#sba-ww-cities.sba-ww-pills,#sba-ww-vehicles.sba-ww-pills{gap:12px}
.sba-ww-optcard{
	display:flex;flex-direction:column;align-items:center;gap:8px;
	width:108px;padding:10px;
	background:#fff;border:2px solid var(--ww-border);border-radius:14px;
	cursor:pointer;font-family:inherit;
	transition:transform .18s ease,box-shadow .18s ease,border-color .15s;
}
.sba-ww-optcard:not(.is-active):hover{
	transform:translateY(-4px);
	box-shadow:0 12px 30px rgba(7,105,81,.18);
	border-color:var(--ww-green-2);
}
.sba-ww-optcard.is-active,
.sba-ww-optcard.active{
	border-color:var(--ww-green);
	box-shadow:0 10px 28px rgba(7,105,81,.22);
	transform:translateY(-3px);
}
.sba-ww-optcard__img{width:100%;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--ww-cream-2);display:flex;align-items:center;justify-content:center}
.sba-ww-optcard__img img{width:100%;height:100%;object-fit:cover;display:block}
.sba-ww-optcard__img--ph{color:var(--ww-text-mute);font-size:26px}
.sba-ww-optcard__label{font-size:13px;font-weight:600;color:var(--ww-text);text-align:center;line-height:1.2}
/* Mobile: exactly 3 options per line. */
@media (max-width:600px){
	.sba-ww-optcard{width:calc(33.333% - 8px)}
}

/* Package cards (v2.2 — banner header + body + price footer) */
.sba-ww-pkgs{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	gap:16px;
}
.sba-ww-pkg{
	background:#fff;
	border:2px solid var(--ww-border);
	border-radius:14px;
	padding:0;
	cursor:pointer;
	transition:transform .18s ease, box-shadow .18s ease, border-color .15s;
	position:relative;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	text-align:left;
	font-family:inherit;
}
.sba-ww-pkg:not(.is-active):hover{
	transform:translateY(-4px);
	box-shadow:0 12px 30px rgba(7,105,81,.18);
	border-color:var(--ww-green-2);
}
.sba-ww-pkg.is-active,
.sba-ww-pkg.active{
	border-color:var(--ww-green);
	box-shadow:0 10px 28px rgba(7,105,81,.22);
	transform:translateY(-3px);
}

/* Banner header strip (green gradient with icon + badge) */
.sba-ww-pkg-banner{
	background:linear-gradient(135deg,#0d8870,#076951);
	padding:24px 16px 28px;
	position:relative;
	min-height:62px;
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:8px;
}
.sba-ww-pkg-icon{
	font-size:34px;
	line-height:1;
	display:inline-block;
	filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));
}
.sba-ww-pkg-badge{
	display:inline-block;
	padding:4px 10px;
	border-radius:999px;
	font-size:11px;
	font-weight:700;
	letter-spacing:.4px;
	text-transform:uppercase;
	background:rgba(255,255,255,.95);
	color:var(--ww-green-3);
	box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.sba-ww-pkg-badge--popular{
	background:linear-gradient(135deg,#fde68a,#fbbf24);
	color:#78350f;
}
.sba-ww-pkg-badge--best,
.sba-ww-pkg-badge--bestvalue{
	background:linear-gradient(135deg,#fbbf24,#f59e0b);
	color:#fff;
}
.sba-ww-pkg-badge--basic{
	background:rgba(255,255,255,.92);
	color:var(--ww-green-3);
}

/* Selection check chip (shown only when active) */
.sba-ww-pkg-check{
	position:absolute;
	top:8px;
	right:8px;
	width:26px;
	height:26px;
	border-radius:50%;
	background:rgba(255,255,255,.95);
	color:var(--ww-green);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:14px;
	opacity:0;
	transform:scale(.7);
	transition:.15s ease;
	box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.sba-ww-pkg.is-active .sba-ww-pkg-check{opacity:1;transform:scale(1)}
.sba-ww-pkg.is-active .sba-ww-pkg-badge{display:none}

/* Body */
.sba-ww-pkg-body{
	padding:16px 18px 4px;
	flex:1;
}
.sba-ww-pkg-name{
	font-size:17px;
	font-weight:700;
	color:var(--ww-text);
	margin-bottom:10px;
}
.sba-ww-pkg-features{
	list-style:none;
	padding:0;
	margin:0;
	font-size:13px;
	color:var(--ww-text-soft);
}
.sba-ww-pkg-features li{
	display:flex;
	align-items:flex-start;
	gap:6px;
	padding:3px 0;
}
.sba-ww-pkg-features li .ti{
	color:var(--ww-green-2);
	flex-shrink:0;
	margin-top:2px;
}

/* Price footer */
.sba-ww-pkg-price{
	margin:14px 18px 18px;
	padding:10px 14px;
	background:var(--ww-cream-2);
	border-radius:10px;
	font-size:16px;
	font-weight:700;
	color:var(--ww-green);
	text-align:center;
}
.sba-ww-pkg.is-active .sba-ww-pkg-price{
	background:linear-gradient(135deg,var(--ww-green),var(--ww-green-3));
	color:#fff;
}
/* Promotional (discounted) package price */
.sba-ww-pkg-price--promo{
	display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
}
.sba-ww-pkg-price-was{
	text-decoration:line-through;
	color:var(--ww-muted,#8a9a93);
	font-weight:600;
	font-size:13px;
}
.sba-ww-pkg-price-now{
	color:var(--ww-green);
	font-weight:800;
}
.sba-ww-pkg.is-active .sba-ww-pkg-price-now{ color:#fff; }
.sba-ww-pkg.is-active .sba-ww-pkg-price-was{ color:rgba(255,255,255,.7); }
.sba-ww-pkg-promo-tag{
	display:inline-flex;align-items:center;gap:3px;
	background:#fde68a;color:#92400e;
	font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
	padding:2px 8px;border-radius:999px;
}
.sba-ww-pkg.is-active .sba-ww-pkg-promo-tag{ background:#fff;color:#b45309; }
/* Coupon row disabled when a promo price is active */
.sba-ww-coupon-row--disabled{ opacity:.55; }
.sba-ww-coupon-row--disabled input,
.sba-ww-coupon-row--disabled button{ cursor:not-allowed; }

/* Empty state */
.sba-ww-pkg-empty{
	grid-column:1/-1;
	text-align:center;
	padding:40px 20px;
	background:var(--ww-cream-2);
	border-radius:14px;
	color:var(--ww-text-mute);
}
.sba-ww-pkg-empty .ti{font-size:28px;color:var(--ww-text-mute);margin-bottom:8px;display:block}
.sba-ww-pkg-empty p{margin:0;font-size:14px}

/* Schedule (step 2) */
.sba-ww-mode-tabs{display:flex;background:var(--ww-cream-2);border-radius:var(--ww-radius-sm);padding:4px;margin-bottom:20px}
.sba-ww-mode-tabs button{flex:1;padding:9px;background:transparent;border:0;border-radius:8px;font-weight:600;font-size:13px;color:var(--ww-text-mute);cursor:pointer;transition:all .15s}
.sba-ww-mode-tabs button.active{background:#fff;color:var(--ww-green-3);box-shadow:0 2px 8px rgba(7,105,81,.1)}

.sba-ww-hint{font-size:13px;color:var(--ww-text-mute);margin:0 0 14px;padding:10px 14px;background:var(--ww-cream-2);border-radius:var(--ww-radius-sm)}

.sba-ww-sub-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.sba-ww-sub-item{display:flex;gap:10px;align-items:center;padding:10px 12px;background:#fff;border:1px solid var(--ww-border);border-radius:var(--ww-radius-sm)}
.sba-ww-sub-item .d{font-weight:600;flex:0 0 auto;color:var(--ww-text)}
.sba-ww-sub-item select{flex:1;padding:6px 10px;border:1px solid var(--ww-border);border-radius:8px;font-size:13px}
.sba-ww-sub-item .rm{background:transparent;border:0;color:#dc2626;cursor:pointer;padding:4px}

/* Summary card on confirm step */
.sba-ww-summary{background:linear-gradient(135deg,#0a967611,#07695111);border:1px solid #0a967633;border-radius:var(--ww-radius);padding:18px;margin:20px 0}
.sba-ww-summary h3{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--ww-green-3);text-transform:uppercase;letter-spacing:.5px}
.sba-ww-summary-row{display:flex;justify-content:space-between;padding:5px 0;font-size:14px;color:var(--ww-text-soft)}
.sba-ww-summary-row strong{color:var(--ww-text)}
.sba-ww-summary-total{display:flex;justify-content:space-between;padding:12px 0 0;margin-top:8px;border-top:1px dashed #0a967655;font-size:18px;font-weight:700;color:var(--ww-green-3)}

.sba-ww-email-check{font-size:13px;margin-top:8px;padding:8px 12px;border-radius:var(--ww-radius-sm)}
.sba-ww-email-check.exists{background:var(--ww-info-bg);color:var(--ww-info-fg)}
.sba-ww-email-check.new{background:var(--ww-ok-bg);color:var(--ww-ok-fg)}

/* Success state */
.sba-ww-success{text-align:center;padding:48px 24px}
.sba-ww-success-icon{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--ww-green-2),var(--ww-green));color:#fff;font-size:42px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 10px 30px rgba(7,105,81,.3)}
.sba-ww-success-msg{color:var(--ww-text-soft);font-size:15px;margin:6px 0 20px}
.sba-ww-ref-box{display:inline-block;background:var(--ww-cream-2);border:1px dashed var(--ww-green-2);border-radius:var(--ww-radius-sm);padding:10px 18px;font-family:monospace;font-size:16px;font-weight:700;color:var(--ww-green-3);margin-bottom:24px}
.sba-ww-success-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}

/* Toast */
.sba-ww-toast{
	display:none;
	position:fixed;bottom:30px;left:50%;transform:translateX(-50%);
	padding:12px 20px;border-radius:10px;font-size:14px;font-weight:500;
	box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:9999;
	background:#1f2937;color:#fff;
	animation:sbaWWToastIn .2s ease-out;max-width:90%;
}
.sba-ww-toast.show{display:block}
.sba-ww-toast.error{background:#dc2626}
.sba-ww-toast.success{background:var(--ww-green)}
@keyframes sbaWWToastIn{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}

/* ==================================================================
 * Account page
 * ================================================================== */
.sba-ww-acct-hdr{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.sba-ww-acct-greet{display:flex;gap:14px;align-items:center}
.sba-ww-acct-avatar{
	width:54px;height:54px;border-radius:50%;
	background:linear-gradient(135deg,var(--ww-green),var(--ww-green-3));
	color:#fff;font-weight:700;font-size:22px;
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 4px 14px rgba(7,105,81,.3);flex-shrink:0;
}
.sba-ww-acct-avatar.agent{background:linear-gradient(135deg,#5b21b6,#3b0764)}
.sba-ww-acct-avatar.staff{background:linear-gradient(135deg,#1e40af,#0c1e5c)}
.sba-ww-acct-sub{margin:2px 0 0;font-size:13px;color:var(--ww-text-mute)}
.sba-ww-acct-actions{display:flex;gap:8px;flex-wrap:wrap}

.sba-ww-acct-tabs,.sba-ww-dash-tabs{display:flex;gap:4px;background:rgba(255,255,255,.7);border:1px solid var(--ww-border);border-radius:var(--ww-radius);padding:6px;margin-bottom:18px;overflow-x:auto}
.sba-ww-acct-tabs button,.sba-ww-dash-tabs button{
	display:inline-flex;align-items:center;gap:6px;
	padding:9px 14px;border:0;background:transparent;
	font-weight:600;font-size:13px;color:var(--ww-text-mute);
	border-radius:10px;cursor:pointer;white-space:nowrap;transition:all .15s;
}
.sba-ww-acct-tabs button:hover,.sba-ww-dash-tabs button:hover{color:var(--ww-green-3)}
.sba-ww-acct-tabs button.active,.sba-ww-dash-tabs button.active{background:linear-gradient(135deg,var(--ww-green),var(--ww-green-3));color:#fff}

.sba-ww-acct-panel,.sba-ww-dash-panel{display:none}
.sba-ww-acct-panel.active,.sba-ww-dash-panel.active{display:block}

.sba-ww-bookings-list,.sba-ww-dash-list{display:flex;flex-direction:column;gap:14px}

.sba-ww-bk-card{
	background:rgba(255,255,255,.95);border:1px solid var(--ww-border);
	border-radius:var(--ww-radius);padding:18px;
	display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start;
	transition:transform .15s,box-shadow .15s;
}
.sba-ww-bk-card:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(7,105,81,.08)}
.sba-ww-bk-ref{font-family:monospace;font-size:11px;color:var(--ww-text-mute);letter-spacing:.5px}
.sba-ww-bk-title{font-size:16px;font-weight:700;margin:4px 0 6px;color:var(--ww-text)}
.sba-ww-bk-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--ww-text-soft)}
.sba-ww-bk-meta span{display:inline-flex;gap:4px;align-items:center}
.sba-ww-bk-meta .ti{color:var(--ww-green-2)}
.sba-ww-bk-side{display:flex;flex-direction:column;gap:8px;align-items:flex-end;text-align:right}
.sba-ww-bk-total{font-size:17px;font-weight:700;color:var(--ww-green-3)}
.sba-ww-bk-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.sba-ww-bk-collapse-btn{padding-left:9px;padding-right:9px}

/* Status badge */
.sba-ww-status-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.3px}

@media (max-width:560px){
	.sba-ww-bk-card{grid-template-columns:1fr}
	.sba-ww-bk-side{align-items:flex-start;text-align:left}
}

.sba-ww-pager{display:flex;justify-content:center;gap:6px;margin-top:18px}
.sba-ww-pager button{padding:7px 12px;border:1px solid var(--ww-border);background:#fff;border-radius:8px;font-size:13px;cursor:pointer;color:var(--ww-text-soft)}
.sba-ww-pager button.active{background:var(--ww-green);color:#fff;border-color:var(--ww-green)}
.sba-ww-pager button:disabled{opacity:.4;cursor:not-allowed}

.sba-ww-form-card{
	background:rgba(255,255,255,.95);border:1px solid var(--ww-border);
	border-radius:var(--ww-radius);padding:24px;
}

.sba-ww-empty{padding:40px 18px;text-align:center;color:var(--ww-text-mute);background:rgba(255,255,255,.6);border:1px dashed var(--ww-border);border-radius:var(--ww-radius)}

/* ==================================================================
 * Auth page
 * ================================================================== */
.sba-ww-auth-card{
	background:rgba(255,255,255,.95);
	border:1px solid var(--ww-border);
	border-radius:var(--ww-radius);
	padding:30px;
	max-width:460px;margin:0 auto;
	box-shadow:0 12px 40px rgba(7,105,81,.12);
}
.sba-ww-auth-tabs{display:flex;background:var(--ww-cream-2);border-radius:var(--ww-radius-sm);padding:4px;margin-bottom:24px}
.sba-ww-auth-tabs button{flex:1;padding:10px;background:transparent;border:0;border-radius:8px;font-weight:600;font-size:14px;color:var(--ww-text-mute);cursor:pointer;transition:all .15s}
.sba-ww-auth-tabs button.active{background:#fff;color:var(--ww-green-3);box-shadow:0 2px 8px rgba(7,105,81,.1)}
.sba-ww-auth-form{display:none}
.sba-ww-auth-form.active{display:block}
.sba-ww-auth-sub{color:var(--ww-text-mute);font-size:14px;margin:6px 0 22px}
.sba-ww-auth-switch{text-align:center;font-size:13px;margin:18px 0 0;color:var(--ww-text-soft)}

/* ==================================================================
 * Dashboard cards (staff & agent)
 * ================================================================== */
.sba-ww-dash-hdr{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}
.sba-ww-dash-greet{display:flex;gap:14px;align-items:center}
.sba-ww-dash-filters{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.sba-ww-dash-filters select,.sba-ww-dash-filters input{
	padding:9px 12px;border:1px solid var(--ww-border);border-radius:10px;font-size:13px;background:#fff;flex:1;min-width:160px;
}

.sba-ww-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;background:var(--ww-cream-2);color:var(--ww-green-3)}
.sba-ww-badge.staff{background:#dbeafe;color:#1e40af}
.sba-ww-badge.agent{background:#ede9fe;color:#5b21b6}

/* ==================================================================
 * Modal
 * ================================================================== */
.sba-ww-modal{display:none;position:fixed;inset:0;z-index:100200;align-items:center;justify-content:center;padding:18px}
.sba-ww-modal.show{display:flex}
.sba-ww-modal-overlay{position:absolute;inset:0;background:rgba(15,23,30,.55);backdrop-filter:blur(3px)}
.sba-ww-modal-content{
	position:relative;background:#fff;border-radius:18px;
	max-width:520px;width:100%;max-height:90vh;overflow-y:auto;
	padding:26px;box-shadow:0 24px 64px rgba(0,0,0,.30);
	animation:sbaWWModalIn .2s ease-out;
	scrollbar-width:thin;
}
/* Keep the rounded corners visible even when the modal scrolls (inset the scrollbar). */
.sba-ww-modal-content::-webkit-scrollbar{width:10px}
.sba-ww-modal-content::-webkit-scrollbar-track{background:transparent;margin:18px 0}
.sba-ww-modal-content::-webkit-scrollbar-thumb{background:rgba(7,105,81,.25);border-radius:10px;border:3px solid transparent;background-clip:content-box}
.sba-ww-modal-content::-webkit-scrollbar-thumb:hover{background:rgba(7,105,81,.4);background-clip:content-box}
@keyframes sbaWWModalIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.sba-ww-modal-close{position:absolute;top:12px;right:12px;background:transparent;border:0;font-size:22px;cursor:pointer;color:var(--ww-text-mute);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.sba-ww-modal-close:hover{background:var(--ww-cream-2)}
@media (max-width:480px){
	.sba-ww-modal{padding:12px;align-items:center}
	.sba-ww-modal-content{max-height:78vh;padding:20px}
}
.sba-ww-modal h3{margin:0 0 14px;font-size:18px;color:var(--ww-text)}
.sba-ww-modal-section{padding:14px 0;border-top:1px solid var(--ww-cream-2)}
.sba-ww-modal-section:first-of-type{border-top:0;padding-top:0}
.sba-ww-modal-section h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--ww-text-mute);font-weight:700}
.sba-ww-modal-row{display:flex;justify-content:space-between;padding:4px 0;font-size:14px}
.sba-ww-modal-row span{color:var(--ww-text-mute)}
.sba-ww-modal-row strong{color:var(--ww-text)}
.sba-ww-modal-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;justify-content:flex-end}

/* Helpful misc */
.sba-ww-loader{padding:30px;text-align:center;color:var(--ww-text-mute)}
.ti-spin{animation:sba-ww-spin 1s linear infinite}
@keyframes sba-ww-spin{to{transform:rotate(360deg)}}

.sba-ww-agent-summary{background:var(--ww-cream-2);border-radius:var(--ww-radius-sm);padding:12px 14px;margin:12px 0;font-size:14px;font-weight:600;color:var(--ww-green-3);display:none}
.sba-ww-agent-summary.show{display:block}

/* =================================================================
 * v2.1.0 — Side summary panel, saved addresses, payment note,
 * Flatpickr theming, mandatory marker
 * ================================================================= */

.sba-ww-req{color:#dc2626;font-weight:700}

/* Step active state — works against theme overrides */
.sba-ww-step{
	display:flex;align-items:center;gap:8px;
	padding:8px 14px;border-radius:999px;
	background:#fff;border:1px solid var(--ww-border);
	font-size:13px;font-weight:600;color:var(--ww-text-mute);
	transition:all .2s;
}
.sba-ww-step span{
	display:inline-flex;align-items:center;justify-content:center;
	width:22px;height:22px;border-radius:50%;
	background:var(--ww-cream-2);color:var(--ww-text-mute);
	font-size:12px;
}
.sba-ww-step.is-active,
.sba-ww-step.active{
	background:linear-gradient(135deg,var(--ww-green),var(--ww-green-3));
	color:#fff;border-color:transparent;
	box-shadow:0 4px 12px rgba(7,105,81,.25);
}
.sba-ww-step.is-active span,
.sba-ww-step.active span{background:rgba(255,255,255,.25);color:#fff}
.sba-ww-step.is-done{background:var(--ww-cream-2);color:var(--ww-green);border-color:var(--ww-green-2)}
.sba-ww-step.is-done span{background:var(--ww-green);color:#fff}

/* Mobile: the three full pills + connector lines overflow narrow screens, so we
   keep only the ACTIVE step's label and collapse the others to their numbered
   circle. Placed after the pill rules above so it wins the cascade on mobile. */
@media (max-width:560px){
	.sba-ww-steps{gap:6px}
	.sba-ww-step{padding:7px 11px;font-size:12px;gap:6px;flex:0 0 auto;white-space:nowrap}
	.sba-ww-step span{width:22px;height:22px;font-size:12px;flex:0 0 auto}
	.sba-ww-step:not(.is-active):not(.active){font-size:0;padding:7px;gap:0}
	.sba-ww-step:not(.is-active):not(.active) span{font-size:12px}
	.sba-ww-step-line{min-width:6px}
}

/* App layout with side summary */
.sba-ww-app--with-summary{
	max-width:1290px;
	display:grid;
	grid-template-columns:minmax(0,1fr) 360px;
	gap:24px;
	align-items:start;
}
.sba-ww-app--with-summary .sba-ww-main{min-width:0}

/* v2.9.31 — Wider account page on desktop (mobile unchanged; max-width only caps large screens). */
.sba-ww-account-app{max-width:1290px}

/* When booking is successful, expand main to full width */
.sba-ww-app--success{
	grid-template-columns:minmax(0,1fr);
	max-width:760px;
	margin:0 auto;
}
.sba-ww-app--success .sba-ww-summary-panel{display:none}

.sba-ww-summary-panel{
	position:sticky;top:18px;
	background:#fff;border:1px solid var(--ww-border);
	border-radius:var(--ww-radius);
	box-shadow:0 6px 28px rgba(7,105,81,.06);
	overflow:hidden;
	z-index:50;
}
.sba-ww-summary-panel__handle{
	width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;
	padding:14px 16px;background:linear-gradient(135deg,var(--ww-green),var(--ww-green-3));color:#fff;
	border:none;cursor:default;font-weight:600;font-size:14px;
}
.sba-ww-summary-panel__handle-left{display:flex;align-items:center;gap:8px}
.sba-ww-summary-panel__handle-right{display:flex;align-items:center;gap:10px}
.sba-ww-summary-panel__handle-right strong{font-size:18px}
.sba-ww-summary-panel__chev{display:none;transition:transform .25s}
.sba-ww-summary-panel__body{padding:16px;max-height:75vh;overflow:auto}
.sba-ww-summary-empty{text-align:center;padding:30px 10px;color:var(--ww-text-mute);font-size:13px}
.sba-ww-summary-empty .ti{font-size:32px;display:block;margin-bottom:8px;opacity:.4}

.sba-ww-summary-rows{display:flex;flex-direction:column;gap:8px}
.sba-ww-summary-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:8px 0;border-bottom:1px dashed var(--ww-cream-2);font-size:13px}
.sba-ww-summary-row:last-child{border-bottom:none}
.sba-ww-summary-row dt{color:var(--ww-text-mute);font-weight:500;margin:0;flex-shrink:0}
.sba-ww-summary-row dd{margin:0;color:var(--ww-text);font-weight:600;text-align:right;word-break:break-word}
.sba-ww-summary-total{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:2px solid var(--ww-cream-2);font-size:16px;font-weight:700;color:var(--ww-green)}
.sba-ww-summary-visits{margin-top:6px;font-size:12px;color:var(--ww-text-mute)}
.sba-ww-summary-visits li{margin-left:14px}

@media (max-width:960px){
	.sba-ww-app--with-summary{display:block}
	/* Booking summary is hidden on mobile per design — the totals live in the
	   Confirm step, and removing the floating widget avoids overlap/scroll issues. */
	.sba-ww-summary-panel{display:none !important}
	.sba-ww-app--with-summary .sba-ww-main{padding-bottom:24px}
}

/* Saved addresses pill row on step 3 */
.sba-ww-saved-addresses{
	background:var(--ww-cream-2);
	border:1px dashed var(--ww-border);
	border-radius:var(--ww-radius-sm);
	padding:12px;margin-bottom:18px;
}
.sba-ww-saved-addresses__header{
	display:flex;align-items:center;gap:6px;
	font-size:13px;font-weight:600;color:var(--ww-text-soft);
	margin-bottom:10px;
}
.sba-ww-saved-addresses__header .ti{color:var(--ww-green-2)}
.sba-ww-saved-addresses__pills{display:flex;gap:8px;flex-wrap:wrap}
.sba-ww-saved-pill{
	display:inline-flex;align-items:center;gap:6px;
	background:#fff;border:1px solid var(--ww-border);
	border-radius:999px;padding:7px 13px;
	font-size:13px;color:var(--ww-text);
	cursor:pointer;transition:all .15s;
	max-width:240px;
}
.sba-ww-saved-pill:hover{border-color:var(--ww-green-2);background:#fff}
.sba-ww-saved-pill.is-active{
	background:linear-gradient(135deg,var(--ww-green),var(--ww-green-3));
	color:#fff;border-color:transparent;
	box-shadow:0 3px 10px rgba(7,105,81,.25);
}
.sba-ww-saved-pill__label{font-weight:600}
.sba-ww-saved-pill__loc{
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
	max-width:140px;opacity:.85;font-size:12px;
}
.sba-ww-saved-pill .ti{font-size:14px}
.sba-ww-saved-pill--add{
	background:transparent;border-style:dashed;color:var(--ww-green-2);
}
.sba-ww-saved-pill--add:hover{background:#fff}

/* Save-this-address toggle on booking form */
.sba-ww-save-addr{margin-top:10px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sba-ww-save-addr__toggle{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ww-text-soft);cursor:pointer}
.sba-ww-save-addr__toggle input{accent-color:var(--ww-green)}
.sba-ww-save-addr__label{flex:1;min-width:160px}
.sba-ww-input--sm{padding:8px 12px;font-size:13px}

/* Payment method note */
.sba-ww-pay-note{
	margin-top:10px;padding:10px 12px;
	background:#fff8e1;border:1px solid #fde68a;
	border-radius:var(--ww-radius-sm);
	font-size:13px;color:#92400e;
	display:flex;gap:8px;align-items:flex-start;
}
.sba-ww-pay-note::before{content:"💡";font-size:14px;flex-shrink:0}

/* Flatpickr theming to match brand */
.sba-ww-cal-mobile{display:none}
@media (max-width:600px){
	.sba-ww-cal-mobile{display:block}
}
.flatpickr-calendar{
	background:#fff;border-radius:var(--ww-radius-sm);box-shadow:0 6px 22px rgba(7,105,81,.12);
	border:1px solid var(--ww-border);font-size:14px;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover{
	background:var(--ww-green);border-color:var(--ww-green);color:#fff;
}
.flatpickr-day.today{border-color:var(--ww-green-2)}
.flatpickr-day:hover{background:var(--ww-cream-2)}
.flatpickr-day.flatpickr-disabled{color:#c5c5c5;text-decoration:line-through}
.flatpickr-months .flatpickr-month{color:var(--ww-text);background:transparent}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{color:var(--ww-text);font-weight:600}
.flatpickr-weekday{color:var(--ww-text-mute);font-weight:600}
.flatpickr-prev-month,.flatpickr-next-month{color:var(--ww-green)!important;fill:var(--ww-green)!important}

/* Addresses tab in account */
.sba-ww-addr-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.sba-ww-addr-header h3{margin:0;font-size:18px}
.sba-ww-addr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.sba-ww-addr-card{
	background:#fff;border:1px solid var(--ww-border);border-radius:var(--ww-radius-sm);
	padding:16px;display:flex;flex-direction:column;gap:8px;
	box-shadow:0 2px 8px rgba(7,105,81,.04);
}
.sba-ww-addr-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sba-ww-addr-card__label{font-weight:700;color:var(--ww-green);display:flex;align-items:center;gap:6px}
.sba-ww-addr-card__label .ti{color:var(--ww-green-2)}
.sba-ww-addr-card__default-badge{
	display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;
	background:var(--ww-ok-bg);color:var(--ww-ok-fg);font-weight:600;
}
.sba-ww-addr-card__body{font-size:13px;color:var(--ww-text-soft)}
.sba-ww-addr-card__loc{color:var(--ww-text);font-size:13px}
.sba-ww-addr-card__actions{display:flex;gap:8px;margin-top:auto;padding-top:6px}
.sba-ww-modal__close{
	position:absolute;top:14px;right:14px;
	background:transparent;border:none;cursor:pointer;
	width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
	color:var(--ww-text-mute);
}
.sba-ww-modal__close:hover{background:var(--ww-cream-2);color:var(--ww-text)}
.sba-ww-empty{text-align:center;padding:30px;color:var(--ww-text-mute);font-size:13px}

/* Make sure modal content has position relative for close button */
.sba-ww-modal-content{position:relative}

/* Loading spinner & field-pulse for booking form */
.sba-ww-spin{display:inline-block;animation:sba-ww-spin .8s linear infinite}
@keyframes sba-ww-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.sba-ww-field-pulse,.sba-ww-input.sba-ww-field-pulse{
	animation:sba-ww-pulse .9s ease;
	border-color:#dc2626 !important;
	box-shadow:0 0 0 3px rgba(220,38,38,.18) !important;
}
@keyframes sba-ww-pulse{
	0%{transform:translateX(0)}
	20%{transform:translateX(-4px)}
	40%{transform:translateX(4px)}
	60%{transform:translateX(-3px)}
	80%{transform:translateX(2px)}
	100%{transform:translateX(0)}
}

/* Toast severity */
.sba-ww-toast{
	position:fixed;left:50%;bottom:90px;transform:translateX(-50%);
	background:#333;color:#fff;padding:12px 18px;border-radius:10px;
	font-size:14px;font-weight:500;z-index:1000;max-width:90%;
	box-shadow:0 6px 20px rgba(0,0,0,.2);
}
.sba-ww-toast--error{background:#dc2626}
.sba-ww-toast--success{background:#076951}
@media (max-width:960px){.sba-ww-toast{bottom:120px}}

/* Subscription visit item */
.sba-ww-sub-list{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.sba-ww-sub-item{
	display:flex;align-items:center;gap:10px;
	padding:10px 12px;background:#fff;border:1px solid var(--ww-border);
	border-radius:var(--ww-radius-sm);
}
.sba-ww-sub-item__date{flex:1;font-size:13px;color:var(--ww-text)}
.sba-ww-sub-item__slot{flex-shrink:0;width:auto;padding:6px 10px;font-size:13px}
.sba-ww-sub-item__rm{
	background:transparent;border:none;cursor:pointer;color:var(--ww-text-mute);
	width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;
}
.sba-ww-sub-item__rm:hover{background:var(--ww-bad-bg);color:var(--ww-bad-fg)}

/* Ref box on success */
.sba-ww-ref-box{
	background:var(--ww-cream-2);border:1px solid var(--ww-border);
	border-radius:var(--ww-radius);padding:20px;margin:18px auto;max-width:360px;text-align:center;
}
.sba-ww-ref-box__label{font-size:12px;color:var(--ww-text-mute);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.sba-ww-ref-box__value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:22px;font-weight:700;color:var(--ww-green);margin-bottom:8px}
.sba-ww-ref-box__total{font-size:18px;font-weight:600;color:var(--ww-text)}
.sba-ww-success-actions{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.sba-ww-success-icon{
	width:72px;height:72px;border-radius:50%;
	background:linear-gradient(135deg,var(--ww-green-2),var(--ww-green));color:#fff;
	display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:32px;
}
.sba-ww-success{text-align:center}
.sba-ww-success-msg{color:var(--ww-text-soft);max-width:460px;margin:6px auto 0}

/* Map new is-active / active classes to existing selected styling */
.sba-ww-pill.is-active,
.sba-ww-pill.active{
	background:linear-gradient(135deg,var(--ww-green),var(--ww-green-3));
	color:#fff;border-color:var(--ww-green-3);
	box-shadow:0 4px 12px rgba(7,105,81,.25);
}
.sba-ww-mode-tabs button.is-active,
.sba-ww-mode-tabs button.active{
	background:linear-gradient(135deg,var(--ww-green),var(--ww-green-3));
	color:#fff;border-color:transparent;
}

/* =================================================================
 * v2.2.0 — Hover-lift pills, full-width calendar, time popup, visit pills
 * ================================================================= */

.sba-ww-pill{transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}
.sba-ww-pill:not(:disabled):not(.is-active):hover{
	transform:translateY(-2px);
	box-shadow:0 6px 14px rgba(7,105,81,.10);
}

/* Inline error message under sections */
.sba-ww-inline-err{
	margin-top:8px;font-size:13px;color:#dc2626;
	display:flex;align-items:center;gap:6px;font-weight:500;
}
.sba-ww-inline-err::before{content:"⚠";flex-shrink:0}

/* Section pulse — gentle red flash so user notices what's missing */
@keyframes sba-ww-section-pulse{
	0%,100%{box-shadow:none;background:transparent}
	30%{box-shadow:0 0 0 6px rgba(220,38,38,.10);background:rgba(254,242,242,.7)}
}
.sba-ww-section-pulse{
	animation:sba-ww-section-pulse 1.4s ease;
	border-radius:var(--ww-radius-sm);
}

/* Full-width inline calendar */
.sba-ww-cal-inline{
	background:transparent;border:none;
	border-radius:0;
	padding:0;
	width:100%;
	display:block;
}
.sba-ww-cal-inline > input{display:none !important}
.sba-ww-cal-inline > input[type="hidden"]{display:none}
/* Hide the alt-input that flatpickr may auto-create */
.sba-ww-cal-inline > input.flatpickr-alt-input,
.sba-ww-cal-inline > .flatpickr-mobile{display:none !important}
.sba-ww-cal-inline .flatpickr-calendar.inline{
	box-shadow:none;border:none;
	width:100% !important;max-width:100% !important;
	background:transparent;
}
.sba-ww-cal-inline .flatpickr-calendar .flatpickr-rContainer,
.sba-ww-cal-inline .flatpickr-calendar .dayContainer,
.sba-ww-cal-inline .flatpickr-calendar .flatpickr-days{
	width:100% !important;max-width:100% !important;
}
.sba-ww-cal-inline .flatpickr-days{justify-content:stretch}
.sba-ww-cal-inline .dayContainer{
	display:grid !important;
	grid-template-columns:repeat(7,1fr) !important;
	gap:2px;width:100% !important;min-width:0;
}
.sba-ww-cal-inline .flatpickr-day{
	max-width:none;width:100%;height:42px;line-height:42px;
	margin:0;border-radius:8px;font-size:14px;
}
.sba-ww-cal-inline .flatpickr-day.selected,
.sba-ww-cal-inline .flatpickr-day.selected:hover{
	background:var(--ww-green);color:#fff;border-color:transparent;
	font-weight:600;
}
.sba-ww-cal-inline .flatpickr-day.today:not(.selected){
	border-color:var(--ww-green-2);color:var(--ww-green);
}
.sba-ww-cal-inline .flatpickr-weekdays{
	display:flex !important;
	width:100% !important;
	background:transparent !important;
}
.sba-ww-cal-inline .flatpickr-weekdaycontainer{
	display:grid !important;
	grid-template-columns:repeat(7, 1fr) !important;
	width:100% !important;
	flex:1 1 100% !important;
}
.sba-ww-cal-inline .flatpickr-weekday{
	font-size:12px;
	height:36px;line-height:36px;
	text-align:center;
	flex:1 1 0 !important;
	width:auto !important;
	min-width:0;
}
.sba-ww-cal-inline .flatpickr-months{padding-bottom:6px}
.sba-ww-cal-inline .flatpickr-current-month{font-size:15px}

@media (max-width:600px){
	.sba-ww-cal-inline .flatpickr-day{height:38px;line-height:38px;font-size:13px}
}

/* Time-slot popup */
.sba-ww-time-popup{
	position:fixed;inset:0;z-index:100200;
	display:flex;align-items:center;justify-content:center;padding:18px;
}
.sba-ww-time-popup[hidden]{display:none !important}
.sba-ww-time-popup__backdrop{
	position:absolute;inset:0;
	background:rgba(15,23,30,.45);
	backdrop-filter:blur(2px);
}
.sba-ww-time-popup__panel{
	position:relative;background:#fff;border-radius:18px;
	padding:24px;max-width:420px;width:100%;
	box-shadow:0 20px 50px rgba(0,0,0,.22);
	animation:sba-ww-popup-in .2s ease-out;
}
@keyframes sba-ww-popup-in{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.sba-ww-time-popup__panel h3{margin:0 0 4px;font-size:18px;color:var(--ww-text)}
.sba-ww-time-popup__date{margin:0 0 16px;color:var(--ww-green);font-weight:600}
.sba-ww-time-popup__close{
	position:absolute;top:12px;right:12px;
	background:transparent;border:none;cursor:pointer;
	width:32px;height:32px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	color:var(--ww-text-mute);
}
.sba-ww-time-popup__close:hover{background:var(--ww-cream-2);color:var(--ww-text)}
.sba-ww-time-popup__slots{
	display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
	max-height:50vh;overflow:auto;padding:4px;
}
.sba-ww-time-popup__slot{
	display:flex;align-items:center;justify-content:center;gap:8px;
	background:#fff;border:1.5px solid var(--ww-border);
	border-radius:14px;padding:14px 12px;min-height:54px;text-align:center;line-height:1.25;
	font-size:14px;font-weight:600;color:var(--ww-text);
	cursor:pointer;transition:all .15s ease;
	position:relative;
}
.sba-ww-time-popup__slot:hover{
	border-color:var(--ww-green);
	background:#e8f5f0;
	color:var(--ww-green-2);
	transform:translateY(-1px);
	box-shadow:0 2px 8px rgba(7,105,81,.10);
}
.sba-ww-time-popup__slot.is-selected{
	background:linear-gradient(135deg,var(--ww-green),var(--ww-green-3));
	color:#fff !important;
	border-color:var(--ww-green);
	box-shadow:0 4px 12px rgba(7,105,81,.30);
}
.sba-ww-time-popup__slot .ti{color:var(--ww-green-2);font-size:15px;flex:0 0 auto}
.sba-ww-time-popup__slot:hover .ti{color:var(--ww-green-2)}
.sba-ww-time-popup__slot.is-selected .ti{color:#fff !important}
@media (max-width:480px){
	.sba-ww-time-popup__slots{gap:8px}
	.sba-ww-time-popup__slot{padding:12px 8px;font-size:13px;min-height:52px}
}

body.sba-ww-modal-open{overflow:hidden}

/* Visit pills (selected dates+times shown below calendar) */
.sba-ww-visits{
	display:flex;flex-direction:column;gap:8px;margin-top:4px;
}
.sba-ww-visits__empty{
	padding:18px;text-align:center;font-size:13px;color:var(--ww-text-mute);
	background:var(--ww-cream-2);border-radius:var(--ww-radius-sm);
	border:1px dashed var(--ww-border);
}
.sba-ww-visit-pill{
	display:flex;align-items:center;gap:12px;
	padding:12px 14px;background:#fff;
	border:1px solid var(--ww-border);
	border-left:3px solid var(--ww-green);
	border-radius:var(--ww-radius-sm);
	font-size:14px;
}
.sba-ww-visit-pill > .ti{color:var(--ww-green);font-size:18px}
.sba-ww-visit-pill__date{font-weight:600;color:var(--ww-text);flex:1}
.sba-ww-visit-pill__time{
	display:inline-flex;align-items:center;gap:5px;
	color:var(--ww-text-soft);font-size:13px;
	background:var(--ww-cream-2);padding:4px 10px;border-radius:999px;
}
.sba-ww-visit-pill__rm{
	background:transparent;border:none;cursor:pointer;
	width:28px;height:28px;border-radius:6px;
	display:flex;align-items:center;justify-content:center;
	color:var(--ww-text-mute);
}
.sba-ww-visit-pill__rm:hover{background:#fee2e2;color:#dc2626}

/* Status timeline (used in customer detail modal) */
.sba-ww-timeline{display:flex;flex-direction:column;gap:10px}
.sba-ww-timeline-item{
	display:flex;gap:12px;padding:8px 0;position:relative;
}
.sba-ww-timeline-item::before{
	content:"";position:absolute;left:5px;top:18px;bottom:-10px;
	width:2px;background:var(--ww-cream-2);
}
.sba-ww-timeline-item:last-child::before{display:none}
.sba-ww-timeline-dot{
	width:12px;height:12px;border-radius:50%;
	background:var(--ww-green);flex-shrink:0;margin-top:4px;
	box-shadow:0 0 0 3px rgba(7,105,81,.15);
	z-index:1;
}
.sba-ww-timeline-content{flex:1;min-width:0}
.sba-ww-timeline-title{font-weight:600;color:var(--ww-text);font-size:14px}
.sba-ww-timeline-sub{font-size:13px;color:var(--ww-green);margin-top:2px}
.sba-ww-timeline-notes{font-size:13px;color:var(--ww-text-soft);margin-top:3px;padding:6px 10px;background:var(--ww-cream-2);border-radius:6px}
.sba-ww-timeline-meta{font-size:11px;color:var(--ww-text-mute);margin-top:4px;text-transform:uppercase;letter-spacing:.3px}

/* Locked-cancellation note */
.sba-ww-locked-note{
	display:inline-flex;align-items:center;gap:6px;
	font-size:12px;color:var(--ww-text-mute);
	background:var(--ww-cream-2);padding:6px 12px;border-radius:6px;
}
.sba-ww-locked-note .ti{color:var(--ww-green-2)}

/* Booking card — scheduled date sub-row */
.sba-ww-bk-meta--sched{
	font-size:12px;color:var(--ww-text-mute);
	margin-top:4px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
.sba-ww-bk-sched-label{font-weight:600;color:var(--ww-green)}

/* Field-level inline error (under each input) */
.sba-ww-field-err{
	margin-top:6px;
	font-size:12px;
	color:#dc2626;
	display:flex;
	align-items:center;
	gap:6px;
	font-weight:500;
}
.sba-ww-field-err::before{content:"⚠"}
.sba-ww-input--err{
	border-color:#dc2626 !important;
	background:#fef2f2 !important;
	box-shadow:0 0 0 3px rgba(220,38,38,.10) !important;
}

/* Field pulse */
@keyframes sba-ww-field-pulse{
	0%,100%{box-shadow:0 0 0 3px rgba(220,38,38,.10)}
	50%{box-shadow:0 0 0 6px rgba(220,38,38,.05)}
}
.sba-ww-field-pulse{animation:sba-ww-field-pulse 1s ease}

/* Customer booking-card status flow stepper */
.sba-ww-bk-flow{
	display:flex;
	align-items:center;
	gap:2px;
	margin-top:12px;
	padding:8px 0;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
}
.sba-ww-bk-flow::-webkit-scrollbar{display:none}
.sba-ww-bk-flow__step{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
	min-width:60px;
	flex-shrink:0;
}
.sba-ww-bk-flow__dot{
	width:14px;height:14px;
	border-radius:50%;
	background:#e2e8f0;
	border:2px solid #cbd5e1;
	flex-shrink:0;
	transition:.18s;
}
.sba-ww-bk-flow__step.is-reached .sba-ww-bk-flow__dot{
	background:var(--ww-green);
	border-color:var(--ww-green);
}
.sba-ww-bk-flow__step.is-current .sba-ww-bk-flow__dot{
	background:var(--ww-green-2);
	border-color:var(--ww-green);
	box-shadow:0 0 0 4px rgba(7,105,81,.18);
	transform:scale(1.15);
}
.sba-ww-bk-flow__label{
	font-size:10px;
	font-weight:500;
	color:var(--ww-text-mute);
	text-align:center;
	letter-spacing:.2px;
	white-space:nowrap;
}
.sba-ww-bk-flow__step.is-reached .sba-ww-bk-flow__label{color:var(--ww-text-soft)}
.sba-ww-bk-flow__step.is-current .sba-ww-bk-flow__label{color:var(--ww-green-3);font-weight:600}
.sba-ww-bk-flow__line{
	flex:1;
	height:2px;
	background:#e2e8f0;
	margin:0 -2px 16px;
	min-width:18px;
	transition:.18s;
}
.sba-ww-bk-flow__line.is-reached{background:var(--ww-green)}

.sba-ww-bk-flow--cancelled{
	display:inline-flex;
	align-items:center;
	gap:6px;
	margin-top:12px;
	padding:6px 12px;
	background:#fee2e2;
	color:#991b1b;
	border-radius:8px;
	font-size:12px;
	font-weight:600;
}

@media (max-width:520px){
	.sba-ww-bk-flow__step{min-width:54px}
	.sba-ww-bk-flow__label{font-size:9px}
}

.sba-ww-bk-card__main{flex:1;min-width:0}

/* Cancel reason display on cancelled booking card */
.sba-ww-bk-cancel-reason{
	display:flex;align-items:flex-start;gap:6px;
	margin-top:8px;padding:8px 12px;
	background:#fef3c7;color:#92400e;
	border-radius:8px;
	font-size:12px;font-weight:500;
	border-left:3px solid #f59e0b;
}
.sba-ww-bk-cancel-reason .ti{flex-shrink:0;margin-top:2px;font-size:14px}

/* Customer account sub-tabs (single/multi visits) */
.sba-ww-subtabs{
	display:flex;gap:8px;margin-bottom:14px;
	border-bottom:1px solid var(--ww-border);
	padding-bottom:0;
}
.sba-ww-subtab{
	background:transparent;border:none;
	padding:10px 16px;font-size:14px;font-weight:500;
	cursor:pointer;color:var(--ww-text-mute);
	border-bottom:2px solid transparent;
	margin-bottom:-1px;
	display:inline-flex;align-items:center;gap:6px;
	transition:.15s;font-family:inherit;
}
.sba-ww-subtab:hover{color:var(--ww-green-2)}
.sba-ww-subtab.active{color:var(--ww-green);border-bottom-color:var(--ww-green)}
.sba-ww-subtab .ti{font-size:16px}

/* Customer multi-visit booking — per-visit stepper inside a parent card */
.sba-ww-bk-multi{margin-top:12px}
.sba-ww-bk-multi__sum{
	font-size:13px;font-weight:600;color:var(--ww-green-3);
	display:inline-flex;align-items:center;gap:6px;
	background:rgba(7,105,81,.08);padding:6px 12px;border-radius:8px;
	margin-bottom:10px;
}
.sba-ww-bk-multi__sum .ti{color:var(--ww-green-2)}
.sba-ww-bk-multi__list{
	display:flex;flex-direction:column;gap:10px;
}
.sba-ww-bk-visit{
	background:var(--ww-cream-2);
	border-radius:10px;padding:10px 12px;
	border-left:3px solid var(--ww-border);
}
.sba-ww-bk-visit__head{
	display:flex;align-items:center;gap:10px;flex-wrap:wrap;
	margin-bottom:6px;
}
.sba-ww-bk-visit__idx{
	background:var(--ww-green);color:#fff;
	padding:2px 8px;border-radius:6px;
	font-size:11px;font-weight:700;letter-spacing:.3px;
}
.sba-ww-bk-visit__date{font-size:13px;color:var(--ww-text);font-weight:500;flex:1}
.sba-ww-bk-visit__pill{
	font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;
	background:#e2e8f0;color:#475569;
}
.sba-ww-bk-visit__pill--completed{background:#d1fae5;color:#065f46}
.sba-ww-bk-visit__pill--in_progress{background:#fef3c7;color:#92400e}
.sba-ww-bk-visit__pill--cancelled{background:#fee2e2;color:#991b1b}
.sba-ww-bk-visit__pill--on_the_way{background:#dbeafe;color:#1e3a8a}
.sba-ww-bk-visit__pill--assigned,
.sba-ww-bk-visit__pill--accepted_by_agent{background:#e0e7ff;color:#3730a3}
.sba-ww-bk-visit__pill--confirmed{background:#cffafe;color:#0e7490}
.sba-ww-bk-visit__pill--pending{background:#fef3c7;color:#854d0e}

.sba-ww-bk-visit:has(.sba-ww-bk-visit__pill--completed){border-left-color:#10b981}
.sba-ww-bk-visit:has(.sba-ww-bk-visit__pill--cancelled){border-left-color:#ef4444}
.sba-ww-bk-visit .sba-ww-bk-flow{padding:4px 0;margin:0}
.sba-ww-bk-visit .sba-ww-bk-flow__label{font-size:9px}
.sba-ww-bk-visit .sba-ww-bk-flow__dot{width:10px;height:10px}

/* v2.6 — "is-locked" Continue button (visual disabled, but click still fires for inline feedback) */
.sba-ww-btn.is-locked{
	opacity:.45;cursor:pointer;
	background:var(--ww-green);color:#fff;
}
.sba-ww-btn.is-locked:hover{opacity:.55}

/* v2.6 — Bordered textarea variant for cancel modal */
.sba-ww-input--bordered{
	border:1px solid var(--ww-border);
	background:#fff;
	padding:10px 12px;
}
.sba-ww-input--bordered:focus{
	border-color:var(--ww-green);
	box-shadow:0 0 0 3px rgba(7,105,81,.12);
}
.sba-ww-input--bordered::placeholder{color:#94a3b8;font-style:italic}

/* v2.6 — Past search input */
.sba-ww-past-search{
	position:relative;margin-bottom:14px;
}
.sba-ww-past-search input{
	width:100%;padding:10px 12px 10px 38px;
	border:1px solid var(--ww-border);
	border-radius:var(--ww-radius-sm);
	background:#fff;font-size:14px;
	font-family:inherit;color:var(--ww-text);
}
.sba-ww-past-search input:focus{
	border-color:var(--ww-green);outline:none;
	box-shadow:0 0 0 3px rgba(7,105,81,.12);
}
.sba-ww-past-search .ti{
	position:absolute;left:12px;top:50%;transform:translateY(-50%);
	color:var(--ww-text-mute);font-size:16px;pointer-events:none;
}

/* Completed/Cancelled corner badge on bookings (top-left, near ref) */
.sba-ww-bk-card{position:relative}
.sba-ww-bk-corner{
	position:absolute;top:14px;left:14px;
	font-size:11px;font-weight:700;
	padding:5px 11px;border-radius:999px;
	display:inline-flex;align-items:center;gap:4px;
	z-index:2;
	letter-spacing:.3px;
	text-transform:uppercase;
	box-shadow:0 2px 6px rgba(0,0,0,.10);
}
.sba-ww-bk-corner--ok{background:#10b981;color:#fff}
.sba-ww-bk-corner--cancel{background:#ef4444;color:#fff}
.sba-ww-bk-corner .ti{font-size:13px}

/* When corner badge present, push ref/title down */
.sba-ww-bk-card:has(.sba-ww-bk-corner) .sba-ww-bk-card__main{padding-top:36px}

/* Multi-visit collapse */
.sba-ww-bk-collapse{
	background:transparent;border:1px solid var(--ww-border);
	border-radius:6px;width:28px;height:28px;
	display:inline-flex;align-items:center;justify-content:center;
	cursor:pointer;margin-left:auto;color:var(--ww-text-soft);
	transition:.15s;
}
.sba-ww-bk-collapse:hover{background:var(--ww-cream-2);color:var(--ww-green-2)}
.sba-ww-bk-progress.is-collapsed{display:none}

/* Special notes in modal */
.sba-ww-modal-note{
	background:var(--ww-cream-2);
	border-left:3px solid var(--ww-green);
	padding:10px 14px;border-radius:8px;
	font-size:13px;color:var(--ww-text);
	white-space:pre-wrap;line-height:1.5;
}

/* Client-side pager buttons */
.sba-ww-page-btn{
	min-width:34px;height:34px;padding:0 10px;
	border-radius:8px;border:1px solid var(--ww-border);
	background:#fff;color:var(--ww-text);
	font-size:13px;font-weight:500;cursor:pointer;
	margin:0 3px;transition:.15s;font-family:inherit;
}
.sba-ww-page-btn:hover{background:var(--ww-cream-2)}
.sba-ww-page-btn.active{background:var(--ww-green);color:#fff;border-color:var(--ww-green)}

/* Time-slot picker styles consolidated above in v2.8.1 */

/* Highlight selected date strongly on single-visit calendar */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
	background:var(--ww-green) !important;
	border-color:var(--ww-green) !important;
	color:#fff !important;
	font-weight:700;
}

/* Mobile scroll indicator (arrow on right edge) — uses a wrapper so it stays put while content scrolls */
@media (max-width:768px){
	.sba-ww-acct-tabs,
	.sba-ww-subtabs{
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}
	.sba-ww-acct-tabs::-webkit-scrollbar,
	.sba-ww-subtabs::-webkit-scrollbar{display:none}
}


/* v2.7 — Mobile tab scroller with absolute arrow on wrapper (not on scroll container) */
.sba-ww-tabs-scroller{position:relative}
@media (max-width:768px){
	.sba-ww-tabs-scroller::after{
		content:'›';
		position:absolute;right:6px;top:50%;transform:translateY(-50%);
		font-size:24px;line-height:1;color:var(--ww-green-2);
		pointer-events:none;
		background:linear-gradient(90deg, transparent 0, #fff 50%);
		padding:0 6px 0 20px;
		animation:sba-ww-arrow-pulse 1.6s ease-in-out infinite;
		z-index:5;
	}
}
@keyframes sba-ww-arrow-pulse{
	0%, 100% { opacity: .55; transform: translateY(-50%) translateX(0); }
	50% { opacity: 1; transform: translateY(-50%) translateX(4px); }
}
/* v2.9.35 — No scroll arrow on the Single/Multiple-visits subtabs (only 2 items, never overflow). */
.sba-ww-tabs-scroller--sub::after{display:none !important;content:none !important}

/* v2.7.1 — Readonly email field for logged-in users */
.sba-ww-input--readonly{
	background:#f3f4f6 !important;
	color:var(--ww-text-soft);
	cursor:not-allowed;
	border-color:#d1d5db;
}
.sba-ww-input--readonly:focus{
	border-color:#d1d5db !important;
	box-shadow:none !important;
}
.sba-ww-email-locked-hint{
	font-size:11px;color:var(--ww-text-mute);
	margin-top:4px;display:inline-flex;align-items:center;gap:4px;
}
.sba-ww-email-locked-hint .ti{font-size:12px;color:var(--ww-green-2)}

/* v2.7.2 — Skeleton shimmer loaders for My Account */
.sba-ww-skel{
	display:inline-block;
	background:linear-gradient(90deg, #eef2f6 0%, #f7fafc 50%, #eef2f6 100%);
	background-size:200% 100%;
	border-radius:6px;
	animation:sba-ww-shimmer 1.4s linear infinite;
	height:12px;
	vertical-align:middle;
}
.sba-ww-skel--bar{height:12px;display:block;margin-bottom:8px}
.sba-ww-skel--bar-sm{height:10px;display:block;margin-bottom:6px}
.sba-ww-skel--bar-lg{height:18px;display:block;margin-bottom:10px}
.sba-ww-skel--pill{height:22px;width:80px;border-radius:999px;display:block;margin-bottom:8px}
.sba-ww-skel--btn{height:32px;width:90px;border-radius:8px;display:block}

@keyframes sba-ww-shimmer{
	0%   { background-position:200% 0; }
	100% { background-position:-200% 0; }
}

.sba-ww-skeleton-card{
	display:grid;grid-template-columns:1fr auto;gap:16px;
	background:#fff;border:1px solid var(--ww-border);
	border-radius:var(--ww-radius-sm,12px);
	padding:18px 20px;margin-bottom:12px;
}
.sba-ww-skeleton-card__main{display:flex;flex-direction:column;gap:6px}
.sba-ww-skeleton-card__side{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.sba-ww-skeleton-card--addr{grid-template-columns:1fr}

/* Right-aligned actions for modal buttons */
.sba-ww-actions--right{justify-content:flex-end !important}

/* Address modal — visible bordered inputs with placeholder always visible */
.sba-ww-modal .sba-ww-input--bordered{
	border:1px solid var(--ww-border);
	background:#fff;
	padding:10px 12px;
	font-size:14px;
	transition:border-color .12s, box-shadow .12s;
}
.sba-ww-modal .sba-ww-input--bordered:focus{
	border-color:var(--ww-green);
	box-shadow:0 0 0 3px rgba(7,105,81,.12);
	outline:none;
}
.sba-ww-modal .sba-ww-input--bordered::placeholder{
	color:#94a3b8;opacity:1;
}

/* Saved-pill default badge */
.sba-ww-saved-pill__default{
	font-size:10px;font-weight:700;
	background:var(--ww-green);color:#fff;
	padding:2px 7px;border-radius:999px;
	margin-left:6px;letter-spacing:.4px;text-transform:uppercase;
}

/* v2.8 — Booking-type corner badge (replaces completed/cancelled) */
.sba-ww-bk-corner--type{
	background:var(--ww-green);
	color:#fff;
}
.sba-ww-bk-corner--type .ti{color:#fff}

/* v2.8 — Ensure modal action buttons have full styling */
.sba-ww-modal .sba-ww-btn.primary{
	background:linear-gradient(135deg,var(--ww-green),var(--ww-green-3)) !important;
	color:#fff !important;
	box-shadow:0 4px 14px rgba(7,105,81,.3);
	border:none;
	padding:11px 22px;
	border-radius:var(--ww-radius-sm);
	font-weight:600;
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:14px;
	cursor:pointer;
}
.sba-ww-modal .sba-ww-btn.primary:hover{
	box-shadow:0 6px 20px rgba(7,105,81,.4);
}
.sba-ww-modal .sba-ww-btn.ghost{
	background:#fff !important;
	color:var(--ww-text) !important;
	border:1px solid var(--ww-border);
	padding:11px 22px;
	border-radius:var(--ww-radius-sm);
	font-weight:600;
	font-size:14px;
	cursor:pointer;
}
.sba-ww-modal .sba-ww-btn.ghost:hover{
	background:var(--ww-cream-2) !important;
}
.sba-ww-modal .sba-ww-btn.danger{
	background:#ef4444 !important;
	color:#fff !important;
	border:none;
	padding:11px 22px;
	border-radius:var(--ww-radius-sm);
	font-weight:600;
	font-size:14px;
	cursor:pointer;
}

/* v2.8 — visible placeholder borders inside modals */
.sba-ww-modal .sba-ww-input,
.sba-ww-modal textarea.sba-ww-input{
	border:1px solid #d1d5db;
}
.sba-ww-modal .sba-ww-input::placeholder{
	color:#9ca3af !important;
	opacity:1;
}

/* v2.8.8 — Modified pill on customer-side visit cards (light theme version) */
.sba-ww-modified-tag{
	display:inline-flex;align-items:center;gap:4px;
	font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
	color:#b45309;background:#fef3c7;
	padding:4px 10px;border-radius:999px;margin-left:8px;
	vertical-align:middle;line-height:1;
}
.sba-ww-modified-tag .ti{font-size:11px}

/* v2.8.8 — Stronger primary button defaults inside customer modals so it doesn't get themed away */
.sba-ww-modal .sba-ww-btn,
.sba-ww-modal button.sba-ww-btn{
	font-family:inherit !important;
	font-size:14px !important;
	line-height:1.2 !important;
	min-height:42px;
	min-width:auto;
	white-space:nowrap;
	box-sizing:border-box;
}
.sba-ww-modal .sba-ww-btn.primary{
	background:linear-gradient(135deg,#076951,#033d2f) !important;
	color:#fff !important;
	border:none !important;
	text-shadow:none !important;
}
.sba-ww-modal .sba-ww-btn.primary *,
.sba-ww-modal .sba-ww-btn.primary .ti{
	color:#fff !important;
}

/* v2.8.8 — Belt-and-braces: ensure modal action buttons render correctly with visible text */
.sba-ww-modal .sba-ww-actions,
.sba-ww-modal .sba-ww-actions--right{
	display:flex !important;
	align-items:center !important;
	gap:10px !important;
	margin-top:20px;
}
.sba-ww-modal .sba-ww-actions button,
.sba-ww-modal .sba-ww-actions .sba-ww-btn,
.sba-ww-modal .sba-ww-modal-actions button,
.sba-ww-modal .sba-ww-modal-actions .sba-ww-btn{
	font-family:inherit !important;
	font-size:14px !important;
	line-height:1 !important;
	min-height:42px !important;
	padding:11px 22px !important;
	border-radius:8px !important;
	font-weight:600 !important;
	display:inline-flex !important;
	align-items:center !important;
	gap:6px !important;
	cursor:pointer;
	white-space:nowrap;
	box-sizing:border-box;
}
/* Primary (Save / confirm) — solid green gradient with WHITE text */
.sba-ww-modal .sba-ww-actions .sba-ww-btn.primary,
.sba-ww-modal .sba-ww-modal-actions .sba-ww-btn.primary{
	background:linear-gradient(135deg,#076951,#033d2f) !important;
	color:#fff !important;
	border:none !important;
	box-shadow:0 4px 14px rgba(7,105,81,.3) !important;
}
.sba-ww-modal .sba-ww-btn.primary,
.sba-ww-modal .sba-ww-btn.primary *{ color:#fff !important; }
.sba-ww-modal .sba-ww-btn.primary .ti{ color:#fff !important; }
/* Ghost (Close / Cancel-non-destructive) — white with grey border */
.sba-ww-modal .sba-ww-btn.ghost{
	background:#fff !important;
	color:#1f2937 !important;
	border:1px solid #d1d5db !important;
}
.sba-ww-modal .sba-ww-btn.ghost:hover{
	background:#f3f4f6 !important;
}
/* Danger (Cancel destructive) — red */
.sba-ww-modal .sba-ww-btn.danger{
	background:#fff !important;
	color:#991b1b !important;
	border:1px solid #fca5a5 !important;
}
.sba-ww-modal .sba-ww-btn.danger:hover{
	background:#fee2e2 !important;
}

/* ===== v2.9.15 — Coupon section in booking step 3 ===== */
.sba-ww-coupon-block{position:relative}
.sba-ww-coupon-row{display:flex;gap:8px;align-items:center}
.sba-ww-coupon-row #sba-ww-coupon{flex:1;letter-spacing:.05em}
.sba-ww-coupon-row .sba-ww-btn{white-space:nowrap}
.sba-ww-coupon-msg{margin-top:8px;padding:8px 12px;border-radius:6px;font-size:13px;display:flex;align-items:center;gap:6px}
.sba-ww-coupon-msg--success{background:#e8f5ef;color:#076951;border:1px solid #c4e7d6}
.sba-ww-coupon-msg--error{background:#fdecec;color:#a52121;border:1px solid #f4c2c2}
.sba-ww-coupon-msg--info{background:#eef5f2;color:#3a5a4d}

/* Subtotal + discount on customer card */
.sba-ww-bk-subtotal{font-size:12px;color:#5a8a78;text-decoration:line-through;margin-bottom:2px}
.sba-ww-bk-discount{font-size:11px;color:#0d8a64;font-weight:600;background:#e8f5ef;padding:2px 8px;border-radius:10px;display:inline-flex;align-items:center;gap:4px;margin-bottom:4px}

/* Coupon tag on customer multi-visit visit row */
.sba-ww-visit-invoice{margin-left:8px}

/* ===== v2.9.19 — Contact-agent modal ===== */
.sba-ww-contact-agent{padding:32px 28px 28px;text-align:center}
.sba-ww-contact-agent__icon{width:54px;height:54px;border-radius:50%;background:#e8f5ef;color:#076951;display:inline-flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px}
.sba-ww-contact-agent__title{margin:0 0 4px;font-size:18px;color:#0a1f18}
.sba-ww-contact-agent__name{margin:0 0 18px;font-size:15px;color:#5a8a78;font-weight:500}
.sba-ww-contact-agent__call{display:inline-flex;align-items:center;gap:8px;font-size:16px;padding:12px 24px;letter-spacing:.02em}
.sba-ww-contact-agent__nophone{color:#88a99d;font-style:italic}
.sba-ww-contact-agent__note{margin-top:16px;padding:8px 12px;background:#fff8e1;color:#8a5a00;border-radius:8px;font-size:12px;display:inline-flex;align-items:center;gap:6px;border:1px solid #f0e1b0}

/* ==================================================================
 * v2.9.26 — Full-screen split login (customer auth)
 * ================================================================== */
.sba-auth-split{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px;box-sizing:border-box;background:#eef2f1}
.sba-auth-card{display:flex;width:100%;max-width:960px;min-height:600px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.18);padding:14px;box-sizing:border-box}
.sba-auth-split__media{position:relative;flex:1 1 50%;min-width:0;background:linear-gradient(155deg,#0d8a64,#076951);overflow:hidden;display:none;border-radius:16px;margin-right:14px}
.sba-auth-back{position:absolute;top:18px;left:18px;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;color:#076951;font-size:20px;text-decoration:none;z-index:5}
.sba-auth-back:hover{background:#f3f8f6}
.sba-auth-slides,.sba-auth-slide{position:absolute;inset:0}
.sba-auth-slide{background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease}
.sba-auth-slide.is-active{opacity:1}
.sba-auth-slides--fallback .sba-auth-slide{opacity:1;background:linear-gradient(135deg,#0d8a64,#076951)}
.sba-auth-media__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.sba-auth-media__content{position:absolute;left:0;right:0;bottom:0;padding:48px 44px}
.sba-auth-media__tagline{color:#fff;font-size:38px;line-height:1.15;font-weight:800;margin:0;text-shadow:0 2px 18px rgba(0,0,0,.3)}
.sba-auth-dots{position:absolute;left:44px;bottom:30px;display:flex;gap:8px}
.sba-auth-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:.2s}
.sba-auth-dot.is-active{background:#fff;width:22px;border-radius:5px}

.sba-auth-split__panel{flex:1 1 50%;min-width:0;display:flex;align-items:center;justify-content:center;padding:32px;overflow-y:auto}
.sba-auth-panel__inner{width:100%;max-width:380px;min-height:500px;display:flex;flex-direction:column;justify-content:flex-start}
/* Reserve a consistent heading height so the 2-line login title and 1-line register
   title don't shift the fields — keeps both forms visually aligned (no jump). */
.sba-auth-split .sba-ww-auth-form .sba-ww-h2{min-height:1.9em;margin-bottom:6px}
.sba-auth-split .sba-ww-auth-sub{min-height:1.4em}
.sba-auth-brand{font-weight:800;font-size:18px;color:#076951;margin-bottom:22px;text-align:right}
.sba-auth-split .sba-ww-h2{font-size:30px;font-weight:800;line-height:1.2;margin:0 0 6px;color:#0a1f18}
.sba-auth-split .sba-ww-auth-sub{color:#6b7c75;margin:0 0 22px;font-size:14px}
.sba-auth-split .sba-ww-field-block{margin-bottom:16px}
.sba-auth-split .sba-ww-lbl{display:block;font-size:13px;font-weight:600;color:#33413b;margin-bottom:6px}
.sba-auth-split .sba-ww-input{width:100%;border:1px solid #d7e2dd;border-radius:10px;padding:12px 14px;font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s}
.sba-auth-split .sba-ww-input:focus{border-color:#0d8a64;box-shadow:0 0 0 3px rgba(13,138,100,.12)}
.sba-auth-split .sba-ww-showpw{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#5a6b64;margin-top:8px;cursor:pointer}
.sba-auth-split .sba-ww-btn.primary.full{width:100%;background:linear-gradient(135deg,#0d8a64,#076951);color:#fff;border:0;border-radius:10px;padding:13px;font-size:15px;font-weight:700;cursor:pointer;margin-top:6px;transition:filter .15s}
.sba-auth-split .sba-ww-btn.primary.full:hover{filter:brightness(1.07)}
.sba-auth-split .sba-ww-auth-switch{margin-top:18px;font-size:14px;color:#6b7c75;text-align:center}
.sba-auth-split .sba-ww-auth-switch a{color:#0d8a64;font-weight:600}
.sba-auth-split .sba-ww-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

@media (min-width:900px){
	.sba-auth-split__media{display:block}
}
@media (max-width:899px){
	/* No image side on small screens — back button takes its place. */
	.sba-auth-back{display:flex}
	.sba-auth-split__panel{padding:30px 24px}
}
@media (max-width:480px){
	.sba-auth-split{padding:60px 14px 16px;align-items:flex-start}
	.sba-auth-card{min-height:auto;border-radius:18px;box-shadow:0 16px 50px rgba(0,0,0,.14);padding:0}
	.sba-auth-panel__inner{min-height:0}
	.sba-auth-split__panel{padding:26px 20px}
	.sba-auth-split .sba-ww-h2{font-size:23px}
	.sba-auth-split .sba-ww-input{font-size:16px} /* prevent iOS zoom */
	.sba-auth-back{top:12px;left:12px;width:38px;height:38px;font-size:18px}
}

/* v2.9.27 — Auth page sits on a soft neutral background (contained card look) */
body.sba-portal-body.sba-portal-auth{background:#eef2f1 !important}
@media (max-width:480px){ body.sba-portal-body.sba-portal-auth{background:#fff !important} }

/* v2.9.28 — Auth toast colors (toast lives outside .sba-ww-app so the green CSS var isn't in scope) */
.sba-auth-split .sba-ww-toast{background:#1f2a26;color:#fff}
.sba-auth-split .sba-ww-toast.success{background:#076951 !important}
.sba-auth-split .sba-ww-toast.error{background:#dc2626 !important}

/* v2.9.28 — Prevent iOS auto-zoom on focus across the entire customer interface.
   Any input < 16px triggers a zoom on focus in mobile Safari. */
@media (max-width:768px){
	.sba-ww-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
	.sba-ww-app select,
	.sba-ww-app textarea,
	.sba-ww-account-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
	.sba-ww-account-app select,
	.sba-ww-account-app textarea,
	.sba-ww-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
	.sba-ww-modal select,
	.sba-ww-modal textarea,
	.sba-auth-split input:not([type="checkbox"]):not([type="radio"]),
	.sba-auth-split select,
	.sba-auth-split textarea{font-size:16px !important}
}

/* ============================ Wallet (My Account) ============================ */
.sba-ww-wallet-card{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
	background:linear-gradient(135deg,var(--ww-green),var(--ww-green-3));color:#fff;border-radius:16px;padding:22px 24px;box-shadow:0 10px 30px rgba(7,105,81,.25)}
.sba-ww-wallet-balance__label{display:block;font-size:13px;opacity:.85;margin-bottom:4px}
.sba-ww-wallet-balance__amt{display:block;font-size:30px;font-weight:800;letter-spacing:.3px}
.sba-ww-wallet-actions{display:flex;gap:10px;flex-wrap:wrap}
.sba-ww-wallet-actions .sba-ww-btn.primary{background:#fff;color:var(--ww-green-3)}
.sba-ww-wallet-actions .sba-ww-btn.primary:hover{background:#eafaf4}
.sba-ww-wallet-topup-form{margin-top:18px;padding:18px;border:1px solid var(--ww-border);border-radius:14px;background:var(--ww-cream)}
.sba-ww-wallet-form-actions{display:flex;gap:10px;margin-top:6px}
.sba-ww-wallet-hint{font-size:12px;color:var(--ww-text-mute);margin:6px 0 12px}
.sba-ww-wallet-h{margin:22px 0 10px;font-size:16px;color:var(--ww-text)}
.sba-ww-wallet-tx{display:flex;flex-direction:column;gap:8px}
.sba-ww-wallet-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
	padding:12px 14px;border:1px solid var(--ww-border);border-radius:12px;background:#fff}
.sba-ww-wallet-row__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.sba-ww-wallet-row__src{font-weight:600;color:var(--ww-text)}
.sba-ww-wallet-row__date{font-size:12px;color:var(--ww-text-mute)}
.sba-ww-wallet-row__amt{font-weight:800;text-align:right;white-space:nowrap}
.sba-ww-wallet-row.is-credit .sba-ww-wallet-row__amt{color:#076951}
.sba-ww-wallet-row.is-debit .sba-ww-wallet-row__amt{color:#b91c1c}
.sba-ww-wallet-row__bal{display:block;font-size:11px;font-weight:600;color:var(--ww-text-mute)}
@media (max-width:480px){
	.sba-ww-wallet-balance__amt{font-size:24px}
	.sba-ww-wallet-card{padding:18px}
}

/* ===================== Wallet apply at checkout ===================== */
.sba-ww-wallet-apply{margin-top:10px}
.sba-ww-wapply{border:1px solid var(--ww-border);border-radius:12px;padding:14px;background:var(--ww-cream)}
.sba-ww-wapply__bal{font-size:14px;color:var(--ww-text);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.sba-ww-wapply__bal .ti{color:var(--ww-green-2)}
.sba-ww-wapply__lbl{display:block;font-size:13px;font-weight:600;color:var(--ww-text-soft);margin-bottom:4px}
.sba-ww-wapply__empty{font-size:13px;color:var(--ww-text-mute)}
.sba-ww-wapply__rem{font-size:13px;color:var(--ww-text);margin:10px 0 6px}
.sba-ww-wapply__full{font-size:13px;color:#076951;font-weight:600;margin-top:10px;display:flex;align-items:center;gap:6px}
.sba-ww-wapply #sba-ww-wapply-amt{margin-bottom:2px}

/* ===================== Refund choice in cancel modal ===================== */
.sba-ww-refund-note{background:var(--ww-cream-2);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--ww-text-soft);margin-bottom:12px;display:flex;gap:8px;align-items:flex-start}
.sba-ww-refund-note .ti{color:var(--ww-green-2);margin-top:1px}
.sba-ww-radio{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ww-text);padding:6px 0;cursor:pointer}
.sba-ww-radio input{width:auto;margin:0}
.sba-ww-pay-note-inline{color:var(--ww-text-mute);font-style:normal;font-size:12px}