/* ==================================================================
   SHAHMIE TRAVEL & TOURS — V23 HEADER, FLOATING ACTION & PROMOSI
   1) Elak pautan Log Masuk berganda pada desktop; kekal dalam mobile.
   2) Lebarkan butang floating ketika hover supaya teks tidak terpotong.
   3) Tingkatkan kontras dan susun atur halaman Promosi & Penajaan.
   4) Tambah komponen referral penajaan serta tip promosi online/offline.
   ================================================================== */
:root{
  --v23-maroon-950:#260208;
  --v23-maroon-900:#3e050d;
  --v23-maroon-800:#64101b;
  --v23-maroon-700:#82172a;
  --v23-gold:#d8a63b;
  --v23-gold-soft:#f5d986;
  --v23-cream:#fff9ef;
  --v23-paper:#ffffff;
  --v23-ink:#281d20;
  --v23-muted:#6e5d62;
  --v23-line:rgba(100,16,27,.15);
}

/* ---------- 1. Header: satu Log Masuk sahaja ---------- */
html body[data-layout="public"] #main-nav .mobile-nav-login{
  display:none!important;
}
@media(min-width:921px){
  html body[data-layout="public"] #main-nav.main-nav-clean>a.mobile-nav-login,
  html body[data-layout="public"] #main-nav .mobile-nav-login{
    display:none!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  html body[data-layout="public"] .header-actions>a[href*="login"]{
    display:inline-flex!important;
  }
}
@media(max-width:920px){
  html body[data-layout="public"] .header-actions>a[href*="login"]{
    display:none!important;
  }
  html body[data-layout="public"] #main-nav.main-nav-clean>a.mobile-nav-login,
  html body[data-layout="public"] #main-nav .mobile-nav-login{
    display:flex!important;
    width:100%!important;
    height:auto!important;
    min-height:52px!important;
    margin-top:12px!important;
    padding:13px 15px!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    overflow:visible!important;
  }
}

/* ---------- 2. Floating action: label lebih lebar ketika hover ---------- */
@media(min-width:561px){
  html body[data-layout="public"] .whatsapp-float .floating-action-stack{
    width:auto!important;
    max-width:calc(100vw - 24px)!important;
    align-items:flex-end!important;
    overflow:visible!important;
  }
  html body[data-layout="public"] .whatsapp-float .floating-action{
    width:62px!important;
    min-width:62px!important;
    min-height:62px!important;
    overflow:hidden!important;
    justify-content:flex-end!important;
  }
  html body[data-layout="public"] .whatsapp-float .floating-action:hover,
  html body[data-layout="public"] .whatsapp-float .floating-action:focus-visible{
    width:min(320px,calc(100vw - 30px))!important;
    min-width:min(320px,calc(100vw - 30px))!important;
  }
  html body[data-layout="public"] .whatsapp-float .floating-action-copy{
    width:0!important;
    max-width:0!important;
    min-width:0!important;
    opacity:0!important;
    margin:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    transition:width .24s ease,max-width .24s ease,opacity .18s ease,margin .24s ease!important;
  }
  html body[data-layout="public"] .whatsapp-float .floating-action:hover .floating-action-copy,
  html body[data-layout="public"] .whatsapp-float .floating-action:focus-visible .floating-action-copy{
    width:235px!important;
    max-width:235px!important;
    min-width:0!important;
    opacity:1!important;
    margin-right:11px!important;
    overflow:visible!important;
  }
  html body[data-layout="public"] .whatsapp-float .floating-action-copy strong{
    font-size:.96rem!important;
    line-height:1.25!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  html body[data-layout="public"] .whatsapp-float .floating-action-copy small{
    font-size:.78rem!important;
    line-height:1.35!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  html body[data-layout="public"] .whatsapp-float .floating-action-icon{
    width:46px!important;
    height:46px!important;
    flex:0 0 46px!important;
  }
}
@media(min-width:561px) and (max-width:760px){
  html body[data-layout="public"] .whatsapp-float .floating-action:hover,
  html body[data-layout="public"] .whatsapp-float .floating-action:focus-visible{
    width:min(286px,calc(100vw - 24px))!important;
    min-width:min(286px,calc(100vw - 24px))!important;
  }
  html body[data-layout="public"] .whatsapp-float .floating-action:hover .floating-action-copy,
  html body[data-layout="public"] .whatsapp-float .floating-action:focus-visible .floating-action-copy{
    width:202px!important;
    max-width:202px!important;
  }
}

/* ---------- 3. Promosi page: intro & readable text ---------- */
html body[data-page="agent-promotion"] .panel-content{
  background:
    radial-gradient(circle at 92% 2%,rgba(216,166,59,.13),transparent 26%),
    linear-gradient(180deg,#fffaf2 0%,#fff 44%,#fff8ed 100%)!important;
}
html body[data-page="agent-promotion"] .promotion-intro{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  min-height:290px!important;
  padding:44px 48px!important;
  border:1px solid rgba(246,216,134,.26)!important;
  border-radius:32px!important;
  background:
    linear-gradient(115deg,rgba(38,2,8,.97),rgba(100,16,27,.93) 56%,rgba(130,23,42,.78)),
    url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1800&q=82') center/cover!important;
  color:#fff!important;
  box-shadow:0 28px 70px rgba(64,5,15,.24)!important;
}
html body[data-page="agent-promotion"] .promotion-intro::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 72% 18%,rgba(245,217,134,.34),transparent 28%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 1px,transparent 1px 18px);
}
html body[data-page="agent-promotion"] .promotion-intro>div:first-child{
  position:relative!important;
  z-index:2!important;
  max-width:930px!important;
}
html body[data-page="agent-promotion"] .promotion-intro .eyebrow{
  color:#4a1705!important;
  background:linear-gradient(135deg,#fff1bd,#e3b74e)!important;
  border-color:rgba(255,255,255,.35)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.14)!important;
}
html body[data-page="agent-promotion"] .promotion-intro h2{
  max-width:900px!important;
  margin:14px 0 12px!important;
  color:#fff!important;
  font-size:clamp(2.25rem,4vw,4.25rem)!important;
  line-height:1.04!important;
  text-shadow:0 5px 24px rgba(0,0,0,.42)!important;
}
html body[data-page="agent-promotion"] .promotion-intro p{
  max-width:820px!important;
  margin:0!important;
  color:#fff5ed!important;
  font-size:1.05rem!important;
  line-height:1.68!important;
  text-shadow:0 2px 12px rgba(0,0,0,.34)!important;
}
html body[data-page="agent-promotion"] .promotion-intro-icon{
  position:relative!important;
  z-index:2!important;
  width:126px!important;
  height:126px!important;
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:34px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.08))!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 48px rgba(0,0,0,.2)!important;
  backdrop-filter:blur(8px)!important;
}
html body[data-page="agent-promotion"] .promotion-intro-badges{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin-top:24px!important;
}
html body[data-page="agent-promotion"] .promotion-intro-badges span{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:9px 13px!important;
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.1)!important;
  color:#fff!important;
  font-size:.88rem!important;
  font-weight:800!important;
  backdrop-filter:blur(8px)!important;
}
html body[data-page="agent-promotion"] .promotion-intro-badges i{color:var(--v23-gold-soft)!important}

/* ---------- 4. Poster preview: title / details always visible ---------- */
html body[data-page="agent-promotion"] .poster-card{
  overflow:hidden!important;
}
html body[data-page="agent-promotion"] .promo-html-banner{
  border:1px solid rgba(245,217,134,.36)!important;
  box-shadow:0 25px 64px rgba(55,3,12,.25)!important;
}
html body[data-page="agent-promotion"] .promo-html-overlay{
  background:
    linear-gradient(180deg,rgba(31,1,6,.16),rgba(54,3,12,.54) 44%,rgba(28,1,6,.98)),
    linear-gradient(90deg,rgba(38,2,8,.52),transparent 72%)!important;
}
html body[data-page="agent-promotion"] .promo-html-content{
  padding:22px 24px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(38,2,8,.78),rgba(100,16,27,.48))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(8px)!important;
}
html body[data-page="agent-promotion"] .promo-html-content>span{
  color:#ffe08d!important;
  text-shadow:0 2px 10px rgba(0,0,0,.55)!important;
}
html body[data-page="agent-promotion"] #promo-html-title,
html body[data-page="agent-promotion"] .promo-html-content h2{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:0 4px 20px rgba(0,0,0,.72)!important;
  opacity:1!important;
  visibility:visible!important;
}
html body[data-page="agent-promotion"] #promo-html-date{
  color:#ffe28e!important;
  text-shadow:0 2px 12px rgba(0,0,0,.68)!important;
}
html body[data-page="agent-promotion"] #promo-html-price{
  color:#fff5c9!important;
  text-shadow:0 3px 16px rgba(0,0,0,.68)!important;
}
html body[data-page="agent-promotion"] #promo-html-agent{
  color:#fff!important;
  text-shadow:0 2px 10px rgba(0,0,0,.65)!important;
}

/* ---------- 5. Referral penajaan ---------- */
html body[data-page="agent-promotion"] .sponsorship-referral-card{
  margin-bottom:22px!important;
  overflow:hidden!important;
  border:1px solid rgba(216,166,59,.28)!important;
  box-shadow:0 22px 58px rgba(100,16,27,.10)!important;
}
html body[data-page="agent-promotion"] .sponsorship-referral-card .panel-card-head{
  background:linear-gradient(135deg,#fff8e9,#fff)!important;
}
html body[data-page="agent-promotion"] .sponsor-referral-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr)!important;
  gap:24px!important;
  align-items:stretch!important;
}
html body[data-page="agent-promotion"] .sponsor-builder{
  display:grid!important;
  gap:16px!important;
}
html body[data-page="agent-promotion"] .sponsor-action-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
html body[data-page="agent-promotion"] .sponsor-preview{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  min-height:100%!important;
  padding:28px!important;
  border-radius:26px!important;
  background:
    linear-gradient(145deg,rgba(38,2,8,.95),rgba(100,16,27,.84)),
    url('https://images.unsplash.com/photo-1564769625905-50e93615e769?auto=format&fit=crop&w=1200&q=82') center/cover!important;
  color:#fff!important;
  box-shadow:0 20px 46px rgba(50,3,11,.22)!important;
}
html body[data-page="agent-promotion"] .sponsor-preview::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 78% 16%,rgba(245,217,134,.30),transparent 30%)!important;
}
html body[data-page="agent-promotion"] .sponsor-preview-icon{
  width:58px!important;
  height:58px!important;
  display:grid!important;
  place-items:center!important;
  margin-bottom:20px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#f7d979,#bd8427)!important;
  color:#3c1608!important;
  font-size:1.35rem!important;
  box-shadow:0 14px 34px rgba(0,0,0,.2)!important;
}
html body[data-page="agent-promotion"] .sponsor-preview .eyebrow{color:#ffe18b!important}
html body[data-page="agent-promotion"] .sponsor-preview h3{
  margin:12px 0 10px!important;
  color:#fff!important;
  font-size:clamp(1.6rem,2.4vw,2.35rem)!important;
  line-height:1.12!important;
  text-shadow:0 4px 18px rgba(0,0,0,.45)!important;
}
html body[data-page="agent-promotion"] .sponsor-preview p{
  color:#fff1e9!important;
  line-height:1.62!important;
}
html body[data-page="agent-promotion"] .sponsor-preview-meta{
  display:grid!important;
  gap:9px!important;
  margin-top:20px!important;
  padding-top:18px!important;
  border-top:1px solid rgba(255,255,255,.2)!important;
}
html body[data-page="agent-promotion"] .sponsor-preview-meta span{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  color:#fff!important;
  font-size:.9rem!important;
}
html body[data-page="agent-promotion"] .sponsor-preview-meta i{color:var(--v23-gold-soft)!important}

/* Public package notice when opened from a sponsorship referral link */
html body[data-layout="public"] .sponsorship-mode-notice{
  margin:22px 0 0!important;
  padding:18px 20px!important;
  display:flex!important;
  align-items:flex-start!important;
  gap:14px!important;
  border:1px solid rgba(216,166,59,.35)!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,#fff6d9,#fffaf0)!important;
  color:#4e3210!important;
  box-shadow:0 16px 38px rgba(100,16,27,.08)!important;
}
html body[data-layout="public"] .sponsorship-mode-notice i{
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:13px!important;
  background:#64101b!important;
  color:#fff!important;
}
html body[data-layout="public"] .sponsorship-mode-notice strong{display:block!important;color:#64101b!important;margin-bottom:3px!important}
html body[data-layout="public"] .sponsorship-mode-notice span{font-size:.92rem!important;line-height:1.5!important}

/* ---------- 6. Online / offline promotion tips ---------- */
html body[data-page="agent-promotion"] .promotion-guide-section{
  margin-top:22px!important;
}
html body[data-page="agent-promotion"] .promotion-guide-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-end!important;
  gap:20px!important;
  margin-bottom:18px!important;
}
html body[data-page="agent-promotion"] .promotion-guide-head h2{
  margin:6px 0 0!important;
  color:var(--v23-maroon-900)!important;
  font-size:clamp(1.75rem,2.7vw,2.7rem)!important;
}
html body[data-page="agent-promotion"] .promotion-guide-head p{
  max-width:650px!important;
  margin:0!important;
  color:var(--v23-muted)!important;
}
html body[data-page="agent-promotion"] .promotion-guide-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:22px!important;
}
html body[data-page="agent-promotion"] .promotion-guide-card{
  overflow:hidden!important;
  border:1px solid var(--v23-line)!important;
  border-radius:28px!important;
  background:#fff!important;
  box-shadow:0 20px 50px rgba(100,16,27,.09)!important;
}
html body[data-page="agent-promotion"] .promotion-guide-image{
  position:relative!important;
  height:230px!important;
  overflow:hidden!important;
}
html body[data-page="agent-promotion"] .promotion-guide-image img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  transition:transform .45s ease!important;
}
html body[data-page="agent-promotion"] .promotion-guide-card:hover .promotion-guide-image img{transform:scale(1.045)!important}
html body[data-page="agent-promotion"] .promotion-guide-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(38,2,8,.82))!important;
}
html body[data-page="agent-promotion"] .promotion-guide-badge{
  position:absolute!important;
  left:20px!important;
  bottom:18px!important;
  z-index:2!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:9px 13px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.94)!important;
  color:var(--v23-maroon-800)!important;
  font-size:.84rem!important;
  font-weight:900!important;
  box-shadow:0 9px 22px rgba(0,0,0,.16)!important;
}
html body[data-page="agent-promotion"] .promotion-guide-content{padding:24px!important}
html body[data-page="agent-promotion"] .promotion-guide-content h3{
  margin:0 0 8px!important;
  color:var(--v23-maroon-900)!important;
  font-size:1.45rem!important;
}
html body[data-page="agent-promotion"] .promotion-guide-content>p{margin:0 0 18px!important;color:var(--v23-muted)!important}
html body[data-page="agent-promotion"] .promotion-tip-list{
  display:grid!important;
  gap:11px!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
html body[data-page="agent-promotion"] .promotion-tip-list li{
  display:flex!important;
  align-items:flex-start!important;
  gap:11px!important;
  padding:12px 13px!important;
  border:1px solid rgba(100,16,27,.10)!important;
  border-radius:15px!important;
  background:#fffaf2!important;
  color:#433338!important;
  line-height:1.48!important;
}
html body[data-page="agent-promotion"] .promotion-tip-list li i{
  margin-top:3px!important;
  color:var(--v23-maroon-700)!important;
}
html body[data-page="agent-promotion"] .promotion-checklist{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  margin-top:22px!important;
}
html body[data-page="agent-promotion"] .promotion-check-item{
  padding:20px!important;
  border:1px solid var(--v23-line)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,#fff,#fff8ee)!important;
  box-shadow:0 14px 34px rgba(100,16,27,.07)!important;
}
html body[data-page="agent-promotion"] .promotion-check-item i{
  width:46px!important;
  height:46px!important;
  display:grid!important;
  place-items:center!important;
  margin-bottom:13px!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#64101b,#8b1930)!important;
  color:#fff!important;
}
html body[data-page="agent-promotion"] .promotion-check-item strong{display:block!important;color:var(--v23-maroon-900)!important;margin-bottom:5px!important}
html body[data-page="agent-promotion"] .promotion-check-item span{color:var(--v23-muted)!important;font-size:.88rem!important;line-height:1.48!important}

/* ---------- Responsive promotion page ---------- */
@media(max-width:1050px){
  html body[data-page="agent-promotion"] .sponsor-referral-grid{grid-template-columns:1fr!important}
  html body[data-page="agent-promotion"] .promotion-checklist{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:820px){
  html body[data-page="agent-promotion"] .promotion-intro{min-height:0!important;padding:34px 28px!important}
  html body[data-page="agent-promotion"] .promotion-intro-icon{display:none!important}
  html body[data-page="agent-promotion"] .promotion-guide-grid{grid-template-columns:1fr!important}
  html body[data-page="agent-promotion"] .sponsor-action-grid{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  html body[data-page="agent-promotion"] .promotion-intro{padding:28px 20px!important;border-radius:24px!important}
  html body[data-page="agent-promotion"] .promotion-intro h2{font-size:2.2rem!important}
  html body[data-page="agent-promotion"] .promotion-intro p{font-size:.98rem!important}
  html body[data-page="agent-promotion"] .promotion-intro-badges{display:grid!important;grid-template-columns:1fr!important}
  html body[data-page="agent-promotion"] .promotion-guide-head{display:block!important}
  html body[data-page="agent-promotion"] .promotion-guide-head p{margin-top:10px!important}
  html body[data-page="agent-promotion"] .promotion-guide-image{height:205px!important}
  html body[data-page="agent-promotion"] .promotion-checklist{grid-template-columns:1fr!important}
  html body[data-page="agent-promotion"] .promo-html-content{left:18px!important;right:18px!important;bottom:18px!important;padding:18px!important}
  html body[data-page="agent-promotion"] .promo-html-content h2{font-size:1.9rem!important}
}