/* detail.css - works with listing.css vars & components */

.detailWrap{max-width:980px;margin:0 auto;padding:18px}

/* Top header spacing on mobile */
@media (max-width:680px){
  .detailWrap{padding:14px}
}

/* Blocks */
.block{
  margin-top:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.86);
  border-radius: calc(var(--r) + 6px);
  padding:14px;
  box-shadow: 0 16px 40px rgba(15,23,42,.10);
}

/* Two-column grid */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}

/* Section title */
.sectionTitle{
  font-weight:1000;
  margin:0 0 8px;
  letter-spacing:.1px;
}

/* Meta item (reuse listing meta style but nicer for details) */
.detailWrap .metaItem{
  border:1px solid var(--line);
  background: rgba(255,255,255,.94);
  border-radius: var(--r);
  padding:12px 12px;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}
.detailWrap .k{font-size:12px;color:var(--muted);font-weight:900}
.detailWrap .v{font-size:14px;font-weight:950;margin-top:3px}

/* Share row buttons */
.shareRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.shareRow .btn{flex:1;min-width:220px}
.smallBtn{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-weight:950;
  box-shadow:0 10px 26px rgba(15,23,42,.08);
  transition:.18s ease;
}
.smallBtn:hover{transform: translateY(-1px)}

/* Lists */
.list{margin:10px 0 0;padding-left:18px;color:var(--muted);line-height:1.55}
.list li{margin:4px 0}

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:10px
}
@media(max-width:820px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

.gItem{
  display:block;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 26px rgba(15,23,42,.08);
  text-decoration:none;
  transition:.18s ease;
}
.gItem:hover{transform: translateY(-2px); box-shadow: 0 16px 40px rgba(15,23,42,.12)}
.gItem img{width:100%;height:150px;object-fit:cover;display:block}
.gCap{padding:8px 10px;color:var(--muted);font-size:12px;font-weight:950}

/* Accordion itinerary */
.acc{display:flex;flex-direction:column;gap:10px;margin-top:10px}
details.accItem{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
  overflow:hidden;
}
details.accItem > summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:1000;
  user-select:none;
}
details.accItem > summary::-webkit-details-marker{display:none}
.accLeft{display:flex;gap:10px;align-items:center;min-width:0}
.accDay{
  font-size:12px;
  font-weight:1000;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(109,40,217,.06);
  color: rgba(15,23,42,.92);
  white-space:nowrap;
}
.accTitle{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color: rgba(15,23,42,.92);
}
.accIcon{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  background: rgba(15,23,42,.03);
  flex:0 0 auto;
  transition: transform .18s ease;
  font-size:18px;
  color: rgba(15,23,42,.70);
}
details[open] .accIcon{transform: rotate(45deg)}
.accBody{padding:0 14px 12px}
.accBody ul{margin:8px 0 0;padding-left:18px;color:var(--muted);line-height:1.55}
.accTools{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
/* ===== WOW HERO COVER SLIDER ===== */
.heroCover{
  position:relative;
  height:260px;
  border-radius: calc(var(--r) + 10px);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow: 0 18px 55px rgba(15,23,42,.14);
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(124,58,237,.30), transparent 60%),
    radial-gradient(900px 420px at 85% 20%, rgba(6,182,212,.22), transparent 60%),
    linear-gradient(135deg, rgba(124,58,237,.95), rgba(6,182,212,.85));
  background-size:cover;
  background-position:center;
  margin-bottom:14px;
}

.heroCoverOverlay{
  position:absolute; inset:0;
  background:
    radial-gradient(420px 220px at 12% 20%, rgba(255,255,255,.20), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
}

.heroCoverContent{
  position:absolute;
  left:16px; right:16px;
  bottom:54px;
  z-index:3;
  color:#fff;
  text-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.heroCoverTitle{
  font-size:22px;
  font-weight:1000;
  letter-spacing:.2px;
  line-height:1.15;
}
.heroCoverSub{
  margin-top:6px;
  font-size:13px;
  font-weight:900;
  opacity:.92;
  max-width: 780px;
}

.heroNav{
  position:absolute;
  top:14px;
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.16);
  color:#fff;
  font-size:22px;
  font-weight:1000;
  cursor:pointer;
  z-index:4;
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(15,23,42,.20);
  transition: .18s ease;
}
.heroNav:hover{transform: translateY(-1px); background: rgba(255,255,255,.22);}
.heroPrev{left:14px;}
.heroNext{right:14px;}

.heroThumbs{
  position:absolute;
  left:12px; right:12px; bottom:12px;
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:2px;
  z-index:4;
}
.heroThumbs::-webkit-scrollbar{height:6px}
.heroThumbs::-webkit-scrollbar-thumb{background: rgba(255,255,255,.25); border-radius:999px}

.heroThumb{
  width:62px; height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.30);
  background: rgba(255,255,255,.12);
  overflow:hidden;
  flex:0 0 auto;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(15,23,42,.12);
  transition:.18s ease;
}
.heroThumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05);
}
.heroThumb.active{
  outline: 3px solid rgba(255,255,255,.55);
  transform: translateY(-1px);
}

@media (max-width:680px){
  .heroCover{height:220px}
  .heroCoverTitle{font-size:18px}
  .heroCoverContent{bottom:52px}
}
.urgencyBanner{
  margin:12px 0;
  padding:10px 14px;
  border-radius:12px;
  font-weight:600;
  font-size:14px;
  display:inline-block;
}

.urgencyBanner.sold{
  background:#ffebee;
  color:#c62828;
}

.urgencyBanner.closing{
  background:#fff3e0;
  color:#e65100;
}

.urgencyBanner.soon{
  background:#fff8e1;
  color:#ff6f00;
}

.urgencyBanner.popular{
  background:#f3e5f5;
  color:#6a1b9a;
}
/* ===========================
   Detail page – Love Polish
=========================== */

.detailWrap{
  max-width: 1020px;
}

/* Blocks: softer glass like listing */
.block{
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68));
  box-shadow: 0 18px 60px rgba(15,23,42,.10);
}

/* Section title: less harsh bold */
.sectionTitle{
  font-weight: 1000;
  font-size: 15px;
  letter-spacing: .1px;
}

/* Meta items: lighter borders */
.detailWrap .metaItem{
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.88);
}

/* Gallery: slightly richer hover */
.gItem{
  border: 1px solid rgba(15,23,42,.08);
}
.gItem img{
  filter: saturate(1.06) contrast(1.02);
}
.gItem:hover{
  transform: translateY(-4px);
}

/* Accordion: premium feel */
details.accItem{
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 35px rgba(15,23,42,.08);
}
details.accItem > summary{
  padding: 14px 14px;
}
.accIcon{
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(12px);
}

/* Hero: slightly more depth and romance */
.heroCover{
  box-shadow: 0 22px 80px rgba(15,23,42,.16);
}
.heroCoverOverlay{
  background:
    radial-gradient(420px 220px at 12% 20%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.62));
}
.heroCoverTitle{
  font-size: clamp(18px, 2.2vw, 26px);
}
/* ===========================
   Journey Choice Details – Love Polish
   (Overrides for t/index.php)
=========================== */

:root{
  --line2: rgba(15,23,42,.08);
  --glass1: rgba(255,255,255,.82);
  --glass2: rgba(255,255,255,.66);
  --shadow2: 0 18px 60px rgba(15,23,42,.10);
  --shadow3: 0 22px 90px rgba(15,23,42,.14);
}

/* helper spacing classes to remove inline styles */
.mt10{margin-top:10px}
.mt12{margin-top:12px}

/* detail hero card: more premium & aligned */
.heroCard.heroCardDetail{
  align-items:flex-start;
}
.heroLeft.heroLeftDetail{
  flex:1;
  min-width:280px;
}

/* Blocks: consistent glass */
.block{
  border:1px solid var(--line2);
  background: linear-gradient(180deg, var(--glass1), var(--glass2));
  box-shadow: var(--shadow2);
}

/* Meta items: slightly more app-like */
.detailWrap .metaItem{
  border:1px solid var(--line2);
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 35px rgba(15,23,42,.08);
}

/* For white-only meta sections (Hotel cards) */
.metaWhite{
  background: rgba(255,255,255,.94) !important;
}

/* Section title row */
.sectionTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

/* Hero cover: more “wow” + image richness */
.heroCover{
  box-shadow: var(--shadow3);
  border: 1px solid rgba(255,255,255,.18);
}
.heroCover::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(900px 320px at 15% 0%, rgba(255,255,255,.18), transparent 50%);
  opacity:.85;
  pointer-events:none;
}
.heroCoverOverlay{
  background:
    radial-gradient(420px 240px at 12% 20%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.64));
}

/* Nav buttons: slightly nicer */
.heroNav{
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.14);
}
.heroNav:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.22);
}

/* Urgency banner: make it look premium */
.urgencyBanner{
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 30px rgba(15,23,42,.10);
  backdrop-filter: blur(12px);
}
.urgencyBanner.sold{ background: rgba(239,68,68,.10); color:#991b1b; }
.urgencyBanner.closing{ background: rgba(245,158,11,.14); color:#92400e; }
.urgencyBanner.soon{ background: rgba(250,204,21,.16); color:#92400e; }
.urgencyBanner.popular{ background: rgba(124,58,237,.12); color:#5b21b6; }

/* Share block buttons: match listing button vibe */
.smallBtn{
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(14px);
}
.smallBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15,23,42,.12);
}

/* Custom HTML content (admin blocks) */
.customHtmlContent, .muted{
  line-height: 1.7;
}
.customHtmlContent a{
  color: rgba(124,58,237,.95);
  font-weight: 900;
  text-decoration: none;
}
.customHtmlContent a:hover{
  text-decoration: underline;
}

/* Gallery: richer hover */
.gItem{
  border:1px solid var(--line2);
}
.gItem img{
  filter: saturate(1.08) contrast(1.02);
}
.gItem:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(15,23,42,.16);
}

/* Accordion: cleaner */
details.accItem{
  border:1px solid var(--line2);
}
details.accItem > summary{
  padding: 14px 14px;
}
.accIcon{
  background: rgba(255,255,255,.60);
  backdrop-filter: blur(12px);
}

/* Mobile hero spacing */
@media (max-width:680px){
  .heroCover{height:230px}
  .heroCoverTitle{font-size:18px}
}