/* ═══════════════════════════════════════════════════════════════
   Enquiry Now Pro — Frontend CSS v6.0
   Buttons: loop cards (shop/archive) + single product (above description)
   All vendor prefixes included. No color-mix(). No modern-only CSS.
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700;800;900&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --enp-c1:     #111111;
  --enp-c2:     #2d2d2d;
  --enp-accent: #f59e0b;
  --enp-r:      12px;
  --enp-r-lg:   22px;
  --enp-font:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ════════════════════════════════════════════════════════════
   §1  HIDE ADD-TO-CART + CHECKOUT EVERYWHERE
       PHP hooks handle this server-side (primary)
       CSS is belt-and-suspenders fallback
════════════════════════════════════════════════════════════ */
.add_to_cart_button:not(.enp-enquiry-btn),
.single_add_to_cart_button:not(.enp-enquiry-btn),
button[name="add-to-cart"]:not(.enp-enquiry-btn),
input[name="add-to-cart"],
a[data-product_id]:not(.enp-enquiry-btn),
.wc-block-components-product-button__button:not(.enp-enquiry-btn),
.wc-block-grid__product-add-to-cart button:not(.enp-enquiry-btn),
.wp-block-woocommerce-product-button button:not(.enp-enquiry-btn),
.et-atc-button:not(.enp-enquiry-btn),
.etheme-add-to-cart:not(.enp-enquiry-btn),
.ux-atc-button:not(.enp-enquiry-btn),
.woocommerce div.product form.cart,
a.checkout-button:not(.enp-enquiry-btn),
.wc-proceed-to-checkout,
#place_order,
button[name="woocommerce_checkout_place_order"],
.wc-block-cart__submit-button:not(.enp-enquiry-btn),
.wc-block-components-checkout-place-order-button:not(.enp-enquiry-btn),
.woocommerce-notices-wrapper a.wc-forward,
.woocommerce-notices-wrapper a.button.wc-forward,
.woocommerce-message > a.button,
.wc-block-mini-cart__footer a:not(.enp-enquiry-btn),
.woocommerce-mini-cart__buttons a.button:not(.enp-enquiry-btn) {
  display:         none !important;
  visibility:      hidden !important;
  pointer-events:  none !important;
}

/* ════════════════════════════════════════════════════════════
   §2  SHARED BUTTON BASE
════════════════════════════════════════════════════════════ */
button.enp-enquiry-btn,
.woocommerce button.enp-enquiry-btn,
body button.enp-enquiry-btn,
.enp-enquiry-btn {
  /* Layout */
  display:         -webkit-inline-flex !important;
  display:         inline-flex !important;
  -webkit-box-align: center !important;
          align-items: center !important;
  -webkit-box-pack: center !important;
          justify-content: center !important;
  gap:             8px !important;

  /* Typography */
  font-family:     var(--enp-font) !important;
  font-weight:     800 !important;
  letter-spacing:  0.4px !important;
  text-decoration: none !important;
  text-transform:  none !important;
  line-height:     1.25 !important;
  color:           #ffffff !important;
  white-space:     nowrap !important;

  /* Appearance */
  border:          none !important;
  border-radius:   var(--enp-r) !important;
  cursor:          pointer !important;
  position:        relative !important;
  overflow:        hidden !important;
  outline:         none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-sizing:      border-box !important;
  -webkit-appearance: none !important;

  /* Gradient */
  background: -webkit-linear-gradient(135deg, var(--enp-c1) 0%, var(--enp-c2) 100%) !important;
  background:         linear-gradient(135deg, var(--enp-c1) 0%, var(--enp-c2) 100%) !important;

  /* Shadow — bottom edge gives a "raised" feel */
  -webkit-box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 -2px 0 rgba(0,0,0,0.28) inset,
    0 4px 0 rgba(0,0,0,0.32),
    0 6px 20px rgba(0,0,0,0.24) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 -2px 0 rgba(0,0,0,0.28) inset,
    0 4px 0 rgba(0,0,0,0.32),
    0 6px 20px rgba(0,0,0,0.24) !important;

  /* Transition */
  -webkit-transition:
    -webkit-transform 0.18s cubic-bezier(0.34, 1.5, 0.64, 1),
    box-shadow        0.18s ease,
    -webkit-filter    0.18s ease !important;
  transition:
    transform  0.18s cubic-bezier(0.34, 1.5, 0.64, 1),
    box-shadow 0.18s ease,
    filter     0.18s ease !important;
}

/* Shimmer sweep on hover */
button.enp-enquiry-btn::before,
.enp-enquiry-btn::before {
  content:    '' !important;
  position:   absolute !important;
  top: 0 !important; left: -110% !important;
  width: 55% !important; height: 100% !important;
  background: -webkit-linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%) !important;
  background:         linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%) !important;
  -webkit-transform: skewX(-22deg) !important;
          transform: skewX(-22deg) !important;
  -webkit-transition: left 0.55s ease !important;
          transition: left 0.55s ease !important;
  pointer-events: none !important;
}
button.enp-enquiry-btn:hover::before,
.enp-enquiry-btn:hover::before { left: 150% !important; }

/* Hover */
button.enp-enquiry-btn:hover,
.woocommerce button.enp-enquiry-btn:hover,
.enp-enquiry-btn:hover {
  -webkit-transform: translateY(-3px) scale(1.015) !important;
          transform: translateY(-3px) scale(1.015) !important;
  -webkit-box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -2px 0 rgba(0,0,0,0.30) inset,
    0 6px 0 rgba(0,0,0,0.28),
    0 14px 36px rgba(0,0,0,0.32) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -2px 0 rgba(0,0,0,0.30) inset,
    0 6px 0 rgba(0,0,0,0.28),
    0 14px 36px rgba(0,0,0,0.32) !important;
  -webkit-filter: brightness(1.12) !important;
          filter: brightness(1.12) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Active / press */
button.enp-enquiry-btn:active,
.enp-enquiry-btn:active {
  -webkit-transform: translateY(1px) scale(0.98) !important;
          transform: translateY(1px) scale(0.98) !important;
  -webkit-box-shadow:
    0 1px 0 rgba(0,0,0,0.24),
    0 2px 8px rgba(0,0,0,0.18) !important;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.24),
    0 2px 8px rgba(0,0,0,0.18) !important;
}

/* Icon bounce animation */
.enp-enquiry-btn .enp-btn-icon {
  display:     inline-block !important;
  font-size:   1em !important;
  -webkit-flex-shrink: 0 !important;
          flex-shrink: 0 !important;
  -webkit-animation: enpBounce 2.8s ease-in-out infinite !important;
          animation: enpBounce 2.8s ease-in-out infinite !important;
}
@-webkit-keyframes enpBounce {
  0%,100% { -webkit-transform: translateY(0) rotate(0deg); }
  35%     { -webkit-transform: translateY(-3px) rotate(-10deg); }
  65%     { -webkit-transform: translateY(1px) rotate(5deg); }
}
@keyframes enpBounce {
  0%,100% { transform: translateY(0) rotate(0deg); }
  35%     { transform: translateY(-3px) rotate(-10deg); }
  65%     { transform: translateY(1px) rotate(5deg); }
}

/* ════════════════════════════════════════════════════════════
   §3  LOOP CARD BUTTON  (shop / archive / related / upsells)
════════════════════════════════════════════════════════════ */
button.enp-loop-btn,
.enp-loop-btn {
  width:         100% !important;
  padding:       12px 16px !important;
  font-size:     13px !important;
  border-radius: 10px !important;
  margin-top:    10px !important;
}

/* Slightly smaller icon on loop cards */
.enp-loop-btn .enp-btn-icon { font-size: 0.95em !important; }

/* ── Responsive loop card ─────────────────────────────────── */
/* Medium grid (tablet 2-col) */
@media (max-width: 900px) {
  button.enp-loop-btn, .enp-loop-btn {
    padding:   11px 13px !important;
    font-size: 13px !important;
  }
}
/* Small / 1-col mobile */
@media (max-width: 480px) {
  button.enp-loop-btn, .enp-loop-btn {
    padding:   10px 12px !important;
    font-size: 12px !important;
    gap:       6px !important;
    margin-top: 8px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   §4  SINGLE PRODUCT BUTTON  (above short description)
════════════════════════════════════════════════════════════ */
.enp-single-wrap {
  width:         100%;
  margin-bottom: 18px;
  box-sizing:    border-box;
}

button.enp-single-btn,
.enp-single-btn {
  width:         100% !important;
  padding:       18px 32px !important;
  font-size:     17px !important;
  font-weight:   900 !important;
  border-radius: 14px !important;
  letter-spacing: 0.5px !important;
}

/* Tablet */
@media (max-width: 1024px) {
  button.enp-single-btn, .enp-single-btn {
    padding:   16px 24px !important;
    font-size: 16px !important;
  }
}
/* Mobile */
@media (max-width: 768px) {
  button.enp-single-btn, .enp-single-btn {
    padding:   15px 20px !important;
    font-size: 15px !important;
  }
}
@media (max-width: 480px) {
  button.enp-single-btn, .enp-single-btn {
    padding:   14px 16px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }
  .enp-single-wrap { margin-bottom: 14px; }
}

/* ════════════════════════════════════════════════════════════
   §5  PRESET COLOUR THEMES  (set via body class from admin)
════════════════════════════════════════════════════════════ */
body.enp-preset-marble_gold { --enp-c1: #92600a; --enp-c2: #c8930a; }
body.enp-preset-neon_dark   { --enp-c1: #5b21b6; --enp-c2: #7c3aed; }
body.enp-preset-ocean       { --enp-c1: #0369a1; --enp-c2: #0ea5e9; }
body.enp-preset-cherry      { --enp-c1: #9f1239; --enp-c2: #e11d48; }
body.enp-preset-cyber       { --enp-c1: #164e63; --enp-c2: #06b6d4; }

/* ════════════════════════════════════════════════════════════
   §6  OVERLAY + POPUP  —  Step-by-step wizard  (clean, fast)
   No heavy animations. No tilt. No stagger. Just smooth UX.
════════════════════════════════════════════════════════════ */

/* ── Keyframes — kept minimal ───────────────────────────── */
@-webkit-keyframes enpModalIn {
  from { opacity:0; -webkit-transform: scale(0.9) translateY(-20px); }
}
@keyframes enpModalIn {
  from { opacity:0; transform: scale(0.9) translateY(-20px); }
}
@-webkit-keyframes enpStepIn {
  from { opacity:0; -webkit-transform: translateX(30px); }
  to   { opacity:1; -webkit-transform: translateX(0); }
}
@keyframes enpStepIn {
  from { opacity:0; transform: translateX(30px); }
  to   { opacity:1; transform: translateX(0); }
}
@-webkit-keyframes enpStepBack {
  from { opacity:0; -webkit-transform: translateX(-30px); }
  to   { opacity:1; -webkit-transform: translateX(0); }
}
@keyframes enpStepBack {
  from { opacity:0; transform: translateX(-30px); }
  to   { opacity:1; transform: translateX(0); }
}
@-webkit-keyframes enpDots { to { background-position: 26px 26px; } }
@keyframes enpDots         { to { background-position: 26px 26px; } }
@-webkit-keyframes enpShake {
  0%,100%{-webkit-transform:translateX(0)}
  25%    {-webkit-transform:translateX(-5px)}
  75%    {-webkit-transform:translateX(5px)}
}
@keyframes enpShake {
  0%,100%{transform:translateX(0)}
  25%    {transform:translateX(-5px)}
  75%    {transform:translateX(5px)}
}
@-webkit-keyframes enpDot {
  0%,80%,100%{-webkit-transform:scale(0.55);opacity:0.45}
  40%{-webkit-transform:scale(1.1);opacity:1}
}
@keyframes enpDot {
  0%,80%,100%{transform:scale(0.55);opacity:0.45}
  40%{transform:scale(1.1);opacity:1}
}

/* ── Overlay ─────────────────────────────────────────────── */
.enp-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(5,8,22,0.82);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  z-index:    2147483647;
  overflow-y: auto;
  overflow-x: hidden;
  padding:    20px 16px 80px;
  box-sizing: border-box;
}
.enp-overlay:not([style*="display"]) { display:none !important; }

/* ── Modal ───────────────────────────────────────────────── */
.enp-overlay .enp-modal,
body .enp-overlay .enp-modal {
  position:      relative !important;
  background:    #ffffff !important;
  max-width:     460px !important;
  width:         100% !important;
  margin:        5vh auto !important;
  border-radius: var(--enp-r-lg) !important;
  overflow:      visible !important;
  -webkit-box-shadow: 0 40px 100px rgba(0,0,0,0.5) !important;
          box-shadow: 0 40px 100px rgba(0,0,0,0.5) !important;
  -webkit-animation: enpModalIn 0.32s cubic-bezier(0.22,1.2,0.36,1) both !important;
          animation: enpModalIn 0.32s cubic-bezier(0.22,1.2,0.36,1) both !important;
  float: none !important;
}

/* ── Close ───────────────────────────────────────────────── */
.enp-modal-close {
  position:   absolute !important;
  top: 12px !important; right: 12px !important;
  z-index:    20 !important;
  width:  32px !important; height: 32px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.07) !important;
  border:     none !important;
  font-size:  18px !important; line-height:1 !important;
  display:    -webkit-flex !important; display:flex !important;
  -webkit-align-items:center !important; align-items:center !important;
  -webkit-justify-content:center !important; justify-content:center !important;
  cursor:     pointer !important;
  color:      #555 !important;
  padding:    0 !important;
  -webkit-box-shadow:none !important; box-shadow:none !important;
  -webkit-transition: background 0.15s, color 0.15s, -webkit-transform 0.15s !important;
          transition: background 0.15s, color 0.15s, transform 0.15s !important;
}
.enp-modal-close:hover {
  background: rgba(239,68,68,0.12) !important;
  color: #ef4444 !important;
  -webkit-transform: rotate(90deg) !important;
          transform: rotate(90deg) !important;
}

/* ── Header ──────────────────────────────────────────────── */
.enp-modal-header {
  position:    relative;
  overflow:    hidden;
  padding:     24px 24px 20px;
  background:  -webkit-linear-gradient(145deg, #0f172a 0%, #1e1b4b 55%, #312e81 100%);
  background:          linear-gradient(145deg, #0f172a 0%, #1e1b4b 55%, #312e81 100%);
  border-radius: var(--enp-r-lg) var(--enp-r-lg) 0 0;
}
.enp-modal-header::before {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle,rgba(255,255,255,0.05) 1px,transparent 1px);
  background-size: 26px 26px;
  -webkit-animation: enpDots 20s linear infinite;
          animation: enpDots 20s linear infinite;
  pointer-events:none;
}
.enp-modal-header::after {
  content:''; position:absolute;
  bottom:-40px; right:-40px;
  width:180px; height:180px; border-radius:50%;
  background: radial-gradient(circle,rgba(99,102,241,0.3),transparent 70%);
  pointer-events:none;
}
.enp-modal-header h2 {
  position:relative; z-index:1;
  margin: 0 0 2px !important;
  font-family: var(--enp-font) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: -0.3px;
}
.enp-modal-header p {
  position:relative; z-index:1;
  margin:0 !important;
  font-size:12px !important;
  color:rgba(255,255,255,0.55) !important;
}

/* ── Product mini ────────────────────────────────────────── */
.enp-product-mini {
  position:relative; z-index:1;
  display:-webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  gap:10px;
  background:rgba(255,255,255,0.09);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:9px 12px;
  margin-bottom:12px;
}
.enp-product-mini img {
  width:42px !important; height:42px !important;
  border-radius:8px !important; object-fit:cover;
  -webkit-flex-shrink:0; flex-shrink:0;
}
.enp-product-name  { font-weight:700; font-size:12px; color:#fff; }
.enp-product-price { font-size:11px; color:#86efac; font-weight:600; margin-top:2px; }

/* ── Step dots ───────────────────────────────────────────── */
.enp-step-dots {
  position: relative; z-index:1;
  display:  -webkit-flex; display:flex;
  -webkit-align-items: center; align-items:center;
  -webkit-justify-content: center; justify-content:center;
  gap: 10px;
  margin-top: 14px;
}
.enp-step-dot {
  width:  8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  -webkit-transition: all 0.25s ease; transition: all 0.25s ease;
}
.enp-step-dot.active {
  background: #a5b4fc;
  width: 22px;
  border-radius: 4px;
}
.enp-step-dot.done {
  background: #86efac;
}
.enp-step-label {
  position: relative; z-index:1;
  text-align: center;
  margin-top: 7px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ── Form body ───────────────────────────────────────────── */
.enp-overlay .enp-form {
  padding:       20px 24px 24px !important;
  background:    #ffffff !important;
  border-radius: 0 0 var(--enp-r-lg) var(--enp-r-lg) !important;
  position:      relative !important;
  z-index:       1 !important;
  overflow:      visible !important;
}

/* ── Wizard steps ────────────────────────────────────────── */
.enp-step {
  display: none !important;
}
.enp-step.active {
  display: block !important;
  -webkit-animation: enpStepIn 0.25s ease both;
          animation: enpStepIn 0.25s ease both;
}
.enp-step.back {
  -webkit-animation: enpStepBack 0.25s ease both;
          animation: enpStepBack 0.25s ease both;
}

/* ── Field ───────────────────────────────────────────────── */
.enp-overlay .enp-field,
body .enp-overlay .enp-field { margin-bottom: 14px !important; position:relative !important; }
.enp-field:has(#enpState) { z-index:10 !important; }

.enp-overlay .enp-field label,
body .enp-overlay .enp-field label {
  display:        block !important;
  font-family:    var(--enp-font) !important;
  font-size:      10px !important;
  font-weight:    700 !important;
  color:          #94a3b8 !important;
  margin-bottom:  5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  background:     transparent !important;
  padding:        0 !important;
  border:         none !important;
  -webkit-transition: color 0.15s !important; transition: color 0.15s !important;
}
.enp-overlay .enp-field:focus-within label { color: #6366f1 !important; }

.enp-overlay .enp-form .enp-field input,
.enp-overlay .enp-form .enp-field textarea,
body .enp-overlay .enp-field input,
body .enp-overlay .enp-field textarea {
  width:        100% !important;
  padding:      13px 14px !important;
  font-family:  var(--enp-font) !important;
  font-size:    15px !important;
  font-weight:  500 !important;
  color:        #0f172a !important;
  background:   #f8fafc !important;
  border:       1.5px solid #e2e8f0 !important;
  border-radius:10px !important;
  outline:      none !important;
  box-sizing:   border-box !important;
  -webkit-appearance:none !important; appearance:none !important;
  -webkit-box-shadow:none !important; box-shadow:none !important;
  margin:       0 !important;
  display:      block !important;
  max-width:    100% !important;
  -webkit-transition: border-color 0.15s, -webkit-box-shadow 0.15s, background 0.15s !important;
          transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important;
}
.enp-overlay .enp-form .enp-field select,
body .enp-overlay .enp-field select {
  width:         100% !important;
  padding:       13px 36px 13px 14px !important;
  font-family:   var(--enp-font) !important;
  font-size:     15px !important;
  font-weight:   500 !important;
  color:         #0f172a !important;
  background:    #f8fafc !important;
  border:        1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  outline:       none !important;
  box-sizing:    border-box !important;
  -webkit-box-shadow:none !important; box-shadow:none !important;
  margin:        0 !important;
  cursor:        pointer !important;
  line-height:   1.4 !important;
  height:        auto !important;
  min-height:    46px !important;
  display:       block !important;
  max-width:     100% !important;
  -webkit-transition: border-color 0.15s, -webkit-box-shadow 0.15s, background 0.15s !important;
          transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important;
}
.enp-overlay .enp-form .enp-field input:focus,
.enp-overlay .enp-form .enp-field select:focus,
.enp-overlay .enp-form .enp-field textarea:focus {
  border-color:  #6366f1 !important;
  background:    #ffffff !important;
  -webkit-box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
          box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
  outline:       none !important;
}
.enp-overlay .enp-form .enp-field textarea,
body .enp-overlay .enp-field textarea {
  resize: vertical !important;
  min-height: 72px !important;
}

/* ── Error box ───────────────────────────────────────────── */
.enp-error {
  display:     -webkit-flex; display:flex;
  -webkit-align-items:center; align-items:center;
  gap:8px;
  background:  #fef2f2;
  border:      1px solid #fecaca;
  color:       #991b1b;
  padding:     9px 12px;
  border-radius:10px;
  font-family: var(--enp-font);
  font-size:   13px;
  font-weight: 500;
  margin-bottom:12px;
  -webkit-animation: enpShake 0.3s ease;
          animation: enpShake 0.3s ease;
}
.enp-error::before { content:'⚠️'; -webkit-flex-shrink:0; flex-shrink:0; }

/* ── Step nav buttons ────────────────────────────────────── */
.enp-overlay .enp-step-nav {
  display: -webkit-flex !important; display:flex !important;
  gap: 10px !important;
  margin-top: 8px !important;
}

/* Next / Submit button — max specificity to beat any theme */
.enp-overlay .enp-form button.enp-next-btn,
.enp-overlay .enp-form button.enp-submit-btn,
body .enp-overlay .enp-next-btn,
body .enp-overlay .enp-submit-btn {
  -webkit-flex: 1 !important; flex:1 !important;
  display:       -webkit-inline-flex !important;
  display:       inline-flex !important;
  -webkit-align-items: center !important; align-items: center !important;
  -webkit-justify-content: center !important; justify-content: center !important;
  padding:       14px 20px !important;
  font-family:   var(--enp-font) !important;
  font-size:     15px !important;
  font-weight:   800 !important;
  letter-spacing:0.3px !important;
  color:         #ffffff !important;
  border:        none !important;
  border-radius: 11px !important;
  cursor:        pointer !important;
  position:      relative !important;
  overflow:      hidden !important;
  box-sizing:    border-box !important;
  text-transform:none !important;
  line-height:   1.2 !important;
  width:         auto !important;
  min-width:     0 !important;
  background: -webkit-linear-gradient(135deg, var(--enp-c1) 0%, var(--enp-c2) 100%) !important;
  background:         linear-gradient(135deg, var(--enp-c1) 0%, var(--enp-c2) 100%) !important;
  -webkit-box-shadow: 0 4px 0 rgba(0,0,0,0.3), 0 6px 18px rgba(0,0,0,0.18) !important;
          box-shadow: 0 4px 0 rgba(0,0,0,0.3), 0 6px 18px rgba(0,0,0,0.18) !important;
  -webkit-transition: -webkit-transform 0.15s, -webkit-box-shadow 0.15s !important;
          transition: transform 0.15s, box-shadow 0.15s !important;
  margin: 0 !important;
  height: auto !important;
}
.enp-overlay .enp-form button.enp-next-btn:hover,
.enp-overlay .enp-form button.enp-submit-btn:not(:disabled):hover,
body .enp-overlay .enp-next-btn:hover,
body .enp-overlay .enp-submit-btn:not(:disabled):hover {
  -webkit-transform: translateY(-2px) !important; transform: translateY(-2px) !important;
  -webkit-filter: brightness(1.1) !important; filter: brightness(1.1) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.enp-overlay .enp-form button.enp-submit-btn:disabled,
body .enp-overlay .enp-submit-btn:disabled {
  opacity:0.5 !important; cursor:not-allowed !important;
  -webkit-transform:none !important; transform:none !important;
  -webkit-box-shadow:none !important; box-shadow:none !important;
}

/* Back button */
.enp-overlay .enp-form button.enp-back-btn,
body .enp-overlay .enp-back-btn {
  display:       -webkit-inline-flex !important; display:inline-flex !important;
  -webkit-align-items:center !important; align-items:center !important;
  -webkit-justify-content:center !important; justify-content:center !important;
  width:  46px !important; min-width:46px !important; max-width:46px !important;
  height: 46px !important;
  background:    #f1f5f9 !important;
  border:        1.5px solid #e2e8f0 !important;
  border-radius: 11px !important;
  cursor:        pointer !important;
  font-size:     20px !important;
  color:         #64748b !important;
  -webkit-flex-shrink:0 !important; flex-shrink:0 !important;
  padding:       0 !important;
  line-height:   1 !important;
  -webkit-box-shadow:none !important; box-shadow:none !important;
  -webkit-transition: background 0.15s, color 0.15s !important;
          transition: background 0.15s, color 0.15s !important;
  margin: 0 !important;
  -webkit-flex: none !important; flex: none !important;
  text-decoration: none !important;
}
.enp-overlay .enp-form button.enp-back-btn:hover,
body .enp-overlay .enp-back-btn:hover {
  background:  #e2e8f0 !important;
  color:       #1e293b !important;
}

/* ── Loading dots ────────────────────────────────────────── */
.enp-loader {
  display:-webkit-inline-flex; display:inline-flex;
  gap:5px; -webkit-align-items:center; align-items:center;
}
.enp-loader span {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,0.9);
  -webkit-animation: enpDot 1.1s ease-in-out infinite both;
          animation: enpDot 1.1s ease-in-out infinite both;
}
.enp-loader span:nth-child(2){-webkit-animation-delay:.18s;animation-delay:.18s;}
.enp-loader span:nth-child(3){-webkit-animation-delay:.36s;animation-delay:.36s;}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width:600px) {
  .enp-overlay { padding:0; -webkit-align-items:flex-end; align-items:flex-end; }
  .enp-overlay[style*="display: flex"],
  .enp-overlay[style*="display:flex"] {
    -webkit-align-items:flex-end !important; align-items:flex-end !important;
  }
  .enp-modal {
    margin:0 auto; max-width:100%;
    border-radius: var(--enp-r-lg) var(--enp-r-lg) 0 0;
    -webkit-animation: enpModalUp 0.3s cubic-bezier(0.22,1.2,0.36,1) both;
            animation: enpModalUp 0.3s cubic-bezier(0.22,1.2,0.36,1) both;
  }
  @-webkit-keyframes enpModalUp { from{-webkit-transform:translateY(100%);opacity:0.7;} }
  @keyframes enpModalUp { from{transform:translateY(100%);opacity:0.7;} }
  .enp-modal-header { padding:18px 18px 14px; }
  .enp-form         { padding:16px 18px 20px; }
  .enp-modal-header h2 { font-size:17px !important; }
}
@media (max-width:360px) {
  .enp-modal-header h2 { font-size:15px !important; }
  .enp-next-btn, .enp-submit-btn { font-size:14px !important; }
  .enp-field input, .enp-field select { font-size:14px !important; }
}
@media (max-height:600px) and (orientation:landscape) {
  .enp-modal-header { padding:10px 20px 8px; }
  .enp-modal-header::before { display:none; }
  .enp-form { padding:8px 20px 12px; }
  .enp-field { margin-bottom:8px; }
}


/* ════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════
   §7  SUCCESS SCREEN — Light #def868 Glassmorphism Edition
═══════════════════════════════════════════════════════════ */

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes enp-ss-in {
  0%   { opacity:0; transform:scale(.82) rotate(-2deg); }
  55%  { opacity:1; transform:scale(1.03) rotate(.5deg); }
  80%  { transform:scale(.98) rotate(0); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes enp-blob-drift {
  0%,100% { transform:translate(0,0) scale(1); }
  33%     { transform:translate(40px,-30px) scale(1.12); }
  66%     { transform:translate(-25px,20px) scale(.92); }
}
@keyframes enp-ring-burst {
  0%   { transform:translate(-50%,-50%) scale(0); opacity:1; }
  100% { transform:translate(-50%,-50%) scale(4); opacity:0; }
}
@keyframes enp-icon-pop {
  0%   { transform:scale(0) rotate(-180deg); opacity:0; }
  55%  { transform:scale(1.18) rotate(6deg); opacity:1; }
  75%  { transform:scale(.92) rotate(-2deg); }
  100% { transform:scale(1) rotate(0); opacity:1; }
}
@keyframes enp-icon-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(0,0,0,.15), 0 12px 40px rgba(0,0,0,.2); }
  50%     { box-shadow:0 0 0 14px rgba(0,0,0,0), 0 16px 50px rgba(0,0,0,.25); }
}
@keyframes enp-circle-draw {
  from { stroke-dashoffset:164; }
  to   { stroke-dashoffset:0; }
}
@keyframes enp-check-draw {
  0%   { stroke-dashoffset:50; opacity:0; }
  20%  { opacity:1; }
  100% { stroke-dashoffset:0; opacity:1; }
}
@keyframes enp-card-in {
  0%   { opacity:0; transform:translateY(30px) scale(.94); }
  65%  { opacity:1; transform:translateY(-4px) scale(1.01); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes enp-eyebrow-in {
  0%   { opacity:0; transform:translateY(10px); letter-spacing:.4em; }
  100% { opacity:1; transform:translateY(0); letter-spacing:.12em; }
}
@keyframes enp-title-in {
  0%   { opacity:0; transform:translateY(16px) scaleX(.9); }
  65%  { opacity:1; transform:translateY(-2px) scaleX(1.01); }
  100% { opacity:1; transform:translateY(0) scaleX(1); }
}
@keyframes enp-sub-in {
  0%   { opacity:0; transform:translateY(12px); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes enp-badge-in {
  0%   { opacity:0; transform:scale(.5) rotate(-10deg); }
  60%  { transform:scale(1.1) rotate(2deg); opacity:1; }
  80%  { transform:scale(.96) rotate(-.5deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes enp-badge-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(0,0,0,.15); }
  50%     { box-shadow:0 0 0 8px rgba(0,0,0,0); }
}
@keyframes enp-btn-in {
  0%   { opacity:0; transform:translateY(16px) scale(.9); }
  65%  { transform:translateY(-3px) scale(1.02); opacity:1; }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes enp-btn-shimmer {
  0%   { background-position:-200% center; }
  100% { background-position:200% center; }
}
@keyframes enp-dot-float {
  0%,100% { transform:translateY(0) rotate(0deg) scale(1); opacity:.6; }
  50%     { transform:translateY(var(--dy,-20px)) rotate(180deg) scale(1.3); opacity:1; }
}
@keyframes enp-glow-ring {
  0%,100% { transform:scale(1); opacity:.4; }
  50%     { transform:scale(1.08); opacity:.7; }
}

/* ── Screen wrapper ────────────────────────────────────── */
.enp-success-screen {
  display:         none;
  position:        fixed !important;
  inset:           0 !important;
  background:      #def868 !important;
  z-index:         2147483648 !important;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  overflow:        hidden;
  font-family:     var(--enp-font, -apple-system, sans-serif);
}
.enp-success-screen.show {
  display:flex !important;
  animation: enp-ss-in .65s cubic-bezier(.22,1.2,.36,1) both !important;
}

/* ── Animated background blobs ─────────────────────────── */
.enp-ss-bg {
  position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
}
.enp-ss-blob {
  position:absolute; border-radius:50%; filter:blur(70px);
}
.enp-ss-blob-1 {
  width:520px; height:520px; top:-120px; left:-100px;
  background:radial-gradient(circle, rgba(255,255,255,.55) 0%, transparent 70%);
  animation: enp-blob-drift 9s ease-in-out infinite;
}
.enp-ss-blob-2 {
  width:400px; height:400px; bottom:-80px; right:-80px;
  background:radial-gradient(circle, rgba(200,232,64,.7) 0%, transparent 70%);
  animation: enp-blob-drift 11s ease-in-out 3s infinite reverse;
}
.enp-ss-blob-3 {
  width:300px; height:300px; top:40%; left:55%;
  background:radial-gradient(circle, rgba(255,255,255,.35) 0%, transparent 70%);
  animation: enp-blob-drift 7s ease-in-out 1.5s infinite;
}

/* canvas */
#enpConfetti { position:fixed; inset:0; pointer-events:none; z-index:1; }

/* ── Burst rings ─────────────────────────────────────────── */
.enp-ss-burst {
  position:absolute; top:50%; left:50%;
  pointer-events:none; z-index:2;
}
.enp-ss-ring {
  position:absolute; border-radius:50%;
  border:2.5px solid rgba(0,0,0,.18);
  width:100px; height:100px;
  margin-left:-50px; margin-top:-50px;
}
.enp-ss-ring.r1 { animation: enp-ring-burst 1.1s cubic-bezier(.2,.8,.4,1) .0s both; }
.enp-ss-ring.r2 { animation: enp-ring-burst 1.1s cubic-bezier(.2,.8,.4,1) .18s both; border-color:rgba(0,0,0,.12); }
.enp-ss-ring.r3 { animation: enp-ring-burst 1.3s cubic-bezier(.2,.8,.4,1) .34s both; border-color:rgba(0,0,0,.08); }

/* ── Check icon ──────────────────────────────────────────── */
.enp-ss-icon-wrap {
  position:relative; z-index:4; margin-bottom:24px;
}
.enp-ss-icon {
  width:88px; height:88px; margin:0 auto;
  background:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  animation: enp-icon-pop .75s cubic-bezier(.22,1.4,.36,1) .1s both,
             enp-icon-pulse 2.8s ease-in-out 1s infinite;
  box-shadow: 0 8px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.9);
}
.enp-ss-icon svg { width:52px; height:52px; overflow:visible; }
.enp-ss-circle {
  stroke:#000; fill:none;
  stroke-dasharray:164; stroke-dashoffset:164; stroke-linecap:round;
  animation: enp-circle-draw .55s cubic-bezier(.4,0,.2,1) .45s forwards;
}
.enp-ss-check {
  stroke:#000; fill:none;
  stroke-dasharray:50; stroke-dashoffset:50; stroke-linecap:round; stroke-linejoin:round;
  animation: enp-check-draw .4s cubic-bezier(.4,0,.2,1) .88s forwards;
}
.enp-ss-icon-glow {
  position:absolute; width:120px; height:120px;
  top:50%; left:50%; transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.6) 0%, transparent 70%);
  animation: enp-glow-ring 2.5s ease-in-out 1s infinite;
}

/* ── Glass card ──────────────────────────────────────────── */
.enp-ss-card {
  position:relative; z-index:5;
  background:rgba(255,255,255,.45);
  border:1.5px solid rgba(255,255,255,.75);
  border-radius:28px;
  padding:28px 36px 26px;
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  max-width:360px; width:90%;
  box-shadow:
    0 8px 32px rgba(0,0,0,.1),
    0 2px 0 rgba(255,255,255,.8) inset,
    0 -1px 0 rgba(0,0,0,.05) inset;
  animation: enp-card-in .6s cubic-bezier(.22,1.2,.36,1) .5s both;
}

.enp-ss-eyebrow {
  font-size:11px; font-weight:800; color:rgba(0,0,0,.5);
  letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:10px;
  animation: enp-eyebrow-in .6s cubic-bezier(.22,1,.36,1) .7s both;
}
.enp-ss-title {
  font-size:28px; font-weight:900; color:#000;
  letter-spacing:-.5px; line-height:1.15;
  margin:0 0 8px;
  animation: enp-title-in .5s cubic-bezier(.22,1.2,.36,1) .82s both;
}
.enp-ss-sub {
  font-size:14px; color:rgba(0,0,0,.55); font-weight:500;
  line-height:1.5; margin:0 0 18px;
  animation: enp-sub-in .45s cubic-bezier(.22,1,.36,1) .95s both;
}
.enp-ss-order {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(0,0,0,.08);
  border:1.5px solid rgba(0,0,0,.15);
  color:#000;
  padding:8px 20px; border-radius:40px;
  font-size:13px; font-weight:800; letter-spacing:.2px;
  margin-bottom:20px;
  animation: enp-badge-in .55s cubic-bezier(.22,1.4,.36,1) 1.05s both,
             enp-badge-pulse 2.4s ease-in-out 1.8s infinite;
}
.enp-ss-divider {
  height:1px; background:rgba(0,0,0,.1); margin:0 0 18px; border-radius:1px;
  animation: enp-sub-in .4s ease 1.1s both;
}
.enp-ss-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:#000; color:#def868;
  padding:13px 32px; border-radius:14px; border:none; cursor:pointer;
  font-size:14px; font-weight:900; letter-spacing:.4px; text-transform:uppercase;
  font-family:var(--enp-font, -apple-system, sans-serif);
  box-shadow:0 4px 0 rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.2);
  transition:transform .18s cubic-bezier(.34,1.4,.64,1), box-shadow .18s;
  background-size:200% auto;
  animation: enp-btn-in .5s cubic-bezier(.22,1.2,.36,1) 1.2s both,
             enp-btn-shimmer 3s linear 2s infinite;
}
.enp-ss-btn:hover {
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 7px 0 rgba(0,0,0,.25), 0 14px 32px rgba(0,0,0,.25);
  color:#def868;
}
.enp-ss-btn:active { transform:translateY(1px) scale(.97); }

/* ── Floating dots ───────────────────────────────────────── */
.enp-ss-dot {
  position:absolute; border-radius:50%; background:#000;
  pointer-events:none; z-index:2;
  animation: enp-dot-float linear infinite;
}
.enp-ss-dot.sd1 { width:10px;height:10px; top:12%; left:9%;  opacity:.12; --dy:-22px; animation-duration:4.1s; }
.enp-ss-dot.sd2 { width:7px; height:7px;  top:18%; right:11%;opacity:.15; --dy:-18px; animation-duration:3.7s; animation-delay:.5s; }
.enp-ss-dot.sd3 { width:12px;height:12px; bottom:28%;left:10%;opacity:.1;  --dy:-25px; animation-duration:5s;   animation-delay:1s; }
.enp-ss-dot.sd4 { width:8px; height:8px;  bottom:20%;right:9%;opacity:.13; --dy:-20px; animation-duration:4.5s; animation-delay:.3s; }
.enp-ss-dot.sd5 { width:6px; height:6px;  top:52%; left:5%;  opacity:.1;  --dy:-16px; animation-duration:3.4s; animation-delay:.8s; }
.enp-ss-dot.sd6 { width:9px; height:9px;  top:65%; right:6%; opacity:.12; --dy:-19px; animation-duration:4.8s; animation-delay:1.3s; }

/* ── Redirect ────────────────────────────────────────────── */
.enp-success-redirect {
  position:absolute; bottom:20px; z-index:5;
  font-size:11px; color:rgba(0,0,0,.3); font-weight:600;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width:480px) {
  .enp-ss-title  { font-size:22px !important; }
  .enp-ss-icon   { width:72px; height:72px; }
  .enp-ss-card   { padding:22px 18px 20px; }
}