/* ============================================================================
   Razorpay Magic Checkout — storefront presentation

   Buy now sits with Add to cart as a pair: Add to cart outlined, Buy now
   filled, the same height. Colours come from the theme's --primary custom
   property, so they follow the store's colour if it is changed in the theme.
   ============================================================================ */

:root {
  --rzp-accent: var(--primary, #c6a87a);
}

/* ---------------------------------------------------------------- the pair */

/* The theme's add-to-cart panel becomes the row holding both. Desktop: quantity
   and Add to cart on the first line, Buy now full width beneath. */
.rzp-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.rzp-pair .add-to-cart-button {
  flex: 1 1 auto;
  justify-content: center;
  background: transparent;
  color: var(--rzp-accent);
  box-shadow: inset 0 0 0 1.5px var(--rzp-accent);
}

.rzp-pair .add-to-cart-button:hover,
.rzp-pair .add-to-cart-button:focus-visible {
  background: color-mix(in srgb, var(--rzp-accent) 12%, transparent);
  color: var(--rzp-accent);
}

.rzp-pair .rzp-buy-now {
  flex: 1 0 100%;
  margin: 0;
}

.rzp-buy-now-button {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
}

/* --------------------------------------------------------------- busy state */

/* A spinner rather than a dead button. The Razorpay window takes a moment to
   open, and with no feedback people press again. Applies to the theme's own
   Checkout buttons too while they open Magic Checkout. */
.rzp-busy {
  position: relative;
  cursor: progress !important;
  opacity: .75;
}

.rzp-busy > * {
  visibility: hidden;
}

.rzp-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: rzp-spin .7s linear infinite;
}

/* The cart page's and side cart's buttons hold bare text, not child elements. */
.checkout-button.rzp-busy {
  color: transparent !important;
}

.checkout-button.rzp-busy::after {
  border-color: #fff;
  border-top-color: transparent;
}

@keyframes rzp-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------- an option not chosen */

dt.rzp-option-missing,
dt.rzp-option-missing label {
  color: #c0392b !important;
}

dd.rzp-option-missing {
  animation: rzp-nudge .4s ease 2;
}

dd.rzp-option-missing .option-list li label,
dd.rzp-option-missing select {
  box-shadow: 0 0 0 1.5px #c0392b;
}

@keyframes rzp-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ------------------------------------------------------------------- toast */

/* Above the theme's bottom bar on phones, so it is never hidden behind it. */
.rzp-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 2000;
  max-width: min(92vw, 420px);
  padding: 12px 16px;
  border-radius: 8px;
  background: #1a1a1a;
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .2s ease, transform .2s ease;
}

.rzp-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* On phones the bottom bar with the product thumbnail is tall; the top of the
   screen, under the header, is always clear. */
@media (max-width: 767.98px) {
  .rzp-toast {
    top: 76px;
    bottom: auto;
    transform: translate(-50%, -12px);
  }
}

/* ------------------------------------------------- inside the floating bar */

/* On a phone the theme moves the whole panel into a bar pinned to the bottom of
   the screen, beside a thumbnail. Room is short there: the quantity goes, the
   panel stretches to the bar's full width, Add to cart stays the compact icon
   button the theme makes it on phones, and Buy now takes the rest. */
.floating-add-to-cart .add-to-cart-panel-wrapper:has(.rzp-pair) {
  width: 100%;
}

.floating-add-to-cart .rzp-pair {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  width: 100%;
}

.floating-add-to-cart .rzp-pair .qty-label,
.floating-add-to-cart .rzp-pair .qty-input-wrapper,
.floating-add-to-cart .rzp-pair .qty-dropdown {
  display: none;
}

.floating-add-to-cart .rzp-pair .add-to-cart-button {
  flex: 0 0 auto;
  min-width: 52px;
}

.floating-add-to-cart .rzp-pair .rzp-buy-now {
  flex: 1 1 auto;
  min-width: 0;
}

.floating-add-to-cart .rzp-pair .rzp-buy-now-button,
.floating-add-to-cart .rzp-pair .add-to-cart-button {
  min-height: 46px;
  padding-left: 12px;
  padding-right: 12px;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .rzp-busy::after,
  dd.rzp-option-missing { animation: none; }
}