/* cartandcheackout.css — checkout page theme overrides (vanilla + tailwind)
   هدف: ظاهر یک‌دست، بدون حس “washed out”، و تمرکز روی کارت‌ها/آیتم‌های سبد */

:root{
  --chk-bg: #f6f7fb;
  --chk-surface: rgba(255,255,255,0.82);
  --chk-surface-2: rgba(255,255,255,0.92);
  --chk-border: rgba(15,23,42,0.10);
  --chk-shadow: 0 18px 60px rgba(2,6,23,0.10);
  --chk-shadow-soft: 0 10px 30px rgba(2,6,23,0.08);
  --chk-accent: #db2777;     /* pink-600 */
  --chk-accent-2: #9d174d;   /* pink-800 */
  --chk-text: rgba(17,24,39,0.92);
  --chk-muted: rgba(17,24,39,0.62);
}

html, body{
  height: 100%;
}

body{
  font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(900px 380px at 82% 0%, rgba(219,39,119,0.12), transparent 60%),
    radial-gradient(900px 420px at 10% 10%, rgba(79,70,229,0.10), transparent 60%),
    linear-gradient(180deg, var(--chk-bg), #ffffff);
  color: var(--chk-text);
}

/* Fix: project-wide index.css defines `.grid` as a decorative overlay.
   On checkout we use `.chk-grid` instead. */
.chk-grid{
  display: grid;
}

/* Header: keep it light for checkout */
.header{
  background: rgba(255,255,255,0.78);
  border-bottom: 1px solid rgba(15,23,42,0.08);
  backdrop-filter: blur(10px);
}
.header .mega-menu{ display:none !important; } /* prevent accidental overlays on checkout */
.header .searchTrigger{ display:none !important; } /* checkout doesn't need search */
.header .headerCats{ display:none !important; } /* simplify header */
.header__actions .iconBtn{
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.70);
}

/* Main step container becomes a real “card” */
#step-container{
  background: var(--chk-surface);
  border: 1px solid var(--chk-border);
  box-shadow: var(--chk-shadow);
  backdrop-filter: blur(10px);
}

/* Step indicator polish */
.step-item .step-icon{
  box-shadow: 0 10px 18px rgba(2,6,23,0.06);
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.85);
}
.step-item.active .step-icon{
  background: linear-gradient(135deg, var(--chk-accent), var(--chk-accent-2));
  color: #fff;
  border-color: rgba(219,39,119,0.35);
}
.step-item.active .step-text{
  color: var(--chk-accent-2);
  font-weight: 800;
}

/* Cart list */
#cart-items{
  min-height: 120px;
  opacity: 1;
  pointer-events: auto;
  filter: none;
}
.cart-row{
  border-bottom-color: rgba(15,23,42,0.08) !important;
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
}

/* Disabled state (only while submitting checkout request) */
#step-container.chk--disabled{
  cursor: progress;
}
#step-container.chk--disabled #cart-items{
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.08);
}
#step-container.chk--disabled button{
  pointer-events: none;
}
.cart-row img{
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.70);
}

.cart-row .qty-minus,
.cart-row .qty-plus{
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.cart-row .qty-minus:hover,
.cart-row .qty-plus:hover{
  background: rgba(219,39,119,0.08);
}
.cart-row .qty-minus:active,
.cart-row .qty-plus:active{
  transform: translateY(1px);
}
.cart-row .remove-item:hover{
  text-decoration: underline;
}

/* Right summary card */
.lg\\:col-span-1.bg-gray-50{
  background: var(--chk-surface-2) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: var(--chk-shadow-soft);
}

/* Buttons */
#go-shipping,
#process-payment-btn,
#next-step-btn{
  background: linear-gradient(135deg, var(--chk-accent), var(--chk-accent-2)) !important;
  box-shadow: 0 14px 26px rgba(219,39,119,0.20);
}
#go-shipping:hover,
#process-payment-btn:hover,
#next-step-btn:hover{
  filter: brightness(0.98);
}
#go-shipping:disabled{
  background: rgba(15,23,42,0.25) !important;
  box-shadow: none !important;
}

/* Typography tweaks */
.text-gray-600{ color: var(--chk-muted) !important; }
.text-gray-500{ color: rgba(17,24,39,0.55) !important; }

/* Animations */
.step-content{
  animation: chkFadeIn 0.35s ease-out;
}
@keyframes chkFadeIn{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Custom modal animation - kept for notification/auth modals */
.modal-enter{
  opacity: 0;
  transform: scale(0.96);
}
.modal-enter-active{
  opacity: 1;
  transform: scale(1);
  transition: all 0.22s ease-out;
}
.modal-exit{
  opacity: 1;
  transform: scale(1);
}
.modal-exit-active{
  opacity: 0;
  transform: scale(0.96);
  transition: all 0.18s ease-in;
}