/* =============================================
   ALLNATURALS — STOCK NOTIFICATION CARD
   Palette from background image:
     sky-blue  #6bb8f5  · periwinkle #8899d4
     lavender  #9b6fc4  · soft-lav   #c4a8e8
     cream     #fef3e8  · cloud      #f5f8ff
   ============================================= */

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

/* ── Card entrance animation ─────────────────── */
@keyframes csn-card-entrance {
  0%   { opacity: 0; transform: translateY(14px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Card shell ──────────────────────────────── */
.csn-card {
  padding: 22px 24px 26px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  animation: csn-card-entrance 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

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

/* ── Coming Soon — sky-blue sky, lavender accent ─ */
.csn-card--coming-soon {
  background:
    linear-gradient(180deg, #9b6fc4 0%, #6bb8f5 55%, #c8e4ff 100%)
      left / 5px 100% no-repeat,
    linear-gradient(145deg, #f2f7ff 0%, #e4f0ff 40%, #eceaff 75%, #f5f0ff 100%);
  border: 1.5px solid rgba(107,184,245,0.28);
  box-shadow:
    0 8px 32px rgba(107,184,245,0.2),
    0 3px 10px rgba(155,111,196,0.14),
    inset 0 1px 0 rgba(255,255,255,0.85);
  animation: csn-card-entrance 0.55s cubic-bezier(0.34,1.2,0.64,1) both,
             csn-breathe-cs 5s ease-in-out 0.6s infinite;
}
@keyframes csn-breathe-cs {
  0%,100% {
    box-shadow:
      0  8px 32px rgba(107,184,245,0.20),
      0  3px 10px rgba(155,111,196,0.14),
      inset 0 1px 0 rgba(255,255,255,0.85);
  }
  50% {
    box-shadow:
      0 14px 46px rgba(107,184,245,0.34),
      0  5px 18px rgba(155,111,196,0.24),
      inset 0 1px 0 rgba(255,255,255,0.92);
  }
}

/* ── Out-of-Stock — periwinkle + lavender mist ── */
.csn-card--oos {
  background:
    linear-gradient(180deg, #6bb8f5 0%, #8899d4 55%, #b08ee0 100%)
      left / 5px 100% no-repeat,
    linear-gradient(145deg, #f4f6ff 0%, #eceeff 40%, #f0eaff 75%, #f8f4ff 100%);
  border: 1.5px solid rgba(136,153,212,0.28);
  box-shadow:
    0 8px 32px rgba(136,153,212,0.20),
    0 3px 10px rgba(176,142,224,0.16),
    inset 0 1px 0 rgba(255,255,255,0.85);
  animation: csn-card-entrance 0.55s cubic-bezier(0.34,1.2,0.64,1) both,
             csn-breathe-oos 5s ease-in-out 0.6s infinite;
}
@keyframes csn-breathe-oos {
  0%,100% {
    box-shadow:
      0  8px 32px rgba(136,153,212,0.20),
      0  3px 10px rgba(176,142,224,0.16),
      inset 0 1px 0 rgba(255,255,255,0.85);
  }
  50% {
    box-shadow:
      0 14px 46px rgba(136,153,212,0.34),
      0  5px 18px rgba(176,142,224,0.28),
      inset 0 1px 0 rgba(255,255,255,0.92);
  }
}

/* ── Floating orbs (JS-spawned on init) ──────── */
.csn-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: csn-orb-float var(--orb-dur, 4s) ease-in-out var(--orb-delay, 0s) infinite;
  z-index: 0;
}
@keyframes csn-orb-float {
  0%   { opacity: 0;                    transform: translateY(0)                     scale(1);    }
  20%  { opacity: var(--orb-op, 0.22);                                                            }
  50%  { opacity: var(--orb-op, 0.22);  transform: translateY(var(--orb-rise,-16px)) scale(1.1); }
  80%  { opacity: var(--orb-op, 0.22);                                                            }
  100% { opacity: 0;                    transform: translateY(0)                     scale(1);    }
}

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

.csn-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px currentColor);
  animation: csn-icon-pulse 3s ease-in-out infinite;
}
@keyframes csn-icon-pulse {
  0%,100% { filter: drop-shadow(0 0 4px currentColor);  transform: scale(1);    }
  50%     { filter: drop-shadow(0 0 10px currentColor); transform: scale(1.12); }
}

.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: #2d4a8a;
  text-shadow: 0 1px 4px rgba(107,184,245,0.35);
}
.csn-card--oos .csn-title {
  color: #3d2a6a;
  text-shadow: 0 1px 4px rgba(136,153,212,0.35);
}

/* ── Description ────────────────────────────── */
.csn-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0 0 18px;
  position: relative;
  z-index: 1;
}
.csn-card--coming-soon .csn-desc { color: #3a5280; }
.csn-card--oos         .csn-desc { color: #4a3870; }

/* ── 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: 1;
  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.62), 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 — sky-blue → lavender ─── */
.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, #5aa0e8 0%, #8b72cc 50%, #9b59b6 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.18) !important;
  box-shadow: 0 6px 22px rgba(107,184,245,0.42), 0 2px 8px rgba(155,89,182,0.28) !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(107,184,245,0.52), 0 4px 16px rgba(155,89,182,0.38) !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, #6bb8f5, #8b72cc, #c4a8e8, #6bb8f5);
}

/* ── OOS button — periwinkle → lavender ─────── */
.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, #6bb8f5 0%, #8899d4 45%, #9b6fc4 80%, #7b59a6 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.18) !important;
  box-shadow: 0 6px 22px rgba(136,153,212,0.42), 0 2px 8px rgba(155,111,196,0.28) !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(107,184,245,0.5), 0 4px 18px rgba(155,111,196,0.38) !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, #6bb8f5, #8899d4, #b08ee0, #6bb8f5);
}

@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, #6bb8f5);
  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, #48b4d4 0%, #3a9ec0 50%, #2e88a8 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
  box-shadow: 0 4px 14px rgba(74,174,212,0.38) !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;
  position: relative;
  z-index: 1;
}
.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(107,184,245,0.38) !important;
  background: rgba(255,255,255,0.7) !important;
  color: #2d3a5c !important;
}
.csn-reveal input::placeholder,
.csn-reveal .form-text::placeholder { color: rgba(70,100,160,0.42); }
.csn-card--coming-soon .csn-reveal input:focus,
.csn-card--coming-soon .csn-reveal .form-text:focus {
  border-color: #5aa0e8 !important;
  box-shadow: 0 0 0 3px rgba(107,184,245,0.2) !important;
  background: rgba(255,255,255,0.92) !important;
}
.csn-card--oos .csn-reveal input:focus,
.csn-card--oos .csn-reveal .form-text:focus {
  border-color: #8899d4 !important;
  box-shadow: 0 0 0 3px rgba(136,153,212,0.2) !important;
  background: rgba(255,255,255,0.92) !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, #5aa0e8, #8b72cc, #9b59b6) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
  box-shadow: 0 4px 14px rgba(107,184,245,0.32) !important;
}
.csn-card--oos .csn-submit-real.button,
.csn-card--oos input.csn-submit-real {
  background: linear-gradient(135deg, #6bb8f5, #8899d4, #9b6fc4) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
  box-shadow: 0 4px 14px rgba(136,153,212,0.35) !important;
}
.csn-submit-real.button:hover,
input.csn-submit-real:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(107,184,245,0.42) !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; }
}