/* ==========================================================================
   Pop-ups — one look for every .modal in the app (merchant, admin, partner,
   POS, dashboard), whichever page opened it.

   This sheet owns the frame: backdrop, sheet, header (icon tile + title),
   close button, body padding, the pinned footer of actions, buttons and
   fields. What goes inside a pop-up stays with each page's sheet.

   It loads after the page sheets. Selectors start "body .modal-overlay" so
   they outrank "body.lp2-app .modal-*" from pages-m2.css.

   The icon tile and its tint come from App._modalHead (ui-kit.js): the tone
   is a class on .modal (mdl-tone-green / blue / indigo / amber / danger).
   ========================================================================== */

:root {
    --mdl-pad: 20px;
    --mdl-line: #e9edf2;
}
@media (min-width: 768px) {
    :root { --mdl-pad: 24px; }
}

/* ---- Tones ------------------------------------------------------------------------ */

.modal {
    --mdl-glow: rgba(16, 185, 129, .11);
    --mdl-ico: #047857;
    --mdl-ico-bg1: #ecfdf5;
    --mdl-ico-bg2: #d1fae5;
    --mdl-ico-ring: rgba(4, 120, 87, .16);
}
.modal.mdl-tone-blue {
    --mdl-glow: rgba(59, 130, 246, .11);
    --mdl-ico: #1d4ed8; --mdl-ico-bg1: #eff6ff; --mdl-ico-bg2: #dbeafe; --mdl-ico-ring: rgba(29, 78, 216, .16);
}
.modal.mdl-tone-indigo {
    --mdl-glow: rgba(99, 102, 241, .11);
    --mdl-ico: #4338ca; --mdl-ico-bg1: #eef2ff; --mdl-ico-bg2: #e0e7ff; --mdl-ico-ring: rgba(67, 56, 202, .16);
}
.modal.mdl-tone-amber {
    --mdl-glow: rgba(245, 158, 11, .13);
    --mdl-ico: #b45309; --mdl-ico-bg1: #fffbeb; --mdl-ico-bg2: #fef3c7; --mdl-ico-ring: rgba(180, 83, 9, .18);
}
.modal.mdl-tone-danger {
    --mdl-glow: rgba(239, 68, 68, .1);
    --mdl-ico: #dc2626; --mdl-ico-bg1: #fef2f2; --mdl-ico-bg2: #fee2e2; --mdl-ico-ring: rgba(220, 38, 38, .16);
}

/* ---- Backdrop and sheet ------------------------------------------------------------ */

body .modal-overlay {
    background: rgba(15, 23, 42, .46);
    backdrop-filter: blur(6px) saturate(115%);
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    transition: opacity .26s ease, visibility .26s ease;
}
body .modal-overlay .modal {
    background: #fff;
    border-radius: 26px 26px 0 0 !important;
    box-shadow: 0 -20px 50px -18px rgba(15, 23, 42, .42), 0 0 0 1px rgba(15, 23, 42, .05);
    transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .24s ease;
}
body .modal-overlay .modal-handle {
    width: 40px; height: 5px; margin: 10px auto 0;
    border-radius: 999px; background: #d3dae3;
}

@media (min-width: 768px) {
    body .modal-overlay { align-items: center; padding: 32px 24px; }
    body .modal-overlay .modal {
        border-radius: 24px !important;
        max-height: min(88dvh, 880px);
        box-shadow:
            0 40px 90px -30px rgba(15, 23, 42, .5),
            0 14px 30px -20px rgba(15, 23, 42, .28),
            0 0 0 1px rgba(15, 23, 42, .06);
        opacity: 0;
        transform: translateY(16px) scale(.975);
    }
    body .modal-overlay.open .modal { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    body .modal-overlay .modal { transition: opacity .15s ease; }
}

/* ---- Header: icon tile, title, close ----------------------------------------------- */

body .modal-overlay .modal-header {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    min-height: 66px; margin: 0;
    padding: 13px 64px 13px var(--mdl-pad);
    border-bottom: 1px solid var(--mdl-line);
    background:
        radial-gradient(130% 150% at 0% 0%, var(--mdl-glow) 0%, rgba(255, 255, 255, 0) 58%),
        #fff;
}
body .modal-overlay .modal-title {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    margin: 0;
    font-family: inherit; font-size: 1.06rem; font-weight: 800; line-height: 1.25;
    letter-spacing: -.012em; color: #000;
}
body .modal-overlay .modal-title::before { content: none; display: none; }
body .modal-overlay .modal-title-text { min-width: 0; overflow-wrap: anywhere; }
body .modal-overlay .modal-ico {
    flex: none; display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 13px;
    font-size: 1.08rem; color: var(--mdl-ico);
    background: linear-gradient(150deg, var(--mdl-ico-bg1) 0%, var(--mdl-ico-bg2) 100%);
    box-shadow: inset 0 0 0 1px var(--mdl-ico-ring), 0 6px 14px -10px var(--mdl-ico);
}
body .modal-overlay .modal-ico i { line-height: 1; }

body .modal-overlay .modal-close {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center;
    width: 38px; height: 38px; padding: 0;
    border: 0; border-radius: 12px;
    background: #f1f4f8; color: #1e293b; font-size: .9rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
body .modal-overlay .modal-close:hover { background: #e4e9f0; color: #000; }
body .modal-overlay .modal-close:active { transform: translateY(-50%) scale(.94); }
body .modal-overlay .modal-close:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }
body .modal-overlay .modal-header.mdl-no-close { padding-right: var(--mdl-pad); }

@media (max-width: 767px) {
    body .modal-overlay .modal-header { min-height: 62px; padding-top: 11px; padding-bottom: 11px; }
    body .modal-overlay .modal-title { font-size: 1.02rem; gap: 11px; }
    body .modal-overlay .modal-ico { width: 38px; height: 38px; border-radius: 12px; font-size: 1.02rem; }
}

/* ---- Body ------------------------------------------------------------------------- */

body .modal-overlay .modal-body {
    padding: 20px var(--mdl-pad) calc(22px + var(--safe-b, 0px));
    color: #0f172a;
    scrollbar-width: thin;
    scrollbar-color: #cdd5df transparent;
}
body .modal-overlay .modal-body::-webkit-scrollbar { width: 8px; }
body .modal-overlay .modal-body::-webkit-scrollbar-thumb { background: #cdd5df; border-radius: 8px; border: 2px solid #fff; }
body .modal-overlay .modal > .form-stack,
body .modal-overlay .modal > div:not(.modal-handle):not(.modal-header):not(.modal-body) {
    padding-left: var(--mdl-pad); padding-right: var(--mdl-pad);
}

body .modal-overlay .modal .section-label {
    font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #334155;
}

/* ---- Footer: the actions, pinned to the bottom on every screen ----------------------- */

body .modal-overlay .modal-body.modal-body-has-actions { padding-bottom: 0; }
body .modal-overlay .modal-actions {
    position: sticky; bottom: 0; z-index: 8;
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px;
    margin: 18px calc(-1 * var(--mdl-pad)) 0;
    padding: 12px var(--mdl-pad) calc(12px + var(--safe-b, 0px));
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--mdl-line);
    box-shadow: 0 -14px 30px -22px rgba(15, 23, 42, .3);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
body .modal-overlay .modal-actions .btn,
body .modal-overlay .modal-actions > div > .btn {
    flex: 1 1 9.5rem;
    width: auto !important; min-width: min(100%, 8rem); max-width: 100%;
    min-height: 46px; height: auto; margin: 0 !important;
    padding: 10px 14px !important;
    font-size: .88rem; line-height: 1.2;
    white-space: normal; overflow-wrap: anywhere; text-align: center;
    justify-content: center;
}
body .modal-overlay .modal-actions .modal-primary-action,
body .modal-overlay .modal-actions > div > .modal-primary-action { flex: 999 1 12rem; }
body .modal-overlay .modal-actions .modal-danger-icon,
body .modal-overlay .modal-actions > div > .modal-danger-icon {
    flex: 0 0 46px; width: 46px !important; min-width: 46px; max-width: 46px;
    padding: 0 !important; font-size: 1rem;
    background: #fff; border: 1px solid #fecaca; color: #dc2626;
}
body .modal-overlay .modal-actions .modal-danger-icon:hover { background: #fef2f2; border-color: #fca5a5; }
body .modal-overlay .modal-actions > .btn:only-child,
body .modal-overlay .modal-actions > a.btn:only-child,
body .modal-overlay .modal-actions > button.btn:only-child { flex-basis: 100%; }
body .modal-overlay .modal-actions > div {
    display: flex; flex-wrap: wrap; gap: 8px;
    flex: 1 1 100%; width: 100%; min-width: 0;
}

/* ---- Buttons and fields inside pop-ups --------------------------------------------
   The app-skin pages (body.lp2-app) already style these the same way in
   pages-m2.css; this brings pop-ups opened from the other pages (dashboard,
   admin overview...) in line without touching the skin pages' own tweaks. */

body:not(.lp2-app) .modal-overlay .modal .btn { border-radius: 12px; font-weight: 750; }
body:not(.lp2-app) .modal-overlay .modal .btn-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%);
    border-color: #059669; color: #fff;
    box-shadow: 0 10px 20px -12px rgba(5, 150, 105, .9), inset 0 1px 0 rgba(255, 255, 255, .18);
}
body:not(.lp2-app) .modal-overlay .modal .btn-primary:hover:not(:disabled) { filter: brightness(1.05); }
body:not(.lp2-app) .modal-overlay .modal .btn-outline { background: #fff; border-color: #dbe2ea; color: #0f172a; }
body:not(.lp2-app) .modal-overlay .modal .btn-outline:hover:not(:disabled) { border-color: #94a3b8; background: #f8fafc; color: #000; }
body .modal-overlay .modal .btn-danger {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
    border-color: #dc2626; color: #fff;
    box-shadow: 0 10px 20px -12px rgba(220, 38, 38, .85), inset 0 1px 0 rgba(255, 255, 255, .18);
}

body:not(.lp2-app) .modal-overlay .modal .input-group label,
body:not(.lp2-app) .modal-overlay .modal label.form-label { font-size: .76rem; font-weight: 750; color: #334155; }
body:not(.lp2-app) .modal-overlay .modal input[type="text"], body:not(.lp2-app) .modal-overlay .modal input[type="number"],
body:not(.lp2-app) .modal-overlay .modal input[type="email"], body:not(.lp2-app) .modal-overlay .modal input[type="tel"],
body:not(.lp2-app) .modal-overlay .modal input[type="date"], body:not(.lp2-app) .modal-overlay .modal input[type="time"],
body:not(.lp2-app) .modal-overlay .modal input[type="search"], body:not(.lp2-app) .modal-overlay .modal input[type="password"],
body:not(.lp2-app) .modal-overlay .modal input[type="url"], body:not(.lp2-app) .modal-overlay .modal select, body:not(.lp2-app) .modal-overlay .modal textarea {
    border: 1px solid #dbe2ea; background-color: #fff; color: #000;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body:not(.lp2-app) .modal-overlay .modal input:focus, body:not(.lp2-app) .modal-overlay .modal select:focus, body:not(.lp2-app) .modal-overlay .modal textarea:focus {
    border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); outline: none;
}
body:not(.lp2-app) .modal-overlay .modal input::placeholder, body:not(.lp2-app) .modal-overlay .modal textarea::placeholder { color: #64748b; }

/* Confirm pop-ups (the Settings kit's .st-confirm): the header tile carries
   the icon, so the big centred one in the body is not repeated. */
body .modal-overlay .modal .st-confirm-ic { display: none; }

/* Pop-up forms pair fields two to a row (app.css). A field with no partner
   beside it takes the whole row instead of sitting in half of it. */
body .modal-overlay .modal-body .form-stack > .input-group:not(:has(+ .input-group)):not(.input-group + .input-group) {
    grid-column: 1 / -1;
}

/* Pop-ups that draw their own header (support desk, payment picker...) and
   start the title with an icon: the icon becomes the same tile. */
body .modal-overlay .modal-title > i.bi:first-child {
    flex: none; display: grid; place-items: center;
    width: 40px; height: 40px; margin: 0 !important; border-radius: 13px;
    font-size: 1.08rem; color: var(--mdl-ico) !important;
    background: linear-gradient(150deg, var(--mdl-ico-bg1) 0%, var(--mdl-ico-bg2) 100%);
    box-shadow: inset 0 0 0 1px var(--mdl-ico-ring), 0 6px 14px -10px var(--mdl-ico);
}
@media (max-width: 767px) {
    body .modal-overlay .modal-title > i.bi:first-child { width: 38px; height: 38px; border-radius: 12px; font-size: 1.02rem; }
}
/* the support desk is indigo throughout (pages-growth.css --tk) */
body .modal-overlay #tickets-modal {
    --mdl-glow: rgba(99, 102, 241, .11);
    --mdl-ico: #4338ca; --mdl-ico-bg1: #eef2ff; --mdl-ico-bg2: #e0e7ff; --mdl-ico-ring: rgba(67, 56, 202, .16);
}