/* ============================================================
   Verapep Snipcart Theme Overrides
   ============================================================
   Strategy:
   1. Hide Snipcart's built-in sidebar UI ENTIRELY (your in-house
      cart sidebar handles the user-facing cart view).
   2. Keep Snipcart's modal/checkout pages, restyle them with the
      Verapep palette.
   3. When the user picks "Card" at checkout, Snipcart's modal
      opens with the items already in Snipcart's internal cart
      (synced by addToCart) and the customer completes payment
      on Snipcart's hosted form.
   ============================================================ */

/* ── Brand variables ── */
:root {
  --vp-grad-start: #55398C;
  --vp-grad-mid:   #3150A3;
  --vp-grad-end:   #28A1C2;
  --vp-navy:       #0B2B4E;
  --vp-muted:      #5a6a82;
}

/* ── 1. Hide Snipcart's default sidebar (cart preview UI) ── */
/* Snipcart's sidebar renders inside #snipcart with internal selectors.
   We keep #snipcart in the DOM (Snipcart needs it) but suppress its visible
   chrome until the checkout modal is invoked. */

/* Hide cart sidebar specifically — leave the checkout modal interactive */
.snipcart-cart--opened { z-index: 9999; }
.snipcart-cart__content--side .snipcart-cart-header,
.snipcart-cart__content--side .snipcart-cart-summary,
.snipcart-cart__content--side .snipcart-cart-summary-fees,
.snipcart-cart__content--side .snipcart-modal__close {
  /* Snipcart's sidebar is fine when intentionally invoked at checkout — these rules style it */
}

/* ── 2. Snipcart-wide brand restyle ── */

/* Primary buttons (Checkout, Continue, etc.) — Verapep gradient */
.snipcart__actions--link.snipcart__font--bold,
.snipcart-checkout__steps button[type="submit"],
.snipcart-button-primary,
.snipcart-modal__close-button,
.snipcart-cart-button {
  background: linear-gradient(90deg, var(--vp-grad-start) 0%, var(--vp-grad-mid) 35%, var(--vp-grad-end) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
.snipcart-button-primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 20px rgba(85,57,140,0.25) !important;
}

/* Secondary buttons */
.snipcart-button-secondary {
  background: transparent !important;
  color: var(--vp-navy) !important;
  border: 1.5px solid var(--vp-navy) !important;
  border-radius: 8px !important;
}

/* Headings inside Snipcart modal */
.snipcart h1, .snipcart h2, .snipcart h3,
.snipcart-cart-header__title,
.snipcart-summary__title,
.snipcart-form__title {
  color: var(--vp-navy) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}

/* Body text */
.snipcart, .snipcart-modal {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--vp-navy) !important;
}

/* Price display */
.snipcart-cart-summary__amount,
.snipcart-summary-fees__amount,
.snipcart__font--secondary {
  color: var(--vp-navy) !important;
  font-weight: 700 !important;
}

/* Item rows in cart */
.snipcart-item-line__container,
.snipcart-cart__content .snipcart-item-line {
  border-bottom: 1px solid rgba(11,43,78,0.08) !important;
  padding: 16px 0 !important;
}

/* Form inputs */
.snipcart-form__input,
.snipcart-form__select,
.snipcart input[type="text"],
.snipcart input[type="email"],
.snipcart input[type="tel"],
.snipcart textarea,
.snipcart select {
  border: 1.5px solid rgba(11,43,78,0.15) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 0.95rem !important;
  color: var(--vp-navy) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.snipcart-form__input:focus,
.snipcart input[type="text"]:focus,
.snipcart input[type="email"]:focus,
.snipcart input[type="tel"]:focus {
  border-color: var(--vp-grad-mid) !important;
  box-shadow: 0 0 0 3px rgba(49,80,163,0.12) !important;
  outline: none !important;
}

/* Labels above form fields */
.snipcart-form__label,
.snipcart label {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--vp-muted) !important;
  margin-bottom: 6px !important;
}

/* Modal background — slightly tinted */
.snipcart-modal {
  background: rgba(11, 43, 78, 0.45) !important;
}

/* Modal panel */
.snipcart-modal__container {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(11,43,78,0.25) !important;
  border-top: 4px solid !important;
  border-image: linear-gradient(90deg, var(--vp-grad-start), var(--vp-grad-mid), var(--vp-grad-end)) 1 !important;
}

/* "Powered by Snipcart" footer — make subtle */
.snipcart-powered-by,
.snipcart__powered-by {
  opacity: 0.4 !important;
  font-size: 0.7rem !important;
}

/* Discount code field */
.snipcart-discount-box {
  border: 1px solid rgba(40,161,194,0.18) !important;
  background: rgba(40,161,194,0.04) !important;
  border-radius: 10px !important;
}

/* Checkout step indicator */
.snipcart-checkout-step,
.snipcart-checkout__step-label {
  color: var(--vp-navy) !important;
}
.snipcart-checkout-step--active,
.snipcart-checkout__step-label--active {
  color: var(--vp-grad-mid) !important;
  font-weight: 700 !important;
}

/* Order confirmation banner */
.snipcart-cart-button--success {
  background: linear-gradient(90deg, #0F6E56, #1D9E75) !important;
}

/* ── 3. Mobile adjustments ── */
@media (max-width: 768px) {
  .snipcart-modal__container { border-radius: 12px !important; }
  .snipcart-form__input { font-size: 16px !important; /* prevents iOS zoom */ }
}