/* ============================================================================
 * rps-card-selected-state.css
 * ----------------------------------------------------------------------------
 * "Date-pill over price-pill" treatment for the cards shipping-speed theme.
 *
 * Loads AFTER the base cards stylesheet, so equal-specificity rules win on a
 * tie. Every selector is scoped under
 *   .rps-zone-selector[data-rps-theme="cards"]
 * so classic/new themes are untouched.
 *
 * THREE HARD REQUIREMENTS THIS FILE GUARANTEES
 *  1. The red "Selected" label is a PURE OVERLAY (an ::after on __bottom).
 *     It is absolutely positioned and never affects layout, so card height
 *     and the Y of the price + delivery-note are identical selected/not.
 *  2. The colored price pill (__bottom) has NO border/stroke — ever.
 *  3. White bordered, fully-rounded date pill on top; borderless, fully-
 *     rounded colored pill overlapping its lower portion; red label tucked
 *     at the seam, poking out the left edge.
 *
 * Selected/vivid treatment applies ONLY when the container is NOT mid-choice
 * (i.e. :not(.rps-card-needs-choice)).
 *
 * Colors sampled from the designer reference (selected.png):
 *   green pill (selected) ...... #7ED957
 *   orange pill (selected) ..... #FF9F2E
 *   label red (body) ........... #E50914   (deep saturated red)
 *   label red (tuck/back) ...... #A4061A   (darker shade, the wrap behind)
 *   date-pill border (selected)  #000000
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * Design tokens (scoped to the cards theme).
 * ------------------------------------------------------------------------- */
.rps-zone-selector[data-rps-theme="cards"] {
  --rps-pill-radius: 20px;
  --rps-pill-overlap: 44px;            /* how far the price pill rides up */
  /* Same WIDTH in both states (only the color differs) so the date pill's
     inner content — and therefore the price/note below — never shifts when a
     card becomes selected. This is the "same text place with/without label"
     guarantee from the reference. */
  --rps-date-border: 2px solid #cbd5e1;
  --rps-date-border-selected: 2px solid #000000;

  /* resting (unselected) pill tints */
  --rps-green-rest: #c4eecb;
  --rps-orange-rest: #ffe1b3;
  /* vivid (selected) pill fills — sampled from reference */
  --rps-green-vivid: #7ED957;
  --rps-orange-vivid: #FF9F2E;

  --rps-label-red: #E50914;
  --rps-label-red-back: #A4061A;
}

/* ---------------------------------------------------------------------------
 * 1. Card shell — strip the base card chrome so the two pills float freely.
 *    overflow MUST be visible so the red label can poke past the left edge.
 * ------------------------------------------------------------------------- */
.rps-zone-selector[data-rps-theme="cards"] .rps-shipping-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  min-height: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: transform 150ms ease, filter 150ms ease;
}

/* ---------------------------------------------------------------------------
 * 2. Date pill (white, bordered, fully rounded). Extra bottom padding
 *    reserves the band the price pill rides up into.
 * ------------------------------------------------------------------------- */
.rps-zone-selector[data-rps-theme="cards"] .rps-shipping-card__top {
  flex: 0 0 auto;
  border: var(--rps-date-border);
  border-radius: var(--rps-pill-radius);
  background: #fff;
  padding: 22px 12px 56px;            /* tall, portrait pill; bottom = overlap headroom */
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * 3. Price pill (colored, NO border, fully rounded). Negative margin pulls it
 *    up under the date pill; z-index keeps it above the date pill's lower edge.
 *    REQUIREMENT 2: never give this element a border.
 * ------------------------------------------------------------------------- */
.rps-zone-selector[data-rps-theme="cards"] .rps-shipping-card__bottom {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  border: none;                       /* beats base 1px border-top */
  border-radius: var(--rps-pill-radius);
  margin-top: calc(var(--rps-pill-overlap) * -1);
  padding: 42px 12px 28px;            /* top pad clears the overlap seam */
  text-align: center;
}

/* Resting (unselected) pill tints — guaranteed = green, estimated = orange */
.rps-zone-selector[data-rps-theme="cards"]
  .rps-shipping-card--guaranteed .rps-shipping-card__bottom {
  background: var(--rps-green-rest);
}
.rps-zone-selector[data-rps-theme="cards"]
  .rps-shipping-card--estimated .rps-shipping-card__bottom {
  background: var(--rps-orange-rest);
}

/* ---------------------------------------------------------------------------
 * 4. Typography — pin tight line-heights or the theme body line-height:1.8
 *    bloats every line.
 * ------------------------------------------------------------------------- */
.rps-zone-selector[data-rps-theme="cards"] .rps-shipping-card__eyebrow {
  line-height: 1.2;
}
.rps-zone-selector[data-rps-theme="cards"] .rps-shipping-card__day {
  font-size: 16px;
}
.rps-zone-selector[data-rps-theme="cards"] .rps-shipping-card__date {
  font-size: 15px;
}
.rps-zone-selector[data-rps-theme="cards"] .rps-shipping-card__price {
  line-height: 1.2;
  font-size: 18px;
  font-weight: 800;
}
.rps-zone-selector[data-rps-theme="cards"] .rps-shipping-card__delivery-note {
  line-height: 1.3;
}

/* ---------------------------------------------------------------------------
 * Grid — narrow, portrait cards that stay a fixed comfortable width and are
 * centered as a group (so a short run of cards reads as a balanced cluster
 * instead of clinging to the left with dead space on the right). auto-fit
 * handles responsiveness, so the base theme's column media-queries are moot.
 * ------------------------------------------------------------------------- */
.rps-zone-selector[data-rps-theme="cards"] .rps-shipping-group__items,
.rps-zone-selector[data-rps-theme="cards"] .rps-shipping-options__list:not(:has(.rps-shipping-group)) {
  grid-template-columns: repeat(auto-fit, 150px);
  justify-content: start;
  gap: 18px;
}
/* vivid emerald (Guaranteed) tag, matching reference #00BF63 */
.rps-zone-selector[data-rps-theme="cards"]
  .rps-shipping-card--guaranteed .rps-shipping-card__tag {
  color: #00BF63;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * 5. Hover affordance for NON-selected cards — subtle lift only.
 * ------------------------------------------------------------------------- */
.rps-zone-selector[data-rps-theme="cards"]
  .rps-shipping-card:not(.rps-shipping-option--selected):hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.12));
  cursor: pointer;
}

/* ===========================================================================
 * SELECTED STATE  (only when NOT mid-choice)
 * ========================================================================= */

/* Keep the shell transparent even when base adds a selected border/box-shadow.
 * The :not(.rps-card-needs-choice) variant out-specifies the base selected rule;
 * the plain variant covers the brief mid-choice window so no blue halo leaks. */
.rps-zone-selector[data-rps-theme="cards"]
  .rps-shipping-card.rps-shipping-option--selected,
.rps-zone-selector[data-rps-theme="cards"]:not(.rps-card-needs-choice)
  .rps-shipping-card.rps-shipping-option--selected {
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Selected date pill → solid black border (reference reads true black) */
.rps-zone-selector[data-rps-theme="cards"]:not(.rps-card-needs-choice)
  .rps-shipping-card.rps-shipping-option--selected .rps-shipping-card__top {
  border: var(--rps-date-border-selected);
}

/* Selected price pills → vivid fills, still NO border */
.rps-zone-selector[data-rps-theme="cards"]:not(.rps-card-needs-choice)
  .rps-shipping-card--guaranteed.rps-shipping-option--selected
  .rps-shipping-card__bottom {
  background: var(--rps-green-vivid);
}
.rps-zone-selector[data-rps-theme="cards"]:not(.rps-card-needs-choice)
  .rps-shipping-card--estimated.rps-shipping-option--selected
  .rps-shipping-card__bottom {
  background: var(--rps-orange-vivid);
}

/* ---------------------------------------------------------------------------
 * 6. Retire any old card-level ribbon pseudo-elements from earlier designs.
 * ------------------------------------------------------------------------- */
.rps-zone-selector[data-rps-theme="cards"]:not(.rps-card-needs-choice)
  .rps-shipping-card.rps-shipping-option--selected::before,
.rps-zone-selector[data-rps-theme="cards"]:not(.rps-card-needs-choice)
  .rps-shipping-card.rps-shipping-option--selected::after {
  content: none;
  display: none;
}

/* ---------------------------------------------------------------------------
 * 7. The "Selected" label — PURE OVERLAY (requirement 1).
 *
 *    Both pseudo-elements hang off __bottom and are position:absolute, so they
 *    add ZERO layout height. The card is identical with or without them; the
 *    price + delivery-note never move.
 *
 *    ::after  = the darker red "tuck" peeking from behind the label's left.
 *    ::before = the red label body, rounded pill poking out the left edge,
 *               vertically centered on the seam between the two pills.
 * ------------------------------------------------------------------------- */

/* darker red wrap/tuck behind the label */
.rps-zone-selector[data-rps-theme="cards"]:not(.rps-card-needs-choice)
  .rps-shipping-card.rps-shipping-option--selected
  .rps-shipping-card__bottom::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -10px;
  width: 12px;
  height: 40px;
  border-radius: 6px;
  background: var(--rps-label-red-back);
  z-index: 2;
}

/* the red "Selected" label body */
.rps-zone-selector[data-rps-theme="cards"]:not(.rps-card-needs-choice)
  .rps-shipping-card.rps-shipping-option--selected
  .rps-shipping-card__bottom::before {
  content: "Selected";
  position: absolute;
  top: -7px;                          /* seam-anchored; centers on overlap band */
  left: -10px;
  z-index: 3;
  height: 34px;
  padding: 0 16px 0 18px;
  border-radius: 6px 20px 20px 6px;   /* squared at the tuck, rounded right */
  background: var(--rps-label-red);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 34px;
  white-space: nowrap;
  /* soft, mostly-gray drop shadow to match the muted reference, not a glow */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}