/* ==========================================================================
   Retail App UI — mobile-first modernization layer for retail_user pages.
   Scoped under .retail-app so it never leaks into corporate/other flows
   that share frontend.login-layout.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

.retail-app {
    --rt-primary: #3aa425;
    --rt-primary-dark: #2e831e;
    --rt-primary-light: #ebf6e9;
    --rt-accent: #ff9800;
    --rt-danger: #e5484d;
    --rt-ink: #1b2430;
    --rt-muted: #6b7686;
    --rt-border: #e7ebf0;
    --rt-bg: #f4f6f9;
    --rt-card: #ffffff;
    --rt-radius-lg: 18px;
    --rt-radius-md: 14px;
    --rt-radius-sm: 10px;
    --rt-shadow: 0 2px 10px rgba(23, 43, 33, 0.06), 0 1px 2px rgba(23, 43, 33, 0.04);
    --rt-shadow-raised: 0 10px 30px rgba(58, 164, 37, 0.14);
    --rt-topbar-h: 60px;
    --rt-bottomnav-h: 84px;
    background: var(--rt-bg);
    color: var(--rt-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.retail-app * {
    box-sizing: border-box;
}

.retail-app a {
    text-decoration: none;
}

.retail-app-content {
    min-height: 60vh;
    padding: 16px 14px 24px;
    max-width: 720px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .retail-app-content {
        padding: 24px 16px 40px;
    }
}

/* ---------- Top app bar ---------- */
/* Reserve the scrollbar's width on every page. Without it a short page (no scrollbar) is ~15px
   wider than a long one, and the centred top bar - logo and menu included - jumps sideways when
   the user moves between them. */
html {
    scrollbar-gutter: stable;
}

.retail-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #ffffff;
    border-bottom: 1px solid var(--rt-border);
}

.retail-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--rt-topbar-h);
    /* One width for the top bar on every retail page (dashboard, offers, follow-ups, profile…).
       It used to be 1100px here with the dashboard (1320px) and offers (1180px) overriding it
       per page, so the bar changed size as the user moved between pages. */
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
}

.retail-topbar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.retail-topbar__brand img {
    width: 150px;
    height: auto;
    display: block;
}

@media (max-width: 767.98px) {
    .retail-topbar__brand {
        min-width: 0;
        flex: 0 1 auto;
    }

    .retail-topbar__brand img {
        width: auto;
        max-width: 130px;
        max-height: calc(var(--rt-topbar-h) - 16px);
        object-fit: contain;
    }
}

.retail-topbar__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.retail-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--rt-ink);
    background: transparent;
    border: none;
    font-size: 17px;
    transition: background 0.15s ease;
}

.retail-avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--rt-ink);
    border: none;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    transition: transform 0.15s ease;
}

.retail-avatar-btn__initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rt-primary) 0%, var(--rt-primary-dark) 100%);
    color: #fff;
    box-shadow: 0 4px 10px rgba(58, 164, 37, 0.28);
}

.retail-avatar-btn__name {
    display: inline-block;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
}

.retail-avatar-btn__caret {
    display: inline-block;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    color: var(--rt-muted);
}

.retail-avatar-btn:hover,
.retail-avatar-btn:focus {
    transform: scale(1.05);
}

.retail-icon-btn:hover,
.retail-icon-btn:focus {
    background: var(--rt-primary-light);
    color: var(--rt-primary-dark);
}

/* Desktop / tablet top nav links (hidden on phones, bottom nav takes over) */
.retail-topnav {
    display: none;
}

@media (min-width: 768px) {
    /* The bar used to spread logo / menu / profile with space-between, so the menu floated in
       the middle and its left edge moved with the number of menu items (3 vs 7). Anchor the
       menu right after the logo instead, and push the profile button to the far right. */
    .retail-topbar__inner {
        justify-content: flex-start;
    }

    .retail-topbar__brand {
        flex: 0 0 auto;
    }

    .retail-topnav {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: 32px;
    }

    .retail-topbar__actions {
        margin-left: auto;
    }

    .retail-topnav a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 14px;
        border-radius: 999px;
        color: var(--rt-muted);
        font-weight: 600;
        font-size: 14px;
        transition: all 0.15s ease;
        white-space: nowrap;
    }

    .retail-topnav a svg {
        width: 17px;
        height: 17px;
        flex-shrink: 0;
    }

    .retail-topnav a:hover {
        background: var(--rt-primary-light);
        color: var(--rt-primary-dark);
    }

    .retail-topnav a.is-active {
        background: var(--rt-primary);
        color: #fff;
    }

    .retail-topnav a.is-logout {
        color: var(--rt-danger);
    }
}

/* Dropdown (desktop profile menu) */
.retail-dropdown {
    position: relative;
}

.retail-dropdown__menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    border-radius: var(--rt-radius-sm);
    box-shadow: var(--rt-shadow-raised);
    border: 1px solid var(--rt-border);
    min-width: 190px;
    padding: 6px;
    z-index: 50;
}

/* Opens/closes purely on click (see retail-navbar.blade.php's JS), not :hover —
   the button and menu don't touch (there's an 8px gap for the menu's drop-shadow
   to breathe), so a hover-driven toggle drops out the instant the cursor crosses
   that gap, closing the menu before it ever reaches the menu items. */
.retail-dropdown.is-open .retail-dropdown__menu {
    display: block;
}

.retail-dropdown__menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--rt-ink);
    font-size: 14px;
    font-weight: 500;
}

.retail-dropdown__menu a:hover {
    background: var(--rt-primary-light);
    color: var(--rt-primary-dark);
}

/* ---------- Bottom tab bar (mobile app feel) ---------- */
.retail-bottomnav {
    display: none;
}

@media (max-width: 767.98px) {
    .retail-bottomnav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        background: #ffffff;
        border-top: 1px solid var(--rt-border);
        box-shadow: 0 -6px 20px rgba(20, 30, 25, 0.06);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    }

    body.has-retail-bottomnav footer.footer-area {
        display: none;
    }

    /* The legacy template forces body/html to height:100%, which fights any
       padding-bottom added directly on body (it never grows the scrollable
       area). Reserve the clearance on the content container instead, which
       isn't subject to that override. */
    body.has-retail-bottomnav .retail-app-content {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }
}

.retail-bottomnav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    color: var(--rt-muted);
    font-size: 10.5px;
    font-weight: 600;
    text-align: center;
    border-radius: 12px;
    transition: color 0.15s ease;
}

.retail-bottomnav__item i {
    font-size: 18px !important;
    line-height: 1;
}

.retail-bottomnav__item.is-active {
    color: var(--rt-primary-dark);
}

.retail-bottomnav__item.is-active i {
    transform: translateY(-1px);
}

.retail-bottomnav__item.is-logout {
    color: var(--rt-danger);
}

/* ---------- Section heading ---------- */
.retail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 14px;
    flex-wrap: wrap;
}

.retail-heading h1,
.retail-heading h2,
.retail-heading h3 {
    font-size: 19px;
    font-weight: 700;
    margin: 0;
    color: var(--rt-ink);
}

.retail-heading p {
    margin: 2px 0 0;
    color: var(--rt-muted);
    font-size: 13px;
}

/* ---------- Cards ---------- */
.retail-card {
    background: var(--rt-card);
    border-radius: var(--rt-radius-lg);
    box-shadow: var(--rt-shadow);
    border: 1px solid var(--rt-border);
    padding: 18px;
    margin-bottom: 16px;
}

.retail-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--rt-ink);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.retail-card__title i {
    color: var(--rt-primary);
}

.retail-card__title svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--rt-primary);
}

/* ---------- Stat / plan summary card ---------- */
.retail-stat-card {
    background: linear-gradient(135deg, var(--rt-primary) 0%, var(--rt-primary-dark) 100%);
    border-radius: var(--rt-radius-lg);
    padding: 16px;
    color: #fff;
    box-shadow: var(--rt-shadow-raised);
    margin-bottom: 16px;
}

.retail-stat-card--expired {
    background: linear-gradient(135deg, #f59e0b 0%, #b3400f 100%);
    box-shadow: 0 10px 30px rgba(217, 90, 15, 0.28);
}

.retail-stat-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.retail-stat-card__flag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.22);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    margin-top: 1px;
}

.retail-stat-card__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
    margin: 0 0 2px;
}

.retail-stat-card__plan {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
}

.retail-stat-card__expiry {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    opacity: 0.9;
    margin: 0 0 12px;
}

.retail-stat-card__expiry svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.retail-stat-card__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.retail-stat-card__cell {
    background: rgba(255, 255, 255, 0.14);
    border-radius: var(--rt-radius-sm);
    padding: 8px 6px;
    text-align: center;
}

.retail-stat-card__cell strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.retail-stat-card__cell span {
    font-size: 10px;
    opacity: 0.9;
}

.retail-stat-card__cta {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    border: none;
    border-radius: 999px;
    background: #fff;
    color: #b3400f;
    font-weight: 800;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}

/* ---------- List / row cards (documents, followups, transactions) ---------- */
.retail-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.retail-row-card {
    background: var(--rt-card);
    border: 1px solid var(--rt-border);
    border-radius: var(--rt-radius-md);
    padding: 14px;
    box-shadow: var(--rt-shadow);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.retail-row-card__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--rt-primary-light);
    color: var(--rt-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.retail-row-card__body {
    flex: 1;
    min-width: 0;
}

.retail-row-card__title {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--rt-ink);
    margin: 0 0 2px;
    overflow-wrap: anywhere;
}

.retail-row-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 12.5px;
    color: var(--rt-muted);
    margin: 0;
    line-height: 1.5;
}

.retail-row-card__meta i {
    font-size: 11.5px !important;
    line-height: 1;
}

.retail-row-card__meta svg {
    width: 12.5px;
    height: 12.5px;
    flex-shrink: 0;
    color: var(--rt-muted);
}

.retail-row-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.retail-row-card__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rt-primary-dark);
    background: var(--rt-primary-light);
    padding: 7px 12px;
    border-radius: 999px;
}

.retail-row-card__action:hover {
    background: var(--rt-primary);
    color: #fff;
}

/* ---------- Badges / chips ---------- */
.retail-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}

.retail-badge--success {
    background: #ebf6e9;
    color: #2e831e;
}

.retail-badge--warning {
    background: #fff4e0;
    color: #b16500;
}

.retail-badge--danger {
    background: #fdeceb;
    color: #b3261e;
}

.retail-badge--neutral {
    background: #eef1f5;
    color: var(--rt-muted);
}

/* ---------- Amount emphasis ---------- */
.retail-amount {
    font-weight: 800;
    font-size: 14.5px;
    color: var(--rt-ink);
}

/* ---------- Buttons ---------- */
.retail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13.5px;
    padding: 11px 18px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.retail-btn--primary {
    background: var(--rt-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(58, 164, 37, 0.28);
}

.retail-btn--primary:hover {
    background: var(--rt-primary-dark);
    color: #fff;
}

.retail-btn--ghost {
    background: #fff;
    color: var(--rt-primary-dark);
    border: 1px solid var(--rt-border);
}

.retail-btn--block {
    width: 100%;
}

/* ---------- Empty state ---------- */
.retail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 44px 20px;
    background: var(--rt-card);
    border: 1px dashed var(--rt-border);
    border-radius: var(--rt-radius-lg);
}

.retail-empty svg {
    width: 132px;
    height: 132px;
    margin-bottom: 14px;
}

.retail-empty__title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--rt-ink);
    margin: 0 0 6px;
}

.retail-empty__subtitle {
    font-size: 13px;
    color: var(--rt-muted);
    max-width: 320px;
    margin: 0 0 16px;
    line-height: 1.5;
}

/* ---------- Alerts ---------- */
.retail-alert {
    border-radius: var(--rt-radius-md);
    padding: 12px 14px;
    font-size: 13.5px;
    margin-bottom: 14px;
}

.retail-alert--success {
    background: #ebf6e9;
    color: #2e831e;
}

.retail-alert--danger {
    background: #fdeceb;
    color: #b3261e;
}

.retail-alert--warning {
    background: #fff4e0;
    color: #8a4b00;
}

/* ---------- Form modernization (keeps original ids/names/behavior) ---------- */
.retail-app .form-control.m-input {
    border-radius: var(--rt-radius-sm);
    border: 1px solid var(--rt-border);
    padding: 10px 12px;
    font-size: 14px;
    height: auto;
}

.retail-app .form-control.m-input:focus {
    border-color: var(--rt-primary);
    box-shadow: 0 0 0 3px var(--rt-primary-light);
}

/* intlTelInput's own 52px left padding (for its flag) loses to the rule above on
   specificity ties since this stylesheet loads after intlTelInput.css - the number
   was rendering underneath the flag. Matches ".retail-app .form-control.m-input"'s
   specificity plus the plugin's wrapper class, so it wins regardless of load order. */
.retail-app .iti--allow-dropdown .form-control.m-input {
    padding-left: 52px;
}

.retail-app select.form-control.m-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7686' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 38px;
}

/* Custom file picker — replaces the native OS "Choose File" chrome.
   Selector (not just the class) matches ".retail-app label"'s specificity —
   that generic label rule otherwise wins and collapses this to inline-block,
   squashing the dropzone to the width of its own text. */
.retail-app .retail-file-input {
    display: block;
    width: 100%;
    position: relative;
    border: 1.5px dashed var(--rt-border);
    border-radius: var(--rt-radius-sm);
    padding: 14px 12px;
    text-align: center;
    cursor: pointer;
    background: var(--rt-bg);
    transition: border-color 0.15s ease, background 0.15s ease;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.retail-file-input:hover {
    border-color: var(--rt-primary);
    background: var(--rt-primary-light);
}

.retail-file-input.has-file {
    border-style: solid;
    border-color: var(--rt-primary);
    background: var(--rt-primary-light);
}

.retail-file-input__native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.retail-file-input__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--rt-muted);
    font-size: 13px;
    font-weight: 600;
}

.retail-file-input__visual svg {
    width: 18px;
    height: 18px;
    color: var(--rt-primary);
    flex-shrink: 0;
}

.retail-file-input.has-file .retail-file-input__visual {
    color: var(--rt-primary-dark);
}

.retail-file-input__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.retail-app label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rt-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
    display: inline-block;
}

/* ---------- Offers carousel card polish ---------- */
.offer-carousel {
    padding-bottom: 6px;
}

.offer-slide {
    display: block;
    border: 1px solid var(--rt-border);
    border-radius: var(--rt-radius-md);
    background: #fff;
    overflow: hidden;
}

.offer-slide__media {
    aspect-ratio: 16 / 9;
    background: var(--rt-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.offer-slide__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    box-sizing: border-box;
}

.offer-slide__title {
    margin: 0;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--rt-ink);
    text-align: center;
    border-top: 1px solid var(--rt-border);
}

/* Owl's theme CSS isn't loaded on this site, so dots/nav need styling from scratch */
.offer-carousel .owl-nav {
    display: none;
}

.offer-carousel .owl-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

.offer-carousel .owl-dot span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--rt-border);
    transition: all 0.2s ease;
}

.offer-carousel .owl-dot.active span {
    width: 18px;
    background: var(--rt-primary);
}

/* A "scroll to top" button from the site's shared JS bundle overlaps the
   fixed bottom nav on retail pages — hide it here only. */
#scrollUp {
    display: none !important;
}

/* ---------- Icon baseline safety net ----------
   main.css has a global `[class*=" fa-"] { font-size: 1.1rem; padding-top: 18px; }`
   rule that matches every Font Awesome icon on the site. It was tuned for one
   specific hero/feature usage elsewhere, but it silently inflates and
   misaligns every icon inside the retail app unless explicitly reset here. */
.retail-app i.fa,
.retail-app i[class*=" fa-"] {
    padding-top: 0;
    font-size: inherit;
    line-height: 1;
    vertical-align: -1px;
}

/* ---------- Checkboxes (terms, newsletter, etc.) ---------- */
.retail-app input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    border: 1.5px solid var(--rt-border);
    border-radius: 6px;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
    position: relative;
    cursor: pointer;
    transition: all 0.15s ease;
}

.retail-app input[type="checkbox"]:checked {
    background: var(--rt-primary);
    border-color: var(--rt-primary);
}

.retail-app input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.retail-app input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px var(--rt-primary-light);
}

/* ---------- Plan picker (membership plan modal) ----------
   Markup: resources/views/frontend/retail_user/partials/plan-modal.blade.php.
   #plan stays a hidden <select> - the single source of truth that checkplan()
   and the payment form read from. Everything visible mirrors it.

   The design has its own type scale and palette, noticeably larger and
   cooler-toned than the rest of the retail app. Those live as --pm-*
   variables scoped to #plan_model so nothing outside this modal shifts.

   Layout: two columns from 992px (plan details | summary + payment). Below
   that it stacks, and the summary card, security note and trust row drop
   away since the trigger already shows the chosen plan and price. Below
   768px the footer is just a full-width Proceed button. */
.retail-app #plan_model {
    --pm-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --pm-ink: #0f1e36;
    --pm-body: #334155;
    --pm-muted: #64748b;
    --pm-faint: #94a3b8;
    --pm-line: #e2e8f0;
    --pm-surface: #f8fafc;
    --pm-green: #15803d;
    --pm-green-dark: #166534;
    --pm-green-bright: #16a34a;
    --pm-green-soft: #f0fdf4;
    --pm-green-tint: #e7f7ec;
    --pm-green-fill: #dcfce7;
    --pm-green-line: #d7f0de;
    --pm-focus: 0 0 0 4px rgba(22, 163, 74, 0.14);
    font-family: var(--pm-font);
}

/* several blocks set their own display, which would beat the UA [hidden] rule */
.retail-app #plan_model [hidden] {
    display: none !important;
}

.retail-app #plan_model .modal-dialog {
    max-width: 1100px;
    margin: 28px auto;
    padding: 0 16px;
}

.retail-app #plan_model .modal-content {
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(15, 30, 54, 0.22);
}

/* Fit the modal to the viewport: header and footer stay pinned, only the body scrolls,
   so the coupon field and "Proceed to plan" never sit below the fold. */
.retail-app #plan_model .modal-dialog {
    display: flex;
    max-height: calc(100vh - 56px);
    /* dvh = the visible area on phones, where vh counts the part behind the browser toolbar */
    max-height: calc(100dvh - 56px);
}

.retail-app #plan_model .modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 100%;
}

.retail-app #plan_model .modal-header,
.retail-app #plan_model .modal-footer {
    flex-shrink: 0;
}

.retail-app #plan_model .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- header --- */
.retail-app #plan_model .modal-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 32px 6px;
    border-bottom: none;
}

.pm-crown {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--pm-green-tint);
    color: var(--pm-green-bright);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-crown svg {
    width: 32px;
    height: 32px;
}

.pm-heading {
    flex: 1;
    min-width: 0;
}

.retail-app #plan_model .modal-header .modal-title {
    font-family: var(--pm-font);
    font-size: 34px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--pm-ink);
    margin: 0;
}

.pm-subtitle {
    margin: 4px 0 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--pm-muted);
}

.retail-app #plan_model .modal-header .close {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    align-self: flex-start;
    margin: 0 0 0 auto;
    padding: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--pm-body);
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.retail-app #plan_model .modal-header .close:hover {
    background: var(--pm-line);
    color: var(--pm-ink);
}

/* --- body --- */
.retail-app #plan_model .modal-body {
    padding: 22px 32px 26px;
}

.pm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}

@media (min-width: 992px) {
    .pm-grid {
        grid-template-columns: minmax(0, 1fr) 400px;
        gap: 28px;
        align-items: start;
    }
}

.pm-section {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--pm-ink);
}

.pm-only-compact {
    display: none;
}

.pm-only-phone {
    display: none;
}

/* --- plan select --- */
.pm-picker__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.pm-label {
    font-size: 17px;
    font-weight: 600;
    color: var(--pm-ink);
}

.pm-hint {
    font-size: 14px;
    font-weight: 500;
    color: var(--pm-muted);
    white-space: nowrap;
}

.pm-select {
    position: relative;
}

.pm-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: #fff;
    border: 1.5px solid var(--pm-line);
    border-radius: 16px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-trigger:hover {
    border-color: #cbd5e1;
}

.pm-trigger:focus-visible,
.pm-trigger[aria-expanded="true"] {
    outline: none;
    border-color: var(--pm-green-bright);
    box-shadow: var(--pm-focus);
}

.pm-trigger:disabled {
    cursor: default;
    opacity: 0.7;
}

.pm-trigger__icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--pm-green-tint);
    color: var(--pm-green-bright);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-trigger__icon svg {
    width: 26px;
    height: 26px;
}

.pm-trigger__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pm-trigger__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--pm-ink);
}

.pm-trigger__sub {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--pm-muted);
}

.pm-trigger__sub:empty {
    display: none;
}

.pm-trigger__chev {
    display: flex;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--pm-ink);
    transition: transform 0.18s ease;
}

.pm-trigger__chev svg {
    width: 100%;
    height: 100%;
}

.pm-trigger[aria-expanded="true"] .pm-trigger__chev {
    transform: rotate(180deg);
}

.pm-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 7px;
    background: var(--pm-green-bright);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: nowrap;
}

.pm-badge--save {
    background: #fef3c7;
    color: #b45309;
}

/* the open list floats over the plan details below it */
.pm-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    max-height: 360px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(15, 30, 54, 0.16);
}

.pm-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-bottom: 6px;
    padding: 10px 14px;
    border: 1px solid var(--pm-line);
    border-radius: 12px;
    color: var(--pm-muted);
}

.pm-search:focus-within {
    border-color: var(--pm-green-bright);
}

.pm-search svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.pm-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--pm-ink);
}

.pm-options {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pm-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
}

.pm-option:hover,
.pm-option:focus-visible {
    background: var(--pm-surface);
    outline: none;
}

.pm-option.is-selected {
    background: var(--pm-green-soft);
}

.pm-option__radio {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
}

.pm-option.is-selected .pm-option__radio {
    border-color: var(--pm-green-bright);
}

.pm-option.is-selected .pm-option__radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--pm-green-bright);
}

.pm-option__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pm-option__name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--pm-ink);
}

.pm-option__meta {
    font-size: 13.5px;
    color: var(--pm-muted);
}

.pm-option__price {
    font-size: 16px;
    font-weight: 800;
    color: var(--pm-ink);
    white-space: nowrap;
}

.pm-unit {
    font-size: 0.8em;
    font-weight: 500;
    color: var(--pm-muted);
}

.pm-empty {
    margin: 0;
    padding: 14px;
    text-align: center;
    font-size: 14px;
    color: var(--pm-muted);
}

/* --- plan details --- */
.pm-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 18px;
}

.pm-hero {
    padding: 26px 26px 22px;
    border: 1px solid var(--pm-green-line);
    border-radius: 20px;
    background: linear-gradient(180deg, #edf9f1 0%, #f5fcf7 58%, #fff 100%);
}

.pm-hero__top {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.pm-hero__text {
    flex: 1;
    min-width: 0;
}

.pm-hero__title {
    margin: 0;
    font-family: var(--pm-font);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--pm-ink);
}

.pm-hero__tagline {
    margin: 8px 0 0;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.4;
    color: #1d4d33;
}

.pm-hero__desc {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pm-body);
    /* the long plan text scrolls inside its own box, so the coupon, summary and Proceed button
       stay in view; capped by viewport height so the box never outgrows a short screen */
    max-height: min(280px, 38vh);
    overflow-y: auto;
    padding-right: 8px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: var(--pm-green-bright) var(--pm-green-fill);
}

/* always-visible scrollbar so it's clear there is more to read */
.pm-hero__desc::-webkit-scrollbar {
    width: 6px;
}

.pm-hero__desc::-webkit-scrollbar-track {
    background: var(--pm-green-fill);
    border-radius: 3px;
}

.pm-hero__desc::-webkit-scrollbar-thumb {
    background: var(--pm-green-bright);
    border-radius: 3px;
}

/* admin-authored HTML (description, highlights, inclusions) */
.pm-rich p {
    margin: 0 0 8px;
}

.pm-rich > :last-child,
.pm-rich li > :last-child {
    margin-bottom: 0;
}

.pm-rich a {
    color: var(--pm-green);
    text-decoration: underline;
}

.pm-hero__desc ul,
.pm-hero__desc ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

/* the theme stylesheet (main.css) resets every list to list-style:none / padding:0 / margin:0, which
   would hide the bullets and numbers of lists the admin created in the plan editor - turn them back on */
.pm-hero__desc ul {
    list-style: disc outside;
}

.pm-hero__desc ol {
    list-style: decimal outside;
}

.pm-hero__desc li {
    display: list-item;
    list-style: inherit;
    margin: 0 0 4px;
    padding: 0;
}

.pm-hero__desc li li {
    margin-bottom: 2px;
}

/* crown sits in the card's corner so the description below it can use the full width */
.pm-hero {
    position: relative;
}

.pm-hero__title,
.pm-hero__tagline {
    padding-right: 124px;
}

.pm-hero__art {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 112px;
    height: 112px;
    flex-shrink: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, var(--pm-green-fill) 0%, #e9f9ee 52%, rgba(233, 249, 238, 0) 72%);
    color: var(--pm-green-bright);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-hero__art svg {
    width: 62px;
    height: 62px;
}

.pm-spark {
    position: absolute;
    width: 10px;
    height: 10px;
    background: currentColor;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    opacity: 0.75;
}

.pm-spark--a {
    top: 16px;
    left: 12px;
}

.pm-spark--b {
    top: 6px;
    right: 18px;
    width: 15px;
    height: 15px;
}

/* --- summary + payment column --- */
.pm-side {
    padding: 22px;
    border: 1px solid #eef2f6;
    border-radius: 20px;
    background: var(--pm-surface);
}

.pm-side__title {
    margin: 0 0 14px;
    font-size: 21px;
    font-weight: 800;
    color: var(--pm-ink);
}

.pm-plancard {
    margin-bottom: 20px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: 14px;
}

.pm-plancard__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.pm-plancard__name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 800;
    color: var(--pm-ink);
}

.pm-plancard__price {
    font-size: 26px;
    font-weight: 800;
    color: var(--pm-ink);
    white-space: nowrap;
}

.pm-plancard__price .pm-unit {
    font-size: 16px;
}

.pm-plancard__note {
    margin: 6px 0 0;
    text-align: right;
    font-size: 13px;
    color: var(--pm-muted);
}

.pm-coupon {
    display: flex;
    gap: 10px;
}

.pm-coupon__field {
    flex: 1;
    min-width: 0;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 0 14px;
    background: #fff;
    border: 1.5px solid var(--pm-line);
    border-radius: 12px;
    color: var(--pm-body);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-coupon__field:focus-within {
    border-color: var(--pm-green-bright);
    box-shadow: var(--pm-focus);
}

.pm-coupon__field svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.pm-coupon__field input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--pm-ink);
}

.pm-coupon__field input::placeholder {
    font-weight: 500;
    color: var(--pm-faint);
}

.pm-coupon__clear {
    padding: 4px 6px;
    border: none;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: var(--pm-body);
    cursor: pointer;
}

.pm-coupon__clear:hover {
    color: var(--pm-ink);
}

.pm-coupon__msg {
    margin: 8px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #dc2626;
}

.pm-coupon__msg:empty {
    display: none;
}

.pm-coupon__ok {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    background: var(--pm-green-tint);
    font-size: 14px;
    font-weight: 500;
    color: var(--pm-green-dark);
}

.pm-coupon__ok svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--pm-green-bright);
}

.pm-breakdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 18px;
}

.pm-breakdown__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 6px;
    font-size: 16px;
    color: var(--pm-body);
}

.pm-breakdown__row > span:last-child {
    white-space: nowrap;
}

.pm-breakdown__row.is-discount {
    color: var(--pm-green);
}

.pm-breakdown__row.is-total {
    margin-top: 8px;
    padding: 13px 14px;
    border-radius: 12px;
    background: var(--pm-green-tint);
    font-size: 18px;
    font-weight: 800;
    color: var(--pm-green);
}

.pm-secure {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--pm-green-soft);
}

.pm-secure__icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--pm-green-fill);
    color: var(--pm-green-bright);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-secure__icon svg {
    width: 28px;
    height: 28px;
}

.pm-secure__text strong {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--pm-ink);
}

.pm-secure__text span {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--pm-muted);
}

.pm-trust {
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin: 16px 0 0;
    padding: 0 2px;
}

.pm-trust li {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--pm-body);
    white-space: nowrap;
}

.pm-trust li + li {
    padding-left: 10px;
    border-left: 1px solid var(--pm-line);
}

.pm-trust svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--pm-muted);
}

/* --- footer --- */
.retail-app #plan_model .modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 32px 22px;
    border-top: 1px solid var(--pm-line);
    text-align: left;
}

/* Bootstrap 3's clearfix pseudo-elements become flex items and throw off space-between */
.retail-app #plan_model .modal-footer::before,
.retail-app #plan_model .modal-footer::after {
    content: none;
}

.pm-help {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.pm-help:hover,
.pm-help:focus {
    color: inherit;
    text-decoration: none;
}

.pm-help__icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--pm-green-tint);
    color: var(--pm-green-bright);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-help__icon svg {
    width: 26px;
    height: 26px;
}

.pm-help__text strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--pm-ink);
}

.pm-help__text span {
    display: block;
    font-size: 14.5px;
    color: var(--pm-muted);
}

.retail-app #plan_model #proce_user_payment_form {
    margin: 0;
}

.pm-actions {
    display: flex;
    gap: 14px;
}

.pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pm-btn svg {
    width: 22px;
    height: 22px;
}

.pm-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.pm-btn--apply {
    height: 52px;
    padding: 0 26px;
    border-radius: 12px;
    background: var(--pm-green);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.pm-btn--apply:hover {
    background: var(--pm-green-dark);
}

.pm-btn--ghost {
    height: 56px;
    padding: 0 38px;
    border: 1.5px solid var(--pm-line);
    border-radius: 999px;
    background: #fff;
    color: var(--pm-ink);
    font-size: 17px;
    font-weight: 700;
}

.pm-btn--ghost:hover {
    border-color: #cbd5e1;
    background: var(--pm-surface);
}

.pm-btn--primary {
    height: 56px;
    padding: 0 34px;
    border-radius: 999px;
    background: linear-gradient(180deg, #178a3f 0%, #146c33 100%);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(21, 128, 61, 0.28);
}

.pm-btn--primary:hover {
    background: linear-gradient(180deg, #157a38 0%, #115c2b 100%);
}

.pm-btn:focus-visible {
    outline: none;
    box-shadow: var(--pm-focus);
}

/* --- stacked (tablet and phone) --- */
@media (max-width: 991.98px) {
    .pm-only-compact {
        display: block;
        margin: 22px 0 10px;
    }

    .pm-detail {
        margin-top: 0;
    }

    .pm-side {
        padding: 0;
        border: none;
        background: none;
    }

    .retail-app #plan_model .pm-side__title,
    .retail-app #plan_model .pm-plancard,
    .retail-app #plan_model .pm-secure,
    .retail-app #plan_model .pm-trust {
        display: none !important;
    }

}

/* --- phone --- */
@media (max-width: 767.98px) {
    .retail-app #plan_model .modal-dialog {
        margin: 10px auto;
        padding: 0 10px;
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
    }

    .retail-app #plan_model .modal-content {
        border-radius: 22px;
    }

    .retail-app #plan_model .modal-header {
        gap: 12px;
        padding: 18px 18px 4px;
    }

    .pm-crown {
        width: 48px;
        height: 48px;
    }

    .pm-crown svg {
        width: 25px;
        height: 25px;
    }

    .retail-app #plan_model .modal-header .modal-title {
        font-size: 17px;
        letter-spacing: -0.01em;
    }

    .pm-subtitle {
        font-size: 13.5px;
    }

    .retail-app #plan_model .modal-header .close {
        width: 34px;
        height: 34px;
        font-size: 22px;
    }

    .retail-app #plan_model .modal-body {
        padding: 14px 18px 18px;
    }

    .pm-label {
        font-size: 14.5px;
    }

    .pm-hint {
        font-size: 12.5px;
    }

    .pm-trigger {
        gap: 12px;
        padding: 12px 14px;
        border-radius: 14px;
    }

    .pm-trigger__icon {
        width: 42px;
        height: 42px;
    }

    .pm-trigger__icon svg {
        width: 22px;
        height: 22px;
    }

    .pm-trigger__title {
        font-size: 16px;
        gap: 4px 8px;
    }

    .pm-trigger__sub {
        font-size: 13px;
    }

    .pm-badge {
        padding: 2px 8px;
        font-size: 11px;
    }

    .pm-section {
        font-size: 15.5px;
    }

    .pm-hero {
        padding: 18px;
        border-radius: 16px;
    }

    .pm-hero__top {
        gap: 12px;
    }

    .pm-hero__title {
        font-size: 22px;
    }

    .pm-hero__tagline {
        margin-top: 6px;
        font-size: 15px;
    }

    .pm-hero__desc {
        margin-top: 10px;
        font-size: 12.5px;
        line-height: 1.45;
        max-height: 34vh;
    }

    .pm-hero__art {
        top: 12px;
        right: 12px;
        width: 64px;
        height: 64px;
    }

    .pm-hero__title,
    .pm-hero__tagline {
        padding-right: 72px;
    }

    .pm-hero__art svg {
        width: 40px;
        height: 40px;
    }

    .pm-spark--a {
        top: 8px;
        left: 6px;
    }

    .pm-spark--b {
        top: 2px;
        right: 8px;
        width: 11px;
        height: 11px;
    }

    .pm-hide-phone {
        display: none;
    }

    .pm-only-phone {
        display: inline;
    }

    .pm-coupon__field,
    .pm-btn--apply {
        height: 46px;
    }

    .pm-btn--apply {
        padding: 0 20px;
        font-size: 15px;
    }

    .pm-coupon__field input {
        font-size: 15px;
    }

    .pm-coupon__ok {
        font-size: 13px;
    }

    .pm-breakdown {
        margin-top: 14px;
    }

    .pm-breakdown__row {
        font-size: 14.5px;
        padding: 4px 6px;
    }

    .pm-breakdown__row.is-total {
        font-size: 16px;
        padding: 12px;
    }

    .retail-app #plan_model .modal-footer {
        padding: 8px 18px calc(16px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--pm-line);
    }

    .retail-app #plan_model .pm-help,
    .retail-app #plan_model .pm-btn--ghost {
        display: none;
    }

    .retail-app #plan_model #proce_user_payment_form,
    .pm-actions {
        width: 100%;
    }

    .pm-btn--primary {
        flex: 1;
        height: 54px;
        font-size: 16px;
    }
}

/* --- phone, compact: picker and description trimmed so the coupon, plan amount and payable
   amount fit on one screen with the pinned Proceed button --- */
@media (max-width: 767.98px) {
    .retail-app #plan_model .modal-header {
        padding: 12px 16px 0;
    }

    .pm-crown {
        width: 38px;
        height: 38px;
    }

    .pm-crown svg {
        width: 20px;
        height: 20px;
    }

    .retail-app #plan_model .modal-header .modal-title {
        font-size: 16px;
    }

    .pm-subtitle {
        display: none;
    }

    .retail-app #plan_model .modal-body {
        padding: 10px 16px 12px;
    }

    .pm-grid {
        gap: 12px;
    }

    .pm-picker__head {
        margin-bottom: 6px;
    }

    .pm-trigger {
        gap: 10px;
        padding: 8px 12px;
        border-radius: 12px;
    }

    .pm-trigger__icon {
        width: 32px;
        height: 32px;
    }

    .pm-trigger__icon svg {
        width: 17px;
        height: 17px;
    }

    .pm-trigger__title {
        font-size: 14.5px;
    }

    .pm-trigger__sub {
        display: none;
    }

    .pm-only-compact {
        margin: 12px 0 6px;
    }

    .pm-section {
        margin-bottom: 8px;
        font-size: 14.5px;
    }

    .pm-hero {
        padding: 12px 14px;
    }

    .pm-hero__title {
        font-size: 16px;
        padding-right: 60px;
    }

    .pm-hero__tagline {
        margin-top: 2px;
        font-size: 13px;
        padding-right: 60px;
    }

    .pm-hero__art {
        top: 8px;
        right: 8px;
        width: 48px;
        height: 48px;
    }

    .pm-hero__art svg {
        width: 28px;
        height: 28px;
    }

    .pm-hero__desc {
        margin-top: 6px;
        font-size: 12px;
        max-height: 17vh;
    }

    .pm-coupon__field,
    .pm-btn--apply {
        height: 42px;
    }

    .pm-breakdown {
        margin-top: 8px;
    }

    .pm-breakdown__row {
        padding: 2px 6px;
    }

    .pm-breakdown__row.is-total {
        padding: 8px 12px;
    }

    .retail-app #plan_model .modal-footer {
        padding: 6px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .pm-btn--primary {
        height: 48px;
    }
}

/* ---------- Bootstrap modals reskinned to match the card system ---------- */

/* The bundled theme CSS (style.bundle.css) ships its own
   ".modal-open { overflow: auto !important; }", which overrides Bootstrap's
   own scroll lock and leaves body scrollable while a modal is open. With a
   tall modal (e.g. the plan picker) on a short viewport, this makes mouse-
   wheel input ambiguous between two valid scroll targets — in practice it
   scrolls the page behind the modal instead of the modal itself, so content
   below the fold (the coupon field, the footer) is unreachable. Element+class
   beats their bare class selector regardless of load order, so this wins
   without needing to touch the vendor file. */
body.modal-open {
    overflow: hidden !important;
}

.retail-app .modal-content {
    border: none;
    border-radius: var(--rt-radius-lg);
    box-shadow: var(--rt-shadow-raised);
    overflow: hidden;
}

.retail-app .modal-header {
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--rt-border);
}

.retail-app .modal-header .modal-title,
.retail-app .modal-header h3.modal-title,
.retail-app .modal-header h5.modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--rt-ink);
    margin: 0;
}

.retail-app .modal-header .close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--rt-bg);
    color: var(--rt-muted);
    opacity: 1;
    font-size: 18px;
    text-shadow: none;
}

.retail-app .modal-header .close:hover {
    background: var(--rt-primary-light);
    color: var(--rt-primary-dark);
}

.retail-app .modal-body {
    padding: 20px;
}

.retail-app .modal-body label,
.retail-app .modal-body .form-control-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rt-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.retail-app .modal-body .form-control,
.retail-app .modal-body select.form-control {
    border-radius: var(--rt-radius-sm);
    border: 1px solid var(--rt-border);
    padding: 10px 12px;
    height: auto;
    font-size: 14px;
}

.retail-app .modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--rt-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.retail-app .modal-footer .row {
    width: 100%;
    margin: 0;
    align-items: center;
}

.retail-app .modal .btn {
    border-radius: 999px;
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 18px;
    border: none;
}

.retail-app .modal .btn-success {
    background: var(--rt-primary);
    box-shadow: 0 6px 16px rgba(58, 164, 37, 0.28);
}

.retail-app .modal .btn-success:hover {
    background: var(--rt-primary-dark);
}

.retail-app .modal .btn-secondary,
.retail-app .modal .btn-default {
    background: var(--rt-bg);
    color: var(--rt-ink);
    border: 1px solid var(--rt-border);
}

/* ---------- Alert dialogs reskinned to match brand ----------
   The site actually renders alerts with SweetAlert2 (swal2-*) at runtime,
   even though the legacy SweetAlert 1.x assets are also loaded — style both
   so whichever one fires looks consistent. */
body.retail-app-active .swal2-popup {
    border-radius: 22px;
    padding: 28px 22px 30px;
    font-family: inherit;
}

body.retail-app-active .swal2-title {
    font-size: 18px;
    font-weight: 800;
    color: #1b2430;
    padding: 0;
    margin-top: 8px;
}

body.retail-app-active .swal2-html-container,
body.retail-app-active .swal2-content {
    font-size: 13.5px;
    color: #6b7686;
}

body.retail-app-active .swal2-actions {
    gap: 10px;
    margin-top: 22px;
}

body.retail-app-active .swal2-confirm {
    background-color: #3aa425 !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    padding: 11px 22px !important;
    box-shadow: none !important;
}

body.retail-app-active .swal2-cancel {
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    padding: 11px 22px !important;
    background-color: #eef1f5 !important;
    color: #1b2430 !important;
    box-shadow: none !important;
}

body.retail-app-active .swal2-confirm:focus,
body.retail-app-active .swal2-cancel:focus {
    box-shadow: 0 0 0 3px rgba(58, 164, 37, 0.25) !important;
}

body.retail-app-active .swal2-icon.swal2-warning {
    border-color: #ff9800;
    color: #ff9800;
}

body.retail-app-active .swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: #3aa425;
}

body.retail-app-active .swal2-icon.swal2-success .swal2-success-ring {
    border-color: #ebf6e9;
}

/* Legacy SweetAlert 1.x fallback, kept in case it ever fires instead */
body.retail-app-active .sweet-alert {
    border-radius: 22px;
    padding: 30px 24px;
}

body.retail-app-active .sweet-alert h2 {
    font-size: 18px;
    margin-top: 12px;
}

body.retail-app-active .sweet-alert p {
    font-size: 13.5px;
}

body.retail-app-active .sweet-alert button.confirm {
    background-color: #3aa425 !important;
    border-radius: 999px;
    font-weight: 700;
    padding: 10px 22px;
    box-shadow: none;
}

body.retail-app-active .sweet-alert button.cancel {
    border-radius: 999px;
    font-weight: 700;
    padding: 10px 22px;
}

body.retail-app-active .sweet-alert .sa-icon.sa-warning {
    border-color: #ff9800;
}

body.retail-app-active .sweet-alert .sa-icon.sa-warning .sa-body,
body.retail-app-active .sweet-alert .sa-icon.sa-warning .sa-dot {
    background-color: #ff9800;
}

/* ---------- Profile header (avatar + name summary card) ---------- */
.retail-profile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--rt-card);
    border-radius: var(--rt-radius-lg);
    box-shadow: var(--rt-shadow);
    border: 1px solid var(--rt-border);
    padding: 18px;
    margin-bottom: 16px;
}

.retail-profile-header__avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rt-primary) 0%, var(--rt-primary-dark) 100%);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(58, 164, 37, 0.28);
}

.retail-profile-header__body {
    min-width: 0;
}

.retail-profile-header__name {
    font-size: 17px;
    font-weight: 800;
    color: var(--rt-ink);
    margin: 0 0 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.retail-profile-header__meta {
    font-size: 13px;
    color: var(--rt-muted);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Segmented radio toggle (e.g. Gender) ---------- */
.retail-segmented {
    display: flex;
    background: var(--rt-bg);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}

.retail-segmented input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.retail-segmented label {
    flex: 1;
    text-align: center;
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rt-muted);
    margin: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: none;
    letter-spacing: normal;
}

.retail-segmented input[type="radio"]:checked + label {
    background: var(--rt-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(58, 164, 37, 0.3);
}

.retail-segmented input[type="radio"]:disabled + label {
    cursor: default;
}

/* ---------- Reusable spaced OTP code field (modal-friendly) ---------- */
.retail-otp-field input {
    width: 100%;
    text-align: center;
    letter-spacing: 10px;
    font-size: 22px;
    font-weight: 700;
    border-radius: var(--rt-radius-sm);
    border: 1px solid var(--rt-border);
    padding: 12px 14px;
}

.retail-otp-field input:focus {
    outline: none;
    border-color: var(--rt-primary);
    box-shadow: 0 0 0 3px var(--rt-primary-light);
}

.retail-otp-hint {
    font-size: 13px;
    color: var(--rt-muted);
    margin: 4px 0 18px;
}

/* ---------- Auth-shell side decoration (fills the wide margins beside the
   card on desktop; hidden on narrower screens where there's no room). ---------- */
.retail-auth-decor {
    display: none;
    position: fixed;
    top: 50%;
    width: 260px;
    height: 360px;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
}

.retail-auth-decor--left {
    left: clamp(16px, 6vw, 90px);
}

.retail-auth-decor--right {
    right: clamp(16px, 6vw, 90px);
}

@media (min-width: 1100px) {
    .retail-auth-shell {
        position: relative;
    }

    .retail-auth-decor {
        display: block;
    }
}

.retail-auth-decor__blob {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 42%, var(--rt-primary-light) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
}

.retail-auth-decor__chip {
    position: absolute;
    width: 74px;
    height: 74px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 14px 30px rgba(23, 43, 33, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.retail-auth-decor__chip svg {
    width: 32px;
    height: 32px;
    color: var(--rt-primary);
    flex-shrink: 0;
}

.retail-auth-decor__chip--accent svg {
    color: var(--rt-accent);
}

.retail-auth-decor__dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rt-accent);
}

.retail-auth-decor__dot--sm {
    width: 6px;
    height: 6px;
    background: var(--rt-primary);
}

.retail-auth-decor__ring {
    position: absolute;
    border-radius: 50%;
    border: 2px dashed var(--rt-border);
}

/* ---------- Dashboard hero (greeting + decorative image) ---------- */
.retail-dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 4px 0 14px;
}

.retail-dashboard-hero__eyebrow {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--rt-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 2px;
}

.retail-dashboard-hero h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--rt-ink);
    margin: 0 0 3px;
}

.retail-dashboard-hero p {
    font-size: 13px;
    color: var(--rt-muted);
    margin: 0;
}

.retail-dashboard-hero__art {
    display: none;
    flex-shrink: 0;
    text-align: right;
}

.retail-dashboard-hero__art img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: 68% 62%;
    border-radius: 50%;
    box-shadow: var(--rt-shadow-raised);
}

.retail-dashboard-hero__art p {
    font-size: 13px;
    font-weight: 700;
    color: var(--rt-ink);
    margin: 10px 0 0;
    max-width: 180px;
}

.retail-dashboard-hero__art span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--rt-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

@media (min-width: 768px) {
    .retail-dashboard-hero__art {
        display: block;
    }
}

/* ---------- Membership card avatar + iconed stat cells ---------- */
.retail-stat-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.retail-stat-card__crown {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}

.retail-stat-card__crown svg {
    width: 20px;
    height: 20px;
    color: #ffe082;
}

.retail-stat-card__cell {
    position: relative;
}

.retail-stat-card__cell-icon {
    display: none;
}

@media (min-width: 640px) {
    .retail-stat-card__grid {
        gap: 10px;
    }

    .retail-stat-card__cell {
        display: flex;
        align-items: center;
        gap: 10px;
        text-align: left;
        background: rgba(255, 255, 255, 0.12);
        border-radius: var(--rt-radius-sm);
        padding: 10px 12px;
    }

    .retail-stat-card__cell-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.18);
    }

    .retail-stat-card__cell-icon svg {
        width: 15px;
        height: 15px;
        color: #fff;
    }
}

/* ---------- Quick Actions / Health Journey grids ---------- */
.retail-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 480px) {
    .retail-quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

.retail-quick-action {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    background: var(--rt-card);
    border-radius: var(--rt-radius-md);
    box-shadow: var(--rt-shadow);
    padding: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.retail-quick-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--rt-shadow-raised);
}

.retail-quick-action__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--rt-primary-light);
    color: var(--rt-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.retail-quick-action__icon svg {
    width: 18px;
    height: 18px;
}

.retail-quick-action__body {
    flex: 1;
    min-width: 0;
}

.retail-quick-action__title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rt-ink);
    margin: 0;
}

.retail-quick-action__subtitle {
    font-size: 11.5px;
    color: var(--rt-muted);
    margin: 1px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.retail-quick-action__chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--rt-muted);
}

/* ---------- Utility ---------- */
.retail-mt-0 { margin-top: 0 !important; }
.retail-hide-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- Searchable Select2 styling in Retail App ---------- */
.retail-app .select2-container {
    width: 100% !important;
}

.retail-app .select2-container .select2-selection--single {
    height: 42px;
    border-radius: var(--rt-radius-sm, 10px);
    border: 1px solid var(--rt-border, #e7ebf0);
    padding: 0;
    background-color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    box-shadow: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    cursor: pointer;
}

.retail-app .select2-container--default.select2-container--open .select2-selection--single,
.retail-app .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--rt-primary, #3aa425) !important;
    box-shadow: 0 0 0 3px var(--rt-primary-light, #ebf6e9) !important;
    outline: none;
}

.retail-app .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--rt-ink, #1b2430);
    font-size: 14px;
    line-height: 40px;
    padding-left: 12px;
    padding-right: 58px !important;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.retail-app .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--rt-muted, #6b7686);
}

/* Clear icon button — circular button on the right, preceding the arrow */
.retail-app .select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    right: 32px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    border-radius: 50% !important;
    background-color: #e2e8f0 !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 700 !important;
    text-align: center !important;
    cursor: pointer !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.retail-app .select2-container--default .select2-selection--single .select2-selection__clear:before,
.retail-app .select2-container--default .select2-selection--single .select2-selection__clear:after {
    display: none !important;
    content: "" !important;
}

.retail-app .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    background-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Dropdown arrow — centered SVG chevron on the right */
.retail-app .select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    margin: 0 !important;
}

.retail-app .select2-container--default .select2-selection--single .select2-selection__arrow:before {
    display: none !important;
    content: "" !important;
}

.retail-app .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: block !important;
    position: static !important;
    border: none !important;
    margin: 0 !important;
    width: 14px !important;
    height: 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7686' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    transition: transform .15s ease-in-out;
}

.retail-app .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(180deg);
}

.retail-app .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--rt-bg, #f4f6f9);
    opacity: 0.75;
    cursor: not-allowed;
    border-color: var(--rt-border, #e7ebf0);
}

.retail-app .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
    display: none !important;
}

.select2-dropdown {
    border: 1px solid #e7ebf0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(23, 43, 33, 0.12);
    z-index: 9999;
}

.select2-search--dropdown {
    padding: 8px 10px;
}

.select2-search--dropdown .select2-search__field {
    border-radius: 8px;
    border: 1px solid #e7ebf0;
    padding: 8px 12px;
    font-size: 13.5px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #3aa425;
    box-shadow: 0 0 0 2px #ebf6e9;
}

.select2-results__option {
    padding: 8px 14px;
    font-size: 13.5px;
    color: #1b2430;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #3aa425 !important;
    color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #ebf6e9;
    color: #2e831e;
    font-weight: 600;
}