/*
 * snipcart_overrides.css
 * Loaded AFTER the Snipcart theme CSS in liquidrc2026.pm html_top.
 *
 * Goal: nudge the credit-card payment path so customers don't reflexively
 * default to PayPal. Snipcart's credit-card fields live inside their iframe
 * so we can't relabel them, but we control the surrounding DOM (the
 * "Place order" button, the PayPal Express button, the section headings).
 *
 * Strategy:
 *   1. Add a visible "Encrypted by Stripe" trust line above the iframe via
 *      a ::before pseudo-element on the payment form container.
 *   2. Give the credit-card section more breathing room so it feels like
 *      the primary path, not a thrown-together inline form.
 *   3. Reduce visual weight on the PayPal button so it reads as an
 *      alternative, not the headline option.
 *
 * If Snipcart updates their theme and our class hooks change, this file is
 * the only thing to update — the underlying integration keeps working.
 */

/* --- Trust line above the credit card iframe --- */
.snipcart-payment-form::before {
  content: "🔒 Card details are entered directly into Stripe — your number is never sent to liquidrc.com.";
  display: block;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.75rem;
  background: #f5f9ff;
  border: 1px solid #d8e6fa;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #2c3e54;
  font-weight: 500;
  line-height: 1.4;
}

/* --- Make the credit-card section visually weighty --- */
.snipcart-payment-form,
.snipcart-payment-methods-list {
  padding-block: 0.5rem;
}

.snipcart-payment-methods-list {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed #d6dde4;
  position: relative;
}

.snipcart-payment-methods-list::before {
  content: "Or check out with:";
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7785;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/* --- Tame the PayPal button so it reads as alternative, not primary --- */
.snipcart-payment-methods-list-item__button {
  background: #fff !important;
  border: 1px solid #d6dde4 !important;
  color: #2c3e54 !important;
  font-size: 0.9rem !important;
  padding: 0.65rem 1rem !important;
  min-height: 48px !important;
}

.snipcart-payment-methods-list-item__button:hover {
  border-color: #2c3e54 !important;
  background: #f8fafc !important;
}

/* --- Reinforce that "Place order" is the primary credit-card action --- */
.snipcart-base-button.snipcart-button-primary.snipcart-submit {
  letter-spacing: 0.02em;
  font-weight: 600;
}

.snipcart-base-button.snipcart-button-primary.snipcart-submit::after {
  content: " · Pay with card";
  font-weight: 400;
  opacity: 0.85;
  font-size: 0.92em;
}

/* --- Sidebar accepted-cards row: add Apple Pay / Google Pay
       once they're enabled (currently inactive — see apple_pay_setup_*.md) --- */
.snipcart-summary-fees__total + svg + svg {
  /* placeholder hook — Snipcart will render wallet icons here once the
     custom gateway is the active gateway. No styles needed yet. */
}