/* CARACAL card checkout — styles for the Paystack path in the cart panel.
   Loaded on every page that has a cart; pairs with js/checkout.js. */

.cart-panel__checkout--pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.checkout-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  font-size: 11px;
  letter-spacing: 0.02em;
  opacity: 0.45;
}
.checkout-cards svg { display: block; height: 14px; width: auto; }

.checkout-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.35;
}
.checkout-divider::before,
.checkout-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

textarea.checkout-input {
  resize: vertical;
  min-height: 3.4rem;
  line-height: 1.4;
}

/* The checkout form is far taller than the cart's own footer — four fields, a
   destination, two shipping methods, a summary and two buttons. Left alone it
   overflows the panel and pushes the pay button off-screen, which is fatal on a
   phone. So in checkout mode the item list yields space and the footer scrolls. */
.cart-panel.is-checkout .cart-panel__body {
  flex: 0 1 auto;
  max-height: 26vh;
}
.cart-panel.is-checkout .cart-panel__footer {
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}

/* Once the checkout form is open, its summary is the authoritative total —
   the cart's own subtotal/total rows would otherwise sit right above it showing
   a different (pre-shipping) figure. */
.cart-panel.is-checkout .cart-panel__footer > .cart-panel__breakdown,
.cart-panel.is-checkout .cart-panel__footer > .cart-panel__total { display: none; }

/* Shipping destination + method */
select.checkout-input {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.checkout-method {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(21,21,21,0.15);
  border-radius: 0.6rem;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  transition: border-color 0.2s;
}
.checkout-method.is-selected { border-color: #151515; }
/* Sole method: informational, not a choice — don't invite a click. */
.checkout-method--only { cursor: default; }
.checkout-method input { accent-color: #151515; margin: 0; flex-shrink: 0; }
.checkout-method__text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.checkout-method__name { font-weight: 600; }
.checkout-method__eta { font-size: 11.5px; opacity: 0.45; }
.checkout-method__price { font-weight: 600; white-space: nowrap; }

.checkout-terms {
  margin: 0.15rem 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  opacity: 0.45;
}
.checkout-terms a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.checkout-terms a:hover { opacity: 0.7; }

.checkout-summary {
  border-top: 1px solid rgba(21,21,21,0.1);
  margin: 0.9rem 0;
  padding-top: 0.7rem;
  font-size: 13px;
}
.checkout-summary:empty { display: none; }
.checkout-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.2rem 0;
  opacity: 0.55;
}
.checkout-summary__row--total {
  opacity: 1;
  font-weight: 700;
  font-size: 15px;
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(21,21,21,0.1);
}

.checkout-error {
  font-size: 12.5px;
  line-height: 1.4;
  color: #b00020;
  margin: 0 0 0.7rem;
}
.checkout-error:empty { display: none; }

/* Hidden until /api/payments/config confirms Paystack keys are set, so the
   cart never shows a pay button that cannot complete. */
.checkout-pay-group { display: none; }
.checkout-pay-group.is-available { display: block; }