/* Skytrain Dental — Promotions page (scoped #sk-promos).
   Styles BOTH the theme chrome (skpr-*) AND the promotions plugin's shortcode
   markup (.skpromos / .skpromo2), recoloured to the site's cyan/navy palette.
   The plugin ships no CSS of its own, so this file is the only source. */
#sk-promos,#sk-promos *{font-family:'Noto Sans Thai',sans-serif!important;box-sizing:border-box}
#sk-promos{color:#34505A;background:#fff}
#sk-promos a{text-decoration:none}
#sk-promos .skpr-wrap{max-width:1240px;margin:0 auto;padding-left:32px;padding-right:32px}
@media(max-width:640px){#sk-promos .skpr-wrap{padding-left:20px;padding-right:20px}}

/* BREADCRUMB */
.skpr-crumbbar{background:#F4FAFC;border-bottom:1px solid #E4EDF0}
#sk-promos .skpr-crumb{max-width:1240px;margin:0 auto;padding:14px 32px;font-size:13px;color:#6B838C;display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:640px){#sk-promos .skpr-crumb{padding-left:20px;padding-right:20px}}
.skpr-crumb a{color:#6B838C}.skpr-crumb a:hover{color:#0E8CAE}
.skpr-crumb span:not(.skpr-here){color:#C2D4DA}
.skpr-here{color:#0B3A47;font-weight:600}

/* BODY SPACING */
#sk-promos .skpr-body{padding-top:48px;padding-bottom:64px}
@media(max-width:640px){#sk-promos .skpr-body{padding-top:32px}}

/* ===== PLUGIN HEAD → HERO ===== */
#sk-promos .skpromos-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:34px}
#sk-promos .skpromos-h2{margin:0;font-size:40px;line-height:1.25;font-weight:700;color:#0B3A47;letter-spacing:-.01em}
@media(max-width:640px){#sk-promos .skpromos-h2{font-size:28px}}
#sk-promos .skpromos-sub{margin:12px 0 0;font-size:16.5px;line-height:1.85;color:#4A6570;max-width:600px}

/* filter chips */
#sk-promos .skpromos-filter{display:flex;gap:9px;flex-wrap:wrap}
#sk-promos .skpromos-filter button{background:#fff;border:1px solid #DCE7EB;color:#3C5C66;border-radius:999px;padding:9px 18px;font-size:14.5px;font-weight:500;cursor:pointer;transition:.15s;line-height:1.2}
#sk-promos .skpromos-filter button:hover{border-color:#0E8CAE;color:#0E8CAE}
#sk-promos .skpromos-filter button.is-on{background:#0B3A47;border-color:#0B3A47;color:#fff}

/* ===== CARD GRID ===== */
#sk-promos .skpromos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:1000px){#sk-promos .skpromos-grid{grid-template-columns:repeat(3,1fr);gap:22px}}
@media(max-width:760px){#sk-promos .skpromos-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:460px){#sk-promos .skpromos-grid{grid-template-columns:1fr}}

#sk-promos .skpromo2{display:flex;flex-direction:column;background:#fff;border:1px solid #E4EDF0;border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(11,58,71,.04);transition:transform .16s,box-shadow .16s,border-color .16s}
#sk-promos .skpromo2:hover{border-color:#BFE6F0;box-shadow:0 14px 32px rgba(11,58,71,.12);transform:translateY(-3px)}
#sk-promos .skpromo2-img{position:relative;aspect-ratio:819/1024;overflow:hidden;background:#EAF7FB}
#sk-promos .skpromo2-img img{width:100%;height:100%;object-fit:cover;display:block}
#sk-promos .skpromo2-hot{position:absolute;top:12px;left:12px;background:#EE3E8C;color:#fff;font-size:12px;font-weight:700;letter-spacing:.05em;padding:5px 12px;border-radius:999px;box-shadow:0 2px 8px rgba(238,62,140,.4)}
#sk-promos .skpromo2-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
#sk-promos .skpromo2-cat{font-size:12.5px;font-weight:600;color:#0E8CAE}
#sk-promos .skpromo2-title{margin:0;font-size:17.5px;line-height:1.4;font-weight:600;color:#0B3A47}
#sk-promos .skpromo2-foot{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:#8AA2AB;flex-wrap:wrap}
#sk-promos .skpromo2-branch{background:#EAF7FB;color:#0E8CAE;padding:3px 10px;border-radius:999px;font-weight:600;white-space:nowrap}

/* hidden by the category filter */
#sk-promos .skpromo2.is-hidden{display:none}

/* clickable card (opens a link or the image lightbox) + zoom hint */
#sk-promos .skpromo2.is-click{cursor:pointer}
#sk-promos .skpromo2.is-click:focus-visible{outline:2px solid #17B0D4;outline-offset:2px}
#sk-promos .skpromo2-zoom{position:absolute;bottom:12px;right:12px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:rgba(11,58,71,.55);color:#fff;border-radius:50%;opacity:0;transform:scale(.9);transition:opacity .16s,transform .16s;pointer-events:none}
#sk-promos .skpromo2.is-click:hover .skpromo2-zoom,#sk-promos .skpromo2.is-click:focus-visible .skpromo2-zoom{opacity:1;transform:scale(1)}

/* ===== IMAGE LIGHTBOX (markup shipped by the plugin, styled here) ===== */
body.skpromo-noscroll{overflow:hidden}
#sk-promos .skpromo-lb[hidden]{display:none}
#sk-promos .skpromo-lb{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:24px}
#sk-promos .skpromo-lb-bg{position:absolute;inset:0;background:rgba(6,26,33,.82);cursor:zoom-out}
#sk-promos .skpromo-lb-fig{position:relative;margin:0;max-width:min(92vw,560px);max-height:92vh;z-index:1}
#sk-promos .skpromo-lb-fig img{display:block;width:100%;height:auto;max-height:92vh;object-fit:contain;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
#sk-promos .skpromo-lb-x{position:absolute;top:-16px;right:-16px;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:#0B3A47;font-size:26px;line-height:40px;text-align:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:transform .12s}
#sk-promos .skpromo-lb-x:hover{transform:scale(1.08)}
@media(max-width:560px){#sk-promos .skpromo-lb-x{top:8px;right:8px}}

/* empty state (category with no promos) */
#sk-promos .skpromos-empty{grid-column:1/-1;padding:56px 0;text-align:center;color:#6B838C;font-size:16px}

/* ===== FAQ ACCORDION (native <details>, no JS) ===== */
.skpr-faq{background:#F4FAFC;border-top:1px solid #E4EDF0}
#sk-promos .skpr-faq-in{max-width:860px;margin:0 auto;padding:64px 32px}
@media(max-width:640px){#sk-promos .skpr-faq-in{padding:46px 20px}}
#sk-promos .skpr-faq-h{margin:0 0 26px;font-size:30px;line-height:1.3;font-weight:700;color:#0B3A47;text-align:center}
@media(max-width:640px){#sk-promos .skpr-faq-h{font-size:24px}}
#sk-promos .skpr-faq-list{display:flex;flex-direction:column;gap:12px}
#sk-promos .skpr-faq-item{background:#fff;border:1px solid #E4EDF0;border-radius:14px;overflow:hidden;transition:border-color .15s}
#sk-promos .skpr-faq-item[open]{border-color:#BFE6F0}
#sk-promos .skpr-faq-q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-size:16.5px;font-weight:600;color:#0B3A47}
#sk-promos .skpr-faq-q::-webkit-details-marker{display:none}
@media(max-width:640px){#sk-promos .skpr-faq-q{font-size:15px;padding:16px 18px}}
#sk-promos .skpr-faq-ico{position:relative;flex-shrink:0;width:20px;height:20px}
#sk-promos .skpr-faq-ico::before,#sk-promos .skpr-faq-ico::after{content:"";position:absolute;background:#0E8CAE;border-radius:2px;transition:transform .2s,opacity .2s}
#sk-promos .skpr-faq-ico::before{top:9px;left:2px;width:16px;height:2px}
#sk-promos .skpr-faq-ico::after{top:2px;left:9px;width:2px;height:16px}
#sk-promos .skpr-faq-item[open] .skpr-faq-ico::after{transform:rotate(90deg);opacity:0}
#sk-promos .skpr-faq-a{padding:0 22px 20px;font-size:15.5px;line-height:1.9;color:#4A6570}
@media(max-width:640px){#sk-promos .skpr-faq-a{padding:0 18px 18px;font-size:14.5px}}

/* ===== BOOKING CTA ===== */
.skpr-cta{background:#0B3A47}
#sk-promos .skpr-cta-in{max-width:1240px;margin:0 auto;padding:56px 32px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
@media(max-width:820px){#sk-promos .skpr-cta-in{grid-template-columns:1fr;gap:22px;padding:44px 20px}}
.skpr-cta-k{font-family:'Noto Serif Display',serif!important;font-style:italic;font-size:18px;color:#7FE0F5}
.skpr-cta-title{margin:10px 0 0;font-size:29px;line-height:1.35;font-weight:700;color:#fff}
@media(max-width:640px){.skpr-cta-title{font-size:23px}}
.skpr-cta-sub{margin:12px 0 0;font-size:15.5px;line-height:1.8;color:rgba(255,255,255,.72);max-width:620px}
.skpr-cta-btns{display:flex;flex-direction:column;gap:12px;min-width:210px}
@media(max-width:820px){.skpr-cta-btns{flex-direction:row;flex-wrap:wrap;min-width:0}}
#sk-promos .skpr-cta-line,#sk-promos .skpr-cta-tel{text-align:center;font-size:15px;font-weight:600;padding:15px 28px;border-radius:999px}
#sk-promos .skpr-cta-line{background:#17B0D4;color:#fff}
#sk-promos .skpr-cta-line:hover{background:#0E8CAE}
#sk-promos .skpr-cta-tel{border:1px solid rgba(255,255,255,.35);color:#fff}
#sk-promos .skpr-cta-tel:hover{border-color:#fff}