/* ==========================================================================
   BHARAT REFER INTEGRATION - SCOPED COMPONENT STYLES (PATCH 1)
   ==========================================================================

   Every selector in this file is namespaced .brx- and every rule is scoped to
   the Bharat Refer component. Nothing here targets a bare element, a global
   class, the header, the footer, the product grid or any existing login style,
   so removing this file removes the component's styling and changes nothing
   else on the site.

   Master Safety Lock rules 6 and 7, Patch 1 section 18.
   ========================================================================== */

.brx-login-block {
    margin: 14px 0 0;
    text-align: left;
}

.brx-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid #d8dee9;
    border-radius: 8px;
    background: #ffffff;
    color: #0f2340;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.brx-login-btn:hover,
.brx-login-btn:focus {
    border-color: #b9c4d6;
    box-shadow: 0 4px 14px rgba(15, 35, 64, .10);
    color: #0f2340;
    text-decoration: none;
}

.brx-login-btn:focus-visible {
    outline: 2px solid #0f2340;
    outline-offset: 2px;
}

/* Official Bharat Refer artwork only. When the file is absent the button
   renders text-only and this rule simply never applies - no placeholder mark
   is ever substituted (Master Safety Lock rule 12). */
.brx-login-btn__logo {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex: 0 0 auto;
}

.brx-login-btn__label {
    display: inline-block;
}

.brx-login-note {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.6;
    text-align: center;
}

.brx-login-alert {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #f0c8c8;
    border-radius: 8px;
    background: #fdf3f3;
    color: #96302f;
    font-size: 13.5px;
    line-height: 1.6;
}

@media (max-width: 480px) {
    .brx-login-btn {
        padding: 11px 14px;
        font-size: 14.5px;
    }
}

/* ==========================================================================
   BHARAT REFER MEMBER BENEFIT STRIP (PATCH 2)
   ==========================================================================
   Still entirely inside the .brx- namespace. No product card selector
   (.mf-product-card, .mf-price-row, .mf-rating, .mf-card-actions, the grid,
   any button or font rule) is referenced or redefined here, so a card that
   does not render a strip is unchanged, and removing this file removes the
   strip's styling and nothing else.

   Compact by design (section 23): the card variant adds roughly one line of
   height, and the list collapses to a single wrapped row on narrow screens.
   ========================================================================== */

.brx-benefit {
    margin: 8px 0 0;
    padding: 7px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #f8fafc;
    font-size: 11.5px;
    line-height: 1.45;
    color: #0f2340;
    text-align: left;
}

.brx-benefit__head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
}

.brx-benefit__logo {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* Shown only while the official logo file is absent - a plain name, never a
   substituted mark (Master Safety Lock rule 12, section 13). */
.brx-benefit__brand {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .2px;
    white-space: nowrap;
}

.brx-benefit__total {
    font-weight: 700;
    font-size: 12px;
    color: #0b6b3a;
}

.brx-benefit__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
}

.brx-benefit__item {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.brx-benefit__label {
    color: #64748b;
}

.brx-benefit__value {
    font-weight: 600;
    white-space: nowrap;
}

/* Catalogue card: the three lines sit in one wrapped row to keep the card
   from growing taller than its neighbours. */
.brx-benefit--card .brx-benefit__list {
    flex-direction: row;
}

/* Product detail page: more room, so one benefit per line reads better. */
.brx-benefit--detail {
    margin: 14px 0;
    padding: 12px 14px;
    font-size: 13px;
}

.brx-benefit--detail .brx-benefit__head {
    margin-bottom: 8px;
}

.brx-benefit--detail .brx-benefit__total {
    font-size: 14.5px;
}

.brx-benefit--detail .brx-benefit__list {
    flex-direction: column;
    gap: 3px;
}

.brx-benefit--detail .brx-benefit__item {
    justify-content: space-between;
    max-width: 320px;
}

.brx-benefit__note {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 480px) {
    .brx-benefit {
        font-size: 11px;
        padding: 6px 8px;
    }

    .brx-benefit__list {
        gap: 2px 9px;
    }
}

/* ==========================================================================
   BHARAT REFER CART / CHECKOUT COMPONENTS (PATCH 3)
   ==========================================================================
   Namespaced .brx- throughout. No cart table, checkout summary, address block,
   payment method, button, grid or font rule is referenced or redefined, so
   removing this file removes only the Bharat Refer components' styling.
   ========================================================================== */

/* ---- Per-row advantage line inside an existing cart row (section 3) ---- */
.brx-row-advantage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 6px 0 0;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    font-size: 11.5px;
    line-height: 1.45;
    color: #0f2340;
}

.brx-row-advantage__head { display: flex; align-items: center; }
.brx-row-advantage__head img { display: block; width: 16px; height: 16px; object-fit: contain; }
.brx-row-advantage__brand { font-weight: 700; font-size: 10.5px; white-space: nowrap; }
.brx-row-advantage__item { color: #475569; white-space: nowrap; }
.brx-row-advantage__item strong { color: #0b6b3a; font-weight: 700; }

/* ---- Checkout benefits panel (sections 12 and 20) ---- */
.brx-panel {
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    line-height: 1.55;
    color: #0f2340;
}

.brx-panel.is-busy { opacity: .6; pointer-events: none; }
.brx-panel--unavailable { background: #f8fafc; }

.brx-panel__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.brx-panel__logo { display: block; width: 22px; height: 22px; object-fit: contain; }
.brx-panel__title { font-size: 15px; font-weight: 800; }

.brx-panel__badge {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eaf7f0;
    color: #0b6b3a;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.brx-panel__note { margin: 8px 0 0; color: #64748b; font-size: 12px; line-height: 1.6; }
.brx-panel__status { margin: 10px 0 0; color: #96302f; font-size: 12.5px; min-height: 1em; }

.brx-wallet { padding: 10px 0; border-top: 1px solid #eef2f7; }
.brx-wallet:first-of-type { border-top: none; padding-top: 0; }
.brx-wallet__title { font-weight: 700; margin: 0 0 6px; }
.brx-wallet__facts { margin: 0 0 8px; padding: 0; list-style: none; }

.brx-wallet__facts li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    color: #475569;
}

.brx-wallet__facts li strong { color: #0f2340; white-space: nowrap; }
.brx-wallet__applied { margin: 0 0 8px; color: #0b6b3a; font-weight: 600; }
.brx-wallet__none { margin: 0; color: #94a3b8; font-size: 12px; }

.brx-btn {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #0f2340;
    border-radius: 7px;
    background: #0f2340;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.brx-btn:hover { opacity: .9; }
.brx-btn--remove { background: #fff; color: #96302f; border-color: #f0c8c8; }

/* ---- Transparent summary (section 20) ---- */
.brx-summary { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid #eef2f7; }

.brx-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    color: #475569;
}

.brx-summary__row strong { color: #0f2340; white-space: nowrap; }
.brx-summary__row.is-credit strong { color: #0b6b3a; }
.brx-summary__row.is-muted { color: #94a3b8; font-size: 12px; }
.brx-summary__row.is-muted strong { color: #94a3b8; font-weight: 600; }

.brx-summary__row.is-total {
    margin-top: 4px;
    padding-top: 7px;
    border-top: 1px dashed #dbe4f0;
    font-weight: 700;
    color: #0f2340;
}

/* ---- Post-order previews (sections 21, 22, 37) ---- */
.brx-earn { margin: 12px 0 0; padding: 10px; border-radius: 8px; background: #f8fafc; }
.brx-earn__row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; color: #475569; }
.brx-earn__row strong { color: #0b6b3a; white-space: nowrap; }

@media (max-width: 480px) {
    .brx-panel { padding: 12px; font-size: 12.5px; }
    .brx-panel__badge { margin-left: 0; }
    .brx-row-advantage { font-size: 11px; gap: 3px 9px; }
}

/* =====================================================================
   Benefit chips (catalogue card + product page) - 2x2 coloured tiles
   ===================================================================== */
.brx-benefit {
    padding: 0;
    border: 0;
    background: transparent;
}
.brx-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.brx-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 5px 7px;
    border-radius: 7px;
    line-height: 1.15;
    cursor: default;
}
.brx-chip__icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.brx-chip__icon svg { display: block; }
.brx-chip__text { display: flex; flex-direction: column; min-width: 0; }
.brx-chip__top,
.brx-chip__bottom {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brx-chip__top { font-size: 10.5px; font-weight: 600; }
.brx-chip__bottom { font-size: 11.5px; font-weight: 700; }

/* Extra Benefit - pink */
.brx-chip--extra { background: #fde8ef; color: #9d1c4b; }
.brx-chip--extra .brx-chip__icon { background: #e62e6b; color: #fff; border-radius: 50%; }
.brx-chip--extra .brx-chip__top { font-size: 12.5px; font-weight: 800; color: #d81b60; }
.brx-chip--extra .brx-chip__bottom { font-size: 10.5px; font-weight: 600; }
/* Discount Wallet Use - blue */
.brx-chip--use { background: #e4f0fd; color: #173a6b; }
.brx-chip--use .brx-chip__icon { color: #1e7fe0; }
/* Shopping Earn - green */
.brx-chip--earn { background: #e5f6e9; color: #14532d; }
.brx-chip--earn .brx-chip__icon { color: #23a047; }
/* Discount Wallet Back - amber */
.brx-chip--back { background: #fff3d4; color: #6b4a00; }
.brx-chip--back .brx-chip__icon { color: #f29a00; }
.brx-chip--use .brx-chip__icon svg,
.brx-chip--earn .brx-chip__icon svg,
.brx-chip--back .brx-chip__icon svg { width: 20px; height: 20px; }

.brx-benefit--card { margin: 8px 0 2px; }

/* Product page: roomier, four across when there is space */
.brx-benefit--detail { margin: 14px 0; padding: 0; font-size: 13px; }
.brx-benefit--detail .brx-chips { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.brx-benefit--detail .brx-chip { padding: 8px 10px; gap: 8px; }
.brx-benefit--detail .brx-chip__icon { flex-basis: 28px; width: 28px; height: 28px; }
.brx-benefit--detail .brx-chip__top { font-size: 12px; }
.brx-benefit--detail .brx-chip__bottom { font-size: 13.5px; }
.brx-benefit--detail .brx-chip--extra .brx-chip__top { font-size: 15px; }
.brx-benefit--detail .brx-benefit__note { margin: 8px 0 0; }

/* Very narrow cards (two-up on small phones) */
@media (max-width: 420px) {
    .brx-benefit--card .brx-chips { gap: 4px; }
    .brx-benefit--card .brx-chip { padding: 4px 5px; gap: 4px; }
    .brx-benefit--card .brx-chip__icon { flex-basis: 18px; width: 18px; height: 18px; }
    .brx-benefit--card .brx-chip__icon svg { width: 16px; height: 16px; }
    .brx-benefit--card .brx-chip__top { font-size: 9.5px; }
    .brx-benefit--card .brx-chip__bottom { font-size: 10px; }
    .brx-benefit--card .brx-chip--extra .brx-chip__top { font-size: 11px; }
}

/* Chips: tighter so "Discount Wallet" fits on catalogue cards */
.brx-chip { gap: 5px; padding: 5px 6px; }
.brx-chip__icon { flex-basis: 20px; width: 20px; height: 20px; }
.brx-chip--use .brx-chip__icon svg,
.brx-chip--earn .brx-chip__icon svg,
.brx-chip--back .brx-chip__icon svg { width: 18px; height: 18px; }
.brx-chip__top { font-size: 10px; }
.brx-chip__bottom { font-size: 11px; }
.brx-chip--extra .brx-chip__top { font-size: 12px; }
.brx-chip__line { display: none; }

/* Narrow cards (phones, two-up grids): stay 2x2, just smaller, labels may wrap */
.brx-benefit--card { container-type: inline-size; }
@container (max-width: 205px) {
    .brx-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
    .brx-chip { padding: 3px 4px; gap: 3px; border-radius: 6px; }
    .brx-chip__top,
    .brx-chip__bottom { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
}

/* Final fit: catalogue chips ~105px wide on 5-up desktop rows */
.brx-benefit--card .brx-chip { padding: 5px 5px; gap: 4px; }
.brx-benefit--card .brx-chip__icon { flex-basis: 18px; width: 18px; height: 18px; }
.brx-benefit--card .brx-chip--extra .brx-chip__icon svg { width: 12px; height: 12px; }
.brx-benefit--card .brx-chip--use .brx-chip__icon svg,
.brx-benefit--card .brx-chip--earn .brx-chip__icon svg,
.brx-benefit--card .brx-chip--back .brx-chip__icon svg { width: 17px; height: 17px; }
.brx-benefit--card .brx-chip__top { font-size: 9.5px; letter-spacing: -.1px; }
.brx-benefit--card .brx-chip--extra .brx-chip__top { font-size: 11.5px; letter-spacing: 0; }
/* Product page: always 2x2 */
.brx-benefit--detail .brx-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brx-benefit--detail .brx-chip__top { font-size: 11px; }
.brx-benefit--detail .brx-chip__bottom { font-size: 12.5px; }
.brx-benefit--detail .brx-chip--extra .brx-chip__top { font-size: 14px; }
@container (max-width: 205px) {
    .brx-benefit--card .brx-chip { padding: 3px 4px; gap: 3px; }
    .brx-benefit--card .brx-chip__icon { flex-basis: 12px; width: 12px; height: 12px; }
    .brx-benefit--card .brx-chip--extra .brx-chip__icon svg { width: 8px; height: 8px; }
    .brx-benefit--card .brx-chip--use .brx-chip__icon svg,
    .brx-benefit--card .brx-chip--earn .brx-chip__icon svg,
    .brx-benefit--card .brx-chip--back .brx-chip__icon svg { width: 12px; height: 12px; }
    .brx-benefit--card .brx-chip__top { font-size: 8px; letter-spacing: -.2px; line-height: 1.1; }
    .brx-benefit--card .brx-chip__bottom { font-size: 8.5px; letter-spacing: -.2px; line-height: 1.1; }
    .brx-benefit--card .brx-chip--extra .brx-chip__top { font-size: 9.5px; }
}
/* Product page chips: let labels wrap instead of cutting them */
.brx-benefit--detail .brx-chip { padding: 7px 8px; gap: 7px; }
.brx-benefit--detail .brx-chip__icon { flex-basis: 24px; width: 24px; height: 24px; }
.brx-benefit--detail .brx-chip__top,
.brx-benefit--detail .brx-chip__bottom { white-space: normal; overflow: visible; }

/* ---- Row advantage: green bar with "Bharat Refer Advantage" (cart + checkout) ---- */
.brx-row-advantage {
    gap: 4px 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: #ecf8f0;
    font-size: 12px;
}
.brx-row-advantage__head { padding-right: 12px; margin-right: 12px; border-right: 1px solid #c9e8d4; }
.brx-row-advantage__brand { font-size: 12px; font-weight: 700; color: #1d4ed8; }
.brx-row-advantage__brand::after { content: " Advantage"; }
.brx-row-advantage__item { color: #14532d; padding-right: 12px; margin-right: 12px; border-right: 1px solid #c9e8d4; }
.brx-row-advantage__item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.brx-row-advantage__item strong { color: #0b6b3a; }
@media (max-width: 600px) {
    .brx-row-advantage__head, .brx-row-advantage__item { border-right: 0; margin-right: 8px; padding-right: 0; }
}
/* Dividers only where the advantage line has room (checkout); cart rows stack cleanly */
.brx-row-advantage__head, .brx-row-advantage__item { border-right: 0; margin-right: 0; padding-right: 12px; }
.brx-row-advantage__item strong { font-weight: 700; }
.brx-row-advantage__item { font-weight: 500; }

/* ---- Card/product heading bar: "BR  Bharat Refer Member Benefits  >" ---- */
.brx-benefit__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    padding: 5px 8px;
    border-radius: 7px;
    background: #fff4e8;
    color: #1e3a8a;
    line-height: 1.2;
}
.brx-benefit__bar-logo { display: block; width: 18px; height: 18px; object-fit: contain; flex: 0 0 18px; }
.brx-benefit__bar-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brx-benefit__bar-chev { flex: 0 0 14px; color: #64748b; }
.brx-br-mark {
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -1.5px;
    line-height: 1;
}
.brx-br-mark b { color: #1e3a8a; font-weight: 900; }
.brx-br-mark i { color: #e11d2e; font-style: italic; }
.brx-benefit--detail .brx-benefit__bar { padding: 8px 12px; margin-bottom: 8px; }
.brx-benefit--detail .brx-benefit__bar-text { font-size: 14px; }
.brx-benefit--detail .brx-br-mark { font-size: 17px; }
@container (max-width: 205px) {
    .brx-benefit__bar { padding: 4px 6px; gap: 4px; margin-bottom: 4px; }
    .brx-benefit__bar-text { font-size: 9.5px; }
    .brx-br-mark { font-size: 11px; }
}