/*
 * WW-1753 — Accessibility CSS overrides for the React receiver app.
 *
 * App-owned. Loaded AFTER the vendor `receiver-flow.min.css` in
 * `app/layout.tsx` so these rules win specificity ties. Keep every addition
 * scoped and annotated with the WCAG criterion it addresses.
 */

/*
 * Product-card action overlay (Add Item / View Details).
 *
 * The overlay (`.overlays`) is `opacity: 0` and is only revealed on mouse
 * `:hover` (`.card:hover .overlays { opacity: 1 }`). Its buttons stay in the
 * tab order (opacity does not remove focusability), so keyboard users can Tab
 * onto them but get NO visual cue — the overlay never becomes visible on
 * keyboard focus. Reveal it on `:focus-within` too, and give the buttons a
 * clearly visible focus ring.
 *
 * WCAG 2.1.1 (Keyboard) + 2.4.7 (Focus Visible), Level A/AA.
 * Selector mirrors the vendor `:hover` rule so specificity matches.
 */
.receiver-flow.select-treats-page .main-flavours-journey-wrap .cookies-cards-wrap .card:focus-within .overlays {
  opacity: 1;
}

.receiver-flow.select-treats-page .main-flavours-journey-wrap .cookies-cards-wrap .card .overlays .btn:focus-visible {
  /* Double ring (white then brand red) stays visible on both the red
     "Add Item" button and the near-white overlay — avoids the low-contrast
     red-on-red ring the vendor btn-danger focus style produces. `!important`
     overrides Bootstrap's `.btn-danger:focus` box-shadow. Box-shadow is a
     valid WCAG 2.4.7 focus indicator; the transparent outline is the Windows
     High-Contrast-Mode fallback (where box-shadow is ignored). */
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #D2232A !important;
  outline: 2px solid transparent !important;
  outline-offset: 0 !important;
}

/*
 * Custom checkboxes / radios. Both custom patterns hide the native input and
 * render the control via a label ::before, and their vendor focus styles are
 * broken: Bootstrap's `.custom-control-input:focus ~ .custom-control-label::before`
 * is overridden to `box-shadow: none`, and the SurveyModal rule is malformed
 * (`.custom-survey-checkbox :focus` has a stray space). Result: keyboard focus
 * had NO visible indicator. Add a clear outline on :focus-visible around the
 * visible control. Covers the Bootstrap `.custom-control` pattern (checkboxes
 * AND radios) and the SurveyModal answer cards.
 *
 * WCAG 2.4.7 (Focus Visible), Level AA. `!important` beats the vendor
 * `box-shadow: none` / broken focus rules regardless of source order.
 */
.custom-control-input:focus-visible ~ .custom-control-label::before {
  outline: 2px solid #D2232A !important;
  outline-offset: 2px;
}
/* SurveyModal: the whole answer card (label) is the focus target. */
.custom-survey-checkbox:focus-visible + label {
  outline: 2px solid #D2232A !important;
  outline-offset: 2px;
}

/*
 * Product cards on /choose/[type] and /stacked/choose/[type].
 *
 * For single-option product types (e.g. popcorn, gift cards) ProductCard
 * renders the WHOLE card wrapped in a focusable `<a href="#">` with no focus
 * style at all — a different code path from the multi-option cards, whose
 * overlay buttons are handled above. Keyboard focus was therefore invisible.
 *
 * Ring matches the card action buttons (white + brand red double ring), but
 * INSET: an outline / outset shadow is painted outside the border box and gets
 * clipped by the cards' `overflow: hidden` wrappers.
 *
 * WCAG 2.4.7 (Focus Visible), Level AA.
 */
/* The wrapping <a> is inline by default (ProductCard keeps it inline to match
   Laravel's height calculation), so it has no proper box of its own to paint a
   focus ring on — the ring rendered as a sliver or not at all. Make it a block
   so it wraps the card and the ring is drawn correctly. */
.receiver-flow.select-treats-page .cookies-cards-wrap a {
  display: block;
}

/* Paint the ring on the inner .card, not the <a>. The card carries the
   border-radius, so an inset shadow on it follows the rounded corners
   automatically — an <a>-level ring rendered square against the rounded card. */
.receiver-flow.select-treats-page .cookies-cards-wrap a:focus-visible .card {
  /* !important so the vendor card's own box-shadow can't win the cascade. */
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #D2232A !important;
}

.receiver-flow.select-treats-page .cookies-cards-wrap a:focus-visible {
  /* Windows High-Contrast Mode ignores box-shadow; a transparent outline is
     rendered as a visible ring there. No offset, so it isn't clipped. */
  outline: 2px solid transparent !important;
  outline-offset: 0 !important;
}

/*
 * Category filter buttons on /choose/[type] (`.control-btns-wrap`) are bare
 * <button>s with no focus style, so they fell back to the browser default ring.
 * These sit outside any `overflow: hidden` wrapper, so a plain outline works
 * here and reads better than an inset ring on a small pill button.
 *
 * WCAG 2.4.7 (Focus Visible), Level AA.
 */
.receiver-flow.select-treats-page .control-btns-wrap button:focus-visible,
.receiver-flow.select-treats-page .control-btns-wrap a:focus-visible {
  outline: 2px solid #D2232A !important;
  outline-offset: 2px !important;
}

/*
 * Skip link. It is white text on brand red by design, but a generic vendor
 * anchor colour rule repaints the text red on focus — red on red, i.e. the
 * link becomes unreadable exactly when a keyboard user reveals it. Keep it
 * white.
 *
 * WCAG 1.4.3 (Contrast) + 2.4.7 (Focus Visible), Level AA.
 */
.skip-link:focus,
.skip-link:focus-visible,
.skip-link:focus:hover,
.skip-link:hover {
  color: #fff !important;
}

/*
 * Size-selection cards on /choose-size, /stacked/choose-size and /wine-selected
 * are `<a role="button">` with no `href` (made keyboard-operable in the
 * components via tabIndex + onKeyDown). Give the focused card a visible ring —
 * it never had a focus style because it was previously unreachable by keyboard.
 * WCAG 2.4.7 (Focus Visible), Level AA.
 */
.card.list-item:focus-visible {
  /* Inset: an offset outline is painted outside the border box and gets
     clipped by these cards' overflow:hidden wrappers. */
  box-shadow: inset 0 0 0 3px #D2232A !important;
  outline: 2px solid transparent !important;
  outline-offset: 0 !important;
}