/* ══════════════════════════════════════════════════════
   Ctrl8 Audio Ecosystem – One-Time Popup  v2.0
   Deep purple / electric indigo / gold accent
══════════════════════════════════════════════════════ */

:root{
  --c8-bg:       #1a0b2e;
  --c8-card:     #22103a;
  --c8-blue:     #3d2fcc;
  --c8-blue2:    #5a45f0;
  --c8-gold:     #f5c518;
  --c8-white:    #ffffff;
  --c8-muted:    rgba(255,255,255,0.52);
  --c8-border:   rgba(255,255,255,0.11);
  --c8-input-bg: rgba(255,255,255,0.07);
  --c8-err:      #f87171;
  --c8-ok:       #6ee7b7;
  --c8-r:        16px;
}

/* ── Overlay ── */
.ctrl8-overlay{
  display:none;
  position:fixed;inset:0;
  z-index:99999;
  background:rgba(0,0,0,0.70);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  align-items:center;
  justify-content:center;
  padding:16px;
}
.ctrl8-overlay.active{ display:flex; }

/* ── Card ── */
.ctrl8-popup{
  position:relative;
  width:100%;max-width:420px;
  background:var(--c8-bg);
  border-radius:var(--c8-r);
  overflow:hidden;
  box-shadow:0 28px 80px rgba(0,0,0,0.60),0 0 0 1px var(--c8-border);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  animation:c8rise .32s cubic-bezier(.16,1,.3,1) both;
}
@keyframes c8rise{
  from{opacity:0;transform:translateY(24px) scale(.97)}
  to  {opacity:1;transform:translateY(0)    scale(1)}
}
@media(prefers-reduced-motion:reduce){.ctrl8-popup{animation:none}}

/* ── Close ── */
.ctrl8-close{
  position:absolute;top:11px;right:13px;z-index:10;
  background:rgba(255,255,255,0.11);border:none;
  color:var(--c8-white);width:28px;height:28px;
  border-radius:50%;font-size:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s;
}
.ctrl8-close:hover{background:rgba(255,255,255,0.22)}

/* ── Hero band – full-bleed background image ── */
.ctrl8-hero{
  position:relative;
  width:100%;
  height:240px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
/* product image fills the whole hero */
.ctrl8-hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
/* gradient overlay so text stays readable */
.ctrl8-hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(15,6,40,0.20) 0%,
    rgba(15,6,40,0.50) 50%,
    rgba(15,6,40,0.92) 100%
  );
  pointer-events:none;
}
/* text anchored to bottom, above the gradient */
.ctrl8-hero-text{
  position:relative;
  z-index:2;
  width:100%;
  padding:22px 22px 20px;
}
.ctrl8-eyebrow{
  display:inline-block;font-size:9px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--c8-gold);margin-bottom:6px;
}
.ctrl8-title{
  margin:0 0 14px;font-size:22px;font-weight:900;
  line-height:1.13;color:var(--c8-white);text-transform:uppercase;
}
.ctrl8-explore-btn{
  display:inline-block;background:var(--c8-blue);color:var(--c8-white);
  font-size:12px;font-weight:700;padding:7px 17px;border-radius:40px;
  text-decoration:none;letter-spacing:.03em;
  transition:background .18s,transform .15s;
}
.ctrl8-explore-btn:hover{background:var(--c8-blue2);transform:translateY(-1px)}
/* old right-side image wrap no longer needed */
.ctrl8-hero-img-wrap{ display:none; }

/* ── Body ── */
.ctrl8-body{padding:18px 22px 26px}
.ctrl8-sub{
  margin:0 0 14px;font-size:13px;
  color:var(--c8-muted);text-align:center;
}

/* ── Tabs ── */
.ctrl8-tabs{display:flex;gap:8px;margin-bottom:16px}
.ctrl8-tab{
  flex:1;padding:8px 0;
  background:var(--c8-input-bg);
  border:1px solid var(--c8-border);
  border-radius:10px;color:var(--c8-muted);
  font-size:12.5px;font-weight:600;cursor:pointer;
  transition:all .18s;
}
.ctrl8-tab.active,.ctrl8-tab:hover{
  background:var(--c8-blue);border-color:var(--c8-blue);color:var(--c8-white);
}

/* ── Panels ── */
.ctrl8-panel{display:none}
.ctrl8-panel.active{display:block}
.ctrl8-phone-step[hidden]{display:none}

/* ── Input row (flag + field) ── */
.ctrl8-input-row{
  display:flex;align-items:center;
  background:var(--c8-input-bg);
  border:1px solid var(--c8-border);
  border-radius:11px;overflow:hidden;margin-bottom:6px;
  transition:border-color .18s;
}
.ctrl8-input-row:focus-within{border-color:var(--c8-blue2)}
.ctrl8-flag-code{
  padding:0 12px;font-size:12.5px;color:var(--c8-muted);
  border-right:1px solid var(--c8-border);white-space:nowrap;
}

/* ── Standalone input ── */
.ctrl8-input{
  width:100%;background:var(--c8-input-bg);
  border:1px solid var(--c8-border);border-radius:11px;
  padding:12px 14px;color:var(--c8-white);font-size:13.5px;
  outline:none;transition:border-color .18s;box-sizing:border-box;
}
/* Inside flag row: strip border/bg */
.ctrl8-input-row .ctrl8-input{
  border:none;background:transparent;border-radius:0;padding:12px 13px;
}
.ctrl8-input:focus{border-color:var(--c8-blue2)}
.ctrl8-input::placeholder{color:var(--c8-muted)}

/* OTP field: big centered digits */
.ctrl8-otp-input{
  text-align:center;letter-spacing:.55em;font-size:20px;font-weight:700;
  padding:12px 10px;margin-bottom:6px;
}

/* ── Field errors ── */
.ctrl8-field-error{
  font-size:11.5px;color:var(--c8-err);
  min-height:16px;margin-bottom:4px;
}

/* ── Verify hint ── */
.ctrl8-verify-hint{
  font-size:12.5px;color:var(--c8-muted);
  margin:0 0 10px;text-align:center;
}
.ctrl8-verify-hint strong{color:var(--c8-white)}

/* ── Timer row ── */
.ctrl8-timer-row{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11.5px;color:var(--c8-muted);margin-bottom:10px;
}
.ctrl8-resend-btn{
  background:none;border:none;color:var(--c8-blue2);
  font-size:11.5px;font-weight:600;cursor:pointer;
  transition:color .18s;padding:0;
}
.ctrl8-resend-btn:disabled{color:var(--c8-muted);cursor:default}
.ctrl8-resend-btn:not(:disabled):hover{color:var(--c8-white)}

/* ── Back link ── */
.ctrl8-back-btn{
  display:block;width:100%;margin-top:10px;
  background:none;border:none;color:var(--c8-muted);
  font-size:12px;cursor:pointer;text-align:center;
  transition:color .18s;
}
.ctrl8-back-btn:hover{color:var(--c8-white)}

/* ── CTA button ── */
.ctrl8-cta{
  display:block;width:100%;
  margin-top:12px;padding:13px;
  background:var(--c8-blue);color:var(--c8-white);
  border:none;border-radius:11px;
  font-size:14px;font-weight:800;letter-spacing:.06em;
  cursor:pointer;transition:background .18s,transform .14s;
  position:relative;overflow:hidden;
}
.ctrl8-cta:hover{background:var(--c8-blue2);transform:translateY(-1px)}
.ctrl8-cta:active{transform:translateY(0)}
.ctrl8-cta:disabled{opacity:.65;cursor:default;transform:none}

/* Spinner inside CTA */
.ctrl8-cta .c8-spin{
  display:none;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  animation:c8spin .7s linear infinite;
  position:absolute;top:50%;left:50%;margin:-8px 0 0 -8px;
}
.ctrl8-cta.loading .c8-spin{display:block}
.ctrl8-cta.loading .c8-btn-label{opacity:0}
@keyframes c8spin{to{transform:rotate(360deg)}}

/* ── Email success message ── */
.ctrl8-success-msg{
  margin-top:10px;font-size:13px;color:var(--c8-ok);
  text-align:center;line-height:1.5;
}

/* ── Legal ── */
.ctrl8-legal{
  margin:14px 0 0;font-size:10.5px;color:var(--c8-muted);
  text-align:center;line-height:1.5;
}
.ctrl8-legal a{color:var(--c8-muted);text-decoration:underline}
.ctrl8-legal a:hover{color:var(--c8-white)}


/* ── Responsive ── */
@media(max-width:440px){
  .ctrl8-hero{ height:210px; }
  .ctrl8-title{ font-size:19px; }
  .ctrl8-hero-text{ padding:18px 16px 16px; }
  .ctrl8-body{ padding:14px 16px 22px; }
}