/* ============================================================
   components.css
   ============================================================ */

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:var(--dg-r-pill);
  font-weight:700; font-size:.92rem; letter-spacing:.01em;
  transition:transform .3s var(--dg-ease), box-shadow .3s var(--dg-ease), border-color .3s, background .3s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); }

.btn-gold{ background:var(--dg-gold-grad); color:var(--dg-night); box-shadow:var(--dg-shadow-1); }
.btn-gold:hover{ box-shadow:var(--dg-glow); }

.btn-ghost{ background:transparent; color:var(--dg-cream); border:1.5px solid var(--dg-gold); }
.btn-ghost:hover{ background:rgba(242,178,51,.1); }

.btn-sm{ padding:10px 18px; font-size:.82rem; }
.btn-block{ width:100%; }
.btn[disabled], .btn.is-disabled{ opacity:.45; pointer-events:none; }
.btn-icon{ width:1.05em; height:1.05em; flex:none; }

/* ---------- Cards ---------- */
.card{
  background:var(--dg-slate);
  border:1px solid var(--dg-stone);
  border-radius:var(--dg-r-lg);
  overflow:hidden;
  position:relative;
  transition:transform .4s var(--dg-ease), box-shadow .4s var(--dg-ease), border-color .4s var(--dg-ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--dg-shadow-2); border-color:var(--dg-gold-deep); }
.card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--dg-stone); }
.card-media img, .card-media .ph{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--dg-ease); }
.card:hover .card-media img, .card:hover .card-media .ph{ transform:scale(1.03); }
.card-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(16,27,30,.9), transparent 55%);
}
.card-badge{
  position:absolute; top:14px; left:14px; z-index:2;
  padding:6px 14px; border-radius:var(--dg-r-pill);
  background:rgba(16,27,30,.75); backdrop-filter:blur(6px);
  font-size:.72rem; font-weight:700; color:var(--dg-gold);
  border:1px solid rgba(242,178,51,.4);
  text-transform:uppercase; letter-spacing:.06em;
}
.card-body{ padding:26px; }
.card-body h3{ margin-bottom:8px; }
.card-body .price{ font-family:var(--dg-font-mono); color:var(--dg-gold); font-weight:700; font-size:1.15rem; margin-top:10px; }
.card-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.card-link{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; color:var(--dg-gold); font-weight:700; font-size:.88rem; }
.card-link svg{ width:16px; height:16px; transition:transform .3s; }
.card:hover .card-link svg{ transform:translateX(4px); }

/* Placeholder "photo" — mountain gradient art (no real photo asset yet) */
.ph{
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 75% 15%, rgba(242,178,51,.55), transparent 40%),
    linear-gradient(180deg, #24393f 0%, #172a2e 55%, #101b1e 100%);
  position:relative;
}
.ph svg{ width:70%; height:70%; opacity:.9; }

/* ---------- Chip ---------- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:var(--dg-r-pill);
  background:var(--dg-glass); border:1px solid var(--dg-stone);
  font-size:.82rem; font-weight:600; color:var(--dg-cream);
}
.chip svg{ width:15px; height:15px; color:var(--dg-gold); flex:none; }
.chip.chip-select{ cursor:pointer; transition:border-color .2s, background .2s, color .2s; }
.chip.chip-select:hover{ border-color:var(--dg-gold); }
.chip.chip-select.is-active{ background:var(--dg-gold-grad); color:var(--dg-night); border-color:transparent; }
.chip.chip-select.is-active svg{ color:var(--dg-night); }

/* ---------- Stat ---------- */
.stat{ text-align:center; }
.stat .num{ font-size:clamp(2rem,4vw,3rem); font-weight:700; color:var(--dg-gold); display:block; }
.stat .label{ font-size:.82rem; color:var(--dg-mist); text-transform:uppercase; letter-spacing:.12em; margin-top:6px; }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tab-btn{
  padding:10px 20px; border-radius:var(--dg-r-pill); border:1px solid var(--dg-stone);
  font-weight:700; font-size:.85rem;
}
.tab-btn.is-active{ background:var(--dg-gold-grad); color:var(--dg-night); border-color:transparent; }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

/* ---------- Accordion (FAQ) ---------- */
.accordion-item{
  border:1px solid var(--dg-stone); border-radius:var(--dg-r-md);
  margin-bottom:14px; overflow:hidden; background:var(--dg-slate);
}
.accordion-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; padding:20px 24px; text-align:left; font-weight:700; font-size:1rem; color:var(--dg-snow);
}
body.light .accordion-q{ color:var(--dg-night); }
.accordion-q .plus{
  flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--dg-gold); color:var(--dg-gold);
  display:flex; align-items:center; justify-content:center; transition:transform .3s var(--dg-ease);
  font-size:1rem;
}
.accordion-item.is-open .accordion-q .plus{ transform:rotate(135deg); }
.accordion-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--dg-ease); }
.accordion-a-inner{ padding:0 24px 22px; color:var(--dg-mist); }

/* ---------- Card hover top accent already via .card::before ---------- */

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; border-top:1px solid var(--dg-stone); border-bottom:1px solid var(--dg-stone); }
.marquee-track{ display:flex; width:max-content; animation:dg-marquee 32s linear infinite; }
.marquee-track span{
  display:flex; align-items:center; gap:14px;
  padding:16px 26px; font-family:var(--dg-font-mono); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dg-cream); white-space:nowrap;
}
.marquee-track span::after{ content:'◆'; color:var(--dg-gold); margin-left:14px; font-size:.6rem; }
@keyframes dg-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:2000; background:rgba(10,16,18,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--dg-ease), visibility .3s;
  backdrop-filter:blur(10px);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-stage{ max-width:88vw; max-height:80vh; position:relative; }
.lightbox-stage img, .lightbox-stage .ph{ max-width:88vw; max-height:80vh; border-radius:var(--dg-r-md); box-shadow:var(--dg-shadow-2); }
.lightbox-stage .ph{ width:70vw; height:60vh; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.06); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; color:var(--dg-snow);
  transition:background .2s, border-color .2s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ border-color:var(--dg-gold); color:var(--dg-gold); }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg{ width:20px; height:20px; }
.lightbox-zoom button svg{ width:16px; height:16px; }
.lightbox-close{ top:-64px; right:0; }
.lightbox-prev{ left:-64px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:-64px; top:50%; transform:translateY(-50%); }
.lightbox-zoom{ position:absolute; bottom:-64px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.lightbox-zoom button{
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); color:var(--dg-snow);
}
.lightbox-counter{
  position:absolute; top:-64px; left:0; color:var(--dg-cream); font-family:var(--dg-font-mono); font-size:.9rem;
}
.lightbox-caption{ position:absolute; bottom:-40px; left:0; right:0; text-align:center; color:var(--dg-mist); font-size:.85rem; }
@media (max-width:768px){
  .lightbox-prev{ left:6px; } .lightbox-next{ right:6px; }
  .lightbox-close{ top:6px; right:6px; }
  .lightbox-counter{ top:6px; left:6px; }
  .lightbox-zoom{ bottom:-56px; }
}

/* ---------- Form fields (contact / tour builder text inputs) ---------- */
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field label{ font-size:.82rem; font-weight:700; color:var(--dg-cream); text-transform:uppercase; letter-spacing:.08em; }
.field input, .field textarea{
  padding:14px 16px; border-radius:var(--dg-r-sm); border:1px solid var(--dg-stone); background:var(--dg-deep); color:var(--dg-cream);
  transition:border-color .2s;
}
.field input:focus, .field textarea:focus{ border-color:var(--dg-gold); }
.field textarea{ resize:vertical; min-height:100px; }

/* ---------- Stepper ---------- */
.stepper{ display:flex; align-items:center; gap:18px; }
.stepper button{
  width:46px; height:46px; border-radius:50%; border:1.5px solid var(--dg-gold); color:var(--dg-gold); font-size:1.3rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.stepper button:hover{ background:rgba(242,178,51,.12); }
.stepper .stepper-val{ font-family:var(--dg-font-mono); font-size:2rem; font-weight:700; color:var(--dg-gold); min-width:52px; text-align:center; }

/* ---------- Toast ---------- */
#toast{
  position:fixed; left:50%; bottom:30px; transform:translate(-50%,20px);
  background:var(--dg-slate); border:1px solid var(--dg-gold); color:var(--dg-cream);
  padding:16px 24px; border-radius:var(--dg-r-md); box-shadow:var(--dg-shadow-2);
  z-index:3000; opacity:0; visibility:hidden; transition:opacity .35s var(--dg-ease), transform .35s var(--dg-ease), visibility .35s;
  font-weight:600; font-size:.9rem; max-width:90vw;
}
#toast.is-visible{ opacity:1; visibility:visible; transform:translate(-50%,0); }

/* ---------- Reveal animation classes (see animations.css for keyframes) ---------- */
.reveal, .reveal-left, .reveal-right, .reveal-zoom{ opacity:0; }

/* ---------- Comparison table ---------- */
.compare-table{ width:100%; border-collapse:collapse; overflow:hidden; border-radius:var(--dg-r-md); }
.compare-table th, .compare-table td{ padding:16px 18px; text-align:left; border-bottom:1px solid var(--dg-stone); font-size:.88rem; }
.compare-table th{ background:var(--dg-slate); color:var(--dg-gold); font-family:var(--dg-font-mono); text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; }
.compare-table tr:hover td{ background:rgba(242,178,51,.05); }
.compare-scroll{ overflow-x:auto; border:1px solid var(--dg-stone); border-radius:var(--dg-r-md); }

/* ---------- Timeline ---------- */
.timeline{ position:relative; padding-left:32px; border-left:2px solid var(--dg-stone); }
.timeline-item{ position:relative; padding-bottom:34px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:''; position:absolute; left:-38px; top:2px; width:14px; height:14px; border-radius:50%;
  background:var(--dg-gold-grad); box-shadow:0 0 0 4px var(--dg-night);
}
.timeline-item h4{ margin-bottom:6px; }

/* ---------- Review stars ---------- */
.stars{ color:var(--dg-gold); letter-spacing:2px; font-size:.95rem; }