/* =====================================================================
   basket.css  --  styles for basket.php (the shopping cart page)

   Everything in this file used to be written directly inside basket.php,
   either as style="..." attributes or (the spinner) as a <style> element
   that basket.php's JavaScript created on the fly. It lives here now so
   the page is smaller, the browser can cache it, and a style change is a
   one-file edit.

   Load order matters: basket.php links this file AFTER css/store-theme.css.
   The selectors are deliberately a little more specific than the plain
   class rules they replace, so they win exactly where the old inline
   styles used to win (an inline style beats an ordinary class rule; a
   slightly more specific selector gives the same result).

   To restyle the cart for another site, store-theme.css remains the main
   file to edit -- this file only holds basket-page-specific details.
   ===================================================================== */

/* ---- Header search box (top bar) -------------------------------------- */
#top-bar .rhz-search-form { max-width: 400px; }
#top-bar .input-group > .form-control.rhz-search-input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
#top-bar .input-group > .btn.rhz-search-btn {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: -3px;
}

/* ---- Cart-count bubble the page's script adds to the "Shopping Cart" links
        (this used to be set one property at a time by JavaScript) ---------- */
.badge.cart-count-badge {
  font-size: 0.75rem;
  vertical-align: top;
}

/* ---- "Item out of stock" page ----------------------------------------- */
body .card > .card-header.rhz-oos-head {
  background-color: #EEF0F9;
  border-bottom: 1px solid #4962D7;
  border-top: 4px solid #4962D7;
}
body .card-header .rhz-oos-icon { color: #4962D7; }

/* Light-grey card / modal title bars (backorder cards and the pop-ups) */
body .card-header.rhz-head-sunken,
body .modal-header.rhz-head-sunken {
  background-color: var(--surface-sunken, #f4f5f4);
  border-bottom: 1px solid var(--surface-border, #dee2e6);
}
body .card-header .rhz-icon-navy   { color: var(--aa-navy); }
body .card-header .rhz-icon-danger { color: var(--aa-danger); }

/* Red "Cancel" button on the backorder card. Same red in every state
   (normal, hover, focus, pressed) -- exactly what the old inline style did. */
body .btn.rhz-btn-cancel,
body .btn.rhz-btn-cancel:hover,
body .btn.rhz-btn-cancel:focus,
body .btn.rhz-btn-cancel:focus-visible,
body .btn.rhz-btn-cancel:active {
  background-color: #dc3545;
  color: #fff;
}

/* ---- Coupon / Shipping-calculator cards sit side by side at equal height */
.rhz-card.rhz-card-full { height: 100%; }

/* ---- Continue Shopping / Go to Checkout links styled as buttons -------- */
body a.rhz-btn-flex,
body a.rhz-btn-flex:hover,
body a.rhz-btn-flex:focus,
body a.rhz-btn-flex:active {
  text-decoration: none;
}
body a.rhz-btn-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The sticky mobile "Checkout $total" bar spaces its pieces with a gap
   instead of margins on the icon. */
body a.rhz-btn-flex.rhz-btn-flex-gap { gap: 8px; }

/* Small space between a button's icon and its label */
i.rhz-ico-gap { margin-right: 8px; }

/* ---- "Updating..." spinner next to a changed quantity ------------------ */
/* (previously injected into <head> by basket.php's JavaScript) */
.spin { animation: spin 1s linear infinite; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- Quick PayPal / Google Pay shortcuts (under the Order Summary total) -
   Look: Checkout button, a thin "or" divider, then the same gold PayPal button
   and Google's own black Google Pay button used on the payment page, stacked.
   They are links into checkout.php, not payment buttons. ---------- */
.rhz-wallet-quick { margin-top: 16px; }
.rhz-wallet-or {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0; font-size: 13px; color: var(--text-muted);
}
.rhz-wallet-or::before, .rhz-wallet-or::after {
  content: ""; flex: 1; border-top: 1px solid var(--surface-border);
}
.rhz-wallet-stack { display: flex; flex-direction: column; gap: 10px; }
/* Same rules as .rhz-paypal-btn on the payment page (css/securecheckout.css) */
body .rhz-wallet-quick a.rhz-paypal-btn,
body .rhz-wallet-quick a.rhz-paypal-btn:hover,
body .rhz-wallet-quick a.rhz-paypal-btn:focus,
body .rhz-wallet-quick a.rhz-paypal-btn:active { text-decoration: none; }
.rhz-wallet-quick .rhz-paypal-btn {
  background-color: #ffc439; border-color: #ffc439; color: #111;
  width: 100%; min-height: 48px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding-top: 0; padding-bottom: 0;
}
.rhz-wallet-quick .rhz-paypal-btn:hover,
.rhz-wallet-quick .rhz-paypal-btn:focus { background-color: #f2b72f; border-color: #f2b72f; color: #111; }
/* Google's button is drawn by Google's script and fills this box
   (same 48px height as on the payment page) */
#rhzBasketGpay { height: 48px; }
.rhz-wallet-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; text-align: center; }
@media print { .rhz-wallet-quick { display: none; } }

/* ---- Help / policy-links row near the top, smaller (10/19/26) ---- */
body .rhz-fineprint { font-size: .8rem; line-height: 1.5; }