/* =========================================================
   PEPPERLABZ CART DRAWER (MODERN CART) — v2
   Paste as its own CSS/WPCode snippet, loaded SITEWIDE (no page
   restriction needed or wanted — the drawer is a global header
   component that can open on any page).

   v1 of this file scoped every rule under `.moderncart-slide-out`
   as a CLASS. That was wrong: confirmed directly from the live
   DOM and the plugin's own real stylesheet
   (wp-content/plugins/modern-cart/assets/css/cart.css) that
   `moderncart-slide-out` is the drawer root's **ID**
   (`<div id="moderncart-slide-out" class="moderncart-default-
   slide-out moderncart-modal-wrap ...">`), never a class. Every
   v1 selector therefore matched zero elements and silently did
   nothing — not a specificity loss, a straight-up non-match.
   Every selector below uses `#moderncart-slide-out`, matching
   the plugin's own confirmed selector pattern exactly.

   Modern Cart also turns out to expose a real CSS-custom-property
   theming API (confirmed from its stylesheet and a small
   admin-generated `:root{...}` block already present on the live
   site, previously set to the site's old green: --moderncart-
   primary-color, --moderncart-button-font-color, etc.). Section 1
   below overrides those variables, scoped to #moderncart-slide-out
   (specificity beats the plugin's own `:root`-level block
   regardless of load order) — this is the primary mechanism and
   covers most of the green (checkout button, sale badges, qty
   stepper, progress bar) "for free," the same way Modern Cart's
   own admin color settings would. If Modern Cart has an actual
   Design/Color settings screen in wp-admin, changing it there
   would work identically to this override — this file doesn't
   need to be removed if that setting is ever set instead, since
   the values would just agree.

   Section 2 covers the couple of things NOT variable-driven
   (the free-shipping success banner is hardcoded hex in the
   plugin's own CSS, not a variable).

   Palette matches pepperlabz-account.css: #111/#fff black-white,
   #fafafa/#f3f3f4 light neutral, #e4e5e8 borders, #9aa9bd/#6d7280
   muted text. Breakpoints match the rest of the project: 767px
   mobile, 1024px tablet.
========================================================= */

/* ---------------------------------------------------------
   1. THEME VARIABLES — Modern Cart's own theming API
--------------------------------------------------------- */

#moderncart-slide-out {
  --moderncart-primary-color: #111 !important;
  --moderncart-button-font-color: #fff !important;
  --moderncart-highlight-color: #111 !important;
  --moderncart-heading-color: #111 !important;
  --moderncart-body-color: #111 !important;
  --moderncart-header-font-color: #111 !important;
  --moderncart-header-background-color: #fff !important;
  --moderncart-background-color: #fff !important;
  --moderncart-quantity-background-color: #fafafa !important;
  --moderncart-quantity-font-color: #111 !important;
}

/* ---------------------------------------------------------
   2. PANEL SHELL
--------------------------------------------------------- */

#moderncart-slide-out .moderncart-panel {
  background: #fff;
  box-shadow: -12px 0 40px rgba(17, 17, 17, 0.12);
}

/* ---------------------------------------------------------
   3. HEADER
--------------------------------------------------------- */

#moderncart-slide-out .moderncart-slide-out-header {
  background: #fff;
  border-bottom: 1px solid #e4e5e8;
}

#moderncart-slide-out .moderncart-slide-out-header-quantity {
  background: #111 !important;
  color: #fff !important;
  border-radius: 999px;
}

#moderncart-slide-out .moderncart-slide-out-header-close {
  border: 1px solid #e4e5e8;
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#moderncart-slide-out .moderncart-slide-out-header-close:hover,
#moderncart-slide-out .moderncart-slide-out-header-close:focus {
  background: #f3f3f4;
  border-color: #d8dae0;
}

/* Free-shipping progress toast — hardcoded green in Modern Cart's own
   CSS (#e7f7f0 / #1b6f49), not variable-driven, so it needs a direct
   override. Matched at equal-or-higher specificity to the plugin's own
   rule (same class chain, #moderncart-slide-out prepended) with
   !important as a safety margin since this exact hardcoded-hex pattern
   is what caused v1 to look unchanged. */
#moderncart-slide-out .moderncart-slide-out-free-shipping-bar-wrapper.moderncart-slide-out-free-shipping-bar-wrapper--success .moderncart-notification.moderncart-is-success.moderncart-is-light,
#moderncart-slide-out .moderncart-slide-out-free-shipping-bar-wrapper .moderncart-notification.moderncart-is-success.moderncart-is-light {
  background-color: #fafafa !important;
  color: #111 !important;
  border: 1px solid #e4e5e8;
}

#moderncart-slide-out .moderncart-progress-bar {
  background: #f3f3f4;
}

/* ---------------------------------------------------------
   4. CART ITEMS
--------------------------------------------------------- */

#moderncart-slide-out .moderncart-slide-out-cart {
  background: #fff;
}

#moderncart-slide-out .moderncart-cart-item:not(:last-child) {
  border-bottom: 1px solid #e4e5e8;
}

#moderncart-slide-out .moderncart-cart-item-image img {
  border-radius: 12px;
  border: 1px solid #e4e5e8;
  background: #fafafa;
}

/* .moderncart-cart-item-onsale already reads --moderncart-primary-color
   / --moderncart-button-font-color (overridden in section 1) for its
   colors — this just refines the shape to match the rest of the site's
   pill badges. */
#moderncart-slide-out .moderncart-cart-item-onsale {
  border-radius: 999px !important;
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* Product title/strength — must never be visually buried, per the
   requirement that a customer never has to guess which GLP-3 RT strength
   is in their cart. WooCommerce's own real product title (e.g. "GLP-3 RT
   20 mg") already carries this; color comes from --moderncart-heading-
   color (section 1) — this just sets weight/decoration. */
#moderncart-slide-out .moderncart-cart-item-product-name,
#moderncart-slide-out .moderncart-cart-item-product-link a {
  font-weight: 700;
  text-decoration: none;
}

#moderncart-slide-out .moderncart-cart-item-product-link a:hover {
  text-decoration: underline;
}

#moderncart-slide-out .moderncart-cart-item-actions-remove {
  color: #9aa9bd;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
}

#moderncart-slide-out .moderncart-cart-item-actions-remove:hover,
#moderncart-slide-out .moderncart-cart-item-actions-remove:focus {
  color: #111;
}

/* Quantity stepper — background/text already themed via the
   --moderncart-quantity-* variables in section 1; this adds the pill
   container treatment. */
#moderncart-slide-out .moderncart-cart-item-quantity {
  border: 1px solid #e4e5e8;
  border-radius: 999px;
  overflow: hidden;
}

#moderncart-slide-out .moderncart-cart-item-quantity button:hover {
  background: #f3f3f4 !important;
}

/* ---------------------------------------------------------
   5. FOOTER — COUPON, TOTALS, CHECKOUT
--------------------------------------------------------- */

#moderncart-slide-out .moderncart-slide-out-footer {
  background: #fff;
  border-top: 1px solid #e4e5e8;
}

#moderncart-slide-out .moderncart-have-coupon-code-area {
  color: #566176;
}

#moderncart-slide-out .moderncart-have-coupon-code-area:hover {
  color: #111;
}

#moderncart-slide-out .moderncart-arrow-down-icon path,
#moderncart-slide-out .moderncart-arrow-up-icon path {
  fill: #566176 !important;
}

#moderncart-slide-out .moderncart-slide-out-coupon {
  background: #fafafa;
  border: 1px solid #e4e5e8;
  border-radius: 12px;
}

#moderncart-slide-out .moderncart-slide-out-coupon-input input {
  border: 1px solid #e4e5e8;
  border-radius: 999px 0 0 999px;
}

/* Coupon Apply button reads --moderncart-primary-color/--moderncart-
   button-font-color (section 1) for its own color; this just fixes the
   pill shape on the paired input+button row. */
#moderncart-slide-out .moderncart-slide-out-coupon-input button {
  border-radius: 0 999px 999px 0 !important;
  font-weight: 900;
}

#moderncart-slide-out .moderncart-cart-line-items__total {
  border-top: 1px solid #e4e5e8;
  padding-top: 12px;
  margin-top: 8px;
}

#moderncart-slide-out .moderncart-cart-line-items__total-label,
#moderncart-slide-out .moderncart-cart-line-items__total-value {
  font-weight: 900;
  font-size: 16px;
}

/* Primary checkout action already reads --moderncart-primary-color /
   --moderncart-button-font-color (section 1) for background/text — this
   just adds the pill shape and hover treatment consistent with the rest
   of the site's buttons. */
#moderncart-slide-out .wc-proceed-to-checkout .checkout-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  letter-spacing: 0.01em;
  padding: 15px 20px !important;
}

#moderncart-slide-out .wc-proceed-to-checkout .checkout-button:hover,
#moderncart-slide-out .wc-proceed-to-checkout .checkout-button:focus {
  opacity: 0.85;
}

/* ---------------------------------------------------------
   6. RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 767px) {
  #moderncart-slide-out .moderncart-cart-item-quantity {
    transform: scale(0.95);
  }
}