/* =========================================================================
   Shopping cart / member purchase flows
   -------------------------------------------------------------------------
   Used by BOTH member purchase pages - every rule below therefore has to be
   verified against both:
     - Components/Pages/Members/PurchaseTokens.razor
     - Components/Pages/Members/PurchaseActivity.razor (both card branches)

   Uses the HEIFIT design tokens (css/heifit-tokens.css), which must be loaded
   before this file.
   ================================================================= */

.cart-card {
    /* 400px is intentional and has no matching layout token. Surface, radius,
       shadow and padding come from the hf-card class on the markup. */
    max-width: 400px;
    width: 100%;
    margin: auto;
}

/* -------------------------------------------------------------------------
   Payment method tiles
   Two equal, side-by-side selectable tiles (Bancontact / Cash). The selected
   tile carries aria-pressed="true", which is derived in markup from the `useCash`
   projection of the DTO - this file never encodes payment state itself.
   The selected state is signalled by border colour AND a 2px ring (mirrors
   .hf-pack[aria-pressed="true"]), so it does not rely on colour alone.
   ------------------------------------------------------------------------- */
.cart-payment-methods {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
}

.cart-payment-tile {
    flex: 1 1 0;
    padding: var(--space-3);
    border-width: 2px;
    border-style: solid;
    border-color: var(--border);
    border-radius: var(--radius-md);
    background-color: var(--surface-200);
}

.cart-payment-tile img {
    max-width: 100%;
}

.cart-payment-tile[aria-pressed="true"] {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand);
}

/* Hover keeps the tile fill, and the SELECTED tile keeps its brand border
   while hovered. The pressed variant is listed last so it wins the tie against
   the base variant. */
.cart-payment-tile:hover:not(:disabled) {
    background-color: var(--surface-200);
    border-color: var(--ink);
}

.cart-payment-tile[aria-pressed="true"]:hover:not(:disabled) {
    background-color: var(--surface-200);
    border-color: var(--brand);
}

.cart-payment-tile:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Cash switch
   The two tiles above cover both directions of the payment-type state, so the
   switch is visually redundant and is hidden. It stays in the DOM with its
   wiring untouched (it remains the ARIA `switch` exposing the payment type)
   and it is REVEALED again while it holds keyboard focus, so it never becomes
   an invisible tab stop (WCAG 2.4.7 Focus Visible).
   This class is applied to the wrapping <label> only, so the input/track
   sibling adjacency inside it is not affected.
   ------------------------------------------------------------------------- */
.cart-payment-switch {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.cart-payment-switch:focus-within {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
}

/* -------------------------------------------------------------------------
   Price + quantity row
   ------------------------------------------------------------------------- */
.cart-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background-color: var(--surface-300);
}

.cart-details {
    flex: 1;
}

.cart-details > p:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Circular 44px stepper. The 44px size is stated here, scoped to the stepper,
   so the quantity controls keep their touch-target size independently of the
   button variant that is used.
   ------------------------------------------------------------------------- */
.cart-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.cart-actions > button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
}

.cart-actions .quantity {
    min-width: 24px;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ink);
    text-align: center;
}

/* -------------------------------------------------------------------------
   Totals block
   The rows use the shared .hf-summary component (label left / amount right,
   .is-total row separated by its own divider). Only the spacing above the
   block is set here.
   ------------------------------------------------------------------------- */
.cart-card .hf-summary {
    margin-top: var(--space-4);
}

/* -------------------------------------------------------------------------
   Confirm action - full width, separated from the totals.
   ------------------------------------------------------------------------- */
.cart-confirm {
    display: block;
    width: 100%;
    margin-top: var(--space-4);
}