/*
 * Hyva-only CSS for this module: a plain stylesheet, not a Tailwind source.
 *
 * The hyva_* layout handles of the RMA pages (and of the order history, for the returns column)
 * add it to <head>; Luma never loads it. Utilities written in the markup still come from the
 * theme's Tailwind build, which sees this module through Observer/HyvaConfigGenerateObserver.
 * Every rule is scoped to RMA markup, so the file cannot restyle a page it does not belong to.
 */
.mst-rma-box__content tbody tr:last-child {
    border-bottom: none;
}

@media (max-width: 1024px) {
    .rma-items-table thead {
        display: none;
    }

    .rma-items-table tbody {
        display: block;
    }

    .rma-items-table tbody tr {
        display: block;
        margin-bottom: 1.5rem;
        border: 1px solid var(--color-gray-200, #e5e7eb);
        border-radius: 0.5rem;
        padding: 1rem;
        background-color: #fff;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    }

    .rma-items-table tbody td {
        display: flex;
        align-items: flex-start;
        text-align: left !important;
        padding: 0.5rem 0 !important;
        border: none;
        width: 100% !important;
    }

    .rma-items-table tbody td:first-child {
        justify-content: center;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem !important;
        border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
    }

    .rma-items-table tbody td:first-child img {
        max-width: 150px;
        height: auto;
    }

    .rma-items-table tbody td:not(:first-child)::before {
        content: attr(data-th) ": ";
        font-weight: 600;
        display: inline-block;
        min-width: 110px;
        margin-right: 0.5rem;
        color: var(--color-gray-700, #374151);
        flex-shrink: 0;
    }

    .mst-rma-badge {
        margin-top: 0;
    }

    .rma-items-table tbody tr:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .rma-items-table tbody tr {
        padding: 0.75rem;
    }

    .rma-items-table tbody td:first-child img {
        max-width: 120px;
    }

    .rma-items-table tbody td:not(:first-child)::before {
        min-width: 90px;
        font-size: 0.9rem;
    }

    .rma-items-table tbody td {
        font-size: 0.9rem;
    }
}

@media (max-width: 1024px) {
    .rma-offline-items-table thead {
        display: none;
    }

    .rma-offline-items-table tbody {
        display: block;
    }

    .rma-offline-items-table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-gray-200, #e5e7eb);
        border-radius: 0.5rem;
        padding: 1rem;
        background-color: #fff;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    }

    .rma-offline-items-table tbody td {
        display: flex;
        align-items: flex-start;
        text-align: left !important;
        padding: 0.5rem 0 !important;
        border: none;
        width: 100%;
    }

    .rma-offline-items-table tbody td::before {
        content: attr(data-th) ": ";
        font-weight: 600;
        display: inline-block;
        min-width: 100px;
        margin-right: 0.5rem;
        color: var(--color-gray-700, #374151);
        flex-shrink: 0;
    }

    .rma-offline-items-table tbody td:first-child {
        font-weight: 600;
        color: #1f2937;
        padding-bottom: 0.75rem !important;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
    }

    .rma-offline-items-table .mst-rma-badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        background-color: var(--color-gray-400, #9ca3af);
        color: white;
        border-radius: 0.375rem;
        font-size: 0.875rem;
    }

    .rma-offline-items-table tbody tr:last-child {
        margin-bottom: 0;
        border-bottom: none !important;
    }
}

@media (max-width: 480px) {
    .rma-offline-items-table tbody tr {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .rma-offline-items-table tbody td::before {
        min-width: 85px;
        font-size: 0.9rem;
    }

    .rma-offline-items-table tbody td {
        font-size: 0.9rem;
        padding: 0.4rem 0 !important;
    }

    .rma-offline-items-table tbody td:first-child {
        font-size: 0.95rem;
    }

    .rma-offline-items-table .mst-rma-badge {
        font-size: 0.8rem;
        padding: 0.2rem 0.6rem;
    }
}

/* ---------------------------------------------------------------------------------------------
 * rma/list/list.phtml - the RMA list table
 *
 * Everything below is what the -hyva copy used to carry, either as an inline <style> or by calling
 * a Hyva-only ViewModel. The template is now shared, so it cannot do either.
 * ------------------------------------------------------------------------------------------- */

/*
 * The unread marker. Luma draws it from the same data URI in web/css/source/module/_list.less; the
 * icon is declared once per stylesheet pipeline because LESS is Luma-only and this file is
 * Hyva-only. One icon, two declarations - the cost of the two-pipeline model, not a second design.
 */
.mst-rma-list__unread {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    margin-left: 1rem;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='84px' height='67px' viewBox='0 0 84 67' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch --%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-15.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(15.000000, 17.000000)'%3E%3Crect id='Rectangle-Copy' fill='%23DFE3E8' x='0' y='0' width='77' height='54' rx='6'%3E%3C/rect%3E%3Cpath d='M71.4654705,0.0177879283 C74.5616559,0.255350981 77,2.8429226 77,6 L77,48 L77,48 C77,51.3137085 74.3137085,54 71,54 L6,54 L6,54 C2.6862915,54 -4.82366169e-16,51.3137085 -8.8817842e-16,48 L0,6 L-8.8817842e-16,6 C-1.27480889e-15,2.8429226 2.4383441,0.255350981 5.53452951,0.0177879283 L38.5,17 L71.4654705,0.0177879283 Z M7.33333333,10 L7.33333333,54 L69.6666667,54 L69.6666667,10 L38.5,27 L7.33333333,10 Z' id='Rectangle' fill='%23858B92'%3E%3C/path%3E%3C/g%3E%3Cpolygon id='Rectangle-2' fill='%23000000' opacity='0.0722373188' points='84.6999969 27 84.6600037 71 53.5 44'%3E%3C/polygon%3E%3Cg id='Group-2' transform='translate(61.000000, 4.000000)' fill='%23F43734'%3E%3Ccircle id='Oval' cx='19' cy='19' r='19'%3E%3C/circle%3E%3C/g%3E%3Cpath d='M82.8497362,35.5733926 L77.9976866,35.5733926 L77.9976866,17.2875543 C76.2249241,18.9452023 74.1356282,20.1711528 71.7297363,20.9654424 L71.7297363,16.5623369 C72.9959952,16.1479249 74.3715922,15.3622806 75.8565686,14.2053804 C77.3415449,13.0484802 78.3602925,11.6987836 78.9128418,10.15625 L82.8497362,10.15625 L82.8497362,35.5733926 Z' id='1' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/*
 * The status pill. Luma gets this from _common.less and _view.less; Hyva has no LESS pipeline, so
 * without these rules the pill renders as bare text. The colours are the module's curated palette,
 * lifted verbatim - the -hyva copy instead put the colour NAME straight into an inline
 * background-color, which renders the raw CSS keyword (green #008000) rather than this (#59e05b).
 */
/* A status whose colour an administrator never set lands here, and it is the only chip
   left that fills itself with a saturated ground - which now makes the one status
   nobody configured the loudest on the page. It takes the same soft treatment as the
   rest. The badge beside an item is a different thing, a count rather than a state,
   so it keeps the solid navy it has always had.

   The transparent border is what gives the per-status border-colour something to
   paint: a border-colour without a border-style draws nothing, and the chips would
   also jump a pixel as their borders appeared. */
.mst-rma-status,
.mst-rma-badge {
    display: inline-block;
    background: #4059a3;
    color: #ffffff;
    border: 1px solid transparent;
    text-align: center;
    border-radius: 2px;
    font-size: 12px;
    padding: 4px 8px;
    line-height: 1;
    white-space: nowrap;
}

/* Status chips.

   The colour on a chip is the one an administrator picked for that status, and it
   carries meaning - green approved, red rejected - so it stays. What changes is the
   amount of it. Filling the whole chip with a saturated hue put sixteen competing
   blocks of colour on one page and left the label unreadable on most of them: with
   the single #424242 the palette used for every chip, twelve of the sixteen fell
   below the 4.5:1 that body-sized text needs, and `black` printed its label in its
   own background colour.

   Each chip now takes a tint of its hue for the ground, a darkened version of the
   same hue for the label, and a mid tone for the border. Every pair is at or above
   4.5:1, the hue is still what identifies the status, and a page of chips reads as
   one family rather than sixteen. The three neutrals sit close together by nature -
   an administrator who needs them told apart should pick hues instead. */
.mst-rma-status {
    background: #eef1f7;
    color: #3a4f8f;
    border-color: #ccd5e8;
}

.mst-rma-status.status-branch-aqua {
    background: #e2f7f5;
    color: #1c7871;
    border: 1px solid #b6ebe6;
}
.mst-rma-status.status-branch-grey {
    background: #eeeeee;
    color: #5a5a5a;
    border: 1px solid #d5d5d5;
}
.mst-rma-status.status-branch-navy {
    background: #e6edf4;
    color: #416c9b;
    border: 1px solid #c0d2e5;
}
.mst-rma-status.status-branch-silver {
    background: #f6f6f6;
    color: #707070;
    border: 1px solid #e9e9e9;
}
.mst-rma-status.status-branch-black {
    background: #e5e5e5;
    color: #333333;
    border: 1px solid #bdbdbd;
}
.mst-rma-status.status-branch-green {
    background: #e8fbe8;
    color: #18811a;
    border: 1px solid #c5f4c6;
}
.mst-rma-status.status-branch-olive {
    background: #eaede0;
    color: #5a721d;
    border: 1px solid #c9d3b1;
}
.mst-rma-status.status-branch-teal {
    background: #e2f1f4;
    color: #267487;
    border: 1px solid #b7dbe4;
}
.mst-rma-status.status-branch-blue {
    background: #e8eaff;
    color: #3541cc;
    border: 1px solid #c7cbff;
}
.mst-rma-status.status-branch-lime {
    background: #eaf8eb;
    color: #29802f;
    border: 1px solid #caeecd;
}
.mst-rma-status.status-branch-purple {
    background: #f6dcf6;
    color: #9b059a;
    border: 1px solid #e9a8e9;
}
.mst-rma-status.status-branch-fuchsia {
    background: #f9e8f9;
    color: #b32eb3;
    border: 1px solid #f0c6f0;
}
.mst-rma-status.status-branch-maroon {
    background: #f4e8e8;
    color: #9b4b4b;
    border: 1px solid #e3c5c5;
}
.mst-rma-status.status-branch-red {
    background: #ffe0e0;
    color: #d10000;
    border: 1px solid #ffb3b3;
}
.mst-rma-status.status-branch-orange {
    background: #ffefdb;
    color: #a35a00;
    border: 1px solid #ffd7a6;
}
.mst-rma-status.status-branch-yellow {
    background: #fff9db;
    color: #857000;
    border: 1px solid #fff1a6;
}

/* The list turns into labelled cards where a real table stops fitting. */
    @media (max-width: 767px) {
        .mst-rma-list thead {
            display: none;
        }

        .mst-rma-list tbody {
            display: block;
        }

        .mst-rma-list tbody tr {
            display: block;
            margin-bottom: 1rem;
            border: 1px solid var(--color-gray-200, #e5e7eb);
            border-radius: 0.5rem;
            padding: 1rem;
            background-color: #fff;
        }

        .mst-rma-list tbody td {
            display: block;
            text-align: left !important;
            padding: 0.5rem 0 !important;
            border: none;
        }

        .mst-rma-list tbody td::before {
            content: attr(data-th) ": ";
            font-weight: 600;
            display: inline-block;
            margin-right: 0.5rem;
            color: var(--color-gray-700, #374151);
        }

        .mst-rma-list tbody td.actions::before {
            content: '';
            display: none;
        }

        .mst-rma-list__items ul {
            flex-wrap: wrap;
        }

        .mst-rma-list__items li {
            padding: 0.5rem;
        }

        .mst-rma-list__items li img {
            max-width: 80px;
            height: auto;
        }

        .mst-rma-status {
            display: inline-block;
            margin-top: 0.25rem;
        }

        .mst-rma-list .col.actions {
            margin-top: 0.5rem;
            padding-top: 0.5rem;
            border-top: 1px solid var(--color-gray-200, #e5e7eb);
        }

        .mst-rma-list .col.actions a {
            display: inline-block;
            padding: 0.5rem 1rem;
            background-color: var(--color-blue-500, #3b82f6);
            color: white !important;
            text-decoration: none;
            border-radius: 0.375rem;
            text-align: center;
        }

        .mst-rma-list .col.actions a:hover {
            background-color: var(--color-primary, #2563eb);
            text-decoration: none;
        }

        .mst-rma-list__name {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
    }

    @media (max-width: 480px) {
        .mst-rma-list__wrapper {
            padding: 0.5rem;
        }

        .mst-rma-list tbody tr {
            padding: 0.75rem;
        }

        .mst-rma-list__items li img {
            max-width: 60px;
        }
    }

/* ---------------------------------------------------------------------------------------------
 * rma/view.phtml and rma/view/history.phtml - what their -hyva copies carried inline.
 *
 * .opc-progress-bar here is a REIMPLEMENTATION of Magento Luma's own component, which Hyva
 * does not ship. It is safe only because this file never reaches Luma; in a shared template it
 * would have overridden the real thing.
 * ------------------------------------------------------------------------------------------- */
        .mst-rma-view__progress .opc-progress-bar {
            margin-top: 20px;
            counter-reset: i;
            display: block;
            font-size: 0;
        }
        .mst-rma-view__progress .opc-progress-bar-item {
            margin: 0 0 10px;
            width: 200px;
            display: inline-block;
            position: relative;
            text-align: center;
            vertical-align: top;
        }
        .mst-rma-view__progress .opc-progress-bar-item._active:before {
            background: #ff5501;
            border-color: #ff5501;
        }
        .mst-rma-view__progress .opc-progress-bar-item:before {
            background: #e4e4e4;
            top: 22px;
            transition: background .3s;
            content: '';
            height: 10px;
            left: 0;
            position: absolute;
            width: 100%;
        }
        .mst-rma-view__progress .opc-progress-bar-item:first-child:before {
            border-radius: 6px 0 0 6px;
        }
        .mst-rma-view__progress .opc-progress-bar-item:last-child:before {
            border-radius: 0 6px 6px 0;
        }
        .mst-rma-view__progress .opc-progress-bar-item span {
            display: inline-block;
            padding-top: 60px;
            width: 100%;
            word-wrap: break-word;
            color: #666;
            font-weight: 300;
            font-size: 1.2rem;
        }
        .mst-rma-view__progress .opc-progress-bar-item span:before {
            background: #e4e4e4;
            height: 50px;
            margin-left: -22px;
            transition: background .3s;
            width: 50px;
            border-radius: 50%;
            content: '';
            left: 50%;
            position: absolute;
            top: 0;
        }
        .mst-rma-view__progress .opc-progress-bar-item._active>span:before {
            background: #ff5501;
            border-color: #ff5501;
        }
        .mst-rma-view__progress .opc-progress-bar-item span:after {
            background: #fff;
            height: 32px;
            margin-left: -13px;
            left: 50%;
            position: absolute;
            top: 9px;
            width: 32px;
            content: counter(i);
            counter-increment: i;
            color: rgba(75, 85, 99, .8);
            font-weight: 600;
            font-size: 1.4rem;
            border-radius: 50%;
        }
        .mst-rma-view__progress .opc-progress-bar-item._active>span {
            color: black;
        }
        .mst-rma-view__progress .opc-progress-bar-item._active>span:after {
            border-color: #ff5501;
            content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"%3E %3Cpath stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /%3E %3C/svg%3E');
        }

        @media (max-width: 1024px) {
            .mst-rma-view__progress {
                display: none !important;
            }

            .mst-rma-box.mst-rma__status {
                padding: 1rem !important;
                font-size: 0.95rem;
            }

            .mst-rma-view__orders {
                padding: 1rem;
            }

            .mst-rma-box__title {
                font-size: 1rem !important;
                margin-bottom: 0.5rem;
            }

            /* The pair wraps on its own flex basis, which asks how much room the
               container has. A breakpoint here asked the window instead and forced a
               column, and in a column flex-basis sizes the HEIGHT - so every card got
               22rem of it whatever it held, which is the empty space under Return
               Address on a phone. */
        }

        @media (max-width: 480px) {
            .mst-rma-view__orders {
                padding: 0.75rem;
            }

            .mst-rma-view__progress {
                margin-bottom: 0.75rem !important;
            }
        }
    

        .mst-rma-box.mst-rma__status {
            background-color: #fff0e9;
            border-color: #ff5501;
        }
    

    /* Only where the block actually lays its children out in a row - rma/view/info.phtml.
       rma/view.phtml stacks its two, so a 50% cap there would just halve a full-width card. */

    /* A fieldset defaults to min-width: min-content, so it refuses to go narrower than the
       intrinsic width of a cols=20 textarea - about 332px - and pushes the field out through
       the side of its card. The card is the constraint, not the textarea. */
    .mst-rma__message fieldset {
        min-width: 0;
    }

/* rma/view/history.phtml */
    .mst-rma__message.__customer .mst-rma__message-body {
        background-color: var(--color-emerald-100, rgb(209, 250, 229));
    }

    /* Three parties speak in this history and each needs its own colour: the store
       answers in the default blue, the customer in green, and an automatic status
       notice in the neutral peach Luma has always used for it. Without this rule the
       notice inherited the store's blue and read as a message somebody typed. It went
       unnoticed because the demo held no status notices at all until now. */
    .mst-rma__message.__system .mst-rma__message-body {
        background-color: #f5ddd0;
    }

    /* A message is whatever the customer typed, including a 109-character run with no
       space in it - which is what QA pasted, and what made the bubble 825px wide inside
       a 621px column. Nothing else in the page can wrap it: the default overflow-wrap
       only breaks at spaces. */
    .mst-rma__message-body {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

/*
 * Attachment gallery. The shared template now renders Luma's richer markup on both themes - a
 * thumbnail, a caption and a download link, where the -hyva copy had a bare <a> - so Hyva needs
 * the styling Luma gets from web/css/source/module/_view.less.
 */
.mst-rma__message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

/* An attached file in the history.

   These were laid out as narrow centred columns, which suited a thumbnail and nothing
   else: a file with no preview - a .md, a .webm - rendered as a bare link, and several of
   them ran together across the bubble with nothing to say where one ended. Luma has always
   given each its own framed row with the name in bold, and that is what a list of
   downloads should look like whether or not a thumbnail is there to carry it. */
.mst-rma__message-attachments {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mst-rma__message-attachments .attachment-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem;
    border-radius: 0.3125rem;
    background-color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
}

.mst-rma__message-attachments .attachment-block a {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.mst-rma__message-attachments .attachment-block img {
    display: block;
    width: 100px;
    max-width: 100px;
    height: auto;
    background: #ffffff;
    border-radius: 3px;
    cursor: pointer;
}

.mst-rma__message-attachments .attachment-block-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* the loader overlay: rma/view/message.phtml, rma/new.phtml, rma/guest/new.phtml, rma/guest/offline.phtml */
.mst-rma__message .loading-mask,
#rma-new-form .loading-mask,
.rma-guest-new .loading-mask {
    background-color: rgba(255,255,255,.6);
}

@media (max-width: 1024px) {
    .mst-rma__message {
        margin-right: 0 !important;
    }

    .mst-rma__message .mst-rma-box__title {
        font-size: 1rem;
        padding-bottom: 0.5rem;
    }

    .mst-rma__message textarea {
        font-size: 16px;
        min-height: 120px;
    }

    .mst-rma__message .field input[type="file"] {
        font-size: 14px;
    }

    .mst-rma__message small {
        font-size: 0.85rem;
        display: block;
        margin-top: 0.5rem;
    }

    .mst-rma__message .actions-toolbar .primary button {
        width: 100%;
        min-height: 44px;
        font-size: 1rem;
    }

    .mst-rma__message #checkout-loader {
        z-index: 9999;
    }
}

@media (max-width: 480px) {
    .mst-rma__message .mst-rma-box__title {
        font-size: 0.95rem;
        padding-bottom: 0.5rem;
    }

    .mst-rma__message textarea {
        min-height: 100px;
    }

    .mst-rma__message small {
        font-size: 0.8rem;
    }
}


/* ---------------------------------------------------------------------------------------------
 * rma/new/step2/offline/items.phtml - neutralising a class Luma needs.
 *
 * The shared template carries `actions-toolbar` because Luma's stylesheet floats the Add Item
 * button by it and this module's LESS adds a top margin. Hyva styles the same class as a toolbar
 * with a rule above it (border-block-start, row-reverse, block margins), which its own copy avoided
 * by dropping the class - not an option once the markup is shared. Undoing those three properties
 * for this one container is what lets both themes keep the look they have.
 * ------------------------------------------------------------------------------------------- */
.ui-add-item-button-container.actions-toolbar {
    display: block;
    flex-direction: row;
    border-block-start-width: 0;
    margin-block-start: 0;
    padding-block-start: 0;
    gap: 0;
}


/* rma/new/step2/additional.phtml - repaired: the -hyva copy's <style> was missing both closing
 * braces, which a browser tolerates at the end of a style element and a stylesheet does not. */
@media (max-width: 400px) {
    #rma-new-form #reply {
        width: unset;
    }
}

/* rma/new/step2/items.phtml */
@media (max-width: 767px) {
    .rma-items-block {
        margin-bottom: 1rem;
    }

    .rma-items-title {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
        font-weight: 600;
        color: var(--color-gray-700, #374151);
    }

    .ui-rma-items {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .rma-items-title {
        font-size: 0.95rem !important;
        margin-bottom: 0.75rem !important;
    }

    .ui-rma-items {
        gap: 0.75rem;
    }
}

/* rma/new/step2/info.phtml */
@media (max-width: 1024px) {
    .rma-step2-info {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .rma-info-container {
        flex-direction: column !important;
        gap: 1.5rem;
    }

    .rma-info-container .box {
        flex: none !important;
        width: 100%;
    }

    .rma-info-container .box-title {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
        font-weight: 600;
    }

    .rma-info-table {
        width: 100%;
        border-collapse: collapse;
    }

    .rma-info-table tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
    }

    .rma-info-table tr:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .rma-info-table th {
        padding: 0 0 0.25rem 0 !important;
        font-weight: 600;
        color: var(--color-gray-700, #374151);
        font-size: 0.9rem;
    }

    .rma-info-table td {
        padding: 0 !important;
        color: var(--color-gray-500, #6b7280);
        word-break: break-word;
    }

    .box-rma-shipping-information .box-content {
        padding-left: 0 !important;
        color: var(--color-gray-500, #6b7280);
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .rma-step2-info {
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .rma-info-container {
        gap: 1rem;
    }

    .rma-info-container .box-title {
        font-size: 0.95rem !important;
        margin-bottom: 0.5rem !important;
    }

    .rma-info-table tr {
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .rma-info-table th {
        font-size: 0.85rem;
    }

    .rma-info-table td {
        font-size: 0.9rem;
    }

    .box-rma-shipping-information .box-content {
        font-size: 0.9rem;
    }
}

/* rma/new/step2/items/item/returnreason.phtml */
@media (max-width: 1024px) {
    .rma-return-field {
        margin-bottom: 1rem;
    }

    .rma-return-field .label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: var(--color-gray-700, #374151);
        font-size: 0.95rem;
    }

    .rma-return-field select.form-input {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
        padding: 0.625rem 0.75rem;
        border: 1px solid var(--color-gray-300, #d1d5db);
        border-radius: 0.375rem;
        background-color: #fff;
        padding-right: 2.5rem;
    }

    .rma-return-field select.form-input:focus {
        outline: none;
        border-color: var(--color-blue-500, #3b82f6);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .rma-return-field select.form-input:disabled {
        background-color: var(--color-gray-100, #f3f4f6);
        color: var(--color-gray-400, #9ca3af);
        cursor: not-allowed;
    }
}

@media (max-width: 480px) {
    .rma-return-field {
        margin-bottom: 0.875rem;
    }

    .rma-return-field .label {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }

    .rma-return-field select.form-input {
        font-size: 16px;
        padding: 0.5rem 0.625rem;
        padding-right: 2.25rem;
    }
}

/* rma/new/step2/items/item.phtml */
@media (max-width: 1024px) {
    .rma-one-item {
        flex-direction: column !important;
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .rma-item-description {
        align-items: center;
        width: 100%;
        margin-bottom: 1rem;
    }

    .ui-rma-item-checkbox {
        top: 1rem;
        right: 1rem;
        width: 24px !important;
        height: 24px !important;
        z-index: 10;
    }

    .rma-item-image-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 0 0 1rem 0;
    }

    .rma-item-image {
        max-width: 150px;
        height: auto;
        margin: 0 !important;
    }

    .rma-item-name {
        width: 100%;
        text-align: center;
        font-size: 1rem;
        color: var(--color-gray-700, #374151);
        padding: 0 1.5rem;
    }

    .rma-one-item .item-options {
        width: 100%;
        flex: none !important;
        margin-top: 1rem;
    }

    .rma-item-options {
        margin-top: 0;
    }

    .rma-one-item .message.info {
        font-size: 0.9rem;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .rma-one-item fieldset {
        border: none;
        padding: 0;
        margin: 0;
    }

    .rma-qty-field {
        margin-bottom: 1rem;
    }

    .rma-qty-field .label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: var(--color-gray-700, #374151);
        font-size: 0.95rem;
    }

    .rma-qty-field .control {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .rma-qty-field input[type="number"] {
        width: 80px !important;
        min-height: 44px;
        font-size: 16px;
        padding: 0.5rem;
        border: 1px solid var(--color-gray-300, #d1d5db);
        border-radius: 0.375rem;
    }

    .rma-qty-field .total-qty {
        font-size: 1rem;
        color: var(--color-gray-500, #6b7280);
    }
}

@media (max-width: 480px) {
    .rma-one-item {
        padding: 0.75rem !important;
    }

    .ui-rma-item-checkbox {
        top: 0.75rem;
        right: 0.75rem;
        width: 20px !important;
        height: 20px !important;
    }

    .rma-item-image {
        max-width: 120px;
    }

    .rma-item-name {
        font-size: 0.95rem;
        padding: 0 1.25rem;
    }

    .rma-one-item .message.info {
        font-size: 0.85rem;
        padding: 0.625rem;
    }

    .rma-qty-field .label {
        font-size: 0.9rem;
    }

    .rma-qty-field input[type="number"] {
        width: 70px !important;
        font-size: 16px;
    }

    .rma-qty-field .total-qty {
        font-size: 0.95rem;
    }
}

/* rma/new/step2/offline/items/item.phtml */
@media (max-width: 1024px) {
    .rma-offline-item {
        flex-direction: column !important;
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .rma-offline-item-description {
        width: 100%;
        flex: none !important;
        margin-bottom: 1rem;
    }

    .rma-offline-item-options {
        width: 100%;
        flex: none !important;
        margin-bottom: 1rem;
    }

    .rma-offline-item-field {
        margin-bottom: 1rem;
    }

    .rma-offline-item-field .label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: var(--color-gray-700, #374151);
        font-size: 0.95rem;
    }

    .rma-offline-item-field input[type="text"] {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
        padding: 0.625rem 0.75rem;
        border: 1px solid var(--color-gray-300, #d1d5db);
        border-radius: 0.375rem;
        background-color: #fff;
        color: var(--color-gray-700, #374151);
    }

    .rma-offline-item-field input[type="number"] {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
        padding: 0.625rem 0.75rem;
        border: 1px solid var(--color-gray-300, #d1d5db);
        border-radius: 0.375rem;
        background-color: #fff;
        color: var(--color-gray-700, #374151);
    }

    .rma-offline-item-field input:focus {
        outline: none;
        border-color: var(--color-blue-500, #3b82f6);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .rma-offline-item fieldset {
        border: none;
        padding: 0;
        margin: 0;
    }

    .rma-offline-remove-container {
        width: 100%;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--color-gray-200, #e5e7eb);
    }

    .rma-offline-remove-btn {
        width: 100%;
        float: none !important;
        min-height: 44px;
        font-size: 1rem;
        padding: 0.75rem 1rem;
        border-radius: 0.375rem;
        font-weight: 500;
    }

    .rma-offline-remove-btn:hover {
        background-color: #fecaca !important;
    }

    .rma-offline-item-field .control {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .rma-offline-item {
        padding: 0.75rem !important;
    }

    .rma-offline-item-description {
        margin-bottom: 0.75rem;
    }

    .rma-offline-item-options {
        margin-bottom: 0.75rem;
    }

    .rma-offline-item-field {
        margin-bottom: 0.875rem;
    }

    .rma-offline-item-field .label {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }

    .rma-offline-item-field input[type="text"],
    .rma-offline-item-field input[type="number"] {
        font-size: 16px;
        padding: 0.5rem 0.625rem;
    }

    .rma-offline-remove-container {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
    }

    .rma-offline-remove-btn {
        font-size: 0.95rem;
        padding: 0.625rem 0.875rem;
    }
}

/* the Remove Item container carries actions-toolbar for the same Luma reason as the Add Item one */
.ui-remove-item-button-container.actions-toolbar {
    display: block;
    flex-direction: row;
    border-block-start-width: 0;
    margin-block-start: 0;
    padding-block-start: 0;
    gap: 0;
}


/* ---------------------------------------------------------------------------
 * Making the RMA pages read on Hyva the way they read on Luma.
 *
 * The constraint these all share: Hyva's customer-account layout gives the
 * content column about 535px of a 1200px viewport, because its sidebar takes
 * 400. Luma's equivalent column is far wider, so markup that Luma renders
 * comfortably has to be told how to behave in half the room.
 * ------------------------------------------------------------------------- */

/* The status bar came from Magento's checkout, where each step is a fixed
   200px inside a full-width container. Four of those need 800px and the column
   has 535, so the bar wrapped onto two rows. Sharing the row equally keeps all
   four steps on one line at any width, which is how Luma shows them. */
.mst-rma-view__progress .opc-progress-bar {
    display: flex;
    width: 100%;
}

.mst-rma-view__progress .opc-progress-bar-item {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

/* Request Information and Return Address side by side leaves each about 260px,
   which is not enough for "Order: #000000029 at Sep 3, 2026 ($79.00)" - the
   value wrapped onto three lines and the status chip dropped below the number.
   Full width each, stacked, is the same information in Luma's shape. Luma does
   the same thing itself below its own breakpoint: _half goes to max-width 100%. */
/* Both pairs on this page - Request Information beside Return Address, and the
   message form beside the history - want two columns when there is room for two and
   one when there is not. The room in question is the container's, not the window's:
   the account column is about 535px inside a 1200px window, and a breakpoint asked
   about the window would call that large and lay out four controls that do not fit.
   A flex basis asks the right question, so the same rule serves the narrow account
   column and the full-width guest page.

   22rem is the narrowest either card stays readable at; below twice that plus the gap
   they stack, above it they share the row and fill it.

   No ancestor qualifies this. The wrapper around the page is written as
   `class="mst-rma-<?php ... ?>view|guest"`, so a signed-in customer gets .mst-rma-view
   and a guest gets .mst-rma-guest - a split that says who is looking, which has no
   bearing on how two cards should share a row. Scoping the rule to .mst-rma-view left
   the guest page on the browser default, where a card is as wide as its own text and
   Return Address came out a third the width of the one beside it. The block class is
   used on this page and the admin form only, so it can carry the rule by itself. */
.mst-rma-block {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1rem;
}

.mst-rma-block > div {
    flex: 1 1 22rem;
    max-width: 100%;
    margin-bottom: 0;
}

/* The template already says which pairs align to the top - the message form beside the
   history is one - and Luma has honoured that modifier all along. Hyva had no rule for
   it, so the stretch above applied to both pairs and pulled the short form down to the
   height of a long conversation. Same declaration Luma uses, so the two themes agree. */
.mst-rma-block._align-top {
    align-items: baseline;
}

/* The label column of the information table: without a floor it collapses and
   "Date Requested:" breaks across two lines while the value sits beside the
   second half of it. */
.mst-rma-view .mst-rma-box__content th {
    width: 1%;
    white-space: nowrap;
}

/* The product thumbnail rendered at zero width: the cell's width="75px" is only
   a hint, and a table under pressure from seven other columns takes it back.
   The image is the one column that cannot be read at a smaller size, so it gets
   a floor and the table is allowed to scroll for the rest. */
.rma-items-table td:first-child {
    width: 5rem;
    min-width: 5rem;
}

.rma-items-table td:first-child img {
    width: 4.5rem;
    height: auto;
    max-width: none;
}

/* Product names wrapped a word per line once the table was squeezed. A floor on
   the two text columns keeps them legible and moves the cost to the horizontal
   scroll the wrapper already provides. */
.rma-items-table td:nth-child(2),
.rma-items-table th:nth-child(2) {
    min-width: 11rem;
}

.rma-items-table td:nth-child(3),
.rma-items-table th:nth-child(3) {
    min-width: 7rem;
}

/* The history read as a stack of plain blocks because the staff bubble asked
   for its colour with bg-blue-100 - a Tailwind utility the theme never uses
   itself, so it is purged and the body rendered transparent. The customer side
   only looked right because its colour was already declared here. Both are
   declared now, and neither depends on the theme build.

   Luma distinguishes the two sides by colour and by which way the bubble points;
   the tail is what makes a list of blocks read as a conversation. */
.mst-rma__history .mst-rma__message-body {
    position: relative;
    background-color: var(--color-blue-100, rgb(219, 234, 254));
    border-radius: 0.375rem;
    padding: 1rem;
}

.mst-rma__history .mst-rma__message-body:before {
    content: '';
    position: absolute;
    top: -0.5rem;
    left: 1.25rem;
    width: 0;
    height: 0;
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-bottom: 0.5rem solid var(--color-blue-100, rgb(219, 234, 254));
}

.mst-rma__history .mst-rma__message.__customer .mst-rma__message-body:before {
    border-bottom-color: var(--color-emerald-100, rgb(209, 250, 229));
}

/* Two columns out of one. Luma indents the store's side and lets the customer's
   sit flush against the left edge - measured at 30px against 0, not the other way
   round, which is what an earlier comment here claimed without checking. The
   offset is what makes a list of blocks read as a conversation, before any name
   is read. */
.mst-rma__history .mst-rma__message {
    margin-left: 2rem;
    margin-right: 0;
}


/* No inner scrollbar. The history is the last thing on the page, so a box that
   scrolls inside a page that also scrolls only hides messages behind a gesture
   nobody expects to need. */
.mst-rma__history .mst-rma-box__content {
    max-height: none;
    overflow-y: visible;
}

.mst-rma__history .mst-rma__message-title {
    /* A flex row, not two floats. The markup used to carry float-left/float-right plus
       ml-3/mr-3, which meant nothing until the theme's Tailwind was built and then put an
       indent under the name and pushed the timestamp onto a line of its own. */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    margin-bottom: 0.5rem;
}

.mst-rma__history .mst-rma__message-title strong {
    margin-left: 0;
}

.mst-rma__history .mst-rma__message-title i {
    margin-right: 0;
    font-style: normal;
    font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
 * Named classes in place of Tailwind utilities the theme purges.
 *
 * A utility only survives the build if something the build scans asks for it.
 * The eight replaced here are ones Hyva's own theme never uses, so they were
 * compiled away and the markup asked for colours and borders that did not
 * exist - the history bubbles rendering transparent was the visible half of
 * this. Naming them ourselves takes the module's appearance out of the theme
 * build entirely, and stops us depending on a namespace we do not own.
 *
 * Values are the Tailwind ones they replace, so nothing changes once a store
 * does rebuild.
 * ------------------------------------------------------------------------- */

/* border-b border-b-gray-300 - the rule under a table's header and rows */
.mst-rma-rule {
    border-bottom: 1px solid var(--color-gray-300, #d1d5db);
}

/* border-2 - the outline around a form block or the status panel */
.mst-rma-outline {
    border-width: 2px;
    border-style: solid;
}

/* border-dashed - an item awaiting the customer's choices */
.mst-rma-dashed {
    border-style: dashed;
}

/* border-gray-400 - the secondary action buttons */
.mst-rma-btn-outline {
    border-color: var(--color-gray-400, #9ca3af);
}

/* bg-gray-400 - the resolution badge carried its colour in the markup; the
   class the element already had carries it now, as it does on Luma. */
.mst-rma-badge {
    background-color: var(--color-gray-400, #9ca3af);
    color: #ffffff;
}

/* bg-gray-300 - the quick-response chips above the message field */
.mst-rma-chip {
    background-color: var(--color-gray-300, #d1d5db);
}

/* text-blue-600 - links in the list and on an offline order */
.mst-rma-link {
    color: var(--color-primary, #2563eb);
}

.mst-rma-link:hover {
    text-decoration: underline;
}

/* Hyva's reset leaves <a> at the surrounding text colour, so every link inside an RMA box read as
   body text - the order number worst of all. Luma paints all of them with its own link colour. */
.mst-rma-box a {
    color: var(--color-primary, #2563eb);
}

.mst-rma-box a:hover {
    text-decoration: underline;
}

/* text-gray-400 - the timestamp beside a message author. The element is the
   only <i> in that title, so it needs no class of its own. */
.mst-rma__history .mst-rma__message-title i {
    color: var(--color-gray-400, #9ca3af);
}

/* The order selector lays its row out with a sm: breakpoint, and a breakpoint asks
   the viewport how wide it is. The viewport is not the constraint here - the account
   column is, at about 535px - so on a 1200px window the row counts as "large" and
   its four controls ask for 619px inside a 485px card, pushing Select Offline Order
   out through the side. Wrapping costs nothing when there is room and is the only
   honest answer when there is not; the select gives up its width first, since it is
   the one control that can be narrow and still readable. */
.ui-mst-rma__create-rma [data-mst-rma="selector-field"] {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.ui-mst-rma__create-rma [data-mst-rma="store-select"] {
    flex: 1 1 12rem;
    /* A select is as wide as its longest option unless told otherwise, and an order reads
       "#000000043 at Sep 16, 2026 ($177.22)". min-width alone does not settle it: once the
       row stacks on a phone the basis stops governing the width at all, and the control
       pushed 350px through a 241px column and took the page's horizontal scroll with it. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* The delimiter between the two buttons is a word, not a column of its own. */
.ui-mst-rma__create-rma [data-mst-rma="selector-field"] > .mst-rma-buttons-delimiter-text {
    align-self: center;
}

/* The two sides of the conversation.

   The offsets this replaces differed by a 32px nudge while each bubble spanned 453
   of the container's 485px, so there were no sides to speak of. A side only reads as
   a side once the bubble is narrower than the column, which is why every messenger
   caps it.

   The viewer of this page is always the customer, so the customer's own messages take
   the right - the position every chat app has trained people to read as "me" - and the
   store answers from the left. An automatic status notice belongs to neither party, so
   it stays centred and full width, with no tail.

   Frontend only: the admin renders this conversation from its own markup, where the
   viewer is the other party. */

.mst-rma__history .mst-rma__message {
    max-width: 78%;
    margin-left: 0;
    margin-right: auto;
}

.mst-rma__history .mst-rma__message.__customer {
    margin-left: auto;
    margin-right: 0;
}

.mst-rma__history .mst-rma__message.__system .mst-rma__message-title {
    justify-content: center;
}

.mst-rma__history .mst-rma__message.__system {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* The tail points back at its author. */
.mst-rma__history .mst-rma__message.__customer .mst-rma__message-body:before {
    left: auto;
    right: 1.25rem;
}

.mst-rma__history .mst-rma__message.__system .mst-rma__message-body:before {
    display: none;
}

/* The author line follows the bubble: the customer's name sits on its right. */
.mst-rma__history .mst-rma__message.__customer .mst-rma__message-title {
    text-align: right;
}

.mst-rma__history .mst-rma__message.__customer .mst-rma__message-title {
    flex-direction: row-reverse;
}

/* The product name under each thumbnail. Luma has always hidden it here - the image
   plus its alt text carry the item, and the full label is long enough to break the
   row - and the shared template used to do that with a `hidden` utility written into
   the markup. That class exists only in Hyva's build, so Luma rendered the name after
   all, wrapped awkwardly under a list bullet. Both themes now hide it the same way,
   from CSS, and the markup carries no theme-specific class. */
.mst-rma-list__items ul {
    list-style: none;
    padding-left: 0;
}

.mst-rma-list__items li strong {
    display: none;
}

/* The RMA number and its unread marker are one line, not two blocks. Luma has said so
   in its own stylesheet from the start; Hyva had no rule at all, so the 32px marker sat
   28px below the centre of the number it belongs to. */
.mst-rma-list__name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The shipping-confirmation dialog.

   Both themes render this from one template now, and neither had a rule for it. On Hyva
   the markup asked for w-80 / m-auto / top-1/3, none of which survive Tailwind's purge -
   the theme itself never uses them - so the box had no width and no position and filled
   the viewport. On Luma the utilities never meant anything, and the jQuery UI modal that
   used to build the box around this markup is gone with the framework, so it rendered
   inline in the page, transparent and full width.

   So the dialog gets its own rules, in both stylesheets, and depends on neither a
   Tailwind build nor jQuery UI. [hidden] has to be restated because display here would
   otherwise outrank the user agent's own rule for it. */
.rma-confirmation-form-overlay {
    /* Pinned by all four edges rather than sized at 100%. A fixed box is measured against
       the viewport, which includes the scrollbar, while width:100% resolves against the
       document, which does not - so the overlay came out 15px narrower than the window and
       centred its dialog 15px off. */
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.5);
}

.rma-confirmation-form-overlay[hidden] {
    display: none;
}

.rma-dialog {
    /* px, not rem: Luma sets html{font-size:62.5%}, so 30rem is 300px there and 480px
       on Hyva - the same declaration, two different dialogs. */
    position: relative;
    width: 100%;
    max-width: 480px;
    /* Whatever the shipping instructions say is a merchant's own text, and the default
       overflow-wrap only breaks at spaces. */
    overflow-wrap: anywhere;
    word-break: break-word;
    /* auto on all four sides, not just the sides: it centres the dialog in the overlay
       while it fits, and - unlike align-items:center - leaves the top reachable once the
       dialog is taller than the window, where a centred flex item has its overflow cut off
       above the scroll origin. A fixed top margin instead of this put the dialog low enough
       that its own actions fell off the bottom of the screen. */
    margin: auto;
    padding: 1rem;
    background: #ffffff;
    border-radius: 0.375rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* The thumbnail beside an order item.

   Its row is a flex container, and the only align-items it had lived inside a media
   query - so above that breakpoint the image was a flex item with no height of its
   own and stretched to whatever the row was. That is invisible until an item is
   ticked, because ticking it reveals the quantity, reason, condition and resolution
   fields and the row grows to fit them: a 300x300 photo then rendered 150 wide and as
   tall as four form fields. Centred and with its own height, it stays the picture it
   is. (The markup also asked for width="150px"; that attribute takes a number, and
   the unit is what browsers forgive rather than honour.) */
.rma-item-description {
    align-items: center;
}

.rma-item-description .image {
    align-self: center;
    height: auto;
}

/* Reason, condition and resolution are whatever an administrator typed, and a select
   is as wide as its widest option unless it is told otherwise - so one long resolution
   pushed the whole row past the card. The control takes the width it is given and
   ellipsises what does not fit; the full text is still in the open dropdown, which is
   where it is read. */
.rma-one-item select,
.rma-offline-item select,
.rma-return-field select {
    width: 100%;
    max-width: 100%;
    text-overflow: ellipsis;
}

/* The file input in the message form.

   Luma's stylesheet dresses this control; Hyva leaves it to the browser, which renders
   a bare "Choose files" that reads as text rather than something to press. Styling the
   button part directly needs no markup change and no script - the input stays the
   input, and the part the user actually clicks looks like the other buttons on the
   page. */
.mst-rma__message input[type="file"],
.mst-rma-create input[type="file"] {
    max-width: 100%;
}

.mst-rma__message input[type="file"]::file-selector-button,
.mst-rma-create input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: 0.375rem;
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-gray-700, #374151);
    font-size: 0.875rem;
    cursor: pointer;
}

.mst-rma__message input[type="file"]::file-selector-button:hover,
.mst-rma-create input[type="file"]::file-selector-button:hover {
    background: var(--color-gray-200, #e5e7eb);
}

/* The attachment preview this module opens when the theme has no lightbox of its own. */
.mst-rma-lightbox {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.8);
    cursor: zoom-out;
}

.mst-rma-lightbox__figure {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    cursor: default;
}

.mst-rma-lightbox img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    cursor: zoom-in;
}

.mst-rma-lightbox__figure._zoomed img {
    max-width: none;
    max-height: none;
    cursor: zoom-out;
}

/* While the next file decodes, the one still on screen is dimmed and a spinner runs over it, so
   a fast run through the gallery never passes off the previous picture as the current one. */
.mst-rma-lightbox__figure._loading img {
    opacity: 0.25;
}

.mst-rma-lightbox__figure._loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: 2.5rem;
    margin: -1.25rem 0 0 -1.25rem;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: mst-rma-lightbox-spin 0.8s linear infinite;
}

@keyframes mst-rma-lightbox-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mst-rma-lightbox__figure._loading::after {
        animation-duration: 2.4s;
    }
}

.mst-rma-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #111827;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.mst-rma-lightbox__close:hover {
    background: #ffffff;
}

.mst-rma-lightbox__close::before {
    content: '\00D7';
}

.mst-rma-lightbox__prev,
.mst-rma-lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #111827;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.mst-rma-lightbox__prev:hover,
.mst-rma-lightbox__next:hover {
    background: #ffffff;
}

.mst-rma-lightbox__prev { left: 1rem; }
.mst-rma-lightbox__next { right: 1rem; }

.mst-rma-lightbox__prev::before { content: '\2039'; }
.mst-rma-lightbox__next::before { content: '\203A'; }

.mst-rma-lightbox__caption {
    color: #ffffff;
    font-size: 0.875rem;
    text-align: center;
}

/* The bar that holds "Request New Return".

   Its utilities used to be inert here because nothing had compiled them, and the file
   said so. That stopped being true the moment a store built its Tailwind: float-right
   became real, `clearfix` after it never existed on this theme, and the pager below
   climbed under the button. A full-width bar has no reason to float in the first
   place. */
.mst-rma-list__new-request-bar {
    display: flex;
    justify-content: flex-end;
}

/* The OR between "Apply" and "Select Offline Order". Luma centres it with a line-height
   that matches the button; Hyva had no rule and leaned on a pt-2.5 nudge in the markup,
   which did nothing until the theme was built and then pushed the word below the line it
   was meant to sit on. Centring it against its own box works either way. */
.mst-rma-buttons-delimiter-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* One row of the create form: the item, and the fields that appear when it is ticked.

   Every rule this row had lived inside a max-width media query, so above that breakpoint
   Hyva had nothing at all and the layout was whatever the markup's utilities produced -
   a 150px photo, a name with no width of its own, and an options panel competing for the
   same line. The name overflowed its box and printed over the selects beside it.

   The two halves wrap on a basis instead, which asks the container: side by side in the
   guest page's full width, stacked in the 535px account column, without a breakpoint
   asking the window a question it cannot answer. */
.rma-one-item {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.rma-one-item > .rma-item-description {
    flex: 1 1 20rem;
    min-width: 0;
    align-items: flex-start;
    gap: 1rem;
}

.rma-one-item > .rma-item-description > b {
    min-width: 0;
    overflow-wrap: anywhere;
}

.rma-one-item > .rma-item-description .image {
    flex: none;
}

.rma-one-item > .item-options {
    flex: 1 1 20rem;
    min-width: 0;
}

/* A checkbox and its caption are one line. */
.mst-rma-field--checkbox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mst-rma-field--checkbox .label {
    margin-bottom: 0;
}

.mst-rma-field--checkbox p.small {
    flex-basis: 100%;
    margin: 0;
}

/* The attachment control. The native input keeps posting the files and stays in the DOM,
   hidden, so the form still works with no script; everything visible here is drawn beside
   it. Hidden with clip rather than display:none so the label can still focus it and a
   validation message can still point at it. */
.mst-rma-attachments input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mst-rma-attachments__drop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px dashed #c8c8c8;
    border-radius: 0.375rem;
    cursor: pointer;
}

.mst-rma-attachments__drop.is-dragover {
    border-color: #ff5501;
    background: #fff7f3;
}

.mst-rma-attachments__hint {
    color: #6b7280;
    font-size: 0.875rem;
}

.mst-rma-attachments__error {
    margin: 0.5rem 0 0;
    color: #d10000;
    font-size: 0.875rem;
}

.mst-rma-attachments__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.mst-rma-attachments__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.5rem;
    border: 1px solid #e8e8e8;
    border-radius: 0.375rem;
}

.mst-rma-attachments__thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 0.25rem;
}

.mst-rma-attachments__name {
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.mst-rma-attachments__remove {
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.25rem;
    color: #6b7280;
}

.mst-rma-attachments__remove:hover {
    color: #d10000;
}

/* Field rhythm on the RMA forms.

   A field's own hint was printed flush against its input and 4px from the NEXT field's
   label - so the eye grouped it with the field below rather than the one it describes.
   It was also set in the same 16px as the labels and in a darker colour than them, which
   made the aside look more important than the question it belongs to. (Luma has always
   had this right: the hint is 12px and sits 11px under its own input against 20px to the
   next label - roughly two to one in favour of its own field.)

   The proportion is what does the work here, not the exact numbers: a field is separated
   from the next by more space than anything inside it. */
.mst-rma__additions .field,
.mst-rma-create .field,
.mst-rma__message .field {
    margin-bottom: 1.25rem;
}

.mst-rma__additions .field > .label,
.mst-rma-create .field > .label,
.mst-rma__message .field > .label {
    display: block;
    margin-bottom: 0.25rem;
}

.mst-rma__additions .field p.small,
.mst-rma-create .field p.small,
.mst-rma__message .field p.small {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-gray-500, #6b7280);
}

/* The checkbox row keeps its own arrangement: the box and its caption share a line, and
   the hint drops to a line of its own underneath. */
.mst-rma-field--checkbox > .label {
    margin-bottom: 0;
}

/* The Request Information / Return Address tables.

   `w-full` asks for 100% of the container, but a table only honours that while its own
   content fits: a cell's minimum is its widest unbreakable content, and "#000000043 at
   Sep 16, 2026 ($177.22)" beside a label is wider than a phone's column. The table then
   pushed past the card and the whole page scrolled sideways - measured at 351px inside a
   277px box on a 375px screen.

   `overflow-wrap: anywhere` on the cells is what fixes that, and it is worth being precise
   about why: unlike `break-word`, `anywhere` counts the break opportunities it introduces
   when the browser works out a cell's minimum width, so the column can genuinely shrink.

   The first draft of this also set `table-layout: fixed`, which was belt and braces and
   cost more than it was worth: with no widths declared, fixed layout splits the columns
   evenly, so "RMA:" claimed half the card and every value was crammed into the other half.
   Automatic layout sizes the label column to the labels - measured 101/176 against
   139/139 in a 277px card - and the wrapping above keeps it inside the card. */
.mst-rma__return table,
.mst-rma__return-address table,
.mst-rma__contact table {
    width: 100%;
    max-width: 100%;
}

.mst-rma__return table td,
.mst-rma__return table th,
.mst-rma__return-address table td,
.mst-rma__return-address table th,
.mst-rma__contact table td,
.mst-rma__contact table th {
    overflow-wrap: anywhere;
}

/* The title bar. Its tint, border and rounding came from Tailwind utilities, so on Luma
   the bar simply was not there - the old jQuery UI modal had supplied one and nothing
   replaced it when that framework went. It is declared here for both themes. */
.rma-dialog__header {
    position: relative;
    margin-bottom: 0.5rem;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
    background: #f3f4f6;
    text-align: center;
}

.rma-dialog__close {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 0.75rem;
    border: 0;
    background: none;
    line-height: 1;
    cursor: pointer;
}