/* ============================================================
   POPUP KIT — the house look for every SweetAlert in the solution
   ============================================================

   Design: a coloured band carries the title (navy confirm, red danger/error,
   amber warning, green done), the body holds either counts, a "what this will
   do" list, or one paragraph, and the buttons sit at the end of the card. The
   big 5em icon circle is hidden — the band says what the icon used to say, in
   41px instead of 140.

   The band colour comes from the popup's existing `icon:` option: swal-kit.js
   turns that into a swk--* class on the popup, so all ~1,000 existing
   Swal.fire calls get the right colour with no change at the call site.

   Both themes: the popup surface follows the page (theme-base sets it from
   --bs-body-bg), while the band and buttons keep one fixed set of colours that
   reads correctly on a light card and a dark card alike. The neutral fills
   inside the body are grey translucency for the same reason.

   Right-to-left: padding and alignment use logical properties, so Arabic,
   Kurdish and Persian mirror correctly.

   Loaded by every page layout, last. */

/* ---------- no big icon (toasts keep their small inline one) ---------- */
.swal2-popup:not(.swal2-toast) .swal2-icon {
    display: none !important;
}

/* ---------- the card ---------- */
.swal2-popup.swk:not(.swal2-toast) {
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden;
    width: 32em;
    max-width: calc(100vw - 28px);
    text-align: start;
}

/* ---------- the band ---------- */
.swal2-popup.swk:not(.swal2-toast) .swal2-title {
    background: var(--swk-key, #2c4a6e);
    color: #fff !important;
    margin: 0 !important;
    padding: 12px 18px !important;
    font-size: 1rem !important;
    font-weight: 700;
    line-height: 1.3;
    text-align: start !important;
    letter-spacing: -0.01em;
}

/* Kind colours — set by swal-kit.js from the popup's icon option */
.swal2-popup.swk--go { --swk-key: #2c4a6e; }      /* confirm / info */
.swal2-popup.swk--danger { --swk-key: #c0342c; }  /* destructive / error */
.swal2-popup.swk--warn { --swk-key: #b45309; }    /* warning */
.swal2-popup.swk--good { --swk-key: #15803d; }    /* done */

/* ---------- the body ---------- */
.swal2-popup.swk:not(.swal2-toast) .swal2-html-container {
    margin: 0 !important;
    padding: 16px 18px 2px !important;
    text-align: start !important;
    font-size: 1.05rem;
    line-height: 1.55;
    overflow: visible;
}

/* ---------- the buttons ---------- */
.swal2-popup.swk:not(.swal2-toast) .swal2-actions {
    margin: 0 !important;
    padding: 16px 18px 18px !important;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.swal2-popup.swk:not(.swal2-toast) .swal2-styled {
    margin: 0 !important;
    border-radius: 9px !important;
    padding: 9px 18px !important;
    font-size: 0.95rem !important;
    font-weight: 600;
    box-shadow: none !important;
}

.swal2-popup.swk:not(.swal2-toast) .swal2-styled.swal2-confirm,
.swal2-popup.swk:not(.swal2-toast) .swal2-styled.swal2-deny {
    background: var(--swk-key, #2c4a6e) !important;
    color: #fff !important;
    border: 1px solid var(--swk-key, #2c4a6e) !important;
}

.swal2-popup.swk:not(.swal2-toast) .swal2-styled.swal2-cancel {
    background: rgba(128, 128, 128, 0.16) !important;
    color: inherit !important;
    border: 1px solid rgba(128, 128, 128, 0.38) !important;
}

.swal2-popup.swk:not(.swal2-toast) .swal2-styled:focus-visible {
    outline: 2px solid var(--swk-key, #2c4a6e) !important;
    outline-offset: 2px;
}

/* ---------- body pieces (built by swal-kit.js) ---------- */
.swk-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.swk-tile {
    background: rgba(128, 128, 128, 0.12);
    border: 1px solid rgba(128, 128, 128, 0.28);
    border-radius: 10px;
    padding: 9px 8px;
    text-align: center;
}

.swk-tile b {
    display: block;
    font-size: 1.32rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.swk-tile span {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.75;
    margin-top: 3px;
}

.swk-tile--key b { color: var(--swk-key, #2c4a6e); }

.swk-rows {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(128, 128, 128, 0.28);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.swk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px;
    background: rgba(128, 128, 128, 0.10);
    font-size: 1rem;
}

.swk-row + .swk-row { border-top: 1px solid rgba(128, 128, 128, 0.28); }
.swk-row span { opacity: 0.8; }
.swk-row b { font-weight: 700; font-variant-numeric: tabular-nums; }

.swk-note {
    display: block;
    background: rgba(128, 128, 128, 0.12);
    border: 1px solid rgba(128, 128, 128, 0.28);
    border-inline-start: 3px solid var(--swk-key, #2c4a6e);
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 1rem;
    margin-bottom: 12px;
}

/* The sentence is the point of the popup — full strength, never faded.
   pre-line so a message written as separate lines (the start-time guard lists
   the start date, the time now and how late it is) reads as separate lines
   instead of running together. */
.swk-text { margin: 0 0 10px; white-space: pre-line; }
.swk-text strong { font-weight: 700; }

.swal2-popup.swk:not(.swal2-toast) .swal2-html-container,
.swk-big-body { white-space: pre-line; }

/* ============================================================
   RESULT MESSAGES — the big mark
   ============================================================
   A popup that only reports an outcome (a success, an error, a warning with
   nothing to decide) drops the band and becomes a washed panel with a 64px
   mark and the outcome in large type. swal-kit.js decides which popups these
   are and builds the markup; every existing call is unchanged.

   The big title deliberately inherits the popup's own text colour, so it is
   dark on a light card and light on a dark card with no chance of a mismatch;
   the colour of the moment is carried by the ring and the wash behind it. */

.swal2-popup.swk-big:not(.swal2-toast) .swal2-title { display: none !important; }

.swal2-popup.swk-big:not(.swal2-toast) .swal2-html-container {
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
}

.swk-wash {
    background: var(--swk-wash, rgba(44, 74, 110, 0.12));
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.swk-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--swk-key, #2c4a6e);
    color: #fff;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

/* "Success" / "Failed" is a label, not the message — it stays small and quiet
   above the ring's colour, and the sentence underneath is the biggest thing on
   the card, because that is what the person actually needs to read. */
.swk-big-title {
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    opacity: 0.75;
    text-wrap: balance;
}

.swk-big-body {
    padding: 14px 22px 0;
    font-size: 1.18rem;
    font-weight: 500;
    line-height: 1.5;
}

.swk-big-body .swk-text:last-child { margin-bottom: 0; }

.swal2-popup.swk-big:not(.swal2-toast) .swal2-actions {
    justify-content: center;
    padding: 18px 22px 20px !important;
}

.swal2-popup.swk-big:not(.swal2-toast) .swal2-styled { min-width: 120px; }

/* Wash tint per kind — a light film of the same colour as the ring, so it
   reads on a white card and on a dark card alike */
.swal2-popup.swk--go { --swk-wash: rgba(44, 74, 110, 0.13); }
.swal2-popup.swk--danger { --swk-wash: rgba(192, 52, 44, 0.13); }
.swal2-popup.swk--warn { --swk-wash: rgba(180, 83, 9, 0.15); }
.swal2-popup.swk--good { --swk-wash: rgba(21, 128, 61, 0.14); }

.swal2-popup.swk .swal2-timer-progress-bar {
    background: var(--swk-key, #2c4a6e) !important;
}

/* ---------- phone ---------- */
@media (max-width: 575.98px) {
    .swal2-popup.swk:not(.swal2-toast) {
        width: 100%;
        max-width: calc(100vw - 20px);
    }

    .swal2-popup.swk:not(.swal2-toast) .swal2-title { padding: 11px 14px !important; }
    .swal2-popup.swk:not(.swal2-toast) .swal2-html-container { padding: 14px 14px 2px !important; }

    /* Full width, stacked, main action on top where the thumb is */
    .swal2-popup.swk:not(.swal2-toast) .swal2-actions {
        flex-direction: column-reverse;
        padding: 14px !important;
    }

    .swal2-popup.swk:not(.swal2-toast) .swal2-styled {
        width: 100%;
        padding: 12px 16px !important;
    }

    .swk-tile b { font-size: 1.22rem; }

    .swk-wash { padding: 20px 16px 17px; }
    .swk-ring { width: 56px; height: 56px; }
    .swk-big-title { font-size: 0.84rem; }
    .swk-big-body { padding: 13px 16px 0; font-size: 1.12rem; }

    .swal2-popup.swk-big:not(.swal2-toast) .swal2-actions { padding: 15px 16px 16px !important; }
}

/* ---------- the ✕ in a circle (brought over from Elbe Satranç, Kamal 2026-09-06) ----------
   One round close button on every popup: a 32px pale disc with a thin grey ring and a dark ✕
   (#334155 on #F1F5F9 is 9.2:1; the ring #94A3B8 is 2.2:1 on a white card, 3.6:1 on a dark one,
   and the disc itself stands on the navy/red/amber/green band at 9:1 or better). Hover turns it
   wine — #991B1B on #FEE2E2, edged #EF4444 — so the shape survives the hover too.
   Three classes deep so it outranks the per-popup recolourings (.swal-tournament-popup,
   .swal-video-popup, .about-yakutsoft-swal, .pph-popup) and SweetAlert's own :where() rules.
   Focus keeps the resting face and drops SweetAlert's pink halo: SweetAlert focuses the ✕ the
   moment a popup opens, so a `:focus` colour would paint it pressed at rest on every phone.
   A keyboard still gets a ring through :focus-visible, which a tap never fires. */
.swal2-container .swal2-popup .swal2-close {
    width: 32px;
    height: 32px;
    margin: 6px 0 -32px;
    margin-inline-end: 6px;
    border-radius: 50%;
    background: #F1F5F9;
    border: 1px solid #94A3B8;
    color: #334155;
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 700;
    box-shadow: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.swal2-container .swal2-popup .swal2-close:hover {
    background: #FEE2E2;
    border-color: #EF4444;
    color: #991B1B;
}

.swal2-container .swal2-popup .swal2-close:focus {
    box-shadow: none;
    outline: none;
}

.swal2-container .swal2-popup .swal2-close:focus-visible {
    outline: 2px solid #94A3B8;
    outline-offset: 2px;
}

/* ---------- the page must not move under a popup (Kamal, 2026-09-06) ----------
   swal-kit.js already turns off heightAuto and scrollbarPadding for every popup; this is the
   belt to those braces — no padding ever added to the body by a popup or a Bootstrap modal,
   so the fixed phone layout never nudges when one opens. */
body.swal2-shown,
body.modal-open { padding-right: 0 !important; }