/* START dropdown Service Time Options (STO) */
.status-dropdown {
    width: 100%;
    padding: 8px 30px 8px 10px; /* Add right padding for the arrow */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

   

    .status-dropdown option {
        padding: 10px;
        font-size: 14px;
        color: #333;
    }

 

    .status-dropdown:disabled {
        color: #c4c4c4;
       /* background-color: #f7f7f7;*/
        cursor: not-allowed;
    }

    .status-dropdown option {
        background-color: #ffffff;
        color: #333;
        padding: 8px;
        font-size: 14px;
        font-weight: 500;
    }

        .status-dropdown option:hover {
            background-color: #f0f0f0; /* Light gray background on hover */
            color: #333; /* Ensure the text color stays visible */
        }

        .status-dropdown option:disabled {
            color: #c4c4c4; /* Grey out disabled options */
            background-color: #f9f9f9;
        }

/* END dropdown service time options */

/* START Delivery Zones Input */
.form-control-dz {
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #DDDDDD;
    padding: 0 3px 0 3px;
    width: 70px;
    font-size: 15px;
    height: 20px;
    margin-right: 3px;
    box-shadow: none;
    outline: none;
}

.form-style1 .form-control-dz::placeholder {
    color: #717171;
    font-family: var(--title-font-family);
}

.form-style1 .form-control-dz.active, .form-style1 .form-control-dz:focus {
    border: none;
    border-bottom: 1px solid #8B5CF6;
}
/* END Delivery Zones Input */


/* START Sound on order */
.order-sound-btn {
    margin-right: 3px;
    border: none;
    background-color: #FFF5F8;
    color: #F1416C;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    line-height: 38px;
    text-align: center;
}

.order-sound-btn.off {
    background-color: #FFF5F8;
    color: #F1416C;
}

/* The tint carries the icon's own hue, exactly as #FFF5F8 does for #F1416C. #e6f4ec was built for
   the older, warmer #5BBB7B and sits 11 degrees off #00d181; #E6F4EF keeps its lightness and
   saturation untouched and moves only the hue, so the pair matches as closely as the off pair. */
.order-sound-btn.on {
    background-color: #E6F4EF;
    color: #00d181;
}
/* END Sound on order */

/* START Fiscal printer status - card admin-ui/07.
   Deliberately identical to .order-sound-btn above: the two sit side by side in the header
   and must read as one control type. Padding is left at the UA button default so the 38px
   line-height centres the glyph inside the 40px box exactly as it does for the bell.
   The .on/.off classes are set on the button by fiscalization-bridge, so colour and
   background move together from one place instead of JS writing an inline colour. */
.fiscal-printer-btn {
    margin-right: 3px;
    border: none;
    background-color: #FFF5F8;
    color: #F1416C;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
}

.fiscal-printer-btn.off {
    background-color: #FFF5F8;
    color: #F1416C;
}

.fiscal-printer-btn.on {
    background-color: #E6F4EF;
    color: #00d181;
}
/* END Fiscal printer status */


/* START Log Out Admin Button */
.logout-admin-btn {
    background: none;
    border: none;
    color: #181A20;
    background-color: #f3f5f6;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    line-height: 38px;
    text-align: center;
}
/* END Log Out Admin Button */


/* MAUI-only navigation entries are hidden by default; layout JS removes the
   .maui-hidden class once it detects the MAUI bridge is available. Class-based
   (instead of inline style:none) so CSS :has() selectors below can react. */
.maui-hidden {
    display: none !important;
}

/* START Office Tabs Styling */
.office-tabs-container {
    display: inline-block;
}

.office-radio-tabs {
    padding: 3px;
    display: inline-flex;
    background: #f9f9f9;
    border-radius: 12px;
    overflow: hidden;
}

    .office-radio-tabs.mv {
        background: #fff;
        border-radius: 5px;
    }

    .office-radio-tabs .office-tab-link {
        cursor: pointer;
        padding: 13px 30px;
        font-size: 14px;
        line-height: 18px;
        font-weight: 600;
        color: var(--headings-color);
        background: #fff;
        transition: all 0.3s ease;
        margin: 0;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 120px;
        text-align: center;
        text-decoration: none;
        flex: 1;
    }

    .office-radio-tabs.mv .office-tab-link {
        background: #f9f9f9;
    }

    .office-radio-tabs .office-tab-link:first-child {
        border-right: 2px solid #f9f9f9;
        border-radius: 12px 0 0 12px;
    }

    .office-radio-tabs.mv .office-tab-link:first-child {
        border-right: 2px solid #fff;
        border-radius: 5px 0 0 5px;
    }

    .office-radio-tabs .office-tab-link:last-child {
        border-left: 2px solid #f9f9f9;
        border-radius: 0 12px 12px 0;
    }

    .office-radio-tabs.mv .office-tab-link:last-child {
        border-left: 2px solid #fff;
        border-radius: 0 5px 5px 0;
    }

    /* Marked tab: the light brand wash, exactly as the POS basket's eat-in/takeaway tabs do it
       (pos-layout.1.25.css:763). One background layer and nothing else - the label keeps the dark
       var(--headings-color) from the base rule, and the border is left alone so the first/last
       child separator rules keep working untouched. */
    .office-radio-tabs .office-tab-link.active,
    .office-radio-tabs .office-tab-link.active:hover {
        background-image: var(--kl-btn-gradient-wash);
        position: relative;
        z-index: 1;
    }

    .office-radio-tabs .office-tab-link:hover:not(.active) {
        background-color: #f9f9f9;
        border-color: #f9f9f9;
    }

    /* When the last tab in the DOM is hidden (e.g. POS in browser), promote the
       second-to-last tab to be the visually-last one so the rounded right corner
       and the left separator land on it instead. Same for the .mv (mobile)
       variant which uses different colours and radii. */
    .office-radio-tabs:has(> .office-tab-link.maui-hidden:last-child) .office-tab-link:nth-last-child(2) {
        border-left: 2px solid #f9f9f9;
        border-radius: 0 12px 12px 0;
    }

    .office-radio-tabs.mv:has(> .office-tab-link.maui-hidden:last-child) .office-tab-link:nth-last-child(2) {
        border-left: 2px solid #fff;
        border-radius: 0 5px 5px 0;
    }

/* Restaurant Selector Styling */
.restaurant-selector-container {
    display: inline-block;
}

    .restaurant-selector-container .bootstrap-select {
        min-width: 200px !important;
    }

        .restaurant-selector-container .bootstrap-select .btn {
            border: 1px solid #DDDDDD;
            border-radius: 12px;
            padding: 13px 24px;
            outline: none;
            font-size: 14px;
            line-height: 18px;
            height: auto;
            align-items: center;
            color: #212529;
            background: #fff;
            transition: all 0.3s ease;
        }

            .restaurant-selector-container .bootstrap-select .btn:hover {
                color: #8B5CF6;
            }

            .restaurant-selector-container .bootstrap-select .btn:focus {
                outline: none;
                box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25);
            }

/* Mobile responsive */
@media (max-width: 991px) {
    .office-tabs-container {
    }

    .restaurant-selector-container {
    }
}

@media (max-width: 576px) {
    .office-radio-tabs .office-tab-link {
        padding: 10px 16px;
        font-size: 12px;
        min-width: 100px;
    }
}

/* END Office Tabs Styling */


/* START Touch-Friendly Radio Buttons */
.radio-card-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.radio-card-group .radio-card {
    display: block;
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

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

.radio-card-group .radio-card .radio-card-content {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    transition: all 0.15s ease;
    min-height: 48px;
}

.radio-card-group .radio-card .radio-card-content:active {
    transform: scale(0.98);
}

.radio-card-group .radio-card .radio-card-dot {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    border: 1px solid #ccc;
    margin-right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.radio-card-group .radio-card .radio-card-dot::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.15s ease;
}

.radio-card-group .radio-card .radio-card-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

/* Selected state */
.radio-card-group .radio-card input[type="radio"]:checked ~ .radio-card-content {
    border-color: var(--kl-ctl-detail);
    background-image: var(--kl-btn-gradient-wash);
    background-origin: border-box;
    background-clip: border-box;
}

.radio-card-group .radio-card input[type="radio"]:checked ~ .radio-card-content .radio-card-dot {
    border-color: var(--kl-ctl-detail);
}

.radio-card-group .radio-card input[type="radio"]:checked ~ .radio-card-content .radio-card-dot::after {
    background-color: var(--kl-ctl-detail);
}

.radio-card-group .radio-card input[type="radio"]:checked ~ .radio-card-content .radio-card-label {
    color: #1a1a1a;
}

/* Hover state (non-touch devices) */
@media (hover: hover) {
    .radio-card-group .radio-card:hover .radio-card-content {
        border-color: var(--kl-ctl-detail);
    }

    .radio-card-group .radio-card:hover .radio-card-dot {
        border-color: var(--kl-ctl-detail);
    }
}
/* END Touch-Friendly Radio Buttons */


/* START PIN Lock Keypad

   .pin-pad, .pin-key, .pin-key-backspace and .pin-display-line are SHARED with the POS cash
   calculator (Views/POS/_CashCalculatorContent.cshtml, wwwroot/pos/checkout.html,
   wwwroot/pos/order-details.html). Every rule below that sizes or paints them is therefore scoped
   under .pin-lock-modal; the unscoped rules they inherit are left exactly as the calculator needs
   them. .pin-key-ok, .pin-stars, .pin-motto, .pin-modal-bg and the .pin-alert family are
   PIN-exclusive and may stay unscoped.

   Going full-screen is a background swap, not a restructure: .modal is already position:fixed and
   100% x 100%, so the static backdrop, the focus trap and the modal queue in pin-lock-screen.js keep
   working with the modal element untouched. backdrop-filter is gone - it is Chrome 76+, the POS
   terminals run Chrome 74, and the surface is opaque now so there is nothing left to blur. */
/* The field runs deep indigo at the bottom-left through violet into magenta and pink at the
   top-right. 45deg is the axis that ends at the top-right corner (0deg is up, 90deg is right);
   135deg would aim at the bottom-right and keep the pink off-screen. The radial layer only deepens
   the indigo corner - the pink belongs to the base gradient, not to a blob on top of it. */
.pin-lock-modal {
    z-index: 9999;
    background-color: #2E1065;
    background-image:
        radial-gradient(circle at 12% 88%, rgba(30, 27, 75, 0.6) 0%, rgba(30, 27, 75, 0) 62%),
        linear-gradient(45deg, #1E1B4B 0%, #4C1D95 30%, #7C3AED 60%, #C026D3 84%, #EC4899 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, left top;
    background-size: 100% 100%, 100% 100%;
    background-origin: border-box, border-box;
    background-clip: border-box, border-box;
}

/* Both decorative layers below span the WHOLE stage and are positioned absolutely against
   .pin-lock-modal, deliberately:

   - position:absolute, not fixed. A fixed element's containing block is the viewport, NOT its
     positioned parent - so a fixed pseudo-element ignores .pin-lock-modal entirely, and any ancestor
     that grows a transform/filter/perspective/will-change silently becomes its containing block
     instead. This theme loads animate.css and the mmenu suite, both of which add transforms at
     runtime, so that chain is not under this file's control. Absolute positioning inside
     .pin-lock-modal - itself a fixed, full-viewport box - is deterministic.
   - full-bleed boxes, never a partial width. A decorative box narrower than the screen puts its own
     edge on the screen, and any difference across that edge reads as a seam splitting the
     background in two. Artwork is placed with background-position inside a full-bleed box instead,
     so there is no box edge anywhere except the viewport edges.

   The asset's opaque pixels are pure white, hence the opacity here; a missing file paints nothing,
   which is the degradation. */
.pin-lock-modal::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(../images/kliento-waves.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 80% auto;
    background-origin: border-box;
    background-clip: border-box;
    opacity: 0.22;
    pointer-events: none;
}

/* Dot grid, faded out from the top-left corner. The patch is bounded by the mask rather than by the
   box, so it still cannot produce an edge. -webkit-mask-image is the Chrome 74 form; the unprefixed
   property is understood only from Chrome 120 and is stated after it for the future. If neither
   applies the grid simply covers the stage evenly - no seam either way. */
.pin-lock-modal::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.16) 1.5px, rgba(255, 255, 255, 0) 1.6px);
    background-repeat: repeat;
    background-position: left top;
    background-size: 26px 26px;
    background-origin: border-box;
    background-clip: border-box;
    -webkit-mask-image: radial-gradient(circle at 0 0, #000 0%, rgba(0, 0, 0, 0) 46%);
    mask-image: radial-gradient(circle at 0 0, #000 0%, rgba(0, 0, 0, 0) 46%);
    pointer-events: none;
}

/* The dialog becomes the full-viewport stage. Bootstrap's .modal-dialog-centered margin and
   min-height are overridden explicitly rather than relied on. Flex `gap` is banned on Chrome 74,
   so the brand block is spaced with margins.

   The bottom padding is larger than the top on purpose: it reserves the strip the fixed footer
   occupies. Centring happens inside what is left, so the card can never slide under the footer.
   z-index keeps the card above the decorative furniture regardless of document order. */
.pin-lock-modal .modal-dialog {
    max-width: none;
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 28px 16px 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.pin-brand {
    max-width: 380px;
    margin-bottom: 24px;
    text-align: center;
    color: #ffffff;
}

/* The wordmark is the hero. Width is explicit per height tier rather than a percentage: inside a
   shrink-to-fit flex item a percentage width on a replaced element is a circular dependency, and
   max-width:100% alone still lets it overflow a narrow column. Its aspect is 1380x440, so height is
   width x 0.319 - every 100px of width costs 32px of vertical budget.

   The asset carries transparent padding: ink occupies only y 136-302 of 440, so 31% of the image box
   below the letters is empty. That gap is closed by a negative margin-top on .pin-motto rather than
   by a negative margin-bottom on the image, and the difference matters: the offset exists ONLY to
   pull the tagline up, so it must not exist when there is no tagline. Carrying it on .pin-motto ties
   the two together structurally - the tier that hides the tagline removes the offset with it, and no
   future edit can separate them. On the image it survived the tagline and closed the gap to the CARD
   instead. The offset is per tier because it scales with the wordmark (~0.099 x width). */
.pin-wordmark {
    display: block;
    width: 380px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Only ever displayed when the image 404s. It has no baked padding, so it cancels the tagline's
   negative offset with a matching positive margin - and because it is display:none whenever the
   image loads, that compensation costs the normal path nothing. */
.pin-wordmark-text {
    font-family: var(--title-font-family);
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.5px;
    color: #ffffff;
    margin-bottom: 38px;
}

.pin-motto {
    margin: -24px 0 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.78);
}

.pin-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
}

/* Same gradient-text trick as .pin-stars, so the globe carries the brand rather than a flat tint.
   Unprefixed background-clip is deliberately absent - see the note on .pin-lock-modal .pin-stars. */
.pin-footer i {
    margin-right: 8px;
    background-image: var(--kl-btn-gradient);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-origin: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pin-modal-bg {
    width: 100%;
    max-width: 380px;
    background: #ffffff;
    border: none;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* Padding lives here rather than on a p25 utility because ud-custom-spacing declares it
   !important, which the short-screen steps below could not override. */
.pin-lock-modal .modal-body {
    padding: 25px;
}

.pin-lock-head {
    margin-bottom: 20px;
}

.pin-lock-ring {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background-image: linear-gradient(#ffffff, #ffffff), var(--kl-btn-gradient);
    background-position: center, center;
    background-size: auto, auto;
    background-repeat: no-repeat, no-repeat;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
}

.pin-lock-ring i {
    font-size: 22px;
    color: var(--kl-accent-strong);
}

.pin-lock-title {
    margin-bottom: 4px;
    font-size: 20px;
    font-weight: 600;
    color: var(--headings-color);
}

.pin-lock-subtitle {
    font-size: 15px;
    color: #6E7191;
}

.pin-display-line {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    min-height: 42px;
}

.pin-stars {
    font-size: 36px;
    letter-spacing: 14px;
    color: #181A20;
    line-height: 1;
}

/* Gradient dots. pin-lock-screen.js already writes one U+2022 per typed digit, so the row grows on
   its own and no fixed dots are ever shown. Unprefixed background-clip is deliberately absent:
   `background-clip: text` is unprefixed only from Chrome 120, and restating it after the prefixed
   form would drop the clip on Chrome 74. */
.pin-lock-modal .pin-stars {
    background-image: var(--kl-btn-gradient);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-origin: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* -webkit-text-fill-color overrides color, so the success state has to restate it. */
.pin-display-line.success .pin-stars {
    color: #00d181;
    -webkit-text-fill-color: #00d181;
}

/* Caret. PIN-exclusive - the cash calculator has no such element - so it stays unscoped like the
   rest of the PIN-only family. Purely declarative: the script only writes .pin-stars' text and
   toggles .success on the line, so this needs no JavaScript. Its height is kept below
   .pin-display-line's min-height at every tier (30/42, 24/30, 20/26) so the caret never grows the
   line box and never spends any of the height budget. */
.pin-cursor {
    display: inline-block;
    width: 2px;
    height: 30px;
    margin-left: 2px;
    background: var(--kl-accent);
    animation: pin-blink 1s step-end infinite;
}

.pin-display-line.success .pin-cursor {
    display: none;
}

@keyframes pin-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.pin-display-line.shake {
    animation: pin-shake 0.5s ease;
}

@keyframes pin-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-12px); }
    30% { transform: translateX(10px); }
    45% { transform: translateX(-8px); }
    60% { transform: translateX(6px); }
    75% { transform: translateX(-3px); }
}

/* Icon plus coloured text, centred - no tint, no border, no radius, no box padding. The line-height
   is stated because body sets a fixed 26px that a 13px message would otherwise inherit, which is
   most of what made the old banner so tall. Losing the horizontal padding also widens the text, so
   the lockout string wraps to no more lines than before. */
.pin-alert {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 16px;
    text-align: center;
}

/* Was inline on both twins. */
.pin-alert i {
    margin-right: 6px;
}

/* Card 08's badge palette. The previous values were the purchased theme's coral (#EB6753) and a
   theme amber, carried over untouched from 1.23 - the exact colours this epic exists to remove. */
.pin-alert-error {
    color: #C81E4F;
}

.pin-alert-warning {
    color: #A16207;
}

.pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 280px;
    margin: 0 auto;
}

.pin-key {
    height: 58px;
    border-radius: 14px;
    border: 1px solid #e8e8e8;
    font-size: 22px;
    font-weight: 600;
    color: #181A20;
    background: #F7F7F7;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.pin-key:hover {
    background: #eaeaea;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pin-key:active {
    transform: scale(0.93);
    background: #e0e0e0;
}

.pin-key-backspace {
    color: #999;
    font-size: 18px;
}

.pin-key-backspace:hover {
    color: #8B5CF6;
}

/* The confirm key is pressed on every sign-in, so it carries the same gradient as every other
   primary action. Scoped, which also puts it past the (0,2,0) .pin-key:hover / :active rules above. */
.pin-lock-modal .pin-key-ok {
    border: 1px solid transparent;
    font-size: 18px;
    color: var(--kl-btn-text-light);
    background-image: var(--kl-btn-gradient);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    background-origin: border-box;
    background-clip: border-box;
}

.pin-lock-modal .pin-key-ok:hover {
    background-image: var(--kl-btn-gradient-interaction);
    box-shadow: 0 4px 12px rgba(var(--kl-accent-rgb), 0.35);
}

.pin-lock-modal .pin-key-ok:active {
    background-image: var(--kl-btn-gradient-interaction);
}

/* [disabled] is what submitPin() actually sets while a PIN is being checked; the .disabled class is
   kept alongside so nothing that adds it later regresses. Must stay after :hover / :active - it ties
   with them on specificity and wins only by source order. */
.pin-lock-modal .pin-key-ok[disabled],
.pin-lock-modal .pin-key-ok.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Height steps. clamp() is banned on Chrome 74, so each step is a discrete size. A landscape POS
   terminal is wide enough for the two-column layout but only ~480px tall, which is the case the
   width breakpoints alone never caught.

   Both steps also tighten .pin-alert's margin. The error and lockout messages sit above the keypad
   in normal flow and are shown by pin-lock-screen.js, so they push the pad down at exactly the moment
   the user has mistyped and needs to retype. :has() does not exist on Chrome 74, so the card cannot
   react to "a message is visible"; trimming the message itself reclaims the space in the only state
   that spends it, without touching the resting layout. Now that the message has no box, only the
   margin and the font size are left to tune. */
/* 960px, not 900px: below 768px wide the brand stacks above the card, and between 901 and 942px tall
   that column plus a wrapped lockout message overflowed by ~41px before this step engaged. */
@media (max-height: 960px) {
    .pin-lock-modal .modal-dialog {
        padding: 12px 12px 36px;
    }

    .pin-alert {
        margin-bottom: 10px;
    }

    .pin-wordmark {
        width: 260px;
    }

    .pin-wordmark-text {
        font-size: 44px;
        margin-bottom: 26px;
    }

    .pin-brand {
        margin-bottom: 14px;
    }

    /* -26px of baked padding to absorb, then a 10px visible gap. */
    .pin-motto {
        margin-top: -16px;
        font-size: 15px;
    }

    .pin-footer {
        bottom: 14px;
        font-size: 12px;
    }

    .pin-lock-modal .modal-body {
        padding: 16px;
    }

    .pin-lock-head {
        margin-bottom: 12px;
    }

    .pin-lock-ring {
        width: 44px;
        height: 44px;
        margin-bottom: 8px;
    }

    .pin-lock-ring i {
        font-size: 18px;
    }

    .pin-lock-title {
        font-size: 17px;
    }

    .pin-lock-subtitle {
        font-size: 13px;
    }

    .pin-lock-modal .pin-display-line {
        min-height: 30px;
        margin-bottom: 12px;
    }

    .pin-lock-modal .pin-stars {
        font-size: 28px;
        letter-spacing: 10px;
    }

    .pin-cursor {
        height: 24px;
    }

    .pin-lock-modal .pin-pad {
        gap: 8px;
    }

    .pin-lock-modal .pin-key {
        height: 52px;
        font-size: 20px;
    }

    .pin-lock-modal .pin-key-backspace,
    .pin-lock-modal .pin-key-ok {
        font-size: 17px;
    }
}

/* The compact step serves two cases, so the conditions are OR'd with a comma: any screen under 600px
   tall, and any single-column screen (below the 768px row breakpoint) that is not tall either. The
   second arm is what saves the 360x640 POS browser - it is too narrow for the brand to move beside
   the card, so the brand and the card stack and the roomier step above does not fit once an alert
   is showing. */
@media (max-height: 599px), (max-width: 767px) and (max-height: 767px) {
    .pin-lock-modal .modal-dialog {
        padding: 4px 10px 28px;
    }

    .pin-alert {
        margin-bottom: 8px;
        font-size: 12px;
    }

    .pin-wordmark {
        width: 180px;
    }

    /* Nothing follows the wordmark in this tier, so the fallback's compensating margin goes too. */
    .pin-wordmark-text {
        font-size: 32px;
        margin-bottom: 0;
    }

    /* The tagline is hidden here, so its negative offset goes with it automatically and the only
       separation from the card is this margin plus the asset's own ~18px of baked padding. */
    .pin-brand {
        margin-bottom: 6px;
    }

    .pin-motto {
        display: none;
    }

    .pin-footer {
        bottom: 8px;
        font-size: 11px;
    }

    .pin-lock-modal .modal-body {
        padding: 12px;
    }

    .pin-lock-head {
        margin-bottom: 8px;
    }

    .pin-lock-ring {
        width: 38px;
        height: 38px;
        margin-bottom: 6px;
    }

    .pin-lock-ring i {
        font-size: 15px;
    }

    .pin-lock-title {
        font-size: 15px;
    }

    .pin-lock-subtitle {
        font-size: 12px;
    }

    .pin-lock-modal .pin-display-line {
        min-height: 26px;
        margin-bottom: 8px;
    }

    .pin-lock-modal .pin-stars {
        font-size: 24px;
        letter-spacing: 8px;
    }

    .pin-cursor {
        height: 20px;
    }

    .pin-lock-modal .pin-pad {
        gap: 6px;
    }

    .pin-lock-modal .pin-key {
        height: 44px;
        font-size: 18px;
    }

    .pin-lock-modal .pin-key-backspace,
    .pin-lock-modal .pin-key-ok {
        font-size: 15px;
    }
}

/* Wide screens put the brand beside the card. Stated after the height steps so their column-mode
   bottom margin on .pin-brand does not survive into the row layout and push the brand off centre.

   The switch is at the 768px Bootstrap breakpoint rather than 992px: a stacked brand plus card plus
   a wrapped lockout banner does not fit in 600px of height, and 800x600 is a real terminal size.
   Side by side the brand costs no vertical space at all. max-width drops to 280px so the row still
   fits at 768px wide (280 + 60 + 380 = 720) without flex-shrinking the card and re-wrapping the
   banner - the brand only ever holds a wordmark and two short lines. */
@media (min-width: 768px) {
    /* The waves are a square asset, so one axis must drive the size or the other overflows. Narrow
       screens size it from the width (base rule); from here up the screen is landscape-ish and
       height is the binding dimension. */
    .pin-lock-modal::before {
        background-size: auto 58%;
    }

    .pin-lock-modal .modal-dialog {
        flex-direction: row;
    }

    .pin-brand {
        max-width: 280px;
        margin-bottom: 0;
        margin-right: 60px;
        text-align: left;
    }

    .pin-wordmark {
        margin-left: 0;
    }
}

/* Above 992px the row has room for the wordmark at full size. */
@media (min-width: 992px) {
    .pin-brand {
        max-width: 420px;
    }
}

/* Under 600px tall the footer is the first decoration to go: it is the only one holding vertical
   budget (via the dialog's reserved bottom padding), and a landscape POS terminal needs that space
   for the keypad far more than it needs a domain along the bottom edge. */
@media (max-height: 599px) {
    .pin-footer {
        display: none;
    }

    .pin-lock-modal .modal-dialog {
        padding-bottom: 6px;
    }
}
/* END PIN Lock Keypad */


/* START Cash keypad — touch-friendly numeric pad for cash amount entry inside
   deposit / withdraw modals. Visually inspired by the PIN keypad but tuned for
   monetary input (decimal point + backspace, OK is the modal footer button). */
.cash-amount-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 8px;
    padding: 14px 20px;
    background: #f8f9fa;
    border: 1px dashed #DDDDDD;
    border-radius: 12px;
    font-weight: 700;
    max-width: 320px;
}

.cash-amount-value {
    font-size: 32px;
    color: #181A20;
    line-height: 1;
    letter-spacing: -0.5px;
}

.cash-amount-currency {
    font-size: 18px;
    color: #6c757d;
    font-weight: 500;
}

.cash-amount-error {
    color: #dc3545;
    font-size: 13px;
    text-align: center;
    margin-bottom: 12px;
    min-height: 18px;
    line-height: 1.4;
}

.cash-amount-error:empty {
    margin-bottom: 0;
    min-height: 0;
}

.cash-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 320px;
    margin: 0 auto;
}

.cash-keypad-key {
    height: 56px;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    font-size: 22px;
    font-weight: 600;
    color: #181A20;
    background: #F7F7F7;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: 0;
}

.cash-keypad-key:hover {
    background: #eaeaea;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

.cash-keypad-key:active {
    transform: scale(0.95);
    background: #e0e0e0;
}

.cash-keypad-key-decimal {
    font-size: 28px;
    line-height: 0.5;
}

.cash-keypad-key-backspace {
    color: #999;
    font-size: 18px;
}

.cash-keypad-key-backspace:hover {
    color: #8B5CF6;
}

@media (max-width: 575.98px) {
    .cash-amount-value {
        font-size: 28px;
    }
    .cash-amount-currency {
        font-size: 16px;
    }
    .cash-keypad-key {
        height: 50px;
        font-size: 20px;
    }
}
/* END Cash keypad */


/* START Inventory Navigation Tabs */
.inventory-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.inventory-nav-item {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 16px;
    padding: 15px 25px;
    position: relative;
    border: none;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    -webkit-box-shadow: 0px 1px 4px rgba(24, 26, 32, 0.07);
    -moz-box-shadow: 0px 1px 4px rgba(24, 26, 32, 0.07);
    -o-box-shadow: 0px 1px 4px rgba(24, 26, 32, 0.07);
    box-shadow: 0px 1px 4px rgba(24, 26, 32, 0.07);
}

.inventory-nav-text {
    font-size: 14px;
    align-self: center;
    margin-right:20px;
    color: var(--headings-color);
    font-family: var(--title-font-family);
    font-weight: 400;
}

.inventory-nav-icon {
    text-align:center;
    background-color: #f3f5f6;
    border-radius: 50%;
    color: var(--headings-color);
    font-size: 16px;
    height: 45px;
    line-height: 45px;
    position: relative;
    width: 45px;
}



.inventory-nav-item:hover {
    transform: translateY(-3px);
    box-shadow: 0px 1px 4px rgba(24, 26, 32, 0.08);
    text-decoration: none;
    border: none;
}


@media (max-width: 575.98px) {
    .inventory-nav {
        gap: 6px;
    }

    .inventory-nav-item {
        padding: 8px 14px;
    }

    .inventory-nav-text {
        font-size: 12px;
    }

    .inventory-nav-icon {
        font-size: 14px;
        height: 35px;
        line-height: 35px;
        width: 35px;
    }
}
/* END Inventory Navigation Tabs */

/* START Inventory Item List */
.inventory-list-item {
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 12px;
    border: 1px dashed #6c757d;
    position:relative;
}

.edit-inventory-link {
    display: inline-block;
    background-color: rgb(247, 247, 247);
    color: var(--headings-color);
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 40px;
    border-radius: 4px;
    cursor: pointer;
}

    .edit-inventory-link:hover {
        color: var(--headings-color);
    }

/* END Inventory Item List */

/* START Inventory Accordion */
.inventory-accordion {
    border: none;
}

.inventory-accordion-item {
    border: none;
    border-radius: 12px !important;
    margin-bottom: 15px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.inventory-accordion-btn {
    padding: 18px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    background: #fff;
    border: none;
    box-shadow: none !important;
}

.inventory-accordion-btn:not(.collapsed) {
    color: #333;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.inventory-accordion-btn::after {
    width: 14px;
    height: 14px;
    background-size: 14px;
}

/* card admin-ui/08: geometry only. The colours come from the house style — the markup carries
   .pending-style.style5 for the resting (collapsed) state, which this rule must not fight. */
.inventory-accordion-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

/* The open state is style6 (#F3EDFF / #7C3AED). It lives here rather than as a markup class because
   it is a *state*, not a label: Bootstrap's accordion and inventory-search.1.01.js both toggle
   `collapsed` on the ancestor button, and a static class cannot follow that. At (0,3,0) this beats
   .pending-style.style5 (0,2,0) on specificity, so it no longer depends on stylesheet load order. */
.inventory-accordion-btn:not(.collapsed) .inventory-accordion-badge {
    background-color: #F3EDFF;
    color: #7C3AED;
}

.inventory-accordion-item .accordion-body {
    padding: 15px 24px 24px;
}


/* .btn-icon-soft-success is gone. It was the soft green icon-only button, and its own comment said
   the green existed to match the order-cancellation modal - a pairing that stopped being true when
   that modal moved to the brand wash during the form-controls work. Its only two users were the
   Check Printer Status button on the fiscal-operations screen and its POS twin, and both now use
   .cash-stat-refresh, the transparent brand refresh button already sitting a few rows below them on
   the same screen. Same icon, same job, one treatment.
   Note it drops from 44px to that class's 40px. Below the Datecs touch floor on paper, but
   .cash-stat-refresh is already used at 40px on this very screen, so the pair is now consistent
   rather than one of them being right. */


/* START Square icon-only button geometry.
   Carries no colour: the order-details icon buttons take their palette from .btn-thm2. Needed
   because .ud-btn is inline-block with 8px/16px padding, which leaves an icon-only button about
   34px tall — under the 44px touch minimum these screens are used at on a Datecs terminal. */
.ud-btn.btn-icon-square {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* END Square icon-only button geometry */


/* START Action Row pattern — full-width tappable row used as a single button.
   Replaces the "title + description + button" trio with one large touch target. */
.action-row-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1px dashed #DDDDDD;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    color: inherit;
    font: inherit;
    min-height: 64px;
}

.action-row:hover,
.action-row:focus {
    background: #f8f9fa;
    border-color: #B5B5B5;
    outline: none;
    text-decoration: none;
}

.action-row:active {
    background: #f0f1f3;
    transform: scale(0.998);
}

.action-row[disabled],
.action-row.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Neutral icon square on the left. All variants share the same gray background;
   variant classes are kept on the markup for future use but currently render
   identically. The icon background flips to white when the row is hovered. */
.action-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 300;
    flex-shrink: 0;
    background-color: #f3f5f6;
    color: var(--headings-color);
    transition: background-color 0.15s ease;
}

.action-icon-success,
.action-icon-warning,
.action-icon-info,
.action-icon-danger {
    background-color: #f3f5f6;
    color: var(--headings-color);
}

.action-row:hover .action-icon,
.action-row:focus .action-icon {
    background-color: #ffffff;
}

/* Title + subtitle stack */
.action-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.action-title {
    font-weight: 600;
    font-size: 15px;
    color: #181a20;
    line-height: 1.3;
}

.action-subtitle {
    font-size: 13px;
    color: #6c757d;
    line-height: 1.4;
}

/* Chevron on the right hints the row is tappable */
.action-chevron {
    color: #adb5bd;
    font-size: 13px;
    flex-shrink: 0;
    margin-left: 8px;
}

/* On narrow screens drop the description so two rows take less space */
@media (max-width: 767.98px) {
    .action-subtitle {
        display: none;
    }
    .action-row {
        padding: 12px 14px;
        min-height: 56px;
    }
}
/* END Action Row pattern */


/* START Cash stat card — hero display for "Cash in Drawer" with the amount as
   the focal point. Same white background + dashed border as the action rows so
   it sits naturally next to them; differentiated as a status (not an action) by
   the layout (label on top, big number on bottom, no chevron). */
.cash-stat-card {
    background: #fff;
    border: 1px dashed #DDDDDD;
    border-radius: 10px;
    padding: 14px 16px;
    /* Compact on larger screens — full-width only on small touch devices */
    max-width: 360px;
}

.cash-stat-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.cash-stat-label {
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* The Check Printer Status button. Same paint as .cash-stat-refresh, but its own class because the
   two sit in different places: the cash one is a flex item beside a label, this one has to line up
   with a 44px dropdown that carries a label above it. Borrowing the cash class meant relying on
   `align-self-end`, which aligns to the bottom of the flex LINE rather than to the field, so the
   button drifted. The markup now puts it in a `d-flex align-items-center` row with the select, which
   centres it against the field at any width and needs no alignment utility at all. */
.fiscal-printer-refresh {
    background: transparent;
    border: none;
    color: #8B5CF6;
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    padding: 0;
}

.fiscal-printer-refresh:hover,
.fiscal-printer-refresh:focus {
    background: rgba(124, 58, 237, 0.18);
    color: #7C3AED;
}

/* 44px, the product's one control height. It was 40px - invisible on the cash card, where the button
   sits against a label rather than a field. */
.cash-stat-refresh {
    background: transparent;
    border: none;
    color: #8B5CF6;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    padding: 0;
    flex-shrink: 0;
    margin: -6px -6px -6px 0; /* pull into card padding so the row stays tight */
}

.cash-stat-refresh:hover,
.cash-stat-refresh:focus {
    background: rgba(124, 58, 237, 0.18);
    color: #7C3AED;
    outline: none;
}

.cash-stat-amount {
    font-size: 30px;
    font-weight: 700;
    color: #181a20;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin: 0;
}

/* Full-width on small / touch screens */
@media (max-width: 767.98px) {
    .cash-stat-card {
        max-width: none;
    }
    .cash-stat-amount {
        font-size: 28px;
    }
}
/* END Cash stat card */


/* START Brand form controls - card admin-ui/03.
   Loads after bootstrap.min.css and after the theme, so these rules win every
   source-order tie. Bootstrap here is v5.1.3: the tick, the dot and the switch
   knob are all background-image data-URIs, so a checked state needs two layers
   (mark over gradient) and must restate every multi-layer background property. */
:root {
    /* The three gradients live in the theme's :root (style.2.01.css:66-68) as
       --kl-btn-*; card 03 must not edit the theme, so it reuses them under their
       existing names and defines only the control-specific tokens below. */
    --kl-ctl-track-off: #F5F3FF;
    --kl-ctl-border-off: #E9D5FF;
    --kl-ctl-knob-off: #C4B5FD;
    --kl-ctl-detail: #7C3AED;
    --kl-ctl-track-disabled: #F1F5F9;
    --kl-ctl-border-disabled: #E5E7EB;
    --kl-ctl-knob-disabled: #CBD5E1;
    --kl-ctl-muted: #94A3B8;
    --kl-ctl-on-shadow: rgba(139, 92, 246, 0.28);
    --kl-ctl-surface: #FFFFFF;
}

/* .switch-style1 is listed alongside the bare selector, not for tidiness: the theme paints a checked
   switch #8bb03f at `.switch-style1 .form-check-input:checked`, which is (0,3,0) and beat this rule's
   (0,2,0). The green was winning on background-color and only stayed invisible because the gradient
   background-image below happened to cover it completely. Any change to background-size, or any
   transparency in the gradient, would have brought it back. 158 switches ride on this. */
.form-check-input:checked,
.switch-style1 .form-check-input:checked {
    background-color: transparent;
    border-color: transparent;
}

.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), var(--kl-btn-gradient);
    background-position: center, center;
    background-size: contain, auto;
    background-repeat: no-repeat, no-repeat;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
}

/* Radios mark their selection with a solid --kl-ctl-detail dot on white, not the gradient - the
   reference is pos-layout's variant card (.radio-element ... ::before). Deliberately ONE background
   layer, so none of the two-value lists the checkbox rules need are restated here: Bootstrap's own
   single-value background-position/size/repeat apply, and origin/clip fall back to their initial
   padding-box/border-box. The 3.5px radius reproduces Bootstrap's own 7px dot exactly, so the mark
   does not change size. Checkboxes and switches keep the gradient. */
.form-check-input:checked[type="radio"] {
    background-image: radial-gradient(circle, var(--kl-ctl-detail) 3.5px, #fff 3.5px);
    border-color: var(--kl-ctl-detail);
}

.form-check-input[type="checkbox"]:indeterminate {
    background-color: transparent;
    border-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"), var(--kl-btn-gradient);
    background-position: center, center;
    background-size: contain, auto;
    background-repeat: no-repeat, no-repeat;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
}

.custom_checkbox input:checked ~ .checkmark {
    background-color: transparent;
    background-image: var(--kl-btn-gradient);
    background-origin: border-box;
    background-clip: border-box;
    border-color: transparent;
}

/* The theme draws this one as a thick 3px ring with an empty white centre (style.2.01.css:7027-7030).
   Thinning it to 1px lets the shared radio dot above show through, so it matches every other radio.
   .form-check-input is 16px with box-sizing: border-box, so the width does not change. */
.radio-element .form-check-input:checked {
    border: 1px solid var(--kl-ctl-detail);
}

/* Switches. A switch input is [type=checkbox], so these rules use `input.` to
   lift specificity above the checkbox rules above rather than lean on order.
   Every state declares a 1px border - solid or transparent - so the track never
   changes size; box-sizing: border-box keeps the theme's 55x30px intact. */
.switch-style1 input.form-check-input,
.switch-style1 input.form-check-input:focus,
.form-switch input.form-check-input,
.form-switch input.form-check-input:focus {
    background-color: var(--kl-ctl-track-off);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23C4B5FD'/%3e%3c/svg%3e");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid var(--kl-ctl-border-off);
    box-shadow: none;
    outline: none;
}

.switch-style1 input.form-check-input:checked,
.switch-style1 input.form-check-input:checked:focus,
.form-switch input.form-check-input:checked,
.form-switch input.form-check-input:checked:focus {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"), var(--kl-btn-gradient);
    background-position: right center, center;
    background-size: contain, auto;
    background-repeat: no-repeat, no-repeat;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent;
    box-shadow: 0 2px 6px var(--kl-ctl-on-shadow);
}

/* opacity:1 overrides Bootstrap's .form-check-input:disabled{opacity:.5}, which would halve the
   dedicated disabled palette below and leave the knob at 1.16:1 against its own track - effectively
   invisible. The switch signals "disabled" through that palette, not through transparency. Scoped to
   switches on purpose: checkboxes and radios have no disabled palette and still need Bootstrap's .5.
   The label dims via a separate Bootstrap rule on .form-check-label, so it is unaffected. */
.switch-style1 input.form-check-input:disabled,
.form-switch input.form-check-input:disabled {
    opacity: 1;
    background-color: var(--kl-ctl-track-disabled);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23CBD5E1'/%3e%3c/svg%3e");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid var(--kl-ctl-border-disabled);
}

.switch-style1 input.form-check-input:checked:disabled,
.form-switch input.form-check-input:checked:disabled {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"), var(--kl-btn-gradient-wash);
    background-position: right center, center;
    background-size: contain, auto;
    background-repeat: no-repeat, no-repeat;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent;
    box-shadow: none;
}

.switch-style1 input.form-check-input:disabled ~ .form-check-label,
.switch-style1 input.form-check-input[disabled] ~ .form-check-label,
.form-switch input.form-check-input:disabled ~ .form-check-label,
.form-switch input.form-check-input[disabled] ~ .form-check-label {
    color: var(--kl-ctl-muted);
}

/* Focused text field. The theme's green ring is an `outline` sitting outside the
   box; this repaints the 1px border the field already carries at rest, so the
   box does not shift. .form-select is deliberately excluded - overriding
   background-image there would erase Bootstrap's dropdown caret. */
.form-style1 .form-control.active,
.form-style1 .form-control:focus,
.form-control:focus,
textarea:focus {
    outline: none;
    box-shadow: none;
    border: 1px solid transparent;
    background-image: linear-gradient(var(--kl-ctl-surface), var(--kl-ctl-surface)), var(--kl-btn-gradient);
    background-position: center, center;
    background-size: auto, auto;
    background-repeat: no-repeat, no-repeat;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
}
/* END Brand form controls */
/* END Inventory Accordion */
/* Offer type selection - Views/Offers/_OfferTypeSelectionPartial.cshtml
   Moved here from a <style> block inside that partial. The partial is AJAX-loaded, so the block was
   re-sent on every visit to the screen and could never be cached.

   Every selector is scoped to .offer-type-card. In the partial's own file the generic names were
   safe by isolation; here they are not. `.divider` alone is live markup in five other places -
   Views/POS/_CashCalculatorContent.cshtml, Views/Reservations/_ManageTablesPartial.cshtml,
   Views/FbAds/Shared/_QualifierBundle.cshtml, wwwroot/pos/checkout.1.14.html and
   wwwroot/pos/order-details.1.07.html - and would have grown a 40x3 gradient bar. `.details` appears
   in twelve. Do not unscope any of these. */
.offer-type-card {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.offer-type-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #8B5CF6, #EC4899);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.offer-type-card:hover::before {
    transform: scaleX(1);
}

.offer-type-card .offer-type-content {
    padding: 30px 20px 20px;
    text-align: center;
    position: relative;
}

/* The colour lives in the icon, not behind it: four solid gradient discs with coloured shadows
   shouted over each other. The disc rests neutral - #F1F5F9 is the palette's own grey, the one
   the style5 badge uses - and only picks up the brand tint on hover, so a screen of four reads
   calm and the one under the cursor is the one wearing colour. */
.offer-type-card .icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    background: #F1F5F9;
    transition: background-color 0.3s ease;
}

.offer-type-card:hover .icon-circle {
    background: #F3EDFF;
}

/* The icons are `fal`, not `fas`. At 32px a solid glyph is a block of colour and reads as loud as
   the filled disc it replaced; the light weight is a line drawing, which is the point. Dark
   rather than violet: the light strokes keep it from outweighing the title beneath it, and the
   brand is left to carry the top bar, the divider and the hover. */
.offer-type-card .icon-circle i {
    font-size: 32px;
    color: var(--headings-color);
}

.offer-type-card .title {
    color: #2d3748;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 18px;
}

.offer-type-card .divider {
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #8B5CF6, #EC4899);
    margin: 0 auto 15px;
    border-radius: 2px;
}

.offer-type-card p {
    color: #6c757d;
    font-size: 13px;
    line-height: 1.6;
    min-height: 65px;
}

.offer-type-card .offer-type-footer {
    padding: 15px 20px;
    margin-top: 20px;
    border-top: 1px solid #e9ecef;
    background: linear-gradient(180deg, transparent 0%, rgba(139, 92, 246, 0.05) 100%);
}

.offer-type-card .select-text {
    color: #8B5CF6;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-block;
}

.offer-type-card .select-text i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.offer-type-card:hover .select-text i {
    transform: translateX(5px);
}

/* One tint for all four. The previous four differed by a couple of hex points each - a distinction
   nobody could see, and four rules to keep in step for nothing. */
.offer-type-card:hover {
    border-color: #8B5CF6;
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(139, 92, 246, 0.12), 0 4px 8px rgba(0,0,0,0.06);
    background: linear-gradient(145deg, #FAF7FF 0%, #ffffff 100%);
}

.offer-type-card:hover .select-text {
    color: #7C3AED;
}

.offer-type-card:active {
    transform: translateY(-6px) scale(0.98);
}

@media (max-width: 1199px) {
    .offer-type-card .icon-circle {
        width: 70px;
        height: 70px;
    }

    .offer-type-card .icon-circle i {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .offer-type-card p {
        min-height: auto;
    }
}
/* END Offer type selection */

/* START Input affix and stepper groups
   One control drawn 54 different ways by a copy-pasted inline `style`, collapsed onto two classes:
   .kl-input-affix (a currency/unit label welded to the right edge of a field) and the
   .number-decrement / .number-increment pair (a stepper welded to both edges of a quantity field).

   `.form-control` must NEVER appear here unscoped - a bare rule would flatten and un-border every
   ordinary input in the admin. The child combinator `>` is used as well, so a .form-control nested
   deeper inside a group is untouched.

   background-origin and background-clip are stated on every gradient-bearing rule: the defaults
   (padding-box / border-box) size the gradient to the padding box but paint it into the border box,
   smearing the last stop across the border.

   The border is 1px, not the 2px the inline styles carried, so that the affix and the steppers line
   up on their top and bottom edges with the field's own `1px solid #DDDDDD` and with the POS
   .guest-qty-btn / .move-qty-btn family. 44px throughout, per the height card. */
.kl-input-group {
    display: flex;
}

.kl-input-group .number-decrement,
.kl-input-group .number-increment {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background-image: var(--kl-btn-gradient);
    background-origin: border-box;
    background-clip: border-box;
    color: var(--kl-btn-text-light);
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Outer corners are keyed to the class rather than to :first-child/:last-child, because some of
   these groups straddle a Razor @if whose branches change which children are present. */
.kl-input-group .number-decrement {
    border-radius: 8px 0 0 8px;
}

.kl-input-group .number-increment {
    border-radius: 0 8px 8px 0;
}

.kl-input-group .number-decrement:hover,
.kl-input-group .number-increment:hover {
    background-image: var(--kl-btn-gradient-interaction);
    background-origin: border-box;
    background-clip: border-box;
    border-color: transparent;
}

.kl-input-group .number-decrement:disabled,
.kl-input-group .number-increment:disabled {
    background-image: none;
    background-color: #ccc;
    border-color: #ccc;
    cursor: not-allowed;
}

/* Every affix in the admin trails its input, so only the right corners are rounded. */
.kl-input-group .kl-input-affix {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 0 8px 8px 0;
    background-image: var(--kl-btn-gradient);
    background-origin: border-box;
    background-clip: border-box;
    color: var(--kl-btn-text-light);
    font-size: 16px;
    white-space: nowrap;
    flex-shrink: 0;
}

.kl-input-group > .form-control {
    height: 44px;
    flex: 1 1 auto;
    min-width: 0;
}

/* :not(:last-child) is load-bearing. Views/Menu/_AddOrUpdateMenuItemPartial.cshtml renders a lone
   readonly input inside this same wrapper on one branch of an @if; squaring its right corners
   unconditionally would leave that field flattened against nothing. */
.kl-input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.kl-input-group > .number-decrement + .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}

/* The focus rule further up this file sets `border: 1px solid transparent` as a shorthand, which
   puts back the side borders the two rules above remove. These take them off again; the extra
   :not(:last-child) / .number-decrement raises their specificity above .form-style1
   .form-control:focus, and they also sit later in the same file. */
.kl-input-group > .form-control:not(:last-child):focus {
    border-right: none;
}

.kl-input-group > .number-decrement + .form-control:focus {
    border-left: none;
}
/* END Input affix and stepper groups */

/* Compact data tables. The theme gives every cell in .table-style3 `padding: 20px 30px`, which is
   40px of vertical air per row - generous for a short list, wasteful on the analytics screen, which
   is built out of EIGHT of these tables and where the item table alone carries seven columns, so
   the horizontal padding costs 420px before any data is drawn.
   Scoped as a modifier rather than changed on .table-style3 itself: that class is used by 17 views,
   and quietly re-spacing all of them is a decision for whoever is looking at those screens. */
.table-style3.table-compact .t-head th,
.table-style3.table-compact .t-body th,
.table-style3.table-compact .t-body td {
    padding: 10px 14px;
}
/* END Compact data tables */