/* Skytrain Dental — branch page (scoped under #sk-branch) */
/* Font: one rule over every descendant. The earlier version listed tags one by one
   and missed button/input/select/strong/h4, which the dentist plugin uses — those
   fell through to its own IBM Plex Sans Thai and looked out of place. */
#sk-branch,#sk-branch *{font-family:'Noto Sans Thai',sans-serif!important}
/* No serif here, deliberately. The design used Noto Serif Display for headings,
   but that family has no Thai glyphs — Thai headings silently fell back to the
   system serif (Leelawadee/Angsana on Windows), which is neither the design font
   nor Noto Sans Thai. Weight carries the display feel instead. */
/* Weight 700 and normal tracking to match the Home page headings. At 600 with
   tight tracking these read as a different typeface next to Home, even though
   the family is identical. */
#sk-branch .sk-serif,#sk-branch .sk-h2,#sk-branch .skb-h1,
#sk-branch .skb-book-title,#sk-branch .sk-h2 *{font-weight:700;letter-spacing:normal}
/* Latin digits only, so the display serif renders as intended. */
#sk-branch .skb-rev-num{font-family:'Noto Serif Display',serif!important}
#sk-branch *{box-sizing:border-box}
#sk-branch .sk-wrap{max-width:1240px;margin:0 auto}

/* Section rhythm. Padding stays symmetric so sections with their own background
   (prices is dark, others are tinted) keep breathing room top and bottom. It was
   80px each side, which stacked to a 160px gap between neighbours — too airy, so
   both sides come down to 56px. */
#sk-branch .sk-sec{padding:56px 32px}
/* Section heads are centred throughout, per the design. Location is the one
   exception — it sits in the left column of a two-column grid. */
#sk-branch .sk-head{margin-bottom:44px;text-align:center}
#sk-branch .sk-head .sk-head-sub{margin-left:auto;margin-right:auto}
#sk-branch #skb-location .sk-head{text-align:left}
#sk-branch #skb-location .sk-head .sk-head-sub{margin-left:0}
/* Kicker colours are the logo accents — orange is the default, pink marks the
   two "human" sections (how it works, reviews), sky is for the dark panel. */
#sk-branch .sk-kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#0E8CAE;margin-bottom:10px}
/* Design values, kept as-is. These are brand accents on decorative eyebrow text
   and land at 2.6–3.5:1, under AA's 4.5 for small text. #CE4C0C / #E51471 would
   clear it but visibly shifts the logo colours — flagged for the client rather
   than changed unilaterally. */
#sk-branch .sk-kicker-orange{color:#F47B3F}
#sk-branch .sk-kicker-pink{color:#EE3E8C}
#sk-branch .sk-kicker-sky{color:#7FE0F5}
/* 42px to match the Home page headings. */
#sk-branch .sk-h2{font-size:42px;margin:0;color:#0B3A47;line-height:1.25}
#sk-branch .sk-white{color:#fff}
#sk-branch .sk-head-sub{font-size:16px;color:#5B7680;margin:12px 0 0;line-height:1.7;max-width:640px}
#sk-branch .sk-diamond{width:9px;height:9px;border-radius:3px;background:#17B0D4;transform:rotate(45deg);flex-shrink:0}
#sk-branch .sk-btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-weight:600;font-size:15px;padding:13px 26px;text-decoration:none;transition:.18s;border:0;cursor:pointer}
#sk-branch .sk-btn-teal{background:#17B0D4;color:#fff;box-shadow:0 8px 20px rgba(23,176,212,.28)}
#sk-branch .sk-btn-teal:hover{background:#0E8CAE;color:#fff}
#sk-branch .sk-btn-line{background:#06C755;color:#fff;box-shadow:0 8px 20px rgba(6,199,85,.25)}
#sk-branch .sk-btn-line:hover{filter:brightness(1.05);color:#fff}
#sk-branch .sk-btn-ghost{background:#fff;color:#0E8CAE;border:1.5px solid #CFE7EE}
#sk-branch .sk-btn-ghost:hover{background:#F1F9FC}
#sk-branch .sk-btn-white{background:#fff;color:#0E8CAE}
#sk-branch .sk-btn-white:hover{background:#0B3A47;color:#fff}
/* Facebook brand blue. #166FE5 (FB's own button shade) instead of #1877F2 so
   white text clears WCAG AA (4.73:1 vs 4.23). */
#sk-branch .sk-btn-fb{background:#166FE5;color:#fff;box-shadow:0 8px 20px rgba(22,111,229,.25)}
#sk-branch .sk-btn-fb:hover{background:#0C5FCE;color:#fff}
#sk-branch .sk-ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#DCEFF4,#EAF7FB 45%,#FDEDE4);color:#5B8A99;font-size:13px;border-radius:20px}
#sk-branch .sk-ph-43{aspect-ratio:4/3}

/* HERO */
.skb-hero{background:linear-gradient(160deg,#F4FBFD 0%,#FFFFFF 55%,#FDF4EE 100%)}
.skb-hero-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;padding:64px 32px 72px}
@media(min-width:900px){.skb-hero-grid{grid-template-columns:1.05fr .95fr;padding:88px 32px}}
.skb-badge{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #DCEBF0;border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;color:#0E8CAE;box-shadow:0 4px 12px rgba(11,58,71,.06)}
.skb-dot{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.22)}
.skb-h1{font-size:42px;line-height:1.2;margin:20px 0 0;color:#0B3A47}
@media(max-width:900px){.skb-h1{font-size:30px}}
.skb-accent{color:#17B0D4}
/* Hero H1 = lead phrase on line 1, full clinic name (accent) on line 2.
   The name is set smaller so a long name ("คลินิกทันตกรรม สะพานควาย สกายเทรน")
   sits neatly on its own line; keep-all stops Thai breaking mid-word. */
.skb-h1-lead{display:block}
.skb-h1-name{display:block;font-size:.64em;line-height:1.28;margin-top:.3em;word-break:keep-all}
.skb-sub{font-size:17px;color:#4A6570;line-height:1.8;margin:16px 0 0;max-width:560px}
.skb-facts{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.skb-facts li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#34505A;line-height:1.6}
.skb-i{flex-shrink:0;font-size:16px;line-height:1.5}
.skb-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.skb-hero-media{border-radius:26px;overflow:hidden;box-shadow:0 24px 56px rgba(11,58,71,.16)}
.skb-hero-media img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}

/* TRUST — white strip with hairline rules, per the design. It was dark navy
   here, which turned a light divider between two pale sections into a heavy
   band and competed with the (genuinely dark) location section. */
.skb-trust{background:#fff;border-top:1px solid #E4EDF0;border-bottom:1px solid #E4EDF0}
.skb-trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:26px 32px}
@media(min-width:900px){.skb-trust-grid{grid-template-columns:repeat(4,1fr)}}
.skb-trust-item{display:flex;gap:14px;align-items:flex-start}
/* Rounded tile holding the diamond mark. */
.skb-trust-ico{width:40px;height:40px;border-radius:12px;background:#E4F6FB;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* #sk-branch prefix so this beats #sk-branch .sk-diamond{width:9px} (which has an
   id and would otherwise win, leaving the tile diamond at the default 9px). */
#sk-branch .skb-trust-ico .sk-diamond{width:12px;height:12px}
.skb-trust-item>div>b{display:block;color:#0B3A47;font-size:15px;font-weight:600}
/* Only the description text — must NOT match the icon/diamond spans, which also
   live inside .skb-trust-item. Targeting bare `span` there flipped the flex tile
   to block and pushed the diamond into the corner. */
.skb-trust-item>div>span{display:block;color:#647A82;font-size:13px;margin-top:3px;line-height:1.5}

/* SERVICES cards moved to assets/css/services.css (shared with Home). */
/* STEPS */
.skb-steps{background:linear-gradient(135deg,#FDEDE4 0%,#E4F6FB 100%)}
.skb-steps-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(min-width:900px){.skb-steps-grid{grid-template-columns:repeat(4,1fr)}}
.skb-step{background:#fff;border-radius:18px;padding:28px 26px;box-shadow:0 10px 28px rgba(11,58,71,.07)}
.skb-step-n{width:46px;height:46px;border-radius:13px;background:#17B0D4;color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;font-weight:600}
.skb-step h3{font-size:18px;font-weight:600;color:#0B3A47;margin:16px 0 8px}
.skb-step p{font-size:14px;line-height:1.65;color:#54707A;margin:0}

/* FAQ — native <details>, so it works with JS disabled and stays crawlable. */
.skb-faq{background:#fff}
.skb-faq .sk-wrap{max-width:900px}
.skb-faq-list{display:flex;flex-direction:column;gap:14px}
.skb-faq-item{background:#fff;border:1px solid #E4EDF0;border-radius:16px;overflow:hidden}
.skb-faq-item summary{padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;font-size:16.5px;font-weight:600;color:#0B3A47;list-style:none}
.skb-faq-item summary::-webkit-details-marker{display:none}
.skb-faq-item summary:hover{background:#F8FCFD}
.skb-faq-i{width:28px;height:28px;border-radius:50%;background:#E4F6FB;color:#0C7D9B;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;transition:transform .2s}
.skb-faq-item[open] .skb-faq-i{transform:rotate(45deg)}
.skb-faq-item p{margin:0;padding:0 24px 24px;font-size:15px;line-height:1.8;color:#54707A}

/* TEAM slot */
.skb-team{background:#fff}
.skb-doctors-slot{min-height:80px}
/* The plugin still draws its own heading, stat counters and branch picker even
   with header="no" filters="no". On a branch page that duplicates our <h2> and
   offers a branch switcher to someone already on a branch — so hide them here.
   Scoped to #skb-team, leaving the full directory page untouched. */
#skb-team .skdoc-hd,#skb-team .skdoc-toolbar,#skb-team .skdoc-resultrow{display:none}

/* PRICES — panel ที่ชี้ไปหน้าราคากลาง.
   Dark section, matching the design: prices are the one block meant to stop the
   eye on the way down the page. */
.skb-prices{background:#0B3A47}
.skb-price-panel{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:26px;padding:46px 48px}
@media(max-width:760px){.skb-price-panel{padding:32px 24px}}
/* Two columns on desktop: treatment info left, payment card right. Stacks on
   narrow screens. */
/* Top-align so the heading and the payment graphic start on the same line. The
   note now sits under the buttons in the left column, so its divider spans only
   that column instead of running under the image. */
.skb-price-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
@media(min-width:900px){.skb-price-grid{grid-template-columns:1.15fr 1fr;gap:48px}}
.skb-prices .sk-head-sub{color:#BCD6DF;max-width:640px;margin-bottom:0}
.skb-price-chips{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 4px}
.skb-chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.17);color:#DCEBF0;border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:500}
.skb-price-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.skb-price-note{font-size:13px;color:#93B0BB;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);line-height:1.7}
/* Three note lines, each with a teal asterisk marker. Divider sits above the
   list and spans only the left column. */
.skb-price-notes{list-style:none;margin:26px 0 0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:9px}
.skb-price-notes li{position:relative;padding-left:17px;font-size:13px;color:#93B0BB;line-height:1.65}
.skb-price-notes li::before{content:"*";position:absolute;left:0;top:1px;color:#7FE0F5;font-weight:700}

/* PAYMENT as a ready-made graphic. The image carries its own light background and
   framing, so it drops straight in — just rounded to match the panel. */
.skb-pay-img{padding:0;background:none;border:0;border-radius:20px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.22)}
.skb-pay-img img{display:block;width:100%;height:auto}

/* PAYMENT card — a lighter inset panel inside the dark price panel. */
.skb-pay{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:26px 26px 24px}
.skb-pay-title{color:#fff;font-size:16px;font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:9px}
.skb-pay-title::before{content:"";width:18px;height:2px;border-radius:2px;background:#7FE0F5}
.skb-pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.skb-pay-item{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:12px 13px;color:#E4F1F5;font-size:13.5px;font-weight:500;line-height:1.3}
.skb-pay-ico{flex-shrink:0;width:30px;height:30px;border-radius:9px;background:rgba(127,224,245,.14);color:#7FE0F5;display:flex;align-items:center;justify-content:center}
.skb-pay-ico svg{width:18px;height:18px}
/* Installment — the one thing worth pulling out, so it gets the teal highlight. */
.skb-pay-inst{display:flex;align-items:center;gap:11px;margin-top:14px;background:linear-gradient(135deg,rgba(23,176,212,.22),rgba(23,176,212,.1));border:1px solid rgba(127,224,245,.35);border-radius:13px;padding:13px 15px;color:#EAF9FD;font-size:13.5px;font-weight:600;line-height:1.4}
.skb-pay-inst-ico{flex-shrink:0;color:#7FE0F5}
.skb-pay-inst-ico svg{width:22px;height:22px;display:block}

/* GALLERY.
   Mobile: featured photo full-width on top, the other 8 in a 2-col × 4-row grid.
   Desktop (>=820px): 4 columns with the featured tile 2x2 — storefront leads,
   the 9 photos fill the 4x3 grid with no gap. */
.skb-gallery{background:#fff}
.skb-gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.skb-gallery-item{border:0;padding:0;margin:0;border-radius:16px;overflow:hidden;background:#EAF7FB;cursor:pointer;display:block;position:relative;aspect-ratio:3/2}
.skb-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.skb-gallery-item:hover img{transform:scale(1.06)}
.skb-gallery-item::after{content:"";position:absolute;inset:0;background:rgba(11,58,71,0);transition:background .2s}
.skb-gallery-item:hover::after{background:rgba(11,58,71,.08)}
.skb-gallery-item:focus-visible{outline:3px solid #17B0D4;outline-offset:2px}
/* Mobile: featured breaks out to full width across both columns. */
.skb-gallery-featured{grid-column:1 / -1;aspect-ratio:16/10}
@media(min-width:820px){
	.skb-gallery-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px}
	.skb-gallery-item{aspect-ratio:auto}
	.skb-gallery-featured{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
}

/* LIGHTBOX */
.skb-lightbox{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
	background:rgba(6,26,32,.92);padding:32px;animation:skb-lb-in .18s ease}
.skb-lightbox[hidden]{display:none}
@keyframes skb-lb-in{from{opacity:0}to{opacity:1}}
.skb-lb-img{max-width:min(1100px,92vw);max-height:88vh;width:auto;height:auto;border-radius:12px;
	box-shadow:0 24px 70px rgba(0,0,0,.5);display:block}
.skb-lb-close{position:absolute;top:20px;right:24px;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
	background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.15s}
.skb-lb-close:hover{background:rgba(255,255,255,.28)}
.skb-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
	background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.15s}
.skb-lb-nav:hover{background:rgba(255,255,255,.26)}
.skb-lb-prev{left:20px}.skb-lb-next{right:20px}
@media(max-width:640px){.skb-lb-nav{width:42px;height:42px;font-size:24px}.skb-lb-prev{left:8px}.skb-lb-next{right:8px}.skb-lightbox{padding:16px}}
body.skb-lb-open{overflow:hidden}

/* REVIEWS */
.skb-reviews{background:#F4FAFC}
.skb-rev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:38px}
.skb-rev-score{display:flex;align-items:center;gap:14px;background:#F4FBFD;border:1px solid #DCEBF0;border-radius:18px;padding:14px 22px}
.skb-rev-num{font-size:40px;font-weight:500;color:#0B3A47;line-height:1}
.skb-rev-stars{color:#F5A623;font-size:17px;letter-spacing:2px}
.skb-rev-stars.sm{font-size:14px}
.skb-rev-count{font-size:13px;color:#5B7680;margin-top:3px}
.skb-rev-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:700px){.skb-rev-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.skb-rev-grid{grid-template-columns:repeat(3,1fr)}}
.skb-rev-card{background:#fff;border:1px solid #E4EDF0;border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 22px rgba(11,58,71,.05);transition:.18s}
.skb-rev-card:hover{border-color:#BFE4EE;box-shadow:0 14px 32px rgba(11,58,71,.09)}
.skb-rev-text{font-size:14.5px;line-height:1.8;color:#41606B;margin:0;flex:1;
	display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.skb-rev-author{display:flex;align-items:center;gap:11px;padding-top:12px;border-top:1px solid #F2F7F9}
.skb-rev-author img,.skb-rev-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;object-fit:cover}
.skb-rev-avatar{background:#17B0D4;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.skb-rev-author b{display:block;font-size:14px;color:#0B3A47}
.skb-rev-author span{display:block;font-size:12px;color:#8AA1AB;margin-top:1px}
.skb-rev-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:30px}
.skb-rev-src{font-size:13px;color:#8AA1AB}

/* LOCATION — light section per the design. */
.skb-location{background:#F4FAFC}
.skb-loc-grid{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:900px){.skb-loc-grid{grid-template-columns:1fr 1.1fr}}
.skb-loc-info{display:flex;flex-direction:column;gap:18px}
.skb-loc-row{display:flex;flex-direction:column;gap:5px}
.skb-loc-row b{color:#0C7D9B;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.skb-loc-row span{color:#41606B;font-size:15.5px;line-height:1.7}
.skb-loc-row a{color:#0B3A47;text-decoration:none;font-weight:500}
.skb-loc-row a:hover{color:#0E8CAE}
.skb-loc-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.skb-loc-map{border-radius:20px;overflow:hidden;min-height:340px;box-shadow:0 14px 36px rgba(11,58,71,.12)}
.skb-loc-map iframe{width:100%;height:100%;min-height:340px;border:0;display:block}

/* BOOKING */
/* padding-top was 0, which pinned the card straight onto the dark location
   section above it with no breathing room. */
.skb-book-wrap{padding:56px 32px}
.skb-book{background:linear-gradient(135deg,#17B0D4,#0E8CAE);border-radius:28px;padding:52px 56px;color:#fff;box-shadow:0 24px 56px rgba(14,140,174,.28)}
/* Two columns when the callback panel is present: message left, register right. */
.skb-book-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media(min-width:860px){.skb-book-grid{grid-template-columns:1.25fr .9fr;gap:44px}}
.skb-book-title{font-size:36px;margin:0;line-height:1.25}
@media(max-width:900px){.skb-book{padding:38px 26px}.skb-book-title{font-size:27px}}
.skb-book-sub{font-size:16.5px;opacity:.93;margin:14px 0 28px}
.skb-book-btns{display:flex;gap:12px;flex-wrap:wrap}
/* On mobile keep LINE / Facebook / phone on one row: no wrapping, tighter
   padding, and each button shrinks to share the width evenly. */
@media(max-width:560px){
	/* Centre the booking content on mobile. */
	.skb-book-main{text-align:center}
	.skb-book-main .skb-book-sub{margin-left:auto;margin-right:auto}
	/* Row 1: LINE + Facebook side by side. Row 2: the phone button full width, so
	   the number never has to be squeezed. */
	.skb-book-btns{flex-wrap:wrap;gap:8px}
	/* #sk-branch prefix so this beats the id-scoped #sk-branch .sk-btn base rule
	   (padding/font-size live there); without it the buttons keep their full
	   padding and overflow the card. */
	#sk-branch .skb-book-btns .sk-btn{flex:1 1 0;min-width:0;justify-content:center;padding:12px 10px;font-size:13.5px;gap:5px}
	#sk-branch .skb-book-btns .skb-book-tel{flex:1 1 100%}
}
/* Callback register panel — a lighter inset card on the right, with an orange
   accent so the primary action stands out from the LINE/Facebook/phone row. */
.skb-book-reg{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);border-radius:20px;padding:28px 28px 30px;text-align:center}
.skb-book-reg-ico{width:52px;height:52px;border-radius:15px;background:#FF7F40;color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;box-shadow:0 4px 12px rgba(255,127,64,.3)}
.skb-book-reg-ico svg{width:26px;height:26px}
.skb-book-reg h3{margin:0 0 8px;font-size:20px;font-weight:700;color:#fff}
.skb-book-reg p{margin:0 0 20px;font-size:14.5px;line-height:1.6;color:#EAF9FD}
/* Orange CTA, #FF7F40 as requested by the client. White text on this bright
   orange is 2.5:1 — below WCAG AA (4.5); a subtle shadow aids legibility but
   does not change the ratio. Dark navy text would clear AA at 4.9:1 if strict
   compliance is wanted. */
#sk-branch .skb-book-reg-btn{width:100%;justify-content:center;font-weight:700;font-size:16px;padding:15px 26px;
	background:#FF7F40;color:#fff;text-shadow:0 1px 2px rgba(120,45,0,.5);box-shadow:0 5px 14px rgba(255,127,64,.32)}
#sk-branch .skb-book-reg-btn:hover{background:#F5732F;color:#fff;box-shadow:0 7px 18px rgba(255,127,64,.4)}

/* BOOKING FORM MODAL */
.skb-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:flex-start;justify-content:center;
	background:rgba(6,26,32,.9);padding:40px 20px;overflow-y:auto;animation:skb-lb-in .18s ease}
.skb-modal[hidden]{display:none}
.skb-modal-box{position:relative;background:#fff;border-radius:20px;width:100%;max-width:620px;margin:auto;
	padding:34px 34px 30px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
@media(max-width:560px){.skb-modal-box{padding:26px 20px 22px}.skb-modal{padding:20px 12px}}
.skb-modal-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
	background:#F1F5F7;color:#0B3A47;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.15s}
.skb-modal-close:hover{background:#E1EAEE}
.skb-modal-head{margin:0 30px 20px 0}
.skb-modal-head h3{margin:0;font-size:22px;font-weight:700;color:#0B3A47}
.skb-modal-head p{margin:6px 0 0;font-size:14.5px;color:#5B7680;line-height:1.6}
/* Let the Ninja Form use the full width of the modal. */
.skb-modal-body .nf-form-cont,.skb-modal-body .nf-form-layout{max-width:100%}
body.skb-modal-open{overflow:hidden}

/* (Other Branches section removed — the footer already lists the branches.) */

@media(max-width:640px){
	#sk-branch .sk-sec{padding:56px 22px}
	#sk-branch .sk-h2{font-size:28px}
	.skb-hero-grid{padding:44px 22px 54px}
	/* Keep the two price buttons on one row instead of stacking: equal-width
	   pills, no wrapping to a second column. The longer label may run to two
	   lines inside its button, and the flex row keeps both the same height. */
	.skb-price-btns{flex-wrap:nowrap;gap:10px}
	/* #sk-branch prefix to beat the id-scoped .sk-btn base padding/font. */
	#sk-branch .skb-price-btns .sk-btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;padding:12px 12px;font-size:13.5px;gap:5px}
}