/* ============================
   WatchLinkUp — Neo Premium Theme v2
   Amber & Navy Luxe (full-file replacement)
   ============================ */

/* ---------- Color tokens ---------- */
:root {
  /* Dark mode — Black & Silver */
  --bg-top: #000000;
  --bg-bottom: #0A0A0A;
  --bg: #000000;

  --surface: rgba(255,255,255,0.04);
  --surface-solid: #0F0F10;
  --text: #EDEFF2;
  --muted: #A9AFB8;
  --border: #222428;

  /* brand + accents */
  --primary: #D5D8E0; /* Silver accent */
  --primary-600: #BCC1CB;
  --primary-700: #A5ABB8;
  --on-primary: #0E0F12;
  --accent: #FFFFFF;

  /* effects */
  --shadow-1: 0 12px 34px -22px rgba(0,0,0,0.75);
  --shadow-2: 0 40px 84px -34px rgba(0,0,0,0.8);
  --ring: 0 0 0 3px color-mix(in oklab, var(--primary) 28%, transparent);
}


/* ---------- Global layout ---------- */
html { scroll-behavior: smooth; }
body{
  color: var(--text);
  background:
    radial-gradient(1200px 600px at -10% -20%, color-mix(in oklab, var(--primary) 8%, transparent) 0%, transparent 60%),
    radial-gradient(1000px 600px at 115% 0%, color-mix(in oklab, var(--accent) 10%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

/* ---------------- Components ---------------- */
.btn{
  border-radius: 9999px;
  padding:.72rem 1.2rem;
  border:1px solid color-mix(in oklab, var(--primary) 85%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 92%, #ffffff 8%) 0%, var(--primary-600) 100%);
  color: var(--on-primary);
  font-weight:700;
  letter-spacing:.2px;
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .24s ease, filter .24s ease, background .24s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); filter: saturate(1.06); }
.btn:focus-visible{ outline:none; box-shadow: var(--ring), var(--shadow-2); }
.btn:active{ transform: translateY(0); filter: saturate(.98); }

.btn.secondary{
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  color: var(--text);
  border-color: color-mix(in oklab, var(--border) 80%, var(--primary) 20%);
}
.btn.secondary:hover{ background: color-mix(in oklab, var(--surface) 85%, transparent); }

/* Premium outline */
.btn.outline{
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
.btn.outline:hover{ background: color-mix(in oklab, var(--primary) 14%, transparent); }

/* Pills / badges */
.pill{
  border-radius: 9999px; padding:.3rem .7rem;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 75%, transparent);
}

/* Cards & bundles (glass) */
.card{
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  border:1px solid var(--border);
  box-shadow: var(--shadow-1);
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); }

.glass{
  backdrop-filter: saturate(140%) blur(10px);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
}

hr, .divider{ border-color: color-mix(in oklab, var(--border) 85%, transparent); }

/* Links */
a { color: inherit; text-decoration: none; }
a.nav-link{
  padding-bottom:2px;
  position: relative;
}
/* Underline/hover animation is handled globally by .underline-gradient;
   we intentionally disable the legacy a.nav-link::after underline here
   to avoid double lines under header links. */

/* Dialog backdrop */
dialog::backdrop { background: rgba(0,0,0,.45); }

/* ---------- Bundle (Variant A) ---------- */
.bundle{
  display:flex; flex-direction:column; justify-content:space-between;
  height:100%;
  border-radius:2rem;
  padding:2rem;
  transition:all .3s ease;
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent) 0%, color-mix(in oklab, var(--surface) 86%, transparent) 100%);
  border:1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.bundle:hover{ transform: translateY(-6px); box-shadow: var(--shadow-2); }
.bundle-visual{
  display:grid; place-items:center; aspect-ratio:4/3;
  border-radius:1rem; background: color-mix(in oklab, var(--surface) 85%, transparent); border:1px solid var(--border);
}
.bundle-title{ font-size:1.875rem; line-height:2.25rem; font-weight:800; margin-top:1rem; }
.bundle-text{ color: var(--muted); margin-top:.5rem; }
.bundle-cta{ margin-top:1.5rem; }

/* ---------- Compact bundle ---------- */
.bundle--compact{
  border-radius:1.25rem;
  padding:1rem;
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 94%, transparent) 0%, color-mix(in oklab, var(--surface) 86%, transparent) 100%);
  border:1px solid var(--border);
  box-shadow: var(--shadow-1);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.bundle--compact:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); }
.bundle--compact .title{ font-weight:700; }

/* ---------- Inputs (global) ---------- */
:where(input, select, textarea){
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  border:1px solid var(--border);
  color: var(--text);
}
:where(input, select, textarea):focus{
  outline:none; box-shadow: var(--ring);
  border-color: color-mix(in oklab, var(--primary) 50%, var(--border));
}

/* ---------- Unified hover animation (lift) ---------- */
.lift { transition: transform .35s ease, box-shadow .35s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }

/* Apply lift to core components */
.card, .bundle, .bundle--compact { transition: transform .35s ease, box-shadow .35s ease; }
.card:hover, .bundle:hover, .bundle--compact:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }

/* ---------- Premium underline hover animation ---------- */
.underline-gradient {
  background-image:
    linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, var(--primary) 0%, color-mix(in oklab, var(--accent) 40%, var(--primary)) 50%, var(--primary) 100%);
  background-size: 100% 1px, 0 1.5px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size .45s ease;
}
.underline-gradient:hover { background-size: 100% 1px, 100% 1.5px; }

/* ---------- Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .card:hover, .bundle:hover, .bundle--compact:hover { transform: none !important; box-shadow: none !important; }
}

/* =========================
   Card CTA — Premium reveal (FINAL)
   ========================= */

/* CTA completamente nascosta quando la card è chiusa */
.listing-card .card-cta{
  display: none;
}

/* CTA visibile SOLO a card aperta */
/* PATCH: use padding-top, not margin-top, for expander animation correctness */
.listing-card.expanded .card-cta{
  display: block;
  padding-top: 0.15rem; /* ridotto: avvicina CTA ai dettagli */
  padding-left: 2px;
  position: relative;
  z-index: 1;
}

@media (max-width: 767px){
  .listing-card.expanded .listing-details{
    row-gap: 0.35rem;
  }
  .listing-card.expanded .listing-details > div:last-child{
    margin-bottom: 0;
  }
}

@media (max-width: 767px){
  .listing-card.expanded .card-cta{
    margin-top: 0 !important;
  }
}

/* Mobile: CTA sempre sotto i dettagli, zero overlap */
@media (max-width: 767px){
  .listing-card.expanded .listing-details{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 767px){
  .listing-card.expanded .card-cta{
    margin-top: -2px !important;
  }
}

@media (max-width: 767px){
  .listing-details > div:last-child{
    margin-bottom: 0.35rem;
  }
}

/* Bottone CTA premium */
.listing-card.expanded .card-cta .btn{
  width: 100%;
  padding: .75rem 1.05rem;
  font-size: .9rem;
  font-weight: 600;
  border-radius: 9999px;
  box-shadow: var(--shadow-2);
}

/* Spacer reale sotto Condition per mobile */
/* === HOMEPAGE ONLY: prevent global mobile offsets === */
@media (max-width: 768px){
  body > .homepage{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}