/* Skytrain Dental — dental fees page (scoped under #sk-prices). */
/* One rule over every descendant with !important — the parent Dent-All theme
   sets fonts on table/th/td/a with id-level specificity, which otherwise leaks
   its own typeface into the price tables. */
#sk-prices,#sk-prices *{font-family:'Noto Sans Thai',sans-serif!important}
#sk-prices *{box-sizing:border-box}
#sk-prices .sk-wrap{max-width:1000px;margin:0 auto;padding:0 24px}

/* HERO */
.skp-hero{background:linear-gradient(160deg,#F4FBFD 0%,#FFFFFF 60%,#FDF4EE 100%);padding:80px 0 48px;text-align:center}
@media(max-width:640px){.skp-hero{padding:52px 0 44px}}
.skp-kicker{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#0E8CAE;margin-bottom:12px}
.skp-h1{font-size:40px;font-weight:700;color:#0B3A47;margin:0;line-height:1.2}
@media(max-width:640px){.skp-h1{font-size:30px}}
.skp-sub{font-size:16px;color:#4A6570;line-height:1.8;margin:16px auto 0;max-width:680px}

/* QUICK NAV — sticks under the header. Chips wrap and centre at every width so
   all categories are visible without any left/right scrolling. Compact sizing. */
/* No divider line — a soft shadow gives the sticky bar its edge instead. The
   inner column is narrowed to ~720px so the 11 chips break to a balanced 6 + 5
   and stay centred, rather than an uneven 8 + 3 across the full width.
   (#sk-prices prefix: the shared .sk-wrap rule sets padding/max-width with
   id-level specificity, so a plain .skp-nav-in would lose them.) */
.skp-nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px)}
/* The site header is sticky on mobile (<768px); a sticky category bar here would
   overlap it. Below 768px the bar scrolls away with the page instead. */
@media(max-width:767px){.skp-nav{position:static;box-shadow:none}}
#sk-prices .skp-nav-in{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:40px 15px!important;max-width:720px;margin:0 auto}
.skp-chip{background:#F1F9FC;border:1px solid #DCEBF0;color:#0E8CAE;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;transition:.15s}
.skp-chip:hover{background:#17B0D4;border-color:#17B0D4;color:#fff}
@media(max-width:640px){
	#sk-prices .skp-nav-in{gap:12px;max-width:100%}
	.skp-chip{padding:6px 12px;font-size:12.5px}
}

/* TABLES */
#sk-prices .skp-body{padding:40px 15px!important}
.skp-cat{margin-bottom:52px;scroll-margin-top:80px}
.skp-cat-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 22px}
.skp-cat-h{font-size:24px;font-weight:700;color:#0B3A47;margin:0;padding-left:14px;border-left:4px solid #17B0D4;line-height:1.3}
/* Link out to the SEO price article for this treatment. */
.skp-cat-link{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;background:#FFF1E9;border:1px solid #F8D3BE;color:#D4581A;font-size:13.5px;font-weight:600;padding:8px 15px;border-radius:999px;text-decoration:none;transition:.15s}
.skp-cat-link:hover{background:#F47B3F;border-color:#F47B3F;color:#fff}
.skp-cat-link span{font-size:15px}
/* Small inline link on a specific row. */
.skp-row-link{display:inline-flex;align-items:center;gap:4px;margin-left:10px;font-size:12.5px;font-weight:600;color:#0E8CAE;text-decoration:none;white-space:nowrap;vertical-align:middle}
.skp-row-link:hover{color:#F47B3F;text-decoration:underline}
.skp-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #E4EDF0;border-radius:16px;overflow:hidden}
.skp-table th{background:#0B3A47;color:#fff;font-size:14px;font-weight:600;text-align:left;padding:14px 20px}
.skp-table td{padding:14px 20px;font-size:15px;color:#34505A;border-top:1px solid #EEF3F5;line-height:1.5}
.skp-table tbody tr:nth-child(even){background:#F8FBFC}
.skp-table tbody tr:hover{background:#F1F9FC}
.skp-price-col{text-align:right;white-space:nowrap;font-weight:600;color:#0B3A47}
/* The price HEADER cell needs .skp-table th.skp-price-col to out-rank
   .skp-table th{text-align:left}; otherwise it stays left while the values
   below are right-aligned. */
.skp-table th.skp-price-col{color:#fff;text-align:right}
.skp-free{color:#06A550}

/* NOTES */
.skp-notes{margin-top:48px;padding:24px 26px;background:#F4FAFC;border:1px solid #E4EDF0;border-radius:14px}
.skp-notes p{margin:0 0 8px;font-size:13.5px;color:#5B7680;line-height:1.7}
.skp-notes p:last-child{margin-bottom:0}

/* CTA */
.skp-cta{margin-top:48px;text-align:center;background:linear-gradient(135deg,#17B0D4,#0E8CAE);border-radius:24px;padding:48px 32px;color:#fff}
.skp-cta h3{font-size:26px;font-weight:700;margin:0 0 8px}
@media(max-width:640px){.skp-cta h3{font-size:21px}}
.skp-cta p{font-size:16px;opacity:.94;margin:0 0 24px}
.skp-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
#sk-prices .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-prices .sk-btn-line{background:#06C755;color:#fff}
#sk-prices .sk-btn-line:hover{filter:brightness(1.05)}
#sk-prices .sk-btn-ghost{background:rgba(255,255,255,.16);color:#fff;border:1.5px solid rgba(255,255,255,.5)}
#sk-prices .sk-btn-ghost:hover{background:#fff;color:#0E8CAE}

/* Mobile: table stays 2-column (service / price), which reads fine. Breakpoint at
   640px so ordinary phones (not just <520px) get the roomier mobile spacing. */
@media(max-width:640px){
	.skp-table th,.skp-table td{padding:12px 14px;font-size:14px}
	/* body padding is set once (40px 15px !important) for every width above. */
	/* Tidy the category header on small screens: smaller heading, and the SEO
	   button drops below at a compact size instead of a big left-aligned pill. */
	.skp-cat-head{gap:10px;margin-bottom:18px}
	.skp-cat-h{font-size:21px}
	.skp-cat-link{font-size:12.5px;padding:6px 13px}
	.skp-cat{margin-bottom:44px}
}