/**
 * Spirit Store: cart bar and checkout page. Same token family as store.css so
 * a checkout under any theme still reads as the site's own.
 */

/* ---- Cart bar (injected at the top of .rt-store / .rt-store-checkout) ---- */

.rt-store-cartbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--rt-maxw, 1120px);
  margin: 0 auto 20px;
  padding: 12px 18px;
  border: 1px solid var(--rt-line, #e7e2d6);
  border-radius: var(--rt-radius, 10px);
  background: #fff;
  box-shadow: var(--rt-shadow, 0 6px 24px rgba(0, 0, 0, 0.12));
}
.rt-store-cartbar[hidden] {
  display: none;
}
.rt-store-cartbar-label {
  font-weight: 700;
}
.rt-store-cartbar.is-empty .rt-store-cartbar-label {
  color: var(--rt-gray, #6b6b6b);
  font-weight: 600;
}
/* Empty cart: the Checkout button waits, unclickable, instead of vanishing. */
.rt-store-cartbar .rt-store-btn.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* The cart icon + count is one button that opens the dropdown summary. */
.rt-store-cartbar-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.rt-store-cartbar-toggle:disabled {
  cursor: default;
}
.rt-store-cartbar-icon {
  font-size: 1.05em;
}
.rt-store-cartbar-caret {
  font-size: 0.8em;
  color: var(--rt-gray, #6b6b6b);
  transition: transform 0.15s ease;
}
.rt-store-cartbar.is-open .rt-store-cartbar-caret {
  transform: rotate(180deg);
}
/* No dropdown to open on an empty cart. */
.rt-store-cartbar.is-empty .rt-store-cartbar-caret {
  display: none;
}

/* The dropdown summary: what is in the cart, without leaving the grid. */
.rt-store-cartbar-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: min(60vh, 420px);
  overflow: auto;
  padding: 6px 16px;
  border: 1px solid var(--rt-line, #e7e2d6);
  border-radius: var(--rt-radius, 10px);
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
.rt-store-cartbar-menu[hidden] {
  display: none;
}
.rt-store-cbm-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rt-line, #e7e2d6);
}
.rt-store-cbm-line:last-child {
  border-bottom: 0;
}
.rt-store-cbm-qtyctl {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rt-store-cbm-step {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--rt-line, #e7e2d6);
  border-radius: 7px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.rt-store-cbm-step:disabled {
  opacity: 0.35;
  cursor: default;
}
.rt-store-cbm-qty {
  min-width: 1.4em;
  text-align: center;
  font-weight: 700;
}
.rt-store-cbm-remove {
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--rt-gray, #6b6b6b);
  font-size: 0.95em;
  cursor: pointer;
}
.rt-store-cbm-remove:hover,
.rt-store-cbm-remove:focus-visible {
  color: #b32d2e;
}
.rt-store-cbm-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rt-store-cbm-name {
  font-weight: 600;
}
.rt-store-cbm-detail {
  font-size: 0.88em;
  color: var(--rt-gray, #6b6b6b);
}
.rt-store-cbm-price {
  font-weight: 700;
  white-space: nowrap;
}
.rt-store-cbm-subtotal {
  border-top: 2px solid var(--rt-line, #e7e2d6);
}
.rt-store-cbm-subtotal .rt-store-cbm-body {
  font-weight: 700;
}

/* The bar leads the store and sticks just below the site header while the
   catalog scrolls: with a 55-product production catalog, Checkout and the
   cart summary stay in reach from the first card to the last.
   --rt-cartbar-top is measured from the live header height at runtime
   (store-cart.js syncBarOffset), so the bar tucks under a sticky header on
   any theme instead of sliding beneath it. */
.rt-store .rt-store-cartbar {
  position: sticky;
  top: var(--rt-cartbar-top, 14px);
  z-index: 40;
}

@media (max-width: 759px) {
  .rt-store .rt-store-cartbar {
    z-index: 60;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  }
}

/* ---- Checkout page ---- */

.rt-store-checkout {
  max-width: 680px;
  margin: 0 auto;
}

/* Required-field asterisk: a field a buyer must fill never looks like one
   they may skip. */
.rt-store-req {
  color: #b32d2e;
  font-weight: 700;
}

/* A disabled store button explains itself: an instant tooltip bubble drawn
   from data-tip (set by store-cart.js while required fields are empty).
   CSS :hover still fires on disabled buttons, unlike mouse events. */
.rt-store-btn[data-tip]:disabled {
  position: relative;
}
.rt-store-btn[data-tip]:disabled:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  width: max-content;
  max-width: 240px;
  padding: 7px 12px;
  border-radius: 8px;
  background: #2b2b2b;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.rt-store-co-heading {
  font-family: var(--rt-font-display, "RT Display", "Arial Narrow", sans-serif);
  font-weight: var(--rt-font-display-weight, 400);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rt-store-co-lines {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.rt-store-co-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rt-line, #e7e2d6);
}

.rt-store-co-name {
  flex: 1 1 200px;
}

/* The line's chosen modifiers, small under the product name. */
.rt-store-co-mods {
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--rt-gray, #6b6b6b);
}

.rt-store-co-qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rt-store-co-qtybtn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--rt-line, #e7e2d6);
  border-radius: 999px;
  background: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.rt-store-co-qtybtn:hover {
  background: var(--rt-primary, #f4b41c);
  color: var(--rt-on-primary, #141414);
}

.rt-store-co-qtynum {
  min-width: 20px;
  text-align: center;
  font-weight: 700;
}

.rt-store-co-price {
  min-width: 70px;
  text-align: right;
  font-weight: 700;
  color: var(--rt-secondary, #d99a00);
}

.rt-store-co-remove {
  padding: 0;
  border: 0;
  background: none;
  color: var(--rt-gray, #6b6b6b);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}
.rt-store-co-remove:hover {
  color: #b32d2e;
}

.rt-store-co-total {
  margin: 0 0 20px;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: right;
}

/* Fee pass-through: subtotal and fee ride as quiet lines above the total. */
.rt-store-co-totrow {
  display: block;
}
.rt-store-co-totrow.is-sub {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rt-gray, #6b6b6b);
}

/* ---- Buyer form + card ---- */

.rt-store-co-form label {
  display: block;
  margin: 0 0 14px;
  font-weight: 700;
  font-size: 0.9rem;
}

.rt-store-co-form input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 12px;
  border: 1px solid var(--rt-line, #e7e2d6);
  border-radius: var(--rt-radius, 8px);
  background: #fff;
  font: inherit;
  font-weight: 400;
}

/* ---- Fulfillment choice ---- */

.rt-store-co-fulfill {
  margin: 0 0 14px;
  padding: 10px 14px 12px;
  border: 1px solid var(--rt-line, #e7e2d6);
  border-radius: var(--rt-radius, 10px);
}
.rt-store-co-fulfill legend {
  padding: 0 6px;
  font-weight: 700;
  font-size: 0.9rem;
}

.rt-store-co-form .rt-store-co-radio {
  margin: 4px 0;
  font-weight: 400;
}
.rt-store-co-form .rt-store-co-radio input {
  display: inline-block;
  width: auto;
  margin: 0 6px 0 0;
}

.rt-store-co-form .rt-store-co-address {
  margin: 10px 0 2px;
}
.rt-store-co-address[hidden] {
  display: none;
}

/* Square's iframe mounts here and brings its own field styling. */
.rt-store-co-card {
  margin: 18px 0 6px;
  min-height: 44px;
}

.rt-store-co-msg {
  min-height: 1.2em;
  margin: 8px 0 12px;
  font-weight: 600;
}
.rt-store-co-msg.is-error {
  color: #b32d2e;
}

/* The form's exit row: a quiet way back on the left, Pay on the right. */
.rt-store-co-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
.rt-store-btn--ghost {
  background: #fff;
  border: 1px solid var(--rt-line, #e7e2d6);
  color: var(--rt-ink, #1f1f1f) !important;
}
.rt-store-btn--ghost:hover {
  background: var(--rt-line, #e7e2d6);
}

.rt-store-co-pay {
  font-size: 1rem;
  padding: 10px 26px;
}
/* Pay sits at the row's right edge now: its tooltip bubble hugs that edge
   instead of centering, so it cannot spill past the viewport. */
.rt-store-co-pay[data-tip]:disabled:hover::after {
  left: auto;
  right: 0;
  transform: none;
}
/* Disabled = required fields still empty, or a payment mid-flight. A plain
   cursor either way: the wait cursor read as the site being busy, and the
   data-tip bubble or the Processing label says what is actually going on. */
.rt-store-co-pay:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ---- Empty cart and thank-you states ---- */

.rt-store-co-empty,
.rt-store-co-done {
  padding: 26px 22px;
  border: 1px solid var(--rt-line, #e7e2d6);
  border-radius: var(--rt-radius, 10px);
  background: #fff;
  box-shadow: var(--rt-shadow, 0 6px 24px rgba(0, 0, 0, 0.12));
  text-align: center;
}
.rt-store-co-empty[hidden],
.rt-store-co-done[hidden],
.rt-store-checkout [data-rt-co-main][hidden] {
  display: none;
}
.rt-store-co-done .rt-store-btn {
  margin: 4px 6px 0 0;
}