/* ===== CC Lucky Wheel – MAIN PLUGIN STYLES (style.css) ===== */
/* Card + form + wheel (unchanged look) */

.cclw-card {
  background: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(17,24,39,.14), 0 2px 6px rgba(17,24,39,.06);
  padding: 20px;
  max-width: 100%!important;
}

.cclw-grid { display:grid; grid-template-columns:1fr; gap:20px; align-items:center; }
@media (min-width:768px){ .cclw-grid{ grid-template-columns:1.1fr 1fr; gap:28px; } }

.cclw-heading{ margin:0 0 6px; font-size:22px; font-weight:700; color:#111827; }
.cclw-sub{ margin:0 0 16px; color:#6b7280; font-size:14px; }
.cclw-row{ margin-bottom:12px; }
.cclw-row label{ display:block; font-size:13px; color:#374151; margin-bottom:6px; }
.cclw-row input{
  width:100%; height:42px; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px;
  font-size:14px; outline:none; transition:box-shadow .15s, border-color .15s; background:#fff;
}
.cclw-row input:focus{ border-color:#a855f7; box-shadow:0 0 0 4px rgba(168,85,247,.15); }
.cclw-privacy{ margin-top:10px; font-size:12px; color:#6b7280; }

.cclw-right{ display:flex; justify-content:center; }
.cclw-wheelbox{
  position:relative; width:320px; height:320px; margin:0 auto; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 50% 40%, #6d004f 0%, #3c0038 55%, #2a002a 100%);
  border-radius:999px; box-shadow:0 28px 60px rgba(0,0,0,.35), inset 0 0 24px rgba(255,95,180,.15);
  overflow:visible;
}
.cclw-wheelbox::after{
  content:""; position:absolute; inset:-12px; border-radius:999px; z-index:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,0) 45%),
    conic-gradient(from 0deg, #f4d06f, #d9a441, #f4d06f, #d9a441, #f4d06f);
  box-shadow:0 0 0 5px #f4d06f inset, 0 0 0 8px rgba(88,10,80,.75) inset, 0 12px 30px rgba(0,0,0,.35);
}
#ccWheel{ width:320px; height:320px; border-radius:999px; display:block; z-index:2; }
.cclw-pointer{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent;
  border-top:22px solid #e6b64e; border-bottom:0; filter:drop-shadow(0 -2px 5px rgba(0,0,0,.2)); z-index:3;
}

.cclw-btn{
  width:100%; height:44px; border:0; border-radius:12px; font-weight:700; letter-spacing:.2px;
  background:linear-gradient(90deg, #a855f7, #ec4899); color:#fff;
  box-shadow:0 8px 18px rgba(139,92,246,.25); cursor:pointer; transition:transform .06s, opacity .15s, box-shadow .15s;
}
.cclw-btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.cclw-btn:not(:disabled):active{ transform:translateY(1px); }

body.cclw-offer-open .elementor-popup-modal,
body.cclw-offer-open .elementor-popup-modal *{ display:none !important; }
body.cclw-offer-open{ overflow:hidden; }

@media (max-width:480px){
  .cclw-wheelbox, #ccWheel{ width:260px; height:260px; }
  .cclw-pointer{ top:-10px; border-left-width:10px; border-right-width:10px; border-top-width:16px; }
}

/* =========================================================================
   Light Congratulations Splash (full-screen)
   ========================================================================= */

#cclw-offer-modal{ position:fixed; inset:0; display:block; opacity:0; transition:opacity .18s ease; z-index:999999; }
#cclw-offer-modal.open{ opacity:1; }

.cclw-splash{
  position:absolute; inset:0; display:grid; place-items:center;
  background: rgba(255,255,255,.85); backdrop-filter: blur(4px);
}

/* Light, airy backdrop with pink shapes */
.cclw-splash--light{
  background: radial-gradient(120% 120% at 50% 10%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.85) 40%, rgba(255,255,255,.75) 100%);
}
.cclw-splash--light::before,
.cclw-splash--light::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(220px 160px at 25% 18%, rgba(255,182,193,.45), transparent 60%),
    radial-gradient(260px 200px at 80% 8%, rgba(236,72,153,.28), transparent 60%),
    radial-gradient(180px 140px at 12% 85%, rgba(255,182,193,.35), transparent 60%),
    radial-gradient(220px 180px at 92% 86%, rgba(236,72,153,.22), transparent 60%);
  z-index:0;
}

/* Card */
.cclw-splash-card{
  position:relative; width:min(520px,92vw);
  background:#0b0b0f; color:#e7e7ee; border:1px solid rgba(255,255,255,.08);
  border-radius:24px; padding:28px 24px 22px;
  box-shadow:0 30px 80px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.02);
  text-align:center; z-index:1;
}
.cclw-splash-card--light{ background:#ffffff; color:#111827; border:1px solid #f1f5f9; box-shadow:0 28px 60px rgba(17,24,39,.18); }

/* Close (X) */
.cclw-splash-x{
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:#12121a; color:#e7e7ee; cursor:pointer;
}
.cclw-splash-x--light{ background:#ffffff; color:#111827; border:1px solid #e5e7eb; }

/* Lottie */
.cclw-splash-lottie{ display:block; margin:0 auto 6px; }

/* Text */
.cclw-splash-title{ margin:6px 0 2px; font-size:28px; font-weight:800; }
.cclw-splash-title--light{
  background: linear-gradient(90deg,#ec4899,#a855f7); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cclw-splash-sub{ margin:0 0 4px; color:#b8b8c5; font-size:14px; }
.cclw-splash-sub--light{ color:#6b7280; }

.cclw-splash-amount{ margin:2px auto 14px; font-size:40px; font-weight:900; letter-spacing:.3px; color:#fff; }
.cclw-splash-amount--light{ color:#111827; }

/* Code pill */
.cclw-splash-code-row{ display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 0 10px; }
.cclw-offer-code{
  display:inline-block; font-weight:800; letter-spacing:.6px; font-size:18px;
  background:#111827; color:#fff; border-radius:12px; padding:10px 14px;
}
.cclw-offer-code--light{ background:#f3f4f6; color:#111827; border:1px solid #e5e7eb; }

/* Buttons */
.cclw-splash-actions{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; justify-content:center; }
.cclw-ghost, .cclw-success{ min-width:120px; height:44px; border-radius:12px; border:0; cursor:pointer; padding:0 16px; font-weight:700; }
.cclw-ghost{ background:#111827; color:#fff; }            /* Download */
.cclw-success{ background:#10b981; color:#fff; }          /* default green (unused now) */
.cclw-success--pink{ background:#ec4899; color:#fff; }    /* Send to Email */
.cclw-success--pink:hover{ filter:brightness(1.03); }

/* =========================================================================
   Email mini-modal (default dark) + light overrides inside light splash
   ========================================================================= */
.cclw-email-modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .16s ease; z-index:100000000; }
.cclw-email-modal.open{ opacity:1; }
.cclw-email-modal[hidden]{ display:none; }

.cclw-email-backdrop{ position:absolute; inset:0; background:rgba(17,24,39,.55); backdrop-filter:blur(2px); }
.cclw-email-card{
  position:relative; z-index:1; background:#0e0e16; color:#e7e7ee;
  border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px;
  max-width:360px; width:92%; box-shadow:0 18px 40px rgba(17,24,39,.22);
}
.cclw-email-card h4{ margin:0 0 10px; font-weight:800; }
.cclw-email-input{
  width:100%; height:42px; border:1px solid #2b2b3a; background:#12121a; color:#fff;
  border-radius:10px; padding:8px 12px;
}
.cclw-email-actions{ display:flex; gap:10px; margin-top:10px; }
.cclw-email-actions button{ flex:1 1 auto; height:40px; border-radius:10px; border:0; cursor:pointer; }
.cclw-email-cancel{ background:#2a2a38; color:#fff; }
.cclw-email-send{ background:#10b981; color:#fff; }
.cclw-email-msg{ margin-top:8px; font-size:13px; color:#cfcfe8; }

/* ---- LIGHT overrides when used inside the light splash ---- */
.cclw-splash--light .cclw-email-backdrop {
  background: rgba(255, 255, 255, .45);
  backdrop-filter: blur(3px);
}
.cclw-splash--light .cclw-email-card {
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
  box-shadow: 0 18px 40px rgba(17, 24, 39, .12);
}
.cclw-splash--light .cclw-email-card h4 { color: #111827; }
.cclw-splash--light .cclw-email-input {
  background: #fff;
  color: #111827;
  border: 1px solid #e5e7eb;
}
.cclw-splash--light .cclw-email-cancel {
  background: #e5e7eb;
  color: #111827;
}
.cclw-splash--light .cclw-email-send {
  background: #ec4899;   /* pink to match main button */
  color: #fff;
}

/* Tiny toast for copy (if used elsewhere) */
#cclw-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(10px);
  background:#111827; color:#fff; padding:10px 14px; border-radius:10px; opacity:0;
  transition:all .18s ease; pointer-events:none; z-index:100000001;
}
#cclw-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }



/* Container holds image + animation stacked */
.cclw-hero {
  position: relative;
  width: 60%;
  max-width: 400px;      /* feel free to tune */
  margin: 0 auto 12px;   /* small gap below the hero block */
}

/* Coupon image (background layer) */
.cclw-voucher-preview{
  display:block;
  width:60%;
  height:auto;
  border-radius:14px;
  background: transparent;          /* ✅ was #fff */
  box-shadow: none;                  /* ✅ optional: remove framing shadow */
}


/* Lottie overlay — centered on top of the image */
.cclw-splash-lottie.over {
  position: absolute;
  inset: 0;              /* stretch to container; we’ll contain it with max-size */
  display: grid;
  place-items: center;
  pointer-events: none;  /* clicks go through to buttons below */
}

/* Keep animation tasteful size over the coupon */
.cclw-splash-lottie.over {
  /* Optional sizing control: */
  --anim-size: min(240px, 60%);
}
.cclw-splash-lottie.over > * {
  width: var(--anim-size) !important;
  height: var(--anim-size) !important;
}
/* === Make only the coupon image smaller under the Lottie === */
#cclw-offer-modal .cclw-hero{
  position: relative !important;
  width: 100% !important;
  max-width: 520px !important;   /* keep the hero area wide enough */
  margin: 0 auto 12px !important;
}

/* ↓ TUNE THIS SIZE: change 68% to whatever you like (60–75% works well) */
#cclw-offer-modal .cclw-voucher-preview{
  width: 90% !important;
  max-width: 420px !important;
  margin: 0 auto 10px !important;
  display: block;
  border-radius: 16px !important;
  background: transparent !important;/* ✅ was #fff !important */
  box-shadow: none !important;       /* ✅ optional */
}
/* Keep the Lottie overlay centered on top of the image */
#cclw-offer-modal .cclw-splash-lottie.over{
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
  z-index: 2 !important;
  --anim-size: min(220px, 55%) !important; /* animation size; optional tweak */
}
#cclw-offer-modal .cclw-splash-lottie.over > *{
  width: var(--anim-size) !important;
  height: var(--anim-size) !important;
}

/* Mobile: let the image breathe a bit more */
@media (max-width: 420px){
  #cclw-offer-modal .cclw-voucher-preview{
    width: 74% !important;
    max-width: 300px !important;
  }
}
#cclw-offer-modal .cclw-splash-code-row { display: none !important; }