/* Branch 87 - the lens wizard's own stylesheet.
   It used to live inline in SelectLens.cshtml, which made that view 76 KB: the view was
   recompiled at runtime after every restart and every edit, and the whole stylesheet was
   re-sent with the wizard markup on every open. As a file it is compiled never and cached
   by the browser once. Loaded by PublicInfo.cshtml on the product page and by EditLens.cshtml
   in the cart - the two places the wizard is opened from. */

    /* Branch 87 — step bar. The theme (noptech.css) also styles .wizardProcess, with
       !important throughout, so partial overrides here produced a mix of two layouts and
       knocked the labels off-centre. The bar is therefore restated in full under #tabs
       (ID beats the theme's class selectors at equal importance), so its geometry is
       deterministic: each step is ONE flex column, which means the dot and its label are
       centred by the same mechanism and always line up — no absolute offsets, no
       transforms, no fixed label widths. Verified: 0px offset on all four steps. */
    #tabs.wizardProcess {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 6px 0 2px !important;
        height: auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        list-style: none !important;
        text-align: left !important;
        counter-reset: rxstep !important;
    }

        #tabs.wizardProcess::before,
        #tabs.wizardProcess::after {
            display: none !important;
        }

        /* one step = a column: dot on top, label centred underneath */
        #tabs.wizardProcess li {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            flex: 1 1 0 !important;
            width: auto !important;
            height: auto !important;
            font-size: 16px !important; /* em base for the dot and the connector */
            background: transparent !important;
            border-radius: 0 !important;
            position: relative !important;
            margin: 0 !important;
            z-index: 1 !important;
        }

        #tabs.wizardProcess .marker-number {
            width: 30px !important;
            height: 30px !important;
            font-size: 0 !important; /* hides the   placeholder; the number lives in ::before */
            border-radius: 50% !important;
            background: #fff !important;
            border: 2px solid #d1d5db !important;
            color: #9aa0aa !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-shrink: 0 !important;
            line-height: 1 !important;
            position: relative !important;
            box-sizing: border-box !important;
            z-index: 2 !important;
        }

        /* auto-number the steps 1..N */
        #tabs.wizardProcess .marker-number::before {
            counter-increment: rxstep !important;
            content: counter(rxstep) !important;
            font-family: 'Optician Sans', sans-serif !important;
            font-size: 13px !important;
            font-weight: normal !important;
        }

        /* current step: solid dark circle, white number */
        #tabs.wizardProcess li.active .marker-number,
        #tabs.wizardProcess li.current .marker-number {
            background: #211d3e !important;
            border-color: #211d3e !important;
            color: #fff !important;
        }

        /* completed steps show a check instead of the number */
        #tabs.wizardProcess li.active .marker-number::before {
            content: "\2713" !important;
        }

        /* connector: each step draws the segment across to the next dot */
        #tabs.wizardProcess li:not(:last-child)::after {
            content: '' !important;
            display: block !important;
            position: absolute !important;
            top: 0.75em !important;
            margin-top: -1px !important;
            left: 50% !important;
            width: 100% !important;
            height: 2px !important;
            background: #e5e7eb !important;
            border: none !important;
            z-index: 0 !important;
        }

        #tabs.wizardProcess li.active:not(:last-child)::after {
            background: #211d3e !important;
        }

        /* label: fills its own step and centres inside it; wraps rather than being
           ellipsised, so long words such as "PRESCRIPTION" stay readable */
        #tabs.wizardProcess span.marker-text {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            transform: none !important;
            display: block !important;
            width: 100% !important;
            margin-top: 8px !important;
            padding: 0 2px !important;
            box-sizing: border-box !important;
            text-align: center !important;
            font-size: 12px !important;
            line-height: 1.25 !important;
            letter-spacing: 0.02em !important;
            color: #7d7d7d !important;
            white-space: normal !important;
            overflow: visible !important;
            text-overflow: clip !important;
            z-index: 2 !important;
        }

            /* The label box is centred by the rule above, but the <a> inside it is styled by
               "#tabs a" (float:left + padding). A floated element ignores the parent's
               text-align:center, so the text ended up at the left edge while the box stayed
               centred. Force the anchor to be a plain full-width block that centres its text. */
            #tabs.wizardProcess span.marker-text a {
                display: block !important;
                float: none !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                text-align: center !important;
                color: inherit !important;
                font-size: inherit !important;
                letter-spacing: inherit !important;
                text-decoration: none !important;
            }

        /* current + completed steps: dark, bold label; pending stays grey */
        #tabs.wizardProcess li.current span.marker-text,
        #tabs.wizardProcess li.active span.marker-text {
            color: #211d3e !important;
            font-weight: 700 !important;
        }

    .finalstep:after {
        border: none !important;
    }

    /* Branch 87 — mobile-only step heading shown below the step bar (mock-up layout).
       The header title is cramped on narrow screens, where the step labels are hidden too,
       so the step name is carried by this heading instead. Purely additive: it does not
       touch the step bar above. */
    .rx-step-title-below {
        display: none;
    }

    @media screen and (max-width: 767px) {
        .selectLens .selectLens-header #stepTitle {
            display: none;
        }

        .selectLens .rx-step-title-below {
            display: block;
            font-family: 'Stolzl-Bold', 'Nunito Sans', Arial, sans-serif;
            text-transform: none;
            text-align: left;
            font-size: 22px;
            font-weight: 700;
            line-height: 1.3;
            color: #211d3e;
            margin: 18px 0 10px; /* clear the dots above, sit close to the content below */
        }

        /* Step 2 — the prescription table is 5 columns wide (eye + SPH/CYL/AXIS/ADD) and
           overflowed the screen on phones, cutting off ADD. Shrink it to fit, and keep an
           overflow-x safety net so nothing can ever be clipped on very narrow devices. */
        #prescriptionEntryTab .rx-panel {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Natural column sizing (NOT table-layout:fixed): fixed layout sizes the columns
           from the header row, and the headings then overflowed the width they were given.
           Letting the browser size each column to its content keeps headings and inputs in
           the same grid; the compact type below is what makes the five columns fit. */
        #prescriptionEntryTab .rx-table th,
        #prescriptionEntryTab .rx-table td {
            padding: 5px 2px;
        }

        #prescriptionEntryTab .rx-table thead th {
            font-size: 9px;
            letter-spacing: 0;
        }

        #prescriptionEntryTab .rx-table th.rx-eye {
            font-size: 9px;
            letter-spacing: 0;
            line-height: 1.2;
        }

        #prescriptionEntryTab .rx-table select {
            min-width: 0;
            width: 100%;
            height: 32px;
            padding: 0 1px;
            font-size: 11px;
            text-align: center;
        }

        /* the info tooltips rely on hover, which phones do not have — drop them so the
           column headings keep their width */
        #prescriptionEntryTab .rx-table .rx-info {
            display: none;
        }

        /* Step 4 — tighter rhythm and a stacked total, so the label does not break
           awkwardly next to the amount on a narrow screen. */
        #prescriptionInfoTab .rx-summary-intro {
            font-size: 14px;
            margin: 0 0 14px;
        }

        #content #prescriptionInfoTab .rx-summary > li.rx-summary-row {
            padding: 15px 2px;
            column-gap: 12px;
        }

        #prescriptionInfoTab .rx-summary-value {
            font-size: 14px;
        }

        #prescriptionInfoTab .rx-summary-total {
            display: block;
            padding: 16px;
            margin-top: 18px;
        }

        #prescriptionInfoTab .rx-summary-total-label {
            display: block;
            font-size: 12px;
            margin-bottom: 6px;
        }

        #prescriptionInfoTab .rx-summary-total-value {
            display: block;
            font-size: 24px;
        }
    }

    /* Branch 87 — Step 3: lens packages above the standard choices. Rendered by
       TorgaOptical.Core through a widget zone; only the group matching the step-1 choice
       is shown, and selecting one ticks the underlying options below. */
    #lensPackages {
        margin-bottom: 8px;
    }

    #lensPackages .lens-package {
        position: relative;
        border: 1px solid #e1e5e6;
        border-radius: 6px;
        padding: 16px;
        margin-bottom: 12px;
        cursor: pointer;
        transition: border-color .15s ease;
    }

        #lensPackages .lens-package:hover {
            border-color: #b9c2ca;
        }

        #lensPackages .lens-package.selected {
            border-color: #211d3e;
            border-width: 2px;
            padding: 15px;
        }

    #lensPackages .lens-package-badge {
        position: absolute;
        top: -10px;
        left: 14px;
        background: #211d3e;
        color: #fff;
        font-size: 11px;
        letter-spacing: .04em;
        text-transform: uppercase;
        padding: 3px 10px;
        border-radius: 10px;
    }

    #lensPackages .lens-package-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    #lensPackages .lens-package-name {
        font-family: 'Stolzl-Bold', 'Stolzl', Arial, sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: #211d3e;
    }

    #lensPackages .lens-package-price {
        font-weight: 700;
        color: #211d3e;
        white-space: nowrap;
    }

    #lensPackages .lens-package-desc {
        font-family: 'Stolzl', Arial, sans-serif;
        font-size: 14px;
        color: #6b7280;
        margin-top: 4px;
    }

    #lensPackages .lens-package-features {
        list-style: none;
        margin: 8px 0 0;
        padding: 0;
    }

        /* tight rows, as in the reference — the list reads as one block, not spaced entries.
           !important because the wizard's own "#content li" rule sets a 10px padding. */
        #content #lensPackages .lens-package-features li {
            display: flex !important;
            align-items: flex-start !important;
            gap: 8px !important;
            font-size: 14px !important;
            line-height: 1.35 !important;
            color: #414b56 !important;
            padding: 1px 0 !important;
            border: 0 !important;
            margin: 0 !important;
        }

    #lensPackages .lens-package-feature-text {
        flex: 1 1 auto;
    }

    /* what an included option adds, shown only when it is not free */
    #lensPackages .lens-package-feature-price {
        flex: 0 0 auto;
        font-family: 'Stolzl-Bold', 'Stolzl', Arial, sans-serif;
        font-weight: 700;
        color: #211d3e;
        white-space: nowrap;
    }

    #lensPackages .lens-package-tick {
        color: #0E57A1;
        font-weight: 700;
        line-height: 1.4;
    }

    /* The choice offered inside a package (an attribute with several mapped values).
       Collapsed until the package is picked — otherwise the cards are tall and hard to
       compare. The tick list above stays visible, since that is what they are compared on. */
    #lensPackages .lens-package-options {
        display: none;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid #e8ebee;
    }

    #lensPackages .lens-package.selected .lens-package-options {
        display: block;
    }

    #lensPackages .lens-package-options-title {
        display: block;
        font-size: 11px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #9aa1ab;
        margin-bottom: 8px;
    }

    /* One choice inside a package. The wizard hides every radio in #content, so the selection
       is drawn on the name instead — same circle-and-tick as the rest of the flow. */
    #lensPackages .lens-package-option {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name  price"
            "desc  desc";
        align-items: center;
        column-gap: 10px;
        row-gap: 4px;
        margin: 0 0 8px;
        padding: 10px 12px;
        border: 1px solid #e1e5e6;
        border-radius: 6px;
        font-weight: 400;
        cursor: pointer;
    }

        #lensPackages .lens-package-option input[type="radio"] {
            display: none;
        }

    #lensPackages .lens-package-option-name {
        grid-area: name;
        position: relative;
        padding-left: 28px;
        font-family: 'Stolzl-Bold', 'Stolzl', Arial, sans-serif;
        font-weight: 600;
        color: #211d3e;
    }

        #lensPackages .lens-package-option-name::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            border: 2px solid #ddd;
            border-radius: 50%;
            background: #fff;
            transition: all .15s ease;
        }

    #lensPackages .lens-package-option input[type="radio"]:checked + .lens-package-option-name::before {
        border-color: #211d3e;
        background: #211d3e;
    }

    #lensPackages .lens-package-option input[type="radio"]:checked + .lens-package-option-name::after {
        content: "";
        position: absolute;
        left: 6px;
        top: 50%;
        width: 5px;
        height: 9px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: translateY(-60%) rotate(45deg);
    }

    #lensPackages .lens-package-option .lens-package-option-desc {
        grid-area: desc;
        padding-left: 28px;
        font-size: 13px;
        color: #6b7280;
        line-height: 1.4;
    }

    #lensPackages .lens-package-option-price {
        grid-area: price;
        font-family: 'Stolzl-Bold', 'Stolzl', Arial, sans-serif;
        font-weight: 700;
        color: #211d3e;
        white-space: nowrap;
    }

    /* Branch 87 — Step 4 (review). One row per choice: label, value, and an Edit that jumps
       back to that step. The frame row has no Edit by design (client Q14). */
    /* The theme sets "#prescriptionInfoTab { padding: 50px 0 !important }" — spacing meant for
       the old centred info panel. The step now holds the review summary, which sits directly
       under the step bar, so that padding is what pushed the text far down. */
    #content #prescriptionInfoTab {
        padding: 2px 0 8px !important;
        margin-top: 0;
    }

    #prescriptionInfoTab .rx-summary-intro {
        font-family: 'Stolzl', Arial, sans-serif;
        color: #6b7280;
        font-size: 15px;
        line-height: 1.5;
        margin: 0 0 20px;
    }

    #prescriptionInfoTab .rx-summary {
        list-style: none;
        margin: 0;
        padding: 0;
        border-top: 1px solid #e8ebee;
    }

    /* One row = label above the value on the left, price or Edit on the right.
       The right column is a fixed track so the values wrap against a straight edge
       instead of running up to the Edit link. */
    #content #prescriptionInfoTab .rx-summary > li.rx-summary-row {
        display: grid;
        grid-template-columns: 1fr 68px;
        grid-template-areas:
            "label side"
            "value side";
        align-items: center;
        column-gap: 16px;
        row-gap: 5px;
        border: 0;
        border-bottom: 1px solid #e8ebee;
        border-radius: 0;
        margin: 0;
        padding: 18px 2px;
    }

    #prescriptionInfoTab .rx-summary-label {
        grid-area: label;
        font-family: 'Stolzl', Arial, sans-serif;
        font-size: 11px;
        font-weight: 400;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #9aa1ab;
        line-height: 1;
    }

    #prescriptionInfoTab .rx-summary-value {
        grid-area: value;
        font-family: 'Stolzl-Bold', 'Stolzl', Arial, sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: #211d3e;
        line-height: 1.45;
    }

    /* right-hand column: the frame price, or the Edit link on the other rows */
    #prescriptionInfoTab .rx-summary-price {
        grid-area: side;
        align-self: center;
        justify-self: end;
        font-family: 'Stolzl-Bold', 'Stolzl', Arial, sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: #211d3e;
        white-space: nowrap;
    }

    #content #prescriptionInfoTab .rx-summary-edit {
        grid-area: side;
        align-self: center;
        justify-self: end;
        background: none;
        border: 0;
        margin: 0;
        padding: 6px 0;
        width: auto;
        font-family: 'Stolzl', Arial, sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #0E57A1;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
    }

        #content #prescriptionInfoTab .rx-summary-edit:hover {
            color: #211d3e;
            text-decoration: underline;
        }

    #prescriptionInfoTab .rx-summary-total {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        margin-top: 22px;
        padding: 18px 20px;
        border-radius: 8px;
        background: #f5f7f9;
    }

    #prescriptionInfoTab .rx-summary-total-label {
        font-family: 'Stolzl', Arial, sans-serif;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #5b636e;
        line-height: 1.3;
    }

    #prescriptionInfoTab .rx-summary-total-value {
        font-family: 'Stolzl-Bold', 'Stolzl', Arial, sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: #211d3e;
        white-space: nowrap;
        line-height: 1.2;
    }

    .option-media {
        display: none;
        margin-top: 10px;
    }

        .option-media img {
            max-width: 140px;
            border-radius: 8px;
            display: block;
        }

    .option-list li.selected .option-media {
        display: block;
    }

    /* Q2 (branch 87): show the picture on every use-type option, not only the
       selected one. Scoped to step 1 so the other steps keep their behaviour. */
    #visionTypeTab .option-media {
        display: block;
    }

    /* Step-1 option card layout (branch 87), to match the mock-up: icon on the LEFT,
       title and description stacked to its right, selection indicator in the top-right
       corner. Previously the icon rendered under the text (it is last in the DOM) and
       the indicator sat to the left of the title.
       #content is included so these win over the generic radio/label rules. */
    #content #visionTypeTab .option-list li {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "media title"
            "media desc";
        align-items: center;
        column-gap: 14px;
        padding-right: 44px; /* keep text clear of the indicator */
    }

    #content #visionTypeTab .option-list li .option-media {
        grid-area: media;
        margin-top: 0;
        align-self: center;
    }

        #content #visionTypeTab .option-list li .option-media img {
            max-width: 72px; /* icon size — the one value to tune */
            max-height: 72px;
            object-fit: contain;
        }

    /* label carries the indicator via ::before/::after — make it static so those
       position against the card, and drop the padding that reserved space on the left */
    #content #visionTypeTab .option-list li > label {
        grid-area: title;
        position: static;
        padding-left: 0;
        margin-bottom: 2px;
    }

    #content #visionTypeTab .option-list li .lesDescription {
        grid-area: desc;
    }

    #content #visionTypeTab .option-list li > label::before {
        left: auto;
        right: 12px;
        top: 12px;
        transform: none;
    }

    /* tick instead of the dot, matching the mock-up */
    #content #visionTypeTab .option-list li input[type="radio"]:checked + label::after {
        left: auto;
        right: 19px; /* centred inside the 20px circle at right/top 12px */
        top: 16px;
        width: 5px;
        height: 10px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        border-radius: 0;
        background: transparent;
        transform: rotate(45deg);
    }

    /* Branch 87 — Step 2 (prescription entry). Self-contained layout matching the mock-up:
       a method dropdown, then the chosen method renders below (OD/OS table, upload, reading). */
    #prescriptionEntryTab .rx-method-select {
        box-sizing: border-box;
        width: 100%;
        height: 46px;
        padding: 0 40px 0 14px;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 15px;
        color: #333;
        background-color: #fff;
        margin-bottom: 16px;
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 16px;
    }

    #prescriptionEntryTab .rx-panel {
        margin-top: 4px;
    }

    /* Branch 87 (Q8) — the "use the prescription you already gave us?" question, shown above the
       method chooser when another pair in the cart carries one. Same card language as the rest
       of the step: 1px #e1e5e6 border, 6px radius, #211d3e as the accent. */
    #prescriptionEntryTab .rx-reuse-prompt {
        margin-bottom: 18px;
        padding: 16px;
        border: 1px solid #e1e5e6;
        border-radius: 6px;
        background: #f6f8fa;
    }

    #prescriptionEntryTab .rx-reuse-title {
        font-weight: 600;
        color: #211d3e;
        margin-bottom: 4px;
    }

    #prescriptionEntryTab .rx-reuse-text {
        font-size: 14px;
        color: #555;
        margin-bottom: 14px;
    }

    #prescriptionEntryTab .rx-reuse-btn {
        display: block;
        box-sizing: border-box;
        width: 100%;
        margin: 0 0 8px 0;
        padding: 11px 14px;
        border: 1px solid #211d3e;
        border-radius: 6px;
        background: #211d3e;
        color: #fff;
        font-size: 15px;
        line-height: 1.3;
        text-align: center;
        cursor: pointer;
    }

        /* the decline is secondary — outlined, so the reuse answer reads as the suggested one */
        #prescriptionEntryTab .rx-reuse-btn.rx-reuse-no {
            margin-bottom: 0;
            border-color: #ccc;
            background: #fff;
            color: #333;
        }

    #prescriptionEntryTab .rx-reuse-done {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    #prescriptionEntryTab .rx-reuse-done-text {
        font-weight: 600;
        color: #211d3e;
    }

        #prescriptionEntryTab .rx-reuse-done-text::before {
            content: "\2713";
            margin-right: 8px;
        }

    #prescriptionEntryTab .rx-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 18px;
    }

        #prescriptionEntryTab .rx-table th,
        #prescriptionEntryTab .rx-table td {
            border: 0;
            padding: 8px 6px;
            text-align: center;
            font-size: 13px;
            vertical-align: middle;
        }

        #prescriptionEntryTab .rx-table thead th {
            background: transparent;
            font-weight: 600;
            color: #333;
            white-space: nowrap;
        }

        #prescriptionEntryTab .rx-table th.rx-eye {
            text-align: left;
            white-space: nowrap;
            background: #f6f8fa;
        }

        #prescriptionEntryTab .rx-table select {
            display: block; /* block, so it sits in the cell instead of on the text baseline */
            box-sizing: border-box; /* width:100% must INCLUDE padding+border, or it overflows the cell */
            width: 100%;
            min-width: 0;
            height: 34px;
            margin: 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            background: #fff;
        }

    #prescriptionEntryTab .rx-info {
        color: #c3c9d0;
        font-size: 12px;
        margin-left: 4px;
        cursor: help;
        vertical-align: middle;
    }

    #prescriptionEntryTab .rx-pd {
        margin-bottom: 16px;
    }

        #prescriptionEntryTab .rx-pd-title {
            display: block;
            font-weight: 600;
            margin-bottom: 6px;
        }

    /* single PD fills the width; split PD divides into two equal halves */
    #prescriptionEntryTab .rx-pd-field {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        #prescriptionEntryTab .rx-pd-field select {
            flex: 1 1 auto;
            box-sizing: border-box;
            width: 100%;
            min-width: 0;
            height: 40px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background: #fff;
            padding: 0 10px;
        }

    #prescriptionEntryTab .rx-pd-unit {
        flex: 0 0 auto;
        color: #666;
    }

    #prescriptionEntryTab .rx-pd-split {
        display: flex;
        gap: 16px;
        margin-top: 12px;
    }

        #prescriptionEntryTab .rx-pd-split .rx-pd-eye {
            flex: 1 1 0;
        }

        #prescriptionEntryTab .rx-pd-eye label {
            display: block;
            font-size: 13px;
            margin-bottom: 4px;
            color: #555;
        }

    #prescriptionEntryTab .rx-link {
        display: inline-block;
        margin-top: 10px;
        color: #0E57A1;
        font-size: 13px;
        text-decoration: underline;
        cursor: pointer;
    }

    #prescriptionEntryTab .rx-field-row {
        margin-bottom: 14px;
    }

        #prescriptionEntryTab .rx-field-row label {
            display: block;
            font-weight: 600;
            margin-bottom: 6px;
        }

        #prescriptionEntryTab .rx-field-row select,
        #prescriptionEntryTab .rx-field-row input[type="date"] {
            box-sizing: border-box;
            width: 100%;
            height: 40px;
            border: 1px solid #ccc;
            border-radius: 6px;
            padding: 0 10px;
            background: #fff;
        }

    #prescriptionEntryTab .rx-reassure {
        background: #f4f8f4;
        border: 1px solid #dbe8db;
        border-radius: 6px;
        padding: 10px 14px;
        font-size: 13px;
        color: #3a5a3a;
        margin-top: 14px;
    }

    /* Send-later as a checkbox card, styled like the step-1 option cards */
    #prescriptionEntryTab .rx-send-later {
        margin-top: 18px;
        padding: 16px;
        border: 1px solid #e1e5e6;
        border-radius: 6px;
    }

        #prescriptionEntryTab .rx-send-later input[type="checkbox"] {
            display: none;
        }

        #prescriptionEntryTab .rx-send-later label {
            position: relative;
            display: block;
            margin: 0;
            padding-left: 34px;
            font-weight: 400;
            color: #333;
            cursor: pointer;
        }

            #prescriptionEntryTab .rx-send-later label::before {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 20px;
                height: 20px;
                border: 2px solid #ddd;
                border-radius: 50%;
                background: #fff;
                transition: all 0.2s ease;
            }

        #prescriptionEntryTab .rx-send-later input[type="checkbox"]:checked + label {
            color: #211d3e;
            font-weight: 600;
        }

            #prescriptionEntryTab .rx-send-later input[type="checkbox"]:checked + label::before {
                border-color: #211d3e;
                background: #211d3e;
            }

            #prescriptionEntryTab .rx-send-later input[type="checkbox"]:checked + label::after {
                content: "";
                position: absolute;
                left: 7px;
                top: 50%;
                width: 5px;
                height: 10px;
                border: solid #fff;
                border-width: 0 2px 2px 0;
                transform: translateY(-60%) rotate(45deg);
            }

    /* Branch 87 — Step 3 consolidated lens step. Lens cards get the step-1 card look
       (image left, text right, indicator top-right); the selected lens reveals the
       Sunglasses + Coating sub-options (#lensSubOptions) full-width inside the card. */
    #content #lensMaterialTab #lensMaterialList > li {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "media title"
            "media desc";
        align-items: center;
        column-gap: 14px;
        padding-right: 44px;
    }

    #content #lensMaterialTab #lensMaterialList > li > .option-media {
        grid-area: media;
        display: block;
        margin-top: 0;
        align-self: center;
    }

        #content #lensMaterialTab #lensMaterialList > li > .option-media img {
            max-width: 72px;
            max-height: 72px;
            object-fit: contain;
        }

    #content #lensMaterialTab #lensMaterialList > li > label {
        grid-area: title;
        position: static;
        padding-left: 0;
        margin-bottom: 2px;
    }

    #content #lensMaterialTab #lensMaterialList > li > .lesDescription {
        grid-area: desc;
    }

    #content #lensMaterialTab #lensMaterialList > li > label::before {
        left: auto;
        right: 12px;
        top: 12px;
        transform: none;
    }

    #content #lensMaterialTab #lensMaterialList > li input[type="radio"]:checked + label::after {
        left: auto;
        right: 19px;
        top: 16px;
        width: 5px;
        height: 10px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        border-radius: 0;
        background: transparent;
        transform: rotate(45deg);
    }

    /* the shared sub-options sit in a stable panel below the lens list (not inside a card) */
    #content #lensMaterialTab #lensSubOptions {
        margin-top: 18px;
        padding-top: 16px;
        border-top: 2px solid #e1e5e6;
    }

    #lensMaterialTab .lens-sub-title {
        font-size: 14px;
        font-weight: 600;
        color: #414b56;
        margin: 12px 0 8px;
    }

    #lensMaterialTab .lens-sub-list {
        list-style: none;
        margin: 0 0 8px;
        padding: 0;
    }

        #content #lensMaterialTab .lens-sub-list > li {
            display: block;
            width: auto;
            margin: 0 0 8px;
        }

    .lensprescriptioncheckountinfo {
        display: none;
        font-style: italic;
        text-align: center;
        font-size: 15px;
        max-width: 100%;
        margin: 0 auto;
    }

    /* Prescription Information step */
    .prescription-info-title {
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 20px 0;
        color: #414b56;
    }
    .prescription-info-list {
        list-style: none;
        margin: 0 0 20px 0;
        padding: 0;
    }
    .prescription-info-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 14px;
        padding: 10px 0;
        border: none;
        border-radius: 0;
    }
    .prescription-info-check {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        line-height: 22px;
        text-align: center;
        border-radius: 50%;
        background: #0E57A1;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
    }
    .prescription-info-continue-btn {
        background-color: #222;
        color: #fff;
        border: none;
        padding: 12px 32px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 4px;
        cursor: pointer;
        width: 100%;
        max-width: 300px;
    }
    .prescription-info-continue-btn:hover {
        background-color: #333;
    }

/* Branch 87 - feedback while the pair is being saved.
   The wizard opens in a fancybox at z-index 99992, so the theme's own loader (9999) would spin
   behind it, unseen. It is lifted above the dialog here, and the button the customer just pressed
   says so too - that is where they are looking, and a disabled button also stops a second click
   sending a second update. */
.ajax-loading-block-window {
    z-index: 100000;
}

.selectLens .rx-busy,
.selectLens .rx-busy:hover {
    opacity: .65;
    cursor: wait;
}

    .selectLens .rx-busy::before {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-right: 8px;
        vertical-align: -2px;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: rx-busy-spin .7s linear infinite;
    }

@keyframes rx-busy-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Branch 87 redesign — prescription step: method cards + polished entry.
   The old dropdown is hidden (kept for JS); these cards drive it.
   ───────────────────────────────────────────────────────────────────────── */
#prescriptionEntryTab .rx-method-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 4px 0 22px;
}

#prescriptionEntryTab .rx-method-card {
    position: relative;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    padding: 22px 14px 18px;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

    #prescriptionEntryTab .rx-method-card:hover {
        border-color: #c7c9d1;
    }

    #prescriptionEntryTab .rx-method-card.selected {
        border-color: var(--dark, #201b3d);
        background: #f4f2fb;
        box-shadow: 0 2px 10px rgba(32, 27, 61, .08);
    }

#prescriptionEntryTab .rx-card-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--dark, #201b3d);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

#prescriptionEntryTab .rx-method-card.selected .rx-card-check {
    display: flex;
}

#prescriptionEntryTab .rx-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f1f2f6;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

#prescriptionEntryTab .rx-method-card.selected .rx-card-icon {
    background: #fff;
    color: var(--dark, #201b3d);
    box-shadow: 0 2px 8px rgba(32, 27, 61, .12);
}

#prescriptionEntryTab .rx-card-title {
    font-weight: 700;
    color: var(--dark, #201b3d);
    font-size: 15px;
}

#prescriptionEntryTab .rx-card-desc {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
    max-width: 18ch;
}

/* Entry panel head — title + "need help" link */
#prescriptionEntryTab .rx-entry-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

#prescriptionEntryTab .rx-entry-title {
    font-weight: 700;
    color: var(--dark, #201b3d);
    font-size: 16px;
}

#prescriptionEntryTab .rx-help-link {
    color: #211d3e;
    font-size: 13px;
    text-decoration: none;
}

    #prescriptionEntryTab .rx-help-link:hover {
        text-decoration: underline;
    }

/* PD + eye-test-date side by side */
#prescriptionEntryTab .rx-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

/* Green reassurance banner */
#prescriptionEntryTab .rx-reassure-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.4;
}

    #prescriptionEntryTab .rx-reassure-banner i {
        color: #10b981;
        margin-top: 2px;
        font-size: 16px;
    }

/* Bottom bar: "send later" link (left) + Continue (right) */
#prescriptionEntryTab .rx-continue-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    text-align: left !important;
    margin-top: 22px;
}

#prescriptionEntryTab .rx-later-link {
    color: #211d3e;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

    #prescriptionEntryTab .rx-later-link:hover {
        text-decoration: underline;
    }

#prescriptionEntryTab .rx-continue-bar .next-step-button {
    margin: 0;
}

@media (max-width: 640px) {
    #prescriptionEntryTab .rx-method-cards {
        grid-template-columns: 1fr;
    }

    #prescriptionEntryTab .rx-two-col {
        grid-template-columns: 1fr;
    }

    #prescriptionEntryTab .rx-continue-bar {
        justify-content: center;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Branch 87 redesign — pixel-perfect refinements (match the mock-up)
   ───────────────────────────────────────────────────────────────────────── */

/* The wizard's base styles UPPERCASE most text; the mock-up is sentence/Title case
   for the cards, help link, banner, links and CTA. Table headers (SPHERE…) and the
   OD/OS / EYE TEST DATE labels stay uppercase, so they are deliberately not listed. */
#prescriptionEntryTab .rx-card-title,
#prescriptionEntryTab .rx-card-desc,
#prescriptionEntryTab .rx-entry-title,
#prescriptionEntryTab .rx-help-link,
#prescriptionEntryTab .rx-help-link span,
#prescriptionEntryTab .rx-reassure-banner,
#prescriptionEntryTab .rx-reassure-banner span,
#prescriptionEntryTab .rx-later-link,
#prescriptionEntryTab .rx-later-link span,
#prescriptionEntryTab .rx-pd .rx-pd-title,
#prescriptionEntryTab .rx-link,
#prescriptionEntryTab #rxSendLaterLink,
#prescriptionEntryTab .rx-continue-bar .next-step-button,
#prescriptionEntryTab .rx-continue-bar .next-step-button .button-text {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Green accent for the selected card (mint tint + green border, per request).
   !important because the wizard's generic .selected rule sets border #0045a5 !important. */
#prescriptionEntryTab .rx-method-card.selected {
    border-color: #a7f3d0 !important;
    background: #ecfdf5 !important;
}

#prescriptionEntryTab .rx-card-check {
    background: #a7f3d0;
}

    /* dark-green check for contrast on the light-green badge */
    #prescriptionEntryTab .rx-card-check svg {
        stroke: #065f46;
    }

#prescriptionEntryTab .rx-method-card.selected .rx-card-icon {
    color: #065f46;
}

/* Inline-SVG icon sizing (replaces the FontAwesome glyphs) */
#prescriptionEntryTab .rx-card-icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

#prescriptionEntryTab .rx-card-check svg {
    width: 13px;
    height: 13px;
    display: block;
}

/* Help link — blue, icon after the text */
#prescriptionEntryTab .rx-help-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #211d3e;
    font-weight: 600;
}

    #prescriptionEntryTab .rx-help-link svg {
        width: 16px;
        height: 16px;
    }

/* Green banner — left aligned, sentence case, shield icon on the left */
#prescriptionEntryTab .rx-reassure-banner {
    text-align: left;
    justify-content: flex-start;
    font-weight: 400;
}

    #prescriptionEntryTab .rx-reassure-banner svg {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        margin-top: 1px;
        stroke: #10b981;
    }

/* Bottom bar — "send later" link (blue, arrow first) + teal CTA (arrow last) */
#prescriptionEntryTab .rx-later-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    #prescriptionEntryTab .rx-later-link svg {
        width: 16px;
        height: 16px;
    }

#prescriptionEntryTab .rx-continue-bar .next-step-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    max-width: 375px;
    width: 100%;
}

#prescriptionEntryTab .rx-btn-arrow {
    width: 18px;
    height: 18px;
}

/* Soft cards around the prescription table and the PD + eye-test-date row */
#prescriptionEntryTab .rx-entry-card,
#prescriptionEntryTab .rx-two-col {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
}

/* ── Upload panel: "Upload your prescription" section with a drop-zone ── */
#prescriptionEntryTab .rx-upload-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
}

#prescriptionEntryTab .rx-upload-title {
    font-weight: 700 !important;
    color: #211d3e;
    font-size: 16px;
    text-transform: none !important;
}

#prescriptionEntryTab .rx-upload-sub {
    color: #6b7280;
    font-size: 13px;
    margin: 4px 0 14px;
    text-transform: none !important;
}

#prescriptionEntryTab .rx-dropzone {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    background: #fafafb;
    padding: 26px 16px;
    text-align: center;
}

    #prescriptionEntryTab .rx-dz-icon {
        display: inline-flex;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #eceef2;
        align-items: center;
        justify-content: center;
        color: #211d3e;
    }

        #prescriptionEntryTab .rx-dz-icon svg {
            width: 26px;
            height: 26px;
        }

    #prescriptionEntryTab .rx-dz-text {
        font-weight: 700 !important;
        color: #211d3e;
        margin-top: 10px;
        text-transform: none !important;
    }

    #prescriptionEntryTab .rx-dz-or {
        color: #9aa0aa;
        font-size: 13px;
        margin: 6px 0;
        text-transform: none !important;
    }

    #prescriptionEntryTab .rx-dz-button {
        display: inline-block;
        margin: 0 auto;
    }

    #prescriptionEntryTab .rx-dz-formats {
        margin-top: 14px;
        color: #6b7280;
        font-size: 12px;
        text-transform: none !important;
    }

        #prescriptionEntryTab .rx-dz-fmt {
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            padding: 2px 8px;
            margin-right: 4px;
            background: #fff;
        }

        #prescriptionEntryTab .rx-dz-max {
            margin-left: 6px;
        }

/* Style the jquery.uploadfile widget as the "Choose file" button in the drop-zone */
#prescriptionEntryTab .rx-dz-button .ajax-upload-dragdrop {
    border: none !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background: transparent !important;
    display: inline-block !important;
}

#prescriptionEntryTab .rx-dz-button .ajax-file-upload {
    background: #fff !important;
    color: #211d3e !important;
    border: 1px solid #211d3e !important;
    border-radius: 8px !important;
    padding: 9px 22px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
    box-shadow: none !important;
    cursor: pointer;
}

    #prescriptionEntryTab .rx-dz-button .ajax-file-upload:hover {
        background: #211d3e !important;
        color: #fff !important;
    }

/* ============================================================
   Branch 87 — Review step ("Review your selection") card layout.
   Restyles #prescriptionInfoTab to the mock-up: each selection is a
   bordered card with a round icon (or the frame thumbnail), an eyebrow
   label, a bold value + optional muted sub-line and an Edit affordance;
   then a green total bar and a secure-checkout footer with the CTA.
   Prefixed with #content to outrank the theme's generic #content li rules.
   ============================================================ */
#prescriptionInfoTab .rx-review-intro {
    color: #6b7280;
    font-size: 15px;
    line-height: 1.4;
    margin: 0 0 18px;
    text-transform: none;
}

#content #prescriptionInfoTab ul.rx-review-cards {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#content #prescriptionInfoTab ul.rx-review-cards > li.rx-review-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 !important;
    padding: 14px 16px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    list-style: none !important;
    box-shadow: none !important;
}
#prescriptionInfoTab .rx-review-card::before { content: none !important; }

/* round icon */
#prescriptionInfoTab .rx-review-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#prescriptionInfoTab .rx-review-icon svg { width: 22px; height: 22px; }
#prescriptionInfoTab .rx-ic-grey  { background: #f3f4f6; color: #211d3e; }
#prescriptionInfoTab .rx-ic-green { background: #ecfdf5; color: #059669; }
#prescriptionInfoTab .rx-ic-blue  { background: #eef1fb; color: #211d3e; }

/* frame thumbnail */
#prescriptionInfoTab .rx-review-thumb {
    flex: 0 0 auto;
    width: 58px;
    height: 46px;
    border-radius: 8px;
    background: #f6f6f8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#prescriptionInfoTab .rx-review-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

/* text block */
#prescriptionInfoTab .rx-review-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}
#prescriptionInfoTab .rx-review-eyebrow {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9aa0aa;
    font-weight: 600;
    line-height: 1.2;
}
#prescriptionInfoTab .rx-review-title {
    font-size: 16px;
    font-weight: 700;
    color: #211d3e;
    text-transform: none;
    line-height: 1.3;
    word-break: break-word;
}
#prescriptionInfoTab .rx-review-sub {
    font-size: 13px;
    color: #6b7280;
    text-transform: none;
    line-height: 1.35;
}

/* price on the frame card (no Edit — frame is chosen on the product page) */
#prescriptionInfoTab .rx-review-price {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #211d3e;
    white-space: nowrap;
}

/* Edit affordance — 2-ID prefix so it outranks the old #content #…#prescriptionInfoTab
   .rx-summary-edit grid rules that the buttons still carry as a JS hook class. */
#content #prescriptionInfoTab .rx-review-edit {
    flex: 0 0 auto;
    margin: 0 0 0 auto !important;
    align-self: center !important;
    grid-area: auto !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent !important;
    border: 0 !important;
    padding: 4px 6px !important;
    color: #211d3e !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none !important;
    width: auto !important;
    min-width: 0 !important;
}
#content #prescriptionInfoTab .rx-review-edit svg { width: 15px; height: 15px; }
#content #prescriptionInfoTab .rx-review-edit:hover {
    color: #059669 !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* green total bar */
#prescriptionInfoTab .rx-review-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 0;
    padding: 16px 18px;
    border-radius: 12px;
    background: #ecfdf5;
    border: 1px solid #d1fae5;
}
#prescriptionInfoTab .rx-review-total-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #211d3e;
}
#prescriptionInfoTab .rx-review-total-value {
    font-size: 22px;
    font-weight: 800;
    color: #211d3e;
    white-space: nowrap;
}

/* footer: secure note + CTA */
#prescriptionInfoTab .rx-review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
}
#prescriptionInfoTab .rx-review-secure {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6b7280;
}
#prescriptionInfoTab .rx-review-secure > svg {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    color: #9aa0aa;
}
#prescriptionInfoTab .rx-review-secure-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
}
#prescriptionInfoTab .rx-review-secure-text strong {
    color: #211d3e;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
}
#prescriptionInfoTab .rx-review-secure-text span {
    font-size: 12px;
    text-transform: none;
}

/* CTA — keeps the theme's teal .button styling, just lays out text + arrow */
#prescriptionInfoTab .prescription-info-continue-container {
    margin: 0;
    flex: 0 0 auto;
}
#prescriptionInfoTab .prescription-info-continue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 220px;
    text-transform: none;
}
#prescriptionInfoTab .prescription-info-continue-btn .button-text { text-transform: none; }
#prescriptionInfoTab .rx-review-cta-arrow { width: 20px; height: 20px; flex: 0 0 auto; }

@media screen and (max-width: 767px) {
    #prescriptionInfoTab .rx-review-footer {
        flex-direction: column;
        align-items: stretch;
    }
    #prescriptionInfoTab .rx-review-secure { display: none; }
    #prescriptionInfoTab .prescription-info-continue-container { width: 100%; margin: 0; }
    #prescriptionInfoTab .prescription-info-continue-btn {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Branch 87 — prescription-step validation notice (shown when Continue is blocked
   because "Enter manually" is empty or "Upload a photo" has no file yet). */
#prescriptionEntryTab .rx-validation-msg {
    margin: 4px 0 12px;
    padding: 11px 14px;
    border-radius: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 14px;
    line-height: 1.4;
    text-transform: none;
}

/* Branch 87 — step numbers are clickable (mirrors the label link). */
#tabs.wizardProcess .marker-number { cursor: pointer !important; }

/* ============================================================
   Branch 87 — "Use your saved prescription?" panel (mock-up).
   A saved-prescription summary card + two selectable option cards
   (reuse it / enter a different one). Prefixed with #prescriptionEntryTab
   and with button resets so the theme's generic button styling doesn't leak in.
   ============================================================ */
#prescriptionEntryTab #rxReusePrompt .rx-reuse-title {
    font-family: 'Stolzl-Bold', 'Nunito Sans', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #211d3e;
    text-transform: none;
    margin: 0;
}
#prescriptionEntryTab #rxReusePrompt .rx-reuse-text {
    font-size: 14px;
    color: #6b7280;
    text-transform: none;
    line-height: 1.45;
    margin: 0;
}

/* saved prescription summary card */
#prescriptionEntryTab .rx-saved-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid #d1fae5;
    border-radius: 14px;
    background: #f4fdf9;
    margin: 0 0 16px;
}
#prescriptionEntryTab .rx-saved-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #d1fae5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #059669;
}
#prescriptionEntryTab .rx-saved-icon svg { width: 24px; height: 24px; }
#prescriptionEntryTab .rx-saved-body { flex: 1 1 auto; min-width: 0; text-align: left; }
#prescriptionEntryTab .rx-saved-title {
    font-size: 16px;
    font-weight: 700;
    color: #211d3e;
    text-transform: none;
    line-height: 1.3;
}
#prescriptionEntryTab .rx-saved-product {
    font-size: 14px;
    color: #4b5563;
    text-transform: none;
    margin-top: 1px;
}
#prescriptionEntryTab .rx-saved-detail {
    font-size: 13px;
    color: #6b7280;
    text-transform: none;
    margin-top: 0;
}
#prescriptionEntryTab .rx-saved-detail:empty { display: none; }
#prescriptionEntryTab .rx-saved-check {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #a7f3d0;
    color: #065f46;
    display: none;
    align-items: center;
    justify-content: center;
}
#prescriptionEntryTab .rx-saved-check svg { width: 16px; height: 16px; }
#prescriptionEntryTab .rx-saved-card.selected { border-color: #a7f3d0; background: #ecfdf5; }
#prescriptionEntryTab .rx-saved-card.selected .rx-saved-check { display: inline-flex; }

/* option cards row */
#prescriptionEntryTab .rx-reuse-options {
    display: grid;
    grid-template: none;          /* single column — cards stack one under another */
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 0 0 4px;
}

/* collapse/expand header for the whole "You have already given us a prescription" panel */
#prescriptionEntryTab .rx-reuse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;               /* the whole header (title + subtitle + chevron) toggles the panel */
}
#prescriptionEntryTab .rx-reuse-heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    text-align: left;
}
#prescriptionEntryTab .rx-reuse-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #211d3e;
    border-radius: 8px;
}
#prescriptionEntryTab .rx-reuse-header:hover .rx-reuse-toggle { background: #eef1f6; }
#prescriptionEntryTab .rx-reuse-chevron {
    width: 22px;
    height: 22px;
    transition: transform .18s ease;
}
#prescriptionEntryTab .rx-reuse-ask.rx-reuse-collapsed .rx-reuse-chevron { transform: rotate(180deg); }
#prescriptionEntryTab .rx-reuse-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 16px;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px;
    background: #fff !important;
    cursor: pointer;
    box-shadow: none !important;
    text-transform: none;
    margin: 0 !important;
}
#prescriptionEntryTab .rx-reuse-card.selected { border-color: #34d399 !important; background: #f4fdf9 !important; }
#prescriptionEntryTab .rx-reuse-radio {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    box-sizing: border-box;
    position: relative;
}
#prescriptionEntryTab .rx-reuse-card.selected .rx-reuse-radio { border-color: #10b981; }
#prescriptionEntryTab .rx-reuse-card.selected .rx-reuse-radio::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #10b981;
}
#prescriptionEntryTab .rx-reuse-card-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#prescriptionEntryTab .rx-reuse-card-icon svg { width: 20px; height: 20px; }
#prescriptionEntryTab .rx-reuse-ic-green { background: #ecfdf5; color: #059669; }
#prescriptionEntryTab .rx-reuse-ic-grey  { background: #eef1fb; color: #211d3e; }
#prescriptionEntryTab .rx-reuse-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#prescriptionEntryTab .rx-reuse-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #211d3e;
    text-transform: none;
    line-height: 1.3;
}
#prescriptionEntryTab .rx-reuse-card-sub {
    font-size: 13px;
    color: #6b7280;
    text-transform: none;
    line-height: 1.35;
}

@media screen and (max-width: 640px) {
    #prescriptionEntryTab .rx-reuse-options { grid-template-columns: 1fr; }
}

/* Branch 87 — the empty #selectLensAnchor is a flex child of the popup header. With the step
   title hidden on mobile, justify-content:space-between spread the row as [anchor | Back | Close],
   parking the Back arrow in the middle. Take the anchor out of flow so Back stays hard-left. */
.selectLens .rx-popup-header > a {
    position: absolute !important;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Branch 87 — uploaded prescription file chip (file name + view + remove; PDF-safe,
   since a PDF can't render as an <img>). Shown via JS (display:flex). */
.rx-uploaded-file {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    font-size: 14px;
    color: #211d3e;
}
.rx-uploaded-file .rx-uploaded-icon { width: 20px; height: 20px; flex: 0 0 auto; color: #059669; }
.rx-uploaded-file .rx-uploaded-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; }
.rx-uploaded-file .rx-uploaded-view { flex: 0 0 auto; color: #211d3e; font-size: 13px; font-weight: 600; text-decoration: underline; text-transform: none; }
.rx-uploaded-file .rx-uploaded-remove {
    flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
    background: #f3f4f6; color: #6b7280; font-size: 18px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.rx-uploaded-file .rx-uploaded-remove:hover { background: #fee2e2; color: #b91c1c; }

/* Branch 87 — file chip hardening: the theme was blowing up the icon/button size and the
   uploadfile plugin's own status bar duplicated the file. Force the chip's geometry and hide
   the plugin status bar so the chip is the single, tidy file indicator. */
.rx-uploaded-file { padding: 10px 12px !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; background: #f9fafb !important; box-shadow: none !important; gap: 10px !important; margin-top: 12px !important; }
.rx-uploaded-file svg.rx-uploaded-icon { width: 22px !important; height: 22px !important; min-width: 22px !important; max-width: 22px !important; flex: 0 0 auto !important; color: #059669 !important; }
.rx-uploaded-file .rx-uploaded-name { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; }
.rx-uploaded-file .rx-uploaded-view { flex: 0 0 auto !important; white-space: nowrap !important; font-size: 13px !important; text-transform: none !important; }
.rx-uploaded-file .rx-uploaded-remove { flex: 0 0 auto !important; width: 28px !important; height: 28px !important; min-width: 28px !important; max-width: 28px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: #f3f4f6 !important; color: #6b7280 !important; font-size: 18px !important; line-height: 1 !important; box-shadow: none !important; }
.rx-uploaded-file .rx-uploaded-remove:hover { background: #fee2e2 !important; color: #b91c1c !important; }
#prescriptionEntryTab .ajax-file-upload-statusbar { display: none !important; }