/* =========================================================
   InstaFreight • Newsletter (subscribe/thanks) + Unsubscribe
   - Light/Dark tokens
   - RTL-aware with logical properties
   - Minimal motion for reduced-motion users
   ========================================================= */

/* ---------- Design tokens (shared) ---------- */
:root{
  --ink:#0b1220;         /* primary text */
  --muted:#6b7280;       /* secondary text */
  --bg:#ffffff;          /* page bg */
  --card:#ffffff;        /* card bg */
  --line:#eef2f7;        /* subtle borders */
  --ring:#111827;        /* focus/brand ring */
  --brand:#111827;       /* brand dark */
  --danger:#ef4444;      /* unsubscribe emphasis */
  --glass: rgba(255,255,255,.82);
  --shadow: 0 24px 80px rgba(2,6,23,.12);
  --fx1:#dbeafe;         /* hero wash 1 */
  --fx2:#f3e8ff;         /* hero wash 2 */
  --focus:#6366f1;       /* focus color */
  --chip:#f8fafc;
  --chipText:#111827;

  /* page spacing */
  --container-w: 1100px;
  --footer-gap: clamp(64px, 8vh, 128px);
}

[data-bs-theme="dark"], [data-theme="dark"]{
  --ink:#e5e7eb;
  --muted:#9ca3af;
  --bg:#0b1220;
  --card:#0e1628;
  --line:#1f2937;
  --ring:#93c5fd;
  --brand:#93c5fd;
  --danger:#f87171;
  --glass: rgba(14,22,40,.72);
  --shadow: 0 28px 96px rgba(0,0,0,.45);
  --fx1:#0f172a;
  --fx2:#111827;
  --focus:#60a5fa;
  --chip:#0b1220;
  --chipText:#e5e7eb;
}

/* Base page shell for both screens */
body{ background:var(--bg); }
.container{ max-width:var(--container-w); margin:0 auto; padding:0 1rem; }

/* =========================================================
   NEWSLETTER (Subscribe / Thanks)
   ========================================================= */

/* HERO */
.nl-hero{
  position:relative; padding:3.2rem 0 2.6rem;
  background:
    radial-gradient(1200px 520px at 10% -10%, var(--fx1) 0%, transparent 60%),
    radial-gradient(1200px 520px at 110% 0%, var(--fx2) 0%, transparent 60%);
}
.nl-hero::after{
  content:""; position:absolute; inset-block-end:-120px; inset-inline-end:10%;
  width:460px; height:460px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--focus) 60%, transparent) .16turn, transparent 72%);
  filter: blur(14px); z-index:0; pointer-events:none;
}
.nl-hero__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:1.25rem; align-items:stretch;
}

/* Glass copy card */
.nl-glass{
  backdrop-filter:saturate(140%) blur(6px);
  background:var(--glass);
  border:1px solid rgba(2,6,23,.08);
  border-radius:22px; padding:1.35rem 1.25rem; box-shadow:var(--shadow);
}
.nl-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem; color:var(--muted); letter-spacing:.12em; text-transform:uppercase;
}
.nl-eyebrow__dot{
  inline-size:8px; block-size:8px; border-radius:50%;
  background:linear-gradient(135deg,#6366f1,#10b981);
  box-shadow:0 0 0 4px rgba(99,102,241,.12);
}
.nl-title{
  font-size:clamp(1.9rem,3.8vw,2.6rem);
  margin:.25rem 0 .35rem; color:var(--ink);
  letter-spacing:-.015em; font-weight:900;
}
.nl-lead{ color:var(--ink); opacity:.9; max-width:60ch; }

.nl-points{
  list-style:none; padding:0; margin:.9rem 0 0;
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
}
.nl-points li{ display:flex; align-items:center; gap:.55rem; color:var(--ink); }
.nl-ico{ inline-size:18px; block-size:18px; flex:0 0 18px; opacity:.9; color:var(--ring); }

/* Form card */
.nl-card{ background:var(--card); border:1px solid var(--line); border-radius:22px; padding:1.35rem; box-shadow:var(--shadow); }
.nl-card__head{ margin:.1rem 0 .75rem; }
.nl-card__title{ margin:0; font-size:1.25rem; letter-spacing:-.01em; }
.nl-card__sub{ margin:.1rem 0 0; color:var(--muted); }

.nl-form{ display:flex; flex-direction:column; gap:1rem; }
.nl-label{ font-weight:800; color:var(--ink); font-size:.95rem; }
.nl-hint{ margin:.35rem 0 0; color:var(--muted); font-size:.9rem; }

.nl-field{}
.nl-inputwrap{ position:relative; }

/* Direction-aware input icon + padding */
.nl-inputico{
  position:absolute; inset-block-start:50%; transform:translateY(-50%);
  inline-size:18px; block-size:18px; color:#9ca3af; pointer-events:none;
  inset-inline-start:.9rem;  /* default LTR */
}
.nl-input{
  width:100%; border:1px solid var(--line); border-radius:12px;
  padding:.85rem 1rem; font-size:1rem; background:#fff; color:#111827;
  outline:none; transition:box-shadow .15s ease,border-color .15s ease,transform .05s ease;
  padding-inline-start:2.35rem;  /* room for icon */
}
[data-bs-theme="dark"] .nl-input,
[data-theme="dark"] .nl-input{
  background:#0e1628; color:#e5e7eb; border-color:#1f2937;
}

/* RTL overrides */
:dir(rtl) .nl-inputico{ inset-inline-start:auto; inset-inline-end:.9rem; }
:dir(rtl) .nl-input{ padding-inline-start:1rem; padding-inline-end:2.35rem; }

.nl-duo{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }

/* Preferences chips */
.nl-prefs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.1rem; }
.nl-chip{
  position:relative;
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:.45rem .8rem;
  background:var(--chip); color:var(--chipText); font-weight:700; user-select:none;
  transition:transform .06s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease,color .15s ease;
}
.nl-chip input{ appearance:none; inline-size:0; block-size:0; position:absolute; opacity:0; }
.nl-chip span{ pointer-events:none; }

/* :has() with class fallback */
.nl-chip:has(input:checked),
.nl-chip.is-active{
  background:linear-gradient(135deg,#111827,#374151);
  border-color:#111827; color:#fff;
  box-shadow:0 6px 18px rgba(17,24,39,.18);
  transform:translateY(-1px);
}

/* Consent + button */
.nl-agree{ display:flex; align-items:flex-start; gap:.55rem; margin-top:-.1rem; color:var(--ink); }
.nl-privacy{ margin:.2rem 0 0; color:var(--muted); font-size:.9rem; }

.nl-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem; border-radius:14px; padding:.85rem 1.1rem; border:1px solid var(--ring);
  background:var(--ring); color:#fff; font-weight:900; letter-spacing:.01em;
  transition:transform .08s ease,box-shadow .2s ease,opacity .2s ease;
  box-shadow:0 10px 28px rgba(17,24,39,.22);
}
.nl-btn:hover{ transform:translateY(-1px); }
.nl-btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.nl-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,.22),transparent 35%,transparent 65%,rgba(255,255,255,.12));
  mix-blend-mode:soft-light; pointer-events:none;
}
.nl-btn__spin{
  inline-size:0; block-size:0; border:2px solid transparent; border-inline-start-color:#fff; border-radius:50%;
  animation:spin .9s linear infinite; opacity:0; margin-inline-start:.1rem;
}
.nl-btn.loading .nl-btn__label{ opacity:.75; }
.nl-btn.loading .nl-btn__spin{ inline-size:16px; block-size:16px; opacity:1; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.nl-gap{ block-size:2.8rem; }

/* Thanks page bottom spacing so footer doesn’t crowd the card */
.nl-thanks{ padding-block-end: var(--footer-gap); }

/* Responsive */
@media (prefers-reduced-motion:reduce){
  .nl-btn,.nl-chip{ transition:none; }
  .nl-btn__spin{ animation:none; }
}
@media (max-width:980px){
  .nl-hero__grid{ grid-template-columns:1fr; }
  .nl-points{ grid-template-columns:1fr; }
}

/* =========================================================
   UNSUBSCRIBE
   ========================================================= */

.unsub-wrap, .unsub-hero{
  padding:3rem 0 4rem;
  background:
    radial-gradient(1200px 500px at 12% -10%, var(--fx1) 0%, transparent 60%),
    radial-gradient(1200px 500px at 110% 0%, var(--fx2) 0%, transparent 60%);
}

.unsub-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:1.25rem; align-items:start;
}

/* Cards */
.card{
  border:1px solid var(--line); border-radius:20px;
  background:var(--card); box-shadow:var(--shadow);
}
.card--xl{ padding:1.35rem; }
.card--sm{ padding:1rem; position:sticky; inset-block-start:1rem; }

/* Headers / text */
.title{
  margin:.2rem 0 .2rem;
  font-size:clamp(1.6rem,3.2vw,2.2rem); color:var(--ink);
}
.subtitle{ margin:.2rem 0 .4rem; color:var(--ink); }
.muted{ color:var(--muted); }
.small{ font-size:.9rem; }
.lead{ font-size:1.05rem; color:var(--ink); opacity:.9; }
.divider{ border-top:1px solid var(--line); margin:1rem 0; }

/* Form */
.unsub-form{ display:flex; flex-direction:column; gap:.9rem; }
.label{ font-weight:700; color:var(--ink); }

/* Inputs use logical padding for RTL */
.input, .textarea{
  inline-size:100%; border:1px solid var(--line); border-radius:12px;
  padding:.8rem 1rem; font-size:1rem; background:#fff; color:#111827;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.textarea{ min-block-size:110px; resize:vertical; }

[data-bs-theme="dark"] .input,
[data-bs-theme="dark"] .textarea,
[data-theme="dark"] .input,
[data-theme="dark"] .textarea{
  background:#0e1628; color:#e5e7eb; border-color:#1f2937;
}

.input:focus, .textarea:focus{
  outline:none; border-color:var(--ring);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) 18%, transparent);
}

.duo{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }

/* Consent checkbox */
.agree{ display:flex; align-items:flex-start; gap:.55rem; color:var(--ink); }
.agree input{ margin-block-start:.25rem; }

/* Reason pills */
.reasons{ display:flex; flex-wrap:wrap; gap:.5rem; margin-block-start:.25rem; }
.pill-chk{ position:relative; display:inline-flex; align-items:center; }
.pill-chk input{
  position:absolute; inset:0; inline-size:100%; block-size:100%;
  opacity:0; cursor:pointer;
}
.pill-chk span{
  display:inline-flex; align-items:center; gap:.4rem; user-select:none;
  padding:.45rem .8rem; border:1px solid var(--line); border-radius:999px;
  background:#f8fafc; color:#111827; font-weight:700; letter-spacing:.01em;
  transition:transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pill-chk:hover span{ transform:translateY(-1px); }
.pill-chk input:checked + span{
  background:color-mix(in oklab, var(--danger) 10%, #fff);
  border-color:color-mix(in oklab, var(--danger) 35%, var(--line));
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--danger) 55%, transparent);
  color:#991b1b;
}

[data-bs-theme="dark"] .pill-chk span,
[data-theme="dark"] .pill-chk span{
  background:#0b1220; color:#e5e7eb;
}

/* Buttons */
.btn-row{ display:flex; gap:.55rem; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:14px; padding:.75rem 1rem; font-weight:800; text-decoration:none;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  transition:transform .08s ease, box-shadow .2s ease, background .15s ease, border-color .15s ease;
}
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.btn-danger{
  background:var(--danger); color:#fff; border-color:var(--danger);
  box-shadow:0 8px 24px color-mix(in oklab, var(--danger) 30%, transparent);
}
.btn-danger:hover{ transform:translateY(-1px); }

.btn-ghost{ background:transparent; }
.btn-ghost:hover{ background:rgba(2,6,23,.04); }

[data-bs-theme="dark"] .btn-ghost,
[data-theme="dark"] .btn-ghost{ border-color:#22304f; }
[data-bs-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .btn-ghost:hover{ background:#0e1628; }

/* Flash / validation */
.flash{
  border:1px solid var(--line); border-radius:12px; padding:.7rem 1rem; margin:.5rem 0;
  background:#f9fafb; color:#111827;
}
.flash.success{ border-color:#bbf7d0; background:#f0fdf4; }
.flash.warning{ border-color:#fde68a; background:#fffbeb; }
.flash.danger{ border-color:#fecaca; background:#fef2f2; }

/* Space before site footer */
.unsub-footgap{ block-size:3rem; }

/* Responsive */
@media (max-width: 980px){
  .unsub-grid{ grid-template-columns:1fr; }
  .card--sm{ position:static; }
  .duo{ grid-template-columns:1fr; }
}

/* =========================================================
   Small utilities
   ========================================================= */

/* Helps keep icon/text aligned on compact buttons */
.icon-16{ inline-size:16px; block-size:16px; }