/*
 * Saraha mobile-first design system
 * ---------------------------------
 * All classes prefixed with `s-` so they can't collide with the legacy
 * Bootstrap/Argon styles while the migration is in progress. Pages that
 * have been rewritten use only s-* classes (plus lang(), csrf, etc.
 * from the PHP layer). Untouched legacy pages stay on the old CSS.
 *
 * Palette taken from the user's existing purple/navy brand — NOT
 * copied from sarahah.net. Same mobile-first layout pattern, their
 * own visual identity.
 */

/* -------------------------------------------------------------- */
/* 1. Design tokens                                               */
/* -------------------------------------------------------------- */
:root {
    /* Brand — purple/navy gradient from current theme */
    --s-brand-deep:      #1a1f4d;  /* deep navy (header top) */
    --s-brand-primary:   #5c6bf3;  /* blue-violet button */
    --s-brand-primary-2: #8a5cf4;  /* violet (gradient end) */
    --s-brand-accent:    #7b5cff;  /* hover/active */

    /* Backgrounds */
    --s-bg-page:        #f4f6fb;   /* page off-white */
    --s-bg-card:        #ffffff;
    --s-bg-card-tint:   #f8f9fd;
    --s-bg-header:      linear-gradient(135deg, #2a2f75 0%, #6d51c9 55%, #a66fd8 100%);

    /* Text */
    --s-text-strong:   #1f2544;
    --s-text:          #2c3456;
    --s-text-muted:    #6b7597;
    --s-text-faded:    #9aa3c0;
    --s-text-inverse:  #ffffff;

    /* Surfaces */
    --s-border:        #e4e8f2;
    --s-border-soft:   #eef1f7;
    --s-divider:       #edf0f7;

    /* Semantic */
    --s-success:       #21c47a;
    --s-success-soft:  #e5f8ee;
    --s-danger:        #ef476f;
    --s-danger-soft:   #fde8ee;
    --s-warning:       #f5a623;
    --s-warning-soft:  #fff4e0;
    --s-info:          #3da5f5;
    --s-info-soft:     #e4f2fe;

    /* Type */
    --s-font-sans:     "Noto Sans", "Cairo", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
    --s-text-xs:       12px;
    --s-text-sm:       13px;
    --s-text-base:     15px;
    --s-text-md:       16px;
    --s-text-lg:       18px;
    --s-text-xl:       22px;
    --s-text-2xl:      28px;

    /* Space (4px base) */
    --s-space-1: 4px;
    --s-space-2: 8px;
    --s-space-3: 12px;
    --s-space-4: 16px;
    --s-space-5: 20px;
    --s-space-6: 24px;
    --s-space-8: 32px;
    --s-space-10: 40px;
    --s-space-12: 48px;

    /* Radii */
    --s-radius-sm: 8px;
    --s-radius-md: 12px;
    --s-radius-lg: 16px;
    --s-radius-xl: 22px;
    --s-radius-pill: 999px;

    /* Shadows (subtle — mobile looks ugly with heavy shadows) */
    --s-shadow-sm: 0 1px 2px rgba(26,31,77,0.06);
    --s-shadow-md: 0 4px 14px rgba(26,31,77,0.08);
    --s-shadow-lg: 0 10px 28px rgba(26,31,77,0.12);
    --s-shadow-btn: 0 6px 14px rgba(92,107,243,0.35);

    /* Motion */
    --s-transition: 180ms cubic-bezier(.4,0,.2,1);

    /* Layout */
    --s-shell-max:  480px;          /* card width on wide screens */
    --s-safe-top:   env(safe-area-inset-top, 0px);
    --s-safe-bottom:env(safe-area-inset-bottom, 0px);
}

/* -------------------------------------------------------------- */
/* 2. Base reset / page shell                                     */
/* -------------------------------------------------------------- */
body.s-body {
    margin: 0;
    padding: 0;
    background: var(--s-bg-page);
    color: var(--s-text);
    font-family: var(--s-font-sans);
    font-size: var(--s-text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
body.s-body * { box-sizing: border-box; }
body.s-body a,
body.s-body a:hover,
body.s-body .s-footer-links a,
body.s-body .s-footer-links a:hover,
body.s-body .s-credit a,
body.s-body .s-credit a:hover { color: var(--s-brand-primary); text-decoration: none !important; }
body.s-body a:hover { color: var(--s-brand-accent); }
/* Footer nav: auto-dot between items, tight spacing, no underline */
body.s-body .s-footer-links a {
    text-decoration: none !important;
    color: var(--s-text-muted) !important;
    padding: 0 2px;
}
body.s-body .s-footer-links a:hover { color: var(--s-brand-primary) !important; }
body.s-body .s-footer-links a + a::before {
    content: "\00b7";  /* middle dot */
    display: inline-block;
    color: var(--s-border);
    margin: 0 6px;
    font-weight: 700;
}
/* Topbar brand must stay white — override the generic link color */
body.s-body .s-topbar .s-brand,
body.s-body .s-topbar .s-brand:hover,
body.s-body .s-topbar .s-brand span,
body.s-body .s-topbar .s-chip,
body.s-body .s-topbar .s-chip:hover { color: #fff; }
body.s-body img { max-width: 100%; height: auto; display: block; }

/* Mobile shell — narrow column centered, gradient header extends full width */
.s-shell {
    width: 100%;
    min-height: 100vh;
    padding: 0;
    padding-bottom: calc(var(--s-safe-bottom) + var(--s-space-8));
}

.s-container {
    width: 100%;
    max-width: var(--s-shell-max);
    margin: 0 auto;
    padding: 0 var(--s-space-4);
}

/* -------------------------------------------------------------- */
/* 3. Top bar (brand + corner chips)                              */
/* -------------------------------------------------------------- */
.s-topbar {
    position: relative;
    z-index: 40;  /* above cards (z-index:3) so the avatar dropdown can paint on top */
    background: var(--s-bg-header);
    padding: calc(var(--s-safe-top) + var(--s-space-2)) var(--s-space-4) var(--s-space-2);
    color: var(--s-text-inverse);
    /* No overflow:hidden — we need the avatar dropdown to escape the header */
}

.s-topbar-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-space-3);
    z-index: 2;
}
.s-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-space-2);
    color: #fff;
    font-weight: 700;
    font-size: var(--s-text-sm);
    letter-spacing: 0.2px;
    line-height: 1;
}
.s-brand img {
    height: 28px !important;
    width: 28px !important;
    max-width: 28px !important;
    object-fit: contain;
}

/* Corner chips (notification bell, language, menu) */
.s-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: var(--s-transition);
    backdrop-filter: blur(6px);
}
.s-chip:hover,
.s-chip:focus { background: rgba(255,255,255,0.22); color: #fff; }
.s-chip--flag { padding: 2px; overflow: hidden; }
.s-chip--flag img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.s-chip-group { display: inline-flex; gap: var(--s-space-2); }

/* ---- User profile dropdown (topbar) ---- */
.s-user-menu { position: relative; }
.s-user-menu__pop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #fff;
    border-radius: var(--s-radius-md);
    box-shadow: 0 10px 30px rgba(26,31,77,0.22);
    border: 1px solid var(--s-border-soft);
    min-width: 220px;
    max-width: 260px;
    z-index: 500;
    overflow: hidden;
    animation: sUserPopIn 140ms cubic-bezier(.4,0,.2,1);
}
[dir="rtl"] .s-user-menu__pop { right: auto; left: 0; }
/* Ensure the trigger isn't blocked by anything */
.s-user-menu { z-index: 500; }
@keyframes sUserPopIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.s-user-menu__head {
    display: flex;
    align-items: center;
    gap: var(--s-space-2);
    padding: var(--s-space-3) var(--s-space-4);
    background: var(--s-bg-card-tint);
    border-bottom: 1px solid var(--s-border-soft);
}
.s-user-menu__item {
    display: flex;
    align-items: center;
    gap: var(--s-space-3);
    padding: 10px var(--s-space-4);
    color: var(--s-text-strong) !important;
    font-size: var(--s-text-sm);
    text-decoration: none !important;
    transition: var(--s-transition);
}
.s-user-menu__item i {
    width: 18px;
    color: var(--s-brand-primary);
    text-align: center;
    font-size: 14px;
}
.s-user-menu__item:hover {
    background: var(--s-bg-card-tint);
    color: var(--s-brand-primary) !important;
}
.s-user-menu__item--danger { color: var(--s-danger) !important; }
.s-user-menu__item--danger i { color: var(--s-danger); }
.s-user-menu__item--danger:hover { background: var(--s-danger-soft); color: var(--s-danger) !important; }
.s-user-menu__divider {
    height: 1px;
    background: var(--s-border-soft);
    margin: var(--s-space-1) 0;
}
.s-chip-dot {
    position: relative;
}
.s-chip-dot::after {
    content: "";
    position: absolute;
    top: 6px; right: 6px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--s-danger);
    border: 2px solid var(--s-brand-deep);
}

/* -------------------------------------------------------------- */
/* 4. Cards                                                       */
/* -------------------------------------------------------------- */
.s-card {
    background: var(--s-bg-card);
    border-radius: var(--s-radius-lg);
    box-shadow: var(--s-shadow-md);
    padding: var(--s-space-5);
    margin-bottom: var(--s-space-3);
}
.s-card--tight { padding: var(--s-space-4); }
.s-card--flush { padding: 0; overflow: hidden; }
.s-card--tinted { background: var(--s-bg-card-tint); }
.s-card-pull {
    margin-top: var(--s-space-2);
    position: relative;
    z-index: 3;
}
main.s-container,
.s-shell > main,
.s-body > main {
    padding-top: var(--s-space-3);
    padding-bottom: calc(var(--s-safe-bottom) + var(--s-space-6));
}
/* Tiny divider dot between stacked cards (purely decorative) */
/* Tiny middle dot divider between stacked cards */
.s-card + .s-card::before {
    content: "\2022";  /* bullet */
    display: block;
    text-align: center;
    color: var(--s-text-faded);
    font-weight: 700;
    font-size: 10px;
    margin: calc(-1 * var(--s-space-3)) 0 var(--s-space-2);
    line-height: 1;
    opacity: 0.5;
}

.s-card-header {
    padding: var(--s-space-4) var(--s-space-5);
    border-bottom: 1px solid var(--s-border-soft);
    background: var(--s-bg-card-tint);
    font-weight: 600;
    color: var(--s-text-strong);
}
.s-card-body { padding: var(--s-space-5); }
.s-card-footer {
    padding: var(--s-space-4) var(--s-space-5);
    border-top: 1px solid var(--s-border-soft);
    background: var(--s-bg-card-tint);
}

/* -------------------------------------------------------------- */
/* 5. Profile head                                                */
/* -------------------------------------------------------------- */
.s-profile-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: var(--s-space-4);
}
.s-avatar {
    position: relative;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: var(--s-shadow-md);
    background: var(--s-bg-card-tint);
    margin: 0 auto;
}
.s-avatar--xl { width: 128px; height: 128px; }
.s-avatar--sm { width: 40px; height: 40px; border-width: 2px; }
.s-avatar img { width: 100%; height: 100%; object-fit: cover; }
.s-avatar-edit {
    position: absolute;
    bottom: -2px; left: 50%;
    transform: translateX(-50%);
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--s-text-strong);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    cursor: pointer;
    border: 2px solid #fff;
}

.s-profile-name {
    display: inline-flex;
    align-items: center;
    gap: var(--s-space-2);
    font-size: var(--s-text-xl);
    font-weight: 700;
    color: var(--s-text-strong);
    margin-top: var(--s-space-4);
}
.s-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    background: var(--s-danger);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
}
.s-handle {
    color: var(--s-brand-primary);
    font-weight: 600;
    font-size: var(--s-text-lg);
    margin-top: var(--s-space-1);
}
.s-share-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s-space-2);
    margin-top: var(--s-space-3);
    padding: var(--s-space-2) var(--s-space-4);
    background: var(--s-bg-card-tint);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius-pill);
    font-size: var(--s-text-sm);
    color: var(--s-text);
}

/* Counter pills (envelope N, cross N, eye N) */
.s-counters {
    display: flex;
    justify-content: center;
    gap: var(--s-space-5);
    margin-top: var(--s-space-3);
}
.s-counter {
    display: inline-flex;
    align-items: center;
    gap: var(--s-space-2);
    font-weight: 600;
    color: var(--s-text);
}
.s-counter-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    font-size: 12px;
    color: #fff;
    background: var(--s-brand-primary);
}
.s-counter-ico--success { background: var(--s-success); }
.s-counter-ico--danger  { background: var(--s-danger); }
.s-counter-ico--info    { background: var(--s-info); }
.s-counter strong { font-size: var(--s-text-md); color: var(--s-text-strong); }
.s-counter small  { color: var(--s-text-muted); font-weight: 500; font-size: var(--s-text-xs); display: block; }

.s-counter-row {
    display: flex;
    justify-content: space-around;
    padding: var(--s-space-4) 0;
    gap: var(--s-space-4);
}
.s-counter-col { text-align: center; flex: 1; }
.s-counter-col .s-counter-num {
    font-size: var(--s-text-xl);
    font-weight: 700;
    color: var(--s-text-strong);
    display: block;
}
.s-counter-col .s-counter-lbl {
    font-size: var(--s-text-sm);
    color: var(--s-text-muted);
}

/* -------------------------------------------------------------- */
/* 6. Buttons                                                     */
/* -------------------------------------------------------------- */
.s-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-space-2);
    padding: 14px var(--s-space-5);
    min-height: 52px;
    border: 0;
    border-radius: var(--s-radius-md);
    font-family: inherit;
    font-size: var(--s-text-md);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: var(--s-transition);
    width: 100%;
    -webkit-appearance: none;
            appearance: none;
}
.s-btn:active  { transform: translateY(1px); }
.s-btn:disabled,
.s-btn.is-disabled { opacity: 0.55; pointer-events: none; }

/* Duplicate-submit guard state — applied by lockSubmit()/lockButton() in core_i18n.js.
   The button is also :disabled so it can't be re-clicked; this just adds a tiny
   inline spinner so the user sees that something is happening. */
.s-is-loading {
    position: relative;
    cursor: progress !important;
}
.s-is-loading::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: s-spin 0.7s linear infinite;
}
@keyframes s-spin { to { transform: rotate(360deg); } }

.s-btn--primary {
    background: var(--s-brand-primary);
    color: #fff;
    box-shadow: var(--s-shadow-btn);
}
.s-btn--primary:hover { background: var(--s-brand-accent); color: #fff; }

.s-btn--success { background: var(--s-success); color: #fff; }
.s-btn--info    { background: var(--s-info);    color: #fff; }
.s-btn--violet  { background: var(--s-brand-primary-2); color: #fff; }
.s-btn--danger  { background: var(--s-danger);  color: #fff; }

.s-btn--ghost {
    background: transparent;
    color: var(--s-brand-primary);
    border: 1.5px solid var(--s-brand-primary);
    box-shadow: none;
}
.s-btn--neutral {
    background: var(--s-bg-card-tint);
    color: var(--s-text-strong);
    border: 1px solid var(--s-border);
}
.s-btn--dark {
    background: var(--s-text-strong);
    color: #fff;
}
.s-btn--inline { width: auto; padding-left: var(--s-space-4); padding-right: var(--s-space-4); }
.s-btn--sm     { min-height: 40px; padding: 10px var(--s-space-4); font-size: var(--s-text-sm); }

/* Topbar CTA — white pill with brand-coloured text, stands out on purple gradient */
.s-btn--topbar {
    background: #fff;
    color: var(--s-brand-primary);
    border: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    font-weight: 700;
    padding: 4px var(--s-space-3);
    min-height: 30px;
    border-radius: var(--s-radius-pill);
    font-size: 12px;
    width: auto;
    line-height: 1;
}
.s-btn--topbar:hover { background: #fff; color: var(--s-brand-accent); }

.s-btn-stack { display: flex; flex-direction: column; gap: var(--s-space-3); }
.s-btn-row   { display: flex; gap: var(--s-space-3); }
.s-btn-row .s-btn { flex: 1; }

/* -------------------------------------------------------------- */
/* 7. List rows (messages, settings, menu)                        */
/* -------------------------------------------------------------- */
.s-list { display: flex; flex-direction: column; gap: var(--s-space-2); }
.s-list-item {
    display: flex;
    align-items: center;
    gap: var(--s-space-4);
    padding: var(--s-space-4);
    background: var(--s-bg-card);
    border: 1px solid var(--s-border-soft);
    border-radius: var(--s-radius-lg);
    color: var(--s-text-strong);
    text-decoration: none;
    transition: var(--s-transition);
}
.s-list-item:hover { border-color: var(--s-brand-primary); color: var(--s-text-strong); }
.s-list-item__ico {
    flex: none;
    width: 44px; height: 44px;
    border-radius: var(--s-radius-md);
    background: var(--s-brand-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.s-list-item__ico--success { background: var(--s-success); }
.s-list-item__ico--warning { background: var(--s-warning); }
.s-list-item__ico--danger  { background: var(--s-danger); }
.s-list-item__ico--info    { background: var(--s-info); }
.s-list-item__ico--violet  { background: var(--s-brand-primary-2); }
.s-list-item__body { flex: 1; min-width: 0; }
.s-list-item__title { font-weight: 600; color: var(--s-text-strong); }
.s-list-item__sub   { font-size: var(--s-text-sm); color: var(--s-text-muted); margin-top: 2px; }
.s-list-item__chev  { color: var(--s-text-faded); font-size: 14px; flex: none; }

/* Section headings between groups of list items */
.s-section-title {
    padding: var(--s-space-4) var(--s-space-2) var(--s-space-2);
    font-size: var(--s-text-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--s-text-faded);
    font-weight: 700;
}

/* -------------------------------------------------------------- */
/* 8. Inputs                                                      */
/* -------------------------------------------------------------- */
.s-field {
    display: flex;
    flex-direction: column;
    gap: var(--s-space-2);
    margin-bottom: var(--s-space-4);
}
/* Slightly larger gap before the primary submit button inside a form */
.s-field + .s-btn--primary,
.s-field + .s-btn-row,
.s-field + .s-btn-stack,
.s-checkbox + .s-btn--primary { margin-top: var(--s-space-2); }
/* Spacing for stacked cards — override the middle-dot to add a bit more breathing room */
.s-card + .s-card { margin-top: var(--s-space-3); }
.s-label {
    font-size: var(--s-text-sm);
    font-weight: 600;
    color: var(--s-text-strong);
}
.s-input, .s-textarea, .s-select {
    width: 100%;
    padding: 14px var(--s-space-4);
    background: var(--s-bg-card);
    border: 1.5px solid var(--s-border);
    border-radius: var(--s-radius-md);
    font: inherit;
    font-size: var(--s-text-base);
    color: var(--s-text-strong);
    transition: var(--s-transition);
}
.s-input:focus, .s-textarea:focus, .s-select:focus {
    outline: none;
    border-color: var(--s-brand-primary);
    box-shadow: 0 0 0 3px rgba(92,107,243,0.12);
}
.s-textarea { min-height: 140px; resize: vertical; line-height: 1.5; }

.s-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--s-bg-card);
    border: 1.5px solid var(--s-border);
    border-radius: var(--s-radius-md);
    transition: var(--s-transition);
}
.s-input-group:focus-within {
    border-color: var(--s-brand-primary);
    box-shadow: 0 0 0 3px rgba(92,107,243,0.12);
}
.s-input-group-ico {
    display: flex; align-items: center; justify-content: center;
    padding: 0 var(--s-space-4);
    color: var(--s-text-muted);
    border-right: 1px solid var(--s-border);
}
[dir="rtl"] .s-input-group-ico { border-right: 0; border-left: 1px solid var(--s-border); }
.s-input-group .s-input {
    border: 0;
    border-radius: 0;
    background: transparent;
}
.s-input-group .s-input:focus { box-shadow: none; }

.s-helper {
    font-size: var(--s-text-sm);
    color: var(--s-text-muted);
}
.s-error-text {
    color: var(--s-danger);
    font-size: var(--s-text-sm);
}

/* Radio tile / checkbox */
.s-radio-group { display: flex; gap: var(--s-space-3); }
.s-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--s-space-2);
    padding: var(--s-space-2) var(--s-space-3);
    border-radius: var(--s-radius-pill);
    border: 1.5px solid var(--s-border);
    cursor: pointer;
    font-size: var(--s-text-sm);
    transition: var(--s-transition);
}
.s-radio input { accent-color: var(--s-brand-primary); }
.s-radio.is-active {
    border-color: var(--s-brand-primary);
    background: rgba(92,107,243,0.08);
    color: var(--s-brand-primary);
    font-weight: 600;
}

.s-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--s-space-2);
    font-size: var(--s-text-sm);
    cursor: pointer;
    color: var(--s-text);
}
.s-checkbox input { accent-color: var(--s-brand-primary); width: 18px; height: 18px; }

/* -------------------------------------------------------------- */
/* 9. Empty state                                                 */
/* -------------------------------------------------------------- */
.s-empty {
    border: 1.5px dashed var(--s-border);
    border-radius: var(--s-radius-lg);
    padding: var(--s-space-8) var(--s-space-5);
    text-align: center;
    color: var(--s-text-muted);
}
.s-empty-ico {
    width: 56px; height: 56px;
    margin: 0 auto var(--s-space-3);
    display: flex; align-items: center; justify-content: center;
    background: var(--s-danger-soft);
    color: var(--s-danger);
    border-radius: 50%;
    font-size: 22px;
}
.s-empty-title {
    color: var(--s-danger);
    font-weight: 700;
    font-size: var(--s-text-lg);
    margin-bottom: var(--s-space-2);
}

/* -------------------------------------------------------------- */
/* 10. Frames picker (message backdrops)                          */
/* -------------------------------------------------------------- */
.s-frames-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-space-3);
}
.s-frame-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--s-radius-md);
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    background: var(--s-bg-card-tint);
    transition: var(--s-transition);
}
.s-frame-tile img { width: 100%; height: 100%; object-fit: cover; }
.s-frame-tile.is-active { border-color: var(--s-brand-primary); }
.s-frame-tile.is-none {
    background: var(--s-bg-card);
    border: 2px dashed var(--s-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--s-text-faded);
}

/* -------------------------------------------------------------- */
/* 11. Message composer                                           */
/* -------------------------------------------------------------- */
.s-composer {
    position: relative;
    border: 1.5px solid var(--s-border);
    border-radius: var(--s-radius-lg);
    padding: var(--s-space-4);
    background: var(--s-bg-card);
}
.s-composer-body {
    min-height: 160px;
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--s-text-base);
    color: var(--s-text-strong);
    resize: vertical;
    outline: none;
}
.s-composer-watermark {
    text-align: center;
    font-size: var(--s-text-sm);
    color: var(--s-text-muted);
    font-weight: 600;
    margin-top: var(--s-space-2);
}
.s-composer-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--s-text-xs);
    color: var(--s-text-muted);
    margin-top: var(--s-space-2);
}

/* -------------------------------------------------------------- */
/* 12. Messages list (inbox)                                      */
/* -------------------------------------------------------------- */
.s-msg {
    background: var(--s-bg-card);
    border-radius: var(--s-radius-lg);
    padding: var(--s-space-4) var(--s-space-5);
    box-shadow: var(--s-shadow-sm);
    margin-bottom: var(--s-space-3);
}
.s-msg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-space-3);
    margin-bottom: var(--s-space-2);
}
.s-msg-from {
    font-size: var(--s-text-sm);
    color: var(--s-text-muted);
}
.s-msg-time {
    font-size: var(--s-text-xs);
    color: var(--s-text-faded);
    white-space: nowrap;
}
.s-msg-body {
    color: var(--s-text-strong);
    line-height: 1.55;
}
.s-msg-actions {
    display: flex;
    gap: var(--s-space-2);
    margin-top: var(--s-space-3);
    padding-top: var(--s-space-3);
    border-top: 1px dashed var(--s-divider);
    flex-wrap: wrap;
}
.s-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s-space-1);
    padding: 6px var(--s-space-3);
    border-radius: var(--s-radius-pill);
    background: var(--s-bg-card-tint);
    color: var(--s-text-muted);
    font-size: var(--s-text-xs);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--s-border-soft);
    transition: var(--s-transition);
}
.s-pill.is-active { color: var(--s-danger); background: var(--s-danger-soft); border-color: var(--s-danger-soft); }
.s-pill--primary { color: var(--s-brand-primary); }
.s-pill--success { color: var(--s-success); }

/* -------------------------------------------------------------- */
/* 13. Footer                                                     */
/* -------------------------------------------------------------- */
.s-footer {
    padding: var(--s-space-6) var(--s-space-4) calc(var(--s-safe-bottom) + var(--s-space-6));
    color: var(--s-text-muted);
    font-size: var(--s-text-sm);
}
.s-footer hr {
    border: 0;
    border-top: 1px solid var(--s-border-soft);
    margin: var(--s-space-4) 0;
}
.s-footer-links { display: flex; flex-wrap: wrap; gap: var(--s-space-4); }
.s-footer-links a { color: var(--s-text-muted); }
.s-footer-social { display: inline-flex; gap: var(--s-space-2); }
.s-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    color: #fff;
    background: var(--s-brand-primary);
}
.s-social-btn--fb { background: #1877F2; }
.s-social-btn--ig { background: #3ea9f5; }
.s-social-btn--tw { background: #1da1f2; }
.s-social-btn--li { background: #0a66c2; }
.s-credit {
    text-align: center;
    font-size: var(--s-text-xs);
    color: var(--s-text-faded);
    margin-top: var(--s-space-4);
}
.s-credit a { color: var(--s-brand-primary); font-weight: 600; }

/* -------------------------------------------------------------- */
/* 14. Language dropdown                                          */
/* -------------------------------------------------------------- */
.s-lang {
    display: inline-flex;
    align-items: center;
    gap: var(--s-space-2);
    font-weight: 600;
    color: var(--s-text-muted);
    cursor: pointer;
}
.s-lang i { color: var(--s-brand-primary); }
.s-lang-menu {
    background: var(--s-bg-card);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius-md);
    box-shadow: var(--s-shadow-lg);
    padding: var(--s-space-2);
    max-height: 300px;
    overflow-y: auto;
}
.s-lang-menu a {
    display: block;
    padding: 10px var(--s-space-3);
    color: var(--s-text);
    border-radius: var(--s-radius-sm);
}
.s-lang-menu a:hover { background: var(--s-bg-card-tint); }

/* -------------------------------------------------------------- */
/* 15. Admin shell                                                */
/* -------------------------------------------------------------- */
.s-admin-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--s-bg-page);
}
.s-admin-topbar {
    position: sticky;
    top: 0; z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--s-border-soft);
    padding: var(--s-space-3) var(--s-space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
}
.s-admin-content { flex: 1; padding: var(--s-space-4) 0 calc(var(--s-safe-bottom) + var(--s-space-6)); }
.s-admin-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(84vw, 320px);
    background: #fff;
    box-shadow: var(--s-shadow-lg);
    padding: var(--s-space-4);
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
}
.s-admin-drawer.is-open { transform: translateX(0); }
.s-admin-scrim {
    position: fixed; inset: 0;
    background: rgba(26,31,77,0.35);
    z-index: 35;
    opacity: 0; pointer-events: none;
    transition: opacity 180ms;
}
.s-admin-scrim.is-open { opacity: 1; pointer-events: auto; }

/* Stat card for admin dashboard */
.s-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-space-3);
    background: var(--s-bg-card);
    border-radius: var(--s-radius-lg);
    padding: var(--s-space-5);
    box-shadow: var(--s-shadow-sm);
    margin-bottom: var(--s-space-3);
}
.s-stat__label { font-size: var(--s-text-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--s-text-faded); font-weight: 700; }
.s-stat__value { font-size: var(--s-text-2xl); font-weight: 800; color: var(--s-text-strong); line-height: 1.1; }
.s-stat__delta { font-size: var(--s-text-sm); color: var(--s-success); margin-top: var(--s-space-1); }
.s-stat__ico {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px;
    background: var(--s-brand-primary);
    flex: none;
}

/* Mobile-friendly data table: collapse rows into card stacks <= 640px */
.s-table-scroll {
    background: var(--s-bg-card);
    border-radius: var(--s-radius-lg);
    box-shadow: var(--s-shadow-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.s-table-scroll table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: var(--s-text-sm);
}
.s-table-scroll th, .s-table-scroll td {
    padding: var(--s-space-3) var(--s-space-4);
    text-align: left;
    border-bottom: 1px solid var(--s-border-soft);
}
.s-table-scroll th { background: var(--s-bg-card-tint); color: var(--s-text-faded); text-transform: uppercase; font-size: var(--s-text-xs); letter-spacing: 1px; }
[dir="rtl"] .s-table-scroll th,
[dir="rtl"] .s-table-scroll td { text-align: right; }

/* -------------------------------------------------------------- */
/* 16. Toast overrides (match design system)                      */
/* -------------------------------------------------------------- */
/* ---- Compact toastr notifications (thin bar at top) ---- */
body.s-body #toast-container {
    font-family: var(--s-font-sans) !important;
    top: env(safe-area-inset-top, 0px) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    pointer-events: none !important;
}
body.s-body #toast-container.toast-top-full-width,
body.s-body #toast-container.toast-top-right,
body.s-body #toast-container.toast-top-center,
body.s-body #toast-container.toast-top-left {
    top: env(safe-area-inset-top, 0px) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
}
body.s-body #toast-container > div {
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(26,31,77,0.08) !important;
    opacity: 1 !important;
    padding: 8px var(--s-space-4) !important;
    background-image: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    border: 0 !important;
    color: var(--s-text-strong) !important;
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    pointer-events: auto !important;
}
body.s-body #toast-container > .toast-success {
    background: var(--s-success-soft) !important;
    border-color: rgba(33,196,122,0.25) !important;
    color: #0d7a48 !important;
}
body.s-body #toast-container > .toast-error {
    background: var(--s-danger-soft) !important;
    border-color: rgba(239,71,111,0.25) !important;
    color: #8d2039 !important;
}
body.s-body #toast-container > .toast-info {
    background: var(--s-info-soft) !important;
    border-color: rgba(61,165,245,0.25) !important;
    color: #1968a9 !important;
}
body.s-body #toast-container > .toast-warning {
    background: var(--s-warning-soft) !important;
    border-color: rgba(245,166,35,0.3) !important;
    color: #8d6213 !important;
}
body.s-body #toast-container > div .toast-title,
body.s-body #toast-container > div .toast-message {
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.s-body #toast-container > div .toast-title + .toast-message { margin-left: 6px !important; }
body.s-body #toast-container > div .toast-close-button {
    color: inherit !important;
    opacity: 0.5 !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    text-shadow: none !important;
    line-height: 1 !important;
    top: 6px !important;
    right: 10px !important;
}
body.s-body #toast-container > div .toast-close-button:hover { opacity: 0.9 !important; }
/* Toastr embeds the status icon as a background-image; hide it entirely */
body.s-body #toast-container > .toast-success,
body.s-body #toast-container > .toast-error,
body.s-body #toast-container > .toast-info,
body.s-body #toast-container > .toast-warning { background-image: none !important; }

/* Legacy Bootstrap .alert overrides on mobile pages for consistency */
body.s-body .alert {
    border-radius: var(--s-radius-md) !important;
    border: 1px solid transparent !important;
    padding: var(--s-space-3) var(--s-space-4) !important;
    font-size: var(--s-text-sm) !important;
    box-shadow: var(--s-shadow-sm) !important;
}
body.s-body .alert-success { background: var(--s-success-soft) !important; color: #0d7a48 !important; border-color: rgba(33,196,122,0.25) !important; }
body.s-body .alert-danger,
body.s-body .alert-error   { background: var(--s-danger-soft)  !important; color: #8d2039 !important; border-color: rgba(239,71,111,0.25) !important; }
body.s-body .alert-info    { background: var(--s-info-soft)    !important; color: #1968a9 !important; border-color: rgba(61,165,245,0.25) !important; }
body.s-body .alert-warning { background: var(--s-warning-soft) !important; color: #8d6213 !important; border-color: rgba(245,166,35,0.30) !important; }

/* ---- SweetAlert2 overrides — match mobile theme ---- */
body.s-body .swal2-container .swal2-popup {
    border-radius: var(--s-radius-lg) !important;
    padding: var(--s-space-6) var(--s-space-5) var(--s-space-5) !important;
    font-family: var(--s-font-sans) !important;
    box-shadow: var(--s-shadow-lg) !important;
    max-width: 340px !important;
}
body.s-body .swal2-container .swal2-title {
    color: var(--s-text-strong) !important;
    font-size: var(--s-text-xl) !important;
    font-weight: 700 !important;
    margin: var(--s-space-3) 0 var(--s-space-2) !important;
    padding: 0 !important;
}
body.s-body .swal2-container .swal2-html-container,
body.s-body .swal2-container .swal2-content {
    color: var(--s-text-muted) !important;
    font-size: var(--s-text-sm) !important;
    margin: 0 0 var(--s-space-4) !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}
/* Icon container — soft circle */
body.s-body .swal2-container .swal2-icon {
    width: 60px !important;
    height: 60px !important;
    border-width: 2px !important;
    margin: 0 auto var(--s-space-3) !important;
}
body.s-body .swal2-container .swal2-icon.swal2-warning {
    border-color: rgba(239,71,111,0.35) !important;
    background: var(--s-danger-soft) !important;
    color: var(--s-danger) !important;
}
body.s-body .swal2-container .swal2-icon.swal2-warning .swal2-icon-content {
    color: var(--s-danger) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
}
body.s-body .swal2-container .swal2-icon.swal2-success {
    border-color: rgba(33,196,122,0.35) !important;
    background: var(--s-success-soft) !important;
    color: var(--s-success) !important;
}
body.s-body .swal2-container .swal2-icon.swal2-success .swal2-success-line-tip,
body.s-body .swal2-container .swal2-icon.swal2-success .swal2-success-line-long { background-color: var(--s-success) !important; }
body.s-body .swal2-container .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(33,196,122,0.35) !important; }
body.s-body .swal2-container .swal2-icon.swal2-info {
    border-color: rgba(61,165,245,0.35) !important;
    background: var(--s-info-soft) !important;
    color: var(--s-info) !important;
}
body.s-body .swal2-container .swal2-icon.swal2-error {
    border-color: rgba(239,71,111,0.35) !important;
    background: var(--s-danger-soft) !important;
    color: var(--s-danger) !important;
}
body.s-body .swal2-container .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--s-danger) !important; }

/* Action buttons — use our pill style */
body.s-body .swal2-container .swal2-actions {
    margin: var(--s-space-3) 0 0 !important;
    gap: var(--s-space-2) !important;
}
body.s-body .swal2-container .swal2-styled {
    border-radius: var(--s-radius-md) !important;
    padding: 10px var(--s-space-4) !important;
    font-size: var(--s-text-sm) !important;
    font-weight: 600 !important;
    min-height: 40px !important;
    box-shadow: none !important;
    transition: var(--s-transition) !important;
    margin: 0 !important;
    font-family: var(--s-font-sans) !important;
}
body.s-body .swal2-container .swal2-styled.swal2-confirm {
    background: var(--s-danger) !important;
    color: #fff !important;
    border: 0 !important;
}
body.s-body .swal2-container .swal2-styled.swal2-confirm:hover  { background: #d93461 !important; }
body.s-body .swal2-container .swal2-styled.swal2-cancel {
    background: var(--s-bg-card-tint) !important;
    color: var(--s-text-strong) !important;
    border: 1px solid var(--s-border) !important;
}
body.s-body .swal2-container .swal2-styled.swal2-cancel:hover { background: var(--s-divider) !important; }
body.s-body .swal2-container .swal2-styled:focus { box-shadow: 0 0 0 3px rgba(92,107,243,0.15) !important; }

/* Inputs inside SA2 */
body.s-body .swal2-container .swal2-input,
body.s-body .swal2-container .swal2-textarea {
    border: 1.5px solid var(--s-border) !important;
    border-radius: var(--s-radius-md) !important;
    font-family: var(--s-font-sans) !important;
    font-size: var(--s-text-base) !important;
    box-shadow: none !important;
    padding: 12px var(--s-space-4) !important;
}
body.s-body .swal2-container .swal2-input:focus,
body.s-body .swal2-container .swal2-textarea:focus {
    border-color: var(--s-brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(92,107,243,0.12) !important;
}

/* Backdrop */
body.s-body .swal2-container.swal2-backdrop-show { background: rgba(26,31,77,0.45) !important; }

/* ---- Bootstrap modal overrides (photo modal, question-add modal, etc.) ---- */
body.s-body .modal-content {
    border-radius: var(--s-radius-lg) !important;
    border: 0 !important;
    box-shadow: var(--s-shadow-lg) !important;
    font-family: var(--s-font-sans) !important;
}
body.s-body .modal-header {
    border-bottom: 1px solid var(--s-border-soft) !important;
    padding: var(--s-space-4) var(--s-space-5) !important;
}
body.s-body .modal-header .modal-title,
body.s-body .modal-header h6 {
    color: var(--s-text-strong) !important;
    font-size: var(--s-text-lg) !important;
    font-weight: 700 !important;
}
body.s-body .modal-header .close {
    color: var(--s-text-muted) !important;
    text-shadow: none !important;
    opacity: 0.65 !important;
    font-weight: 300 !important;
    font-size: 24px !important;
}
body.s-body .modal-header .close:hover { opacity: 1 !important; }
body.s-body .modal-body  { padding: var(--s-space-4) var(--s-space-5) !important; color: var(--s-text) !important; }
body.s-body .modal-footer {
    padding: var(--s-space-3) var(--s-space-5) var(--s-space-4) !important;
    border-top: 1px solid var(--s-border-soft) !important;
    gap: var(--s-space-2) !important;
}
body.s-body .modal-backdrop.show { opacity: 0.45 !important; background: #1a1f4d !important; }

/* -------------------------------------------------------------- */
/* 17. Utilities                                                  */
/* -------------------------------------------------------------- */
.s-hide           { display: none !important; }
.s-text-center    { text-align: center; }
.s-text-muted     { color: var(--s-text-muted); }
.s-text-danger    { color: var(--s-danger); }
.s-text-success   { color: var(--s-success); }
.s-fs-sm          { font-size: var(--s-text-sm); }
.s-fw-bold        { font-weight: 700; }
.s-mt-1 { margin-top: var(--s-space-1); }
.s-mt-2 { margin-top: var(--s-space-2); }
.s-mt-3 { margin-top: var(--s-space-3); }
.s-mt-4 { margin-top: var(--s-space-4); }
.s-mt-6 { margin-top: var(--s-space-6); }
.s-mb-0 { margin-bottom: 0; }
.s-mb-2 { margin-bottom: var(--s-space-2); }
.s-mb-4 { margin-bottom: var(--s-space-4); }
.s-mb-6 { margin-bottom: var(--s-space-6); }
.s-gap-1 { gap: var(--s-space-1); }
.s-gap-2 { gap: var(--s-space-2); }
.s-gap-3 { gap: var(--s-space-3); }
.s-gap-4 { gap: var(--s-space-4); }
.s-flex  { display: flex; }
.s-flex-col { display: flex; flex-direction: column; }
.s-items-center { align-items: center; }
.s-justify-between { justify-content: space-between; }
.s-justify-center  { justify-content: center; }
.s-flex-1 { flex: 1; }
.s-full   { width: 100%; }

/* -------------------------------------------------------------- */
/* 18. Responsive — scale for tablet/desktop                      */
/* -------------------------------------------------------------- */
@media (min-width: 640px) {
    .s-container { padding: 0 var(--s-space-6); }
}
@media (min-width: 900px) {
    /* On desktop: keep card column narrow, but let topbar/footer span full width
       and just center their *inner* s-container. Avoids the awkward floating
       narrow header when viewed on a laptop. */
    body.s-body {
        background: var(--s-bg-page);
    }
    .s-container {
        max-width: 520px;
    }
    .s-topbar,
    .s-footer {
        width: 100%;
    }
}

/* -------------------------------------------------------------- */
/* 19. RTL refinements                                            */
/* -------------------------------------------------------------- */
[dir="rtl"] .s-list-item__chev { transform: scaleX(-1); }
[dir="rtl"] .s-footer-links { flex-direction: row-reverse; justify-content: flex-end; }


/* ---- SweetAlert2 toast mixin (showToast() uses Swal.mixin with toast:true) ---- */
/* Turn them into thin full-width bars at the top of the viewport. */
body.s-body .swal2-container.swal2-top-right,
body.s-body .swal2-container.swal2-top-start,
body.s-body .swal2-container.swal2-top-end,
body.s-body .swal2-container.swal2-top,
body.s-body .swal2-container.custom-swal-container {
    position: fixed !important;
    top: env(safe-area-inset-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    padding: 0 !important;
    background: transparent !important;
    align-items: flex-start !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 2000 !important;
}
body.s-body .swal2-container .swal2-toast,
body.s-body .swal2-popup.custom-swal-popup,
body.s-body .swal2-popup.swal2-toast {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* min-height so even if message text is short we get a proper bar,
       not the 3-5px sliver the user was seeing on the Hostinger deploy. */
    min-height: 36px !important;
    margin: 0 !important;
    padding: 10px var(--s-space-4) !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(26,31,77,0.08) !important;
    font-family: var(--s-font-sans) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--s-text-strong) !important;
    text-align: center !important;
    pointer-events: auto !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}
/* Hide the SA2 toast icon entirely — the coloured background tint already tells
   the user whether it's success/error/info/warning. Keeps the bar a single line. */
body.s-body .swal2-popup.custom-swal-popup .swal2-icon,
body.s-body .swal2-popup.swal2-toast .swal2-icon {
    display: none !important;
}

/* Message color tint */
body.s-body .swal2-popup.custom-swal-popup-success { background: var(--s-success-soft) !important; color: #0d7a48 !important; }
body.s-body .swal2-popup.custom-swal-popup-error   { background: var(--s-danger-soft)  !important; color: #8d2039 !important; }
body.s-body .swal2-popup.custom-swal-popup-info    { background: var(--s-info-soft)    !important; color: #1968a9 !important; }
body.s-body .swal2-popup.custom-swal-popup-warning { background: var(--s-warning-soft) !important; color: #8d6213 !important; }

body.s-body .swal2-popup.custom-swal-popup .swal2-title,
body.s-body .swal2-popup.custom-swal-popup .swal2-html-container,
body.s-body .swal2-popup.custom-swal-popup .swal2-content,
body.s-body .swal2-popup.custom-swal-popup #swal2-content,
body.s-body .swal2-popup.swal2-toast .swal2-title,
body.s-body .swal2-popup.swal2-toast .swal2-html-container,
body.s-body .swal2-popup.swal2-toast .swal2-content,
body.s-body .swal2-popup.swal2-toast #swal2-content {
    /* Force the text containers to render. SA2 v8 occasionally leaves
       display:none on .swal2-content which, combined with icon hidden,
       left the toast as a thin empty green sliver on the Hostinger deploy. */
    display: block !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
}
/* The SA2 header wrapper holds the icon (hidden) + title. Force it visible
   too so the title line doesn't collapse. */
body.s-body .swal2-popup.custom-swal-popup .swal2-header,
body.s-body .swal2-popup.swal2-toast .swal2-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
}
body.s-body .swal2-popup.custom-swal-popup .swal2-close {
    position: absolute !important;
    right: 8px !important;
    top: 4px !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 14px !important;
    color: inherit !important;
    opacity: 0.5 !important;
}