/* ==========================================================
   EasyDonate — ContentMine skin (ArtMine × Craft, mobile-first)
   Drop-in override: include AFTER theme.min.css + style.css
   ========================================================== */

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

:root{
  /* Keep compatibility with your existing inline vars */
  --accent: var(--accent-color, #fa5252);
  --accent-weak: rgba(250,82,82,.35);
  --accent-2: #7c3aed;

  --bg-0: #07080c;
  --bg-1: #0b0d14;
  --bg-2: #101424;

  --card: rgba(255,255,255,.055);
  --card2: rgba(255,255,255,.075);

  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.14);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.66);

  --r-12: 12px;
  --r-16: 16px;
  --r-20: 20px;

  --shadow-lg: 0 25px 80px rgba(0,0,0,.65);
  --shadow-md: 0 14px 40px rgba(0,0,0,.55);

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ----------------- Global polish ----------------- */
html, body{ height:100%; }
body{
  background: radial-gradient(1000px 600px at 15% -10%, rgba(124,58,237,.18), transparent 55%),
              radial-gradient(900px 500px at 85% 10%, rgba(250,82,82,.16), transparent 55%),
              radial-gradient(1200px 800px at 50% 120%, rgba(34,197,94,.10), transparent 60%),
              var(--bg-0);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  letter-spacing: .15px;
}

a{ transition: color .18s var(--ease), opacity .18s var(--ease); }
a:hover{ opacity: .95; }

/* Smooth corners on typical theme blocks */
.bg-elegant, .bg-elegant-night, .bg-elegant-dark{
  border-radius: var(--r-16);
}

/* ----------------- EasyDonate: Cart modal -----------------
   Your HTML: #cart .modal-content.cart.cart-content.bg-elegant
   We target multiple fallbacks so it works even if ED changes markup.
------------------------------------------------------------*/
#cart.modal .modal-dialog{
  transform: translateY(18px) scale(.98);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
  will-change: transform, opacity;
}
#cart.modal.show .modal-dialog{
  transform: translateY(0) scale(1);
  animation: edCartPop .42s var(--ease) both;
}
@keyframes edCartPop{
  0%   { transform: translateY(22px) scale(.975); opacity: 0; }
  60%  { transform: translateY(-2px) scale(1.01); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Backdrop a bit softer */
.modal-backdrop.show{ opacity: .62 !important; }

/* Main cart surface */
#cart .modal-content,
#cart .cart-content,
.modal .cart-content{
  background: linear-gradient(180deg, rgba(18,22,31,.96), rgba(10,12,16,.96)) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--r-20) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: blur(16px);
}

/* Header */
#cart .modal-content .modal-header,
#cart .cart-content .modal-header{
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding: 18px 18px 14px !important;
}
#cart .modal-content .modal-title,
#cart .cart-content .modal-title{
  font-weight: 800 !important;
  letter-spacing: .2px;
}

/* Close button */
#cart .close, #cart button.close, #cart .modal-header .close{
  color: rgba(255,255,255,.85) !important;
  opacity: .85 !important;
  text-shadow: none !important;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
#cart .close:hover{ opacity: 1 !important; transform: rotate(6deg) scale(1.05); }

/* Body spacing */
#cart .modal-body, #cart .cart-content .modal-body{
  padding: 16px 18px 18px !important;
}

/* Cart typography */
#cart h1,#cart h2,#cart h3,#cart h4,#cart h5,#cart h6,
#cart .h1,#cart .h2,#cart .h3,#cart .h4,#cart .h5,#cart .h6{
  color: rgba(255,255,255,.92) !important;
}

/* Coupon / inputs inside cart */
#cart input[type="text"],
#cart input[type="email"],
#cart input[type="number"],
#cart input[type="tel"],
#cart input[type="password"],
#cart .form-control,
.cart input,
.cart .form-control{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: var(--r-12) !important;
  padding: 12px 12px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
#cart input::placeholder, #cart .form-control::placeholder{
  color: rgba(255,255,255,.38) !important;
}
#cart input:focus, #cart .form-control:focus{
  border-color: rgba(250,82,82,.55) !important;
  box-shadow: 0 0 0 3px rgba(250,82,82,.18) !important;
  background: rgba(255,255,255,.075) !important;
}

/* Small "Apply" button */
#cart button,
#cart .btn,
.cart button,
.cart .btn{
  border-radius: 14px !important;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), opacity .18s var(--ease);
}

/* Primary checkout */
#cart .btn-primary,
#cart button.btn-primary,
#cart .btn.btn-primary,
.cart .btn-primary{
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  padding: 14px 16px !important;
  box-shadow: 0 14px 30px rgba(37,99,235,.25);
}
#cart .btn-primary:hover,
.cart .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(37,99,235,.35);
}
#cart .btn-primary:active{ transform: translateY(0); }

/* Accent / danger buttons used by ED */
#cart .btn-danger,
#cart .btn.btn-danger,
.cart .btn-danger{
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  border: 0 !important;
  box-shadow: 0 14px 30px rgba(250,82,82,.18);
}
#cart .btn-danger:hover{ transform: translateY(-2px); box-shadow: 0 18px 38px rgba(250,82,82,.26); }

/* Totals (your screenshot: green "Total: $0.00") */
#cart .total,
#cart .cart-total,
#cart .total-price,
#cart [class*="total"],
.cart .total,
.cart [class*="total"]{
  font-weight: 800 !important;
  letter-spacing: .2px;
}
#cart .total, #cart .cart-total, #cart .total-price{
  color: #4ade80 !important;
  text-shadow: 0 0 18px rgba(74,222,128,.18);
}

/* Dividers */
#cart hr, #cart .dropdown-divider{
  border-color: rgba(255,255,255,.08) !important;
}

/* Items list (best-effort for ED markup) */
#cart .list-group-item,
#cart .cart-item,
#cart .basket-item,
.cart .list-group-item,
.cart .cart-item{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  margin-bottom: 10px;
}
#cart .list-group-item:last-child{ margin-bottom: 0; }

/* Quantity controls (if present) */
#cart .quantity button,
#cart .qty button,
#cart .cart-qty button{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.9) !important;
}
#cart .quantity button:hover{ background: rgba(255,255,255,.09) !important; }

/* ----------------- EasyDonate: Success notification -----------------
   Your screenshot: green bar “VIP+ has been added to cart.”
   ED/Bootstrap may render alerts/toasts. We style several variants.
------------------------------------------------------------*/
.alert.alert-success,
.alert-success,
.toast.toast-success,
.toast-success,
.noty_theme__mint.noty_type__success,
.ed-notify-success,
[class*="success"][class*="toast"],
[class*="success"][class*="alert"]{
  background: linear-gradient(135deg, #16a34a, #4ade80) !important;
  color: #07120b !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px rgba(22,163,74,.28) !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
}
.alert-success a{ color: #05210f !important; text-decoration: underline; }
.alert-success .close, .alert-success button.close{
  color: #07120b !important;
  opacity: .9 !important;
}

/* Subtle slide-in for notifications */
@keyframes edToastIn {
  0%   { transform: translateY(-14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.alert-success, .toast-success{
  animation: edToastIn .28s var(--ease) both;
}

/* ----------------- Instruction steps (your <p> blocks) ----------------- */
.main-instruction #help p.font-weight-bolder.mb-0{
  margin-top: 14px !important;
  margin-bottom: 6px !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  color: rgba(255,255,255,.94) !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.main-instruction #help p.font-weight-bolder.mb-0::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 4px rgba(250,82,82,.12);
  flex: 0 0 auto;
}
.main-instruction #help p.mt-0{
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  color: var(--muted) !important;
  line-height: 1.5;
  padding-left: 20px;
}

/* Give the instruction block a card feel */
.main-instruction #help .container{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-20);
  padding: 18px 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* ----------------- Mobile: make modal feel native ----------------- */
@media (max-width: 575.98px){
  #cart .modal-dialog{
    margin: 10px !important;
  }
  #cart .modal-content, #cart .cart-content{
    border-radius: 22px !important;
  }
  #cart .btn-primary{
    width: 100% !important;
  }
}

/* ----------------- Quality-of-life: scrollbars ----------------- */
::-webkit-scrollbar{ width: 9px; }
::-webkit-scrollbar-track{ background: rgba(0,0,0,.25); }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(250,82,82,.9), rgba(124,58,237,.9));
  border-radius: 999px;
}