/* ============================================================
   genting-dream-cabins.php — page-specific styles.
   Common tokens, header, footer, modal live in main.css.
============================================================ */

/* PAGE HERO (similar to itinerary phero) */
.phero{position:relative;color:#fff;overflow:hidden;padding:64px 0 72px}
.phero-bg{position:absolute;inset:0;z-index:0}
.phero-bg img{width:100%;height:100%;object-fit:cover}
.phero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,rgba(8,29,54,.95) 0%,rgba(8,29,54,.82) 45%,rgba(8,29,54,.5) 100%)}
.phero .wrap{position:relative;z-index:5}
.crumbs{font-size:.86rem;color:#a9bccf;margin-bottom:20px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:#cdd9e5}.crumbs a:hover{color:#fff}
.crumbs span{color:#ff9684}
.phero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);color:#fff;max-width:820px;margin-bottom:16px}
.phero h1 em{font-style:italic;color:#ffb3a3}
.phero p{font-size:clamp(1rem,1.7vw,1.16rem);color:#d3deea;max-width:660px;margin-bottom:28px}
.phero-actions{display:flex;gap:14px;flex-wrap:wrap}
.phero-meta{display:flex;gap:30px;margin-top:36px;flex-wrap:wrap;padding-top:28px;border-top:1px solid rgba(255,255,255,.15)}
.phero-meta div b{font-family:'Playfair Display';font-size:1.5rem;color:#fff;display:block;line-height:1}
.phero-meta div b span{color:#ff9684}
.phero-meta div small{font-size:.8rem;color:#9fb1c4}

/* STICKY QUICK NAV */
.qnav{position:sticky;top:73px;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.qnav a{flex:none;font-size:.86rem;font-weight:700;color:var(--slate);padding:8px 16px;border-radius:50px;border:1px solid var(--line);transition:.2s;white-space:nowrap}
.qnav a:hover{color:var(--coral);border-color:var(--coral)}

/* INTRO + QUICK PICKER */
.intro-copy{max-width:920px}
.intro-copy p{color:var(--slate);font-size:1.07rem;margin-bottom:16px}
.intro-copy strong{color:var(--ink)}
.picker{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px;margin-top:30px;box-shadow:var(--sh-sm)}
.picker h3{font-size:1.2rem;margin-bottom:14px;color:var(--navy)}
.picker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pick{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;cursor:pointer;transition:.2s;text-align:left}
.pick:hover{border-color:var(--coral);background:#fff;transform:translateY(-3px);box-shadow:var(--sh-sm)}
.pick b{display:block;font-family:'Plus Jakarta Sans';font-weight:700;font-size:.95rem;color:var(--navy);margin-bottom:2px}
.pick span{font-size:.82rem;color:var(--slate)}
.pick .pt{display:inline-block;margin-top:8px;font-size:.7rem;font-weight:800;color:var(--coral);background:var(--coral-soft);padding:2px 9px;border-radius:50px;letter-spacing:.03em}

/* CABIN DETAIL BLOCK */
.cabin-block{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:40px;box-shadow:var(--sh-sm)}
.cb-head{display:grid;grid-template-columns:1fr 1.05fr;gap:0}
.cb-media{position:relative;min-height:360px}
.cb-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cb-media .cb-badge{position:absolute;top:18px;left:18px;background:var(--coral);color:#fff;padding:7px 15px;border-radius:8px;font-size:.78rem;font-weight:800;z-index:2;box-shadow:0 4px 12px rgba(232,80,58,.35)}
.cb-media .cb-badge.navy{background:var(--navy)}
.cb-media .cb-badge.gold{background:linear-gradient(135deg,var(--gold),#d9b06d);color:var(--navy-deep)}
.cb-info{padding:36px 38px;display:flex;flex-direction:column;justify-content:center}
.cb-info .cat{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);margin-bottom:10px}
.cb-info h2{font-size:clamp(1.6rem,2.6vw,2rem);margin-bottom:10px}
.cb-info > p{font-size:1rem;color:var(--slate);margin-bottom:20px}
.cb-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px;padding:18px 20px;background:var(--bg-soft);border-radius:var(--r);border:1px solid var(--line)}
.cb-specs div small{display:block;font-size:.7rem;font-weight:800;color:var(--slate-light);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.cb-specs div b{font-family:'Playfair Display';font-size:1.1rem;color:var(--navy);font-weight:700;display:block;line-height:1.15}
.cb-features{margin-bottom:22px}
.cb-features h4{font-family:'Plus Jakarta Sans';font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:10px}
.cb-features ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.cb-features li{font-size:.9rem;color:var(--ink);padding:5px 0;display:flex;gap:9px;align-items:flex-start}
.cb-features li::before{content:'✓';color:var(--coral);font-weight:800;flex:none}
.cb-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cb-from{font-family:'Playfair Display';font-size:1.5rem;font-weight:700;color:var(--navy);margin-right:6px}
.cb-from small{font-size:.74rem;color:var(--slate);font-family:'Plus Jakarta Sans';font-weight:500;display:block}

/* PROS / CONS (collapsible inside cabin block) */
.cb-proscons{padding:24px 38px 30px;border-top:1px solid var(--line);background:#fafbfd}
.cb-proscons-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pro,.con{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.pro h5,.con h5{font-family:'Plus Jakarta Sans';font-weight:800;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.pro h5{color:#2e7d4a}
.con h5{color:var(--coral-deep)}
.pro ul,.con ul{list-style:none}
.pro li,.con li{font-size:.88rem;color:var(--ink);padding:4px 0;display:flex;gap:8px}
.pro li::before{content:'+';color:#2e7d4a;font-weight:800;flex:none}
.con li::before{content:'−';color:var(--coral);font-weight:800;flex:none}

/* PALACE PERKS GRID */
.palace{position:relative;color:#fff;overflow:hidden}
.palace-bg{position:absolute;inset:0;z-index:0}
.palace-bg img{width:100%;height:100%;object-fit:cover}
.palace-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(8,29,54,.96),rgba(8,29,54,.7))}
.palace .wrap{position:relative;z-index:3;padding-top:80px;padding-bottom:80px}
.palace .sec-head h2,.palace h2{color:#fff}
.palace .sec-head p{color:#cdd9e5}
.palace .eyebrow{color:#ffd28e}.palace .eyebrow::before,.palace .eyebrow.c::after{background:#ffd28e}
.perks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:10px}
.perk{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:var(--r);padding:22px 20px;backdrop-filter:blur(6px);transition:.25s}
.perk:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)}
.perk .pi{font-size:1.6rem;margin-bottom:10px}
.perk b{display:block;font-family:'Plus Jakarta Sans';font-weight:700;font-size:.96rem;color:#fff;margin-bottom:4px}
.perk span{font-size:.86rem;color:#bcccdc}

/* DECK GUIDE */
.deck-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
.deck-list{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.deck-row{display:grid;grid-template-columns:80px 1fr auto;gap:18px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line-soft)}
.deck-row:last-child{border-bottom:none}
.deck-row .dno{font-family:'Playfair Display';font-size:1.4rem;font-weight:700;color:var(--coral);text-align:center}
.deck-row .dwhat b{display:block;font-family:'Plus Jakarta Sans';font-weight:700;font-size:.96rem;color:var(--ink)}
.deck-row .dwhat small{font-size:.84rem;color:var(--slate)}
.deck-row .dtag{font-size:.74rem;font-weight:800;padding:3px 10px;border-radius:50px;letter-spacing:.03em;white-space:nowrap}
.deck-row .dtag.s{background:rgba(46,125,74,.12);color:#2e7d4a}
.deck-row .dtag.m{background:var(--coral-soft);color:var(--coral-deep)}
.deck-row .dtag.l{background:rgba(199,154,75,.18);color:#8c6913}
.deck-tip{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;height:fit-content;position:sticky;top:120px}
.deck-tip h3{font-size:1.2rem;margin-bottom:10px}
.deck-tip p{font-size:.94rem;color:var(--slate);margin-bottom:14px}
.deck-tip ul{list-style:none}
.deck-tip li{font-size:.9rem;color:var(--ink);padding:6px 0;display:flex;gap:9px;align-items:flex-start}
.deck-tip li::before{content:'★';color:var(--coral);flex:none}

/* HOW TO CHOOSE — DECISION CARDS */
.choose-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.choose{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;transition:.3s}
.choose:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:#dfe6ee}
.choose .ci{width:50px;height:50px;border-radius:13px;background:var(--coral-soft);display:grid;place-items:center;margin-bottom:14px;font-size:1.4rem}
.choose h3{font-size:1.2rem;margin-bottom:6px}
.choose .ctag{font-size:.78rem;font-weight:800;color:var(--coral);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;display:block}
.choose p{font-size:.92rem;color:var(--slate);margin-bottom:14px}
.choose .crec{font-size:.86rem;color:var(--ink);background:var(--bg-soft);padding:10px 14px;border-radius:8px;border-left:3px solid var(--coral)}
.choose .crec b{color:var(--navy)}

/* COMPARE TABLE */
.cmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
table.cmp{width:100%;border-collapse:collapse;font-size:.92rem;min-width:780px;background:#fff}
table.cmp th{background:var(--navy);color:#fff;text-align:left;padding:16px 18px;font-family:'Plus Jakarta Sans';font-weight:700;font-size:.8rem;letter-spacing:.02em}
table.cmp td{padding:14px 18px;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.cmp tr:last-child td{border-bottom:none}
table.cmp tbody tr:hover td{background:var(--bg-soft)}
table.cmp .rt{font-weight:700;color:var(--navy)}
table.cmp .price-c{font-family:'Playfair Display';font-weight:700;color:var(--coral);white-space:nowrap}
.tcheck{color:#2e7d4a;font-weight:800}
.tx{color:#c44}

/* WHAT'S INCLUDED */
.incl-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.incl{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.incl h3{font-size:1.2rem;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.incl ul{list-style:none}
.incl li{font-size:.93rem;color:var(--ink);padding:7px 0;display:flex;gap:10px;border-bottom:1px dashed var(--line)}
.incl li:last-child{border-bottom:none}
.incl.yes li::before{content:'✓';color:#2e7d4a;font-weight:800;flex:none}
.incl.no li::before{content:'×';color:var(--coral);font-weight:800;flex:none;font-size:1.1rem;line-height:1}

/* INSIDER TIPS */
.tips-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tip{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;transition:.3s}
.tip:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.tip .t-ico{width:48px;height:48px;border-radius:12px;background:var(--coral-soft);display:grid;place-items:center;margin-bottom:14px;font-size:1.3rem}
.tip h3{font-size:1.14rem;margin-bottom:8px}
.tip p{font-size:.92rem;color:var(--slate)}

/* RESPONSIVE */
@media(max-width:1000px){
  .picker-grid{grid-template-columns:1fr 1fr}
  .perks-grid{grid-template-columns:1fr 1fr}
  .deck-grid{grid-template-columns:1fr}
  .deck-tip{position:static}
  .choose-grid,.tips-grid{grid-template-columns:1fr 1fr}
  .cb-head{grid-template-columns:1fr}
  .cb-media{min-height:260px}
  .cb-specs{grid-template-columns:1fr 1fr 1fr}
  .incl-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .qnav{top:69px}
  .picker-grid,.perks-grid{grid-template-columns:1fr 1fr}
  .choose-grid,.tips-grid{grid-template-columns:1fr}
  .cb-info{padding:28px 24px}
  .cb-proscons{padding:22px 24px 26px}
  .cb-proscons-grid{grid-template-columns:1fr}
  .cb-features ul{grid-template-columns:1fr}
  .deck-row{grid-template-columns:60px 1fr;gap:12px;padding:12px 16px}
  .deck-row .dtag{grid-column:2;justify-self:start;margin-top:4px}
  .phero-meta{gap:20px}
}
@media(max-width:520px){
  .picker-grid,.perks-grid{grid-template-columns:1fr}
  .cb-specs{grid-template-columns:1fr 1fr}
}