/* close-x.css — the one close button for the whole solution.
 *
 * A white X in a dark circle, the look of the item window's close button on the
 * landing. One fixed palette on purpose, in both themes: white X on slate-900 at
 * 72% with a light ring, so the circle shows on a photo, on a dark panel (the ring
 * carries it) and on a white sheet (the dark fill carries it).
 *
 * New markup should use  <button class="rk-x" ...></button>  (no icon inside).
 * The older close buttons are listed below so they take the same look without
 * touching their markup or their positioning; only the look is set here, which is
 * why the declarations are !important (each page styles its own class).
 * The X is drawn as a background image, so whatever is inside the button
 * (an icon, a "×" character) is hidden.
 */
.rk-x,
/* landing */
.detail-close, .op-close, .zoom-close, .id-close, .dlv-sh-close, .dlv-zoom-close, .pwa-close-btn,
/* waiter */
.ob-header-close, .sp-close, .mt-panel-close,
/* shared */
.pm-close,
/* kitchen, waiter-only, self-service, old menu, delivery board, split-payment calculator */
.km-close, .wo-panel-close, .wo-m-close, .ss-m-close, .cart-close, .dm-close-btn, #spCalcX,
/* Bootstrap modals and SweetAlert2 pop-ups */
.modal .btn-close, .swal2-popup .swal2-close {
    width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important;
    padding: 0 !important; margin-block: 0;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    background: rgba(15,23,42,0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 15px 15px no-repeat !important;
    color: #fff !important;
    font-size: 0 !important; line-height: 0 !important;
    opacity: 1 !important; filter: none !important; box-shadow: none !important;
    cursor: pointer; flex-shrink: 0; touch-action: manipulation;
    transition: background-color 0.15s, transform 0.1s;
}
.rk-x > *, .detail-close > *, .op-close > *, .zoom-close > *, .id-close > *, .dlv-sh-close > *, .dlv-zoom-close > *,
.pwa-close-btn > *, .ob-header-close > *, .sp-close > *, .mt-panel-close > *, .pm-close > *,
.km-close > *, .wo-panel-close > *, .wo-m-close > *, .ss-m-close > *, .cart-close > *, .dm-close-btn > *, #spCalcX > * { display: none !important; }

.rk-x:hover, .detail-close:hover, .op-close:hover, .zoom-close:hover, .id-close:hover, .dlv-sh-close:hover,
.dlv-zoom-close:hover, .pwa-close-btn:hover, .ob-header-close:hover, .sp-close:hover, .mt-panel-close:hover,
.pm-close:hover, .km-close:hover, .wo-panel-close:hover, .wo-m-close:hover, .ss-m-close:hover, .cart-close:hover, .dm-close-btn:hover, #spCalcX:hover,
.modal .btn-close:hover, .swal2-popup .swal2-close:hover {
    background-color: rgba(15,23,42,0.92) !important; color: #fff !important;
}
.rk-x:active, .detail-close:active, .op-close:active, .zoom-close:active, .id-close:active, .dlv-sh-close:active,
.dlv-zoom-close:active, .pwa-close-btn:active, .ob-header-close:active, .sp-close:active, .mt-panel-close:active,
.pm-close:active, .km-close:active, .wo-panel-close:active, .wo-m-close:active, .ss-m-close:active, .cart-close:active, .dm-close-btn:active, #spCalcX:active,
.modal .btn-close:active, .swal2-popup .swal2-close:active {
    background-color: #0f172a !important; color: #fff !important; transform: scale(0.94);
}
/* Focus ring in sky blue: visible on dark panels, on photos and on white sheets alike */
.rk-x:focus-visible, .detail-close:focus-visible, .op-close:focus-visible, .zoom-close:focus-visible, .id-close:focus-visible,
.dlv-sh-close:focus-visible, .dlv-zoom-close:focus-visible, .pwa-close-btn:focus-visible, .ob-header-close:focus-visible,
.sp-close:focus-visible, .mt-panel-close:focus-visible, .pm-close:focus-visible,
.km-close:focus-visible, .wo-panel-close:focus-visible, .wo-m-close:focus-visible, .ss-m-close:focus-visible, .cart-close:focus-visible, .dm-close-btn:focus-visible, #spCalcX:focus-visible,
.modal .btn-close:focus-visible, .swal2-popup .swal2-close:focus-visible {
    outline: 2px solid #38bdf8 !important; outline-offset: 2px;
}
.rk-x:disabled, .modal .btn-close:disabled { opacity: 0.5 !important; cursor: default; }

/* SweetAlert2 places its close button in the grid's top corner; keep it off the edge */
.swal2-popup .swal2-close { margin: 8px !important; }