/* SN Clinic Booking — front-end styles.
 * Deliberately font-agnostic: no font-family/weight overrides on text or
 * headings, so the active theme's typography (h1/h2 fonts, body font) carries
 * through. Only layout, spacing, and a single accent colour are set here.
 * Override --snc-accent in the theme to re-tint the buttons/links. */
.snc-booking{
	--snc-accent:#2a6a4a;
	--snc-accent-contrast:#fff;
	--snc-tint:#edf4f0;
	--snc-border:#e2e2e2;
	--snc-muted:#666;
	max-width:960px;
	margin:0 auto;
}

/* The [hidden] attribute must always win. Page builders (Elementor) style
 * `button` with an explicit display, which overrides the browser's default
 * [hidden] handling and un-hides the wizard's step buttons. */
.snc-booking [hidden]{display:none !important}

/* --- Shared header (chooser + listing) --- */
.snc-head{text-align:center;margin:0 0 2rem}
.snc-head-title{margin:0 0 .35rem}
.snc-head-sub{margin:0;color:var(--snc-muted);font-size:1.1em}
/* Listing hero: framed photo beside the title (no text-on-image overlay) */
.snc-listing-head{margin:0 0 1.75rem}
.snc-hero{
	display:flex;
	align-items:center;
	gap:1.75rem;
	padding:1.5rem;
	border-radius:20px;
	background:var(--snc-tint);
}
.snc-hero-figure{
	flex:0 0 auto;
	width:min(46%,300px);
	border-radius:14px;
	overflow:hidden;
	background:#fff;
	box-shadow:0 4px 14px rgba(0,0,0,.10);
}
.snc-booking .snc-hero-figure .snc-hero-img{
	display:block;
	width:100%;
	aspect-ratio:16/9;
	object-fit:cover;
	border-radius:0;
}
.snc-hero-text{flex:1 1 auto;min-width:0}
.snc-listing .snc-hero-title{margin:0 0 .4rem}
.snc-hero-lead{margin:0;color:var(--snc-muted);font-size:1.05em}
@media(max-width:640px){
	.snc-hero{flex-direction:column;align-items:stretch;text-align:center;gap:1.25rem}
	.snc-hero-figure{width:100%}
}

/* Registration intro copy (admin-editable, below the hero).
 * Explicitly typed so raw WYSIWYG <h3>/<p> tags look right even under block
 * themes (which only style .wp-block-* elements). Font family still inherits. */
.snc-intro{max-width:760px;margin:0 auto 2.5rem;font-size:1rem;line-height:1.6;color:inherit}
.snc-intro > *:first-child{margin-top:0}
.snc-intro p{margin:0 0 1rem;font-size:.95rem}
.snc-intro h1,.snc-intro h2,.snc-intro h3,.snc-intro h4{margin:1.6rem 0 .5rem;line-height:1.25;font-weight:700}
.snc-intro h2{font-size:1.35rem}
.snc-intro h3{font-size:1.2rem}
.snc-intro h4{font-size:1.05rem}
.snc-intro ul,.snc-intro ol{margin:0 0 1rem 1.4rem;padding:0}
.snc-intro li{margin:.3rem 0;font-size:.95rem}
.snc-intro strong,.snc-intro b{font-weight:700}
.snc-intro a{color:var(--snc-accent);text-decoration:underline}

/* Post-payment success page (admin-editable, same merge tags as the email) */
.snc-success{max-width:640px;margin:0 auto;padding:1rem 0;line-height:1.6}
.snc-success h1,.snc-success h2,.snc-success h3{margin:0 0 .6rem;line-height:1.25;font-weight:700}
.snc-success h2{font-size:1.5rem}
.snc-success p{margin:0 0 1rem;font-size:1rem}
.snc-success a{color:var(--snc-accent)}

/* Back link — beneath the hero, understated text link */
.snc-back{text-align:left;margin:.9rem 0 0;font-size:.95em}
.snc-back a{display:inline-flex;align-items:center;gap:.35rem;color:var(--snc-accent);text-decoration:none;font-weight:600}
.snc-back a:hover{text-decoration:underline}
.snc-back-arrow{font-size:1.05em;line-height:1}

/* --- Chooser cards (Cat / Dog) --- */
.snc-choice-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	gap:1.5rem;
}
.snc-choice-card{
	display:flex;
	flex-direction:column;
	text-decoration:none;
	color:inherit;
	border:1px solid var(--snc-border);
	border-radius:14px;
	overflow:hidden;
	background:#fff;
	box-shadow:0 1px 3px rgba(0,0,0,.06);
	transition:transform .15s ease,box-shadow .15s ease;
}
.snc-choice-card:hover,.snc-choice-card:focus{
	transform:translateY(-4px);
	box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.snc-choice-img{display:block;aspect-ratio:16/9;overflow:hidden}
/* .snc-booking prefix raises specificity over Elementor's `.elementor img{height:auto}`,
 * which otherwise shrinks the image and exposes the container background as a grey box. */
.snc-booking .snc-choice-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.snc-choice-title{margin:0;padding:1rem 1.25rem;text-align:center}

/* --- Clinic listing cards --- */
.snc-clinic-cards{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
	gap:1.5rem;
	margin:0 0 2.5rem;
}
.snc-clinic-card{
	display:flex;
	flex-direction:column;
	border:1px solid var(--snc-border);
	border-radius:16px;
	overflow:hidden;
	background:#fff;
	box-shadow:0 2px 6px rgba(0,0,0,.07);
	transition:transform .15s ease,box-shadow .15s ease;
}
.snc-clinic-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.12)}
.snc-clinic-card.is-full,.snc-clinic-card.is-cancelled,.snc-clinic-card.is-closed{opacity:.7}
.snc-clinic-card.is-full:hover,.snc-clinic-card.is-cancelled:hover,.snc-clinic-card.is-closed:hover{transform:none;box-shadow:0 2px 6px rgba(0,0,0,.07)}

/* Header band (accent), icon + weekday/date */
.snc-card-head{
	display:flex;align-items:center;gap:.85rem;
	padding:1.1rem 1.25rem;
	background:var(--snc-accent);
	color:var(--snc-accent-contrast);
}
.snc-card-icon{
	display:flex;align-items:center;justify-content:center;
	flex:0 0 auto;
	width:52px;height:52px;
	border-radius:50%;
	background:#fff;
	box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.snc-booking .snc-card-icon img{width:32px;height:32px;object-fit:contain;display:block;border-radius:0}
.snc-card-datewrap{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.snc-card-weekday{font-size:.78em;text-transform:uppercase;letter-spacing:.06em;opacity:.85}
.snc-card-head .snc-clinic-date{font-size:.95em;font-weight:700;white-space:nowrap}

/* Body: stacked stats (label over value → long times get the full card width
 * and never wrap onto an awkward second line). */
.snc-card-body{
	display:flex;
	flex-direction:column;
	gap:.9rem;
	padding:1.15rem 1.25rem;
	flex:1;
}
.snc-stat{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.snc-stat-label{font-size:.72em;text-transform:uppercase;letter-spacing:.05em;color:var(--snc-muted);font-weight:600}
.snc-stat-value{font-size:1.05em;font-weight:600}
.snc-stat--deposit .snc-stat-value{font-size:1.5em;font-weight:800;color:var(--snc-accent)}
.snc-nowrap{white-space:nowrap}

/* Footer: availability pill stacked above the CTA (consistent across states) */
.snc-card-foot{
	display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;
	padding:0 1.25rem 1.25rem;
}
.snc-spots-pill{
	display:inline-block;
	padding:.25rem .7rem;
	border-radius:999px;
	font-size:.82em;
	font-weight:600;
	background:#e8f1ec;
	color:#1c6b45;
	white-space:nowrap;
}
.snc-spots-pill.is-low{background:#fdf1e0;color:#a55b12}
.snc-spots-pill.is-full{background:#fbe3e1;color:#a3302a}
.snc-spots-pill.is-cancelled{background:#e9e9e9;color:#555}
.snc-spots-pill.is-closed{background:#e2e6ea;color:#3d4b5c}
.snc-card-foot .snc-book-btn{width:100%}
.snc-empty{text-align:center;color:var(--snc-muted);padding:2rem 0}

/* --- Buttons ---
 * Locked against page-builder/theme button styling (e.g. Elementor's kit-wide
 * `button` rules): doubled .snc-booking selectors out-rank them, and every
 * visual property is declared so nothing leaks through unset gaps. Only the
 * font FAMILY inherits from the theme. */
.snc-booking .snc-book-btn,
.snc-booking .snc-btn-primary,
.snc-booking .snc-submit,
.snc-booking .snc-btn-ghost{
	cursor:pointer;
	font-family:inherit;
	font-weight:400;
	line-height:1.5;
	letter-spacing:normal;
	text-transform:none;
	text-decoration:none;
	text-shadow:none;
	box-shadow:none;
	min-height:0;
	min-width:0;
	margin:0;
	border-radius:8px;
	transition:filter .15s ease,background .15s ease;
}
.snc-booking .snc-book-btn{
	width:100%;
	padding:.65rem 1rem;
	border:1px solid var(--snc-accent);
	background:var(--snc-accent);
	color:var(--snc-accent-contrast);
	font-size:1em;
}
/* Interaction states redeclare the full look: page-builder button:hover/focus
 * rules out-rank the BASE lock above, so each state must lock itself. */
.snc-booking .snc-book-btn:hover,
.snc-booking .snc-book-btn:focus,
.snc-booking .snc-book-btn:active{
	background:var(--snc-accent);border-color:var(--snc-accent);color:var(--snc-accent-contrast);
	box-shadow:none;text-shadow:none;filter:brightness(1.05);
}
.snc-booking .snc-book-btn[disabled],
.snc-booking .snc-book-btn[disabled]:hover,
.snc-booking .snc-book-btn[disabled]:focus{
	cursor:not-allowed;background:#bbb;border-color:#bbb;color:var(--snc-accent-contrast);filter:none;
}

/* --- Booking modal (multi-step wizard) --- */
.snc-modal{
	width:min(620px,94vw);
	max-width:94vw;
	max-height:90vh;
	padding:0;
	border:none;
	border-radius:18px;
	overflow:hidden;
	background:#fff;
	color:inherit;
	box-shadow:0 24px 70px rgba(0,0,0,.32);
}
.snc-modal::backdrop{background:rgba(18,24,20,.55)}
.snc-intake-form{display:flex;flex-direction:column;max-height:90vh}

/* Header: clinic summary + close */
.snc-modal-head{
	display:flex;align-items:center;gap:1rem;
	padding:1.15rem 1.35rem;
	border-bottom:1px solid var(--snc-border);
}
.snc-modal-clinic{display:flex;align-items:center;gap:.85rem;min-width:0}
.snc-modal-icon{
	flex:0 0 auto;display:flex;align-items:center;justify-content:center;
	width:46px;height:46px;border-radius:50%;background:var(--snc-tint);
}
.snc-booking .snc-modal-icon img{width:28px;height:28px;object-fit:contain;display:block;border-radius:0}
.snc-modal-clinic-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.snc-modal-clinic-name{font-weight:700;font-size:1.1em}
.snc-modal-clinic-meta{font-size:.88em;color:var(--snc-muted)}
.snc-modal-dot{margin:0 .35rem}
/* Doubled selector out-ranks Elementor's kit-wide `button` styling; the
 * explicit padding/min-size/shadow resets cover what the kit sets. */
.snc-booking .snc-modal-close{
	margin-left:auto;flex:0 0 auto;
	background:none;border:none;cursor:pointer;
	font-size:1.7rem;line-height:1;color:var(--snc-muted);
	width:2rem;height:2rem;border-radius:6px;
	padding:0;min-height:0;min-width:0;box-shadow:none;text-transform:none;
	font-family:inherit;font-weight:400;letter-spacing:normal;text-shadow:none;
	display:flex;align-items:center;justify-content:center;
}
.snc-booking .snc-modal-close:hover,
.snc-booking .snc-modal-close:focus,
.snc-booking .snc-modal-close:active{
	background:#f0f0f0;color:#000;border:none;
	padding:0;box-shadow:none;text-shadow:none;
}

/* Step indicator */
.snc-steps{
	display:flex;list-style:none;margin:0;
	padding:1.1rem 1.35rem .25rem;
	gap:.25rem;
}
.snc-step-dot{
	flex:1;position:relative;
	display:flex;flex-direction:column;align-items:center;gap:.4rem;
	font-size:.72em;color:var(--snc-muted);text-align:center;
}
.snc-step-dot span{
	position:relative;z-index:1;
	width:28px;height:28px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:#e7e7e7;color:#777;font-weight:700;font-size:.85rem;
}
.snc-step-dot::before{
	content:"";position:absolute;top:14px;right:50%;
	width:100%;height:2px;background:#e7e7e7;z-index:0;
}
.snc-step-dot:first-child::before{display:none}
.snc-step-dot.is-active{color:var(--snc-accent);font-weight:600}
.snc-step-dot.is-active span,.snc-step-dot.is-done span{background:var(--snc-accent);color:#fff}
.snc-step-dot.is-active::before,.snc-step-dot.is-done::before{background:var(--snc-accent)}

/* Body: scrolls; header/steps/footer stay put */
.snc-modal-body{
	flex:1 1 auto;overflow-y:auto;
	padding:1rem 1.35rem 1.15rem;
}
.snc-step-hint{margin:0 0 .75rem;color:var(--snc-muted);font-size:.9em}

/* Field grid */
.snc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.1rem .9rem}
.snc-span2{grid-column:1 / -1}
.snc-grid-csz{display:grid;grid-template-columns:1.6fr .7fr 1fr;gap:.1rem .7rem}
.snc-grid-csz .snc-row{margin-bottom:.6rem}
.snc-row{display:block;margin:0 0 .6rem}
.snc-row label{display:block;font-weight:600;margin-bottom:.2rem;font-size:.78em}
.snc-optional{color:var(--snc-muted);font-weight:400}
.snc-row input[type=text],.snc-row input[type=email],.snc-row input[type=tel],.snc-row textarea,.snc-row select{
	width:100%;box-sizing:border-box;padding:.45rem .6rem;
	border:1px solid #ccc;border-radius:7px;font-size:.92rem;line-height:1.3;background:#fff;color:inherit;
}
.snc-row input:focus,.snc-row textarea:focus,.snc-row select:focus{
	outline:none;border-color:var(--snc-accent);box-shadow:0 0 0 3px rgba(42,106,74,.15);
}
.snc-req{color:#a00}
.snc-field-error{display:block;color:#c0271f;font-size:.76em;margin-top:.15rem}
.snc-field-error:empty{display:none}

/* Service check cards */
.snc-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.snc-check-card{
	display:flex;align-items:center;gap:.55rem;
	padding:.55rem .75rem;border:1px solid var(--snc-border);border-radius:9px;
	cursor:pointer;font-weight:600;font-size:.78em;
}
.snc-check-card:hover{border-color:var(--snc-accent)}
.snc-check-card input{width:1.05rem;height:1.05rem;flex:0 0 auto;accent-color:var(--snc-accent)}

/* Review step — grouped (Owner / Pet / Services), compact columns */
.snc-review{margin:0 0 1.1rem;display:flex;flex-direction:column;gap:.7rem}
.snc-review-group{display:grid;gap:.25rem 1.25rem}
.snc-review-owner{grid-template-columns:repeat(3,1fr)}
.snc-review-services{grid-template-columns:1fr}
/* Pet section: two rows, framed by subtle dividers above and below */
.snc-review-pet{display:flex;flex-direction:column;gap:.55rem;border-top:1px solid var(--snc-border);border-bottom:1px solid var(--snc-border);padding:.8rem 0}
.snc-review-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem 1.25rem}
.snc-review-row{display:flex;flex-direction:column;gap:.05rem;min-width:0;padding:.15rem 0}
.snc-review-row--wide{grid-column:1 / -1}
.snc-review-k{color:var(--snc-muted);font-size:.62em;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.snc-review-v{font-weight:500;font-size:.82em;line-height:1.3;word-break:break-word}
.snc-review-note{margin:.9rem 0 0;font-size:.85em;color:var(--snc-muted)}
.snc-policy label{display:flex;gap:.5rem;align-items:center;font-weight:400}
.snc-policy input{flex:0 0 auto;margin:0;width:1.05rem;height:1.05rem;accent-color:var(--snc-accent)}
.snc-check{display:block;font-weight:400}
.snc-check input{margin-right:.4rem}

/* Footer buttons */
.snc-modal-foot{
	display:flex;align-items:center;gap:.75rem;
	padding:1rem 1.35rem;border-top:1px solid var(--snc-border);
}
.snc-foot-spacer{flex:1}
.snc-hold-timer{
	font-size:.85rem;color:#666;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.snc-hold-timer.is-expired{color:#a00000;font-weight:600}
.snc-booking .snc-btn-ghost{
	padding:.6rem 1.2rem;
	border:1px solid var(--snc-border);background:transparent;color:inherit;font-size:1rem;
}
.snc-booking .snc-btn-ghost:hover,
.snc-booking .snc-btn-ghost:focus,
.snc-booking .snc-btn-ghost:active{
	background:#f3f3f3;border-color:var(--snc-border);color:inherit;
	box-shadow:none;text-shadow:none;
}
.snc-booking .snc-btn-primary,
.snc-booking .snc-submit{
	padding:.6rem 1.5rem;
	border:1px solid var(--snc-accent);background:var(--snc-accent);color:var(--snc-accent-contrast);font-size:1rem;
}
.snc-booking .snc-btn-primary:hover,
.snc-booking .snc-btn-primary:focus,
.snc-booking .snc-btn-primary:active,
.snc-booking .snc-submit:hover,
.snc-booking .snc-submit:focus,
.snc-booking .snc-submit:active{
	background:var(--snc-accent);border-color:var(--snc-accent);color:var(--snc-accent-contrast);
	box-shadow:none;text-shadow:none;filter:brightness(1.05);
}
.snc-booking .snc-submit[disabled],
.snc-booking .snc-submit[disabled]:hover{opacity:.6;cursor:wait;filter:none}

/* Messages */
.snc-message{padding:.75rem 1rem;border-radius:8px;margin:0 0 1rem}
.snc-message--success{background:#e7f6ec;border:1px solid #2a6;color:#164}
.snc-message--error{background:#fdecea;border:1px solid #d33;color:#900}
.snc-message--info{background:#eef3fb;border:1px solid #79c;color:#245}

@media(max-width:520px){
	.snc-grid2,.snc-check-grid{grid-template-columns:1fr}
	.snc-review-owner{grid-template-columns:1fr 1fr}
	.snc-review-sub{grid-template-columns:1fr 1fr}
	.snc-step-dot{font-size:0}
	.snc-step-dot span{font-size:.85rem}
}

/* Dark-theme friendliness: let card surfaces follow the theme when it sets a
 * dark background, rather than forcing white. */
@media (prefers-color-scheme:dark){
	.snc-choice-card,.snc-clinic-card{background:transparent}
}