/* =============================================
   ALLNATURALS — STOCK NOTIFICATION CARD
   Site palette: pink #e07a9f · purple #9b59b6 · gold #f4c95d
   ============================================= */

/* ── Spacing from the disabled button above ───── */
.csn-outer-wrapper {
  margin-top: 32px !important;
}

/* ── Card shell ──────────────────────────────── */
.csn-card {
  padding: 22px 24px 26px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}

/* Shared shimmer overlay */
.csn-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 25%,
    rgba(255,255,255,0.06) 50%,
    transparent 75%);
  pointer-events: none;
  animation: csn-card-shimmer 4s ease-in-out infinite;
}
@keyframes csn-card-shimmer {
  0%,100% { transform: translateX(-60%); }
  50%      { transform: translateX(60%); }
}

/* ── Coming Soon — deep purple / gold ────────── */
.csn-card--coming-soon {
  /* Two background layers: 5px gradient strip on the left, then the card fill.
     Both respect border-radius — unlike border-image which kills it. */
  background:
    linear-gradient(180deg, #f4c95d 0%, #e07a9f 50%, #9b59b6 100%)
      left / 5px 100% no-repeat,
    linear-gradient(145deg, #1a0830 0%, #2d1258 45%, #3d1a70 80%, #2a0f50 100%);
  border: none;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.45),
    0  4px 16px rgba(155,89,182,0.25),
    inset 0 1px 0 rgba(244,201,93,0.15);
}

/* ── Out-of-Stock — deep rose / pink ─────────── */
.csn-card--oos {
  background:
    linear-gradient(180deg, #f8a5c2 0%, #e07a9f 50%, #d15f8a 100%)
      left / 5px 100% no-repeat,
    linear-gradient(145deg, #220010 0%, #45001f 45%, #62002c 80%, #38001a 100%);
  border: none;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.45),
    0  4px 16px rgba(209,95,138,0.25),
    inset 0 1px 0 rgba(248,165,194,0.12);
}

/* ── Icon + heading ─────────────────────────── */
.csn-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.csn-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px currentColor);
}

.csn-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  margin: 0;
}
.csn-card--coming-soon .csn-title {
  color: #f4c95d;
  text-shadow: 0 0 12px rgba(244,201,93,0.6);
}
.csn-card--oos .csn-title {
  color: #f8a5c2;
  text-shadow: 0 0 12px rgba(248,165,194,0.5);
}

/* ── Description ────────────────────────────── */
.csn-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0 0 18px;
}
.csn-card--coming-soon .csn-desc { color: #e0ccff; }
.csn-card--oos         .csn-desc { color: #ffd6e7; }

/* ── NOTIFY ME button — shared base ─────────── */
.csn-trigger.button,
button.csn-trigger,
.csn-one-click.button,
input.csn-one-click {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  padding: 14px 28px !important;
  border-radius: 50px !important;
  border: none !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer !important;
  overflow: visible !important;
  z-index: 0;
  transition:
    transform  0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease !important;
}

/* Shimmer sweep on hover */
.csn-trigger.button::before,
button.csn-trigger::before,
.csn-one-click.button::before,
input.csn-one-click::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transition: left 0.55s ease;
  border-radius: 50px;
  pointer-events: none;
}
.csn-trigger.button:hover::before,
button.csn-trigger:hover::before,
.csn-one-click.button:hover::before,
input.csn-one-click:hover::before {
  left: 130%;
}

/* Glowing ring on hover */
.csn-trigger.button::after,
button.csn-trigger::after,
.csn-one-click.button::after,
input.csn-one-click::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 54px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.csn-trigger.button:hover::after,
button.csn-trigger:hover::after,
.csn-one-click.button:hover::after,
input.csn-one-click:hover::after {
  opacity: 1;
  animation: csn-ring 1.8s linear infinite;
}

/* ── Coming Soon button — gold → pink → purple ── */
.csn-card--coming-soon .csn-trigger.button,
.csn-card--coming-soon button.csn-trigger,
.csn-card--coming-soon .csn-one-click.button,
.csn-card--coming-soon input.csn-one-click {
  background: linear-gradient(135deg, #f4c95d 0%, #e07a9f 50%, #9b59b6 100%) !important;
  color: #1a0830 !important;
  box-shadow: 0 6px 22px rgba(244,201,93,0.4), 0 2px 8px rgba(155,89,182,0.3) !important;
}
.csn-card--coming-soon .csn-trigger.button:hover,
.csn-card--coming-soon button.csn-trigger:hover,
.csn-card--coming-soon .csn-one-click.button:hover,
.csn-card--coming-soon input.csn-one-click:hover {
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 14px 38px rgba(244,201,93,0.55), 0 4px 16px rgba(155,89,182,0.45) !important;
}
.csn-card--coming-soon .csn-trigger.button::after,
.csn-card--coming-soon button.csn-trigger::after,
.csn-card--coming-soon .csn-one-click.button::after,
.csn-card--coming-soon input.csn-one-click::after {
  background: linear-gradient(135deg, #f4c95d, #e07a9f, #9b59b6, #f4c95d);
}

/* ── OOS button — pink → rose ────────────────── */
.csn-card--oos .csn-trigger.button,
.csn-card--oos button.csn-trigger,
.csn-card--oos .csn-one-click.button,
.csn-card--oos input.csn-one-click {
  background: linear-gradient(135deg, #f8a5c2 0%, #e07a9f 40%, #d15f8a 80%, #9b59b6 100%) !important;
  color: #1a0010 !important;
  box-shadow: 0 6px 22px rgba(209,95,138,0.45), 0 2px 8px rgba(155,89,182,0.25) !important;
}
.csn-card--oos .csn-trigger.button:hover,
.csn-card--oos button.csn-trigger:hover,
.csn-card--oos .csn-one-click.button:hover,
.csn-card--oos input.csn-one-click:hover {
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 14px 38px rgba(209,95,138,0.6), 0 4px 18px rgba(155,89,182,0.35) !important;
}
.csn-card--oos .csn-trigger.button::after,
.csn-card--oos button.csn-trigger::after,
.csn-card--oos .csn-one-click.button::after,
.csn-card--oos input.csn-one-click::after {
  background: linear-gradient(135deg, #f8a5c2, #e07a9f, #d15f8a, #9b59b6, #f8a5c2);
}

@keyframes csn-ring {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}

/* ── Sparkle particles (JS-generated) ─────────── */
.csn-sparkle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: var(--csn-color, #f4c95d);
  transform-origin: center center;
  animation: csn-sparkle-out var(--dur, 0.65s) ease-out var(--delay, 0s) forwards;
  z-index: 9999;
}

@keyframes csn-sparkle-out {
  0%   {
    transform: rotate(var(--angle)) translateX(0px) scale(1);
    opacity: 1;
  }
  60%  { opacity: 0.9; }
  100% {
    transform: rotate(var(--angle)) translateX(var(--dist)) scale(0.1);
    opacity: 0;
  }
}

/* Star-shaped sparkle variant */
.csn-sparkle--star {
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* ── Already registered — confirmed state ───────── */
.csn-registered.button,
input.csn-registered {
  display: block !important;
  width: 100% !important;
  padding: 14px 28px !important;
  border-radius: 50px !important;
  border: none !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: default !important;
  background: linear-gradient(135deg, #166534 0%, #15803d 100%) !important;
  color: #dcfce7 !important;
  box-shadow: 0 4px 14px rgba(22,101,52,0.35) !important;
  opacity: 0.95;
}

/* ── Reveal area ─────────────────────────────── */
.csn-reveal {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.42s cubic-bezier(0.34, 1.2, 0.64, 1),
              opacity 0.32s ease,
              margin-top 0.32s ease;
  margin-top: 0;
}
.csn-reveal.csn-open {
  max-height: 160px;
  opacity: 1;
  margin-top: 14px;
}

/* Email input */
.csn-reveal input[type="text"],
.csn-reveal input[type="email"],
.csn-reveal .form-text {
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  margin-bottom: 12px !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
  border: 1.5px solid rgba(255,255,255,0.2) !important;
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}
.csn-reveal input::placeholder,
.csn-reveal .form-text::placeholder { color: rgba(255,255,255,0.38); }
.csn-card--coming-soon .csn-reveal input:focus,
.csn-card--coming-soon .csn-reveal .form-text:focus {
  border-color: #f4c95d !important;
  box-shadow: 0 0 0 3px rgba(244,201,93,0.2) !important;
  background: rgba(244,201,93,0.08) !important;
}
.csn-card--oos .csn-reveal input:focus,
.csn-card--oos .csn-reveal .form-text:focus {
  border-color: #e07a9f !important;
  box-shadow: 0 0 0 3px rgba(224,122,159,0.2) !important;
  background: rgba(224,122,159,0.08) !important;
}
.csn-reveal .form-item__label { display: none !important; }

/* Send button (inside reveal) */
.csn-submit-real.button,
input.csn-submit-real {
  display: block !important;
  width: 100% !important;
  padding: 12px 20px !important;
  border-radius: 50px !important;
  border: none !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s !important;
}
.csn-card--coming-soon .csn-submit-real.button,
.csn-card--coming-soon input.csn-submit-real {
  background: linear-gradient(135deg, #f4c95d, #e07a9f, #9b59b6) !important;
  color: #1a0830 !important;
  box-shadow: 0 4px 14px rgba(244,201,93,0.3) !important;
}
.csn-card--oos .csn-submit-real.button,
.csn-card--oos input.csn-submit-real {
  background: linear-gradient(135deg, #f8a5c2, #e07a9f, #d15f8a) !important;
  color: #1a0010 !important;
  box-shadow: 0 4px 14px rgba(209,95,138,0.35) !important;
}
.csn-submit-real.button:hover,
input.csn-submit-real:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(209,95,138,0.45) !important;
}

/* ── Hide native fieldset chrome ─────────────── */
fieldset.csn-fieldset,
.csn-fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.csn-fieldset legend,
.csn-fieldset .fieldset-legend { display: none !important; }

/* ── Mobile ──────────────────────────────────── */
@media (max-width: 600px) {
  .csn-outer-wrapper { margin-top: 24px !important; }
  .csn-card { padding: 18px 18px 22px; border-radius: 14px; }
}