/* ==========================================================================
   Confirm  (### App refresh)
   The x-button "Are you sure?" confirm (components/button.blade.php). It opens
   in the browser's top layer right next to its button (window.confirmPop in
   custom.js places it below the button, or above it when there is no room),
   so no card, list, table or drawer that clips its content or is painted over
   it can hide it. A pointer shows which button it belongs to. The confirm
   button is red when the action is destructive (a "danger" button opened it),
   brand blue otherwise. Linked in the app and guest layouts.
   ========================================================================== */
.confirm-pop,
.confirm-pop[popover] {
    position: fixed;
    inset: auto;
    z-index: 1095;            /* only matters where the browser has no top layer */
    box-sizing: border-box;
    width: max-content;
    min-width: 210px;
    max-width: min(280px, calc(100vw - 16px));
    margin: 0;
    padding: 14px;
    overflow: visible;
    color: #1f2733;
    background-color: #fff;
    border: 1px solid #dfe3e9;
    border-radius: 10px;
    box-shadow: 0 16px 36px -14px rgba(16, 35, 58, .45), 0 2px 6px rgba(16, 35, 58, .06);
    font-family: Figtree, Helvetica, Arial, sans-serif;
    text-align: left;
}

.confirm-pop:popover-open {
    animation: confirm-pop-in .14s ease-out;
}

.confirm-pop[data-side="top"] {
    --confirm-shift: 4px;
}

@keyframes confirm-pop-in {
    from { opacity: 0; transform: translateY(var(--confirm-shift, -4px)); }
    to { opacity: 1; transform: none; }
}

/* The pointer, at the middle of the button */
.confirm-pop::before {
    content: "";
    position: absolute;
    top: -6px;
    left: var(--confirm-arrow, 50%);
    width: 11px;
    height: 11px;
    margin-left: -6px;
    background-color: #fff;
    border-top: 1px solid #dfe3e9;
    border-left: 1px solid #dfe3e9;
    transform: rotate(45deg);
}

.confirm-pop[data-side="top"]::before {
    top: auto;
    bottom: -6px;
    border: 0;
    border-right: 1px solid #dfe3e9;
    border-bottom: 1px solid #dfe3e9;
}

.confirm-pop .confirm-pop__title {
    margin: 0 0 12px;
    padding: 0;
    color: #1f2733;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}

/* The confirm button is not a .btn, so no page style for buttons in that list or bar reaches it */
.confirm-pop .confirm-pop__yes {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    width: 100% !important;
    height: 36px;
    margin: 0 !important;
    padding: 0 14px !important;
    color: #fff !important;
    background-color: #009ef7 !important;
    border: 1px solid #009ef7 !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap;
    box-shadow: none !important;
    transition: background-color .12s ease, border-color .12s ease;
}

.confirm-pop .confirm-pop__yes:hover,
.confirm-pop .confirm-pop__yes:focus-visible {
    background-color: #008bd9 !important;
    border-color: #008bd9 !important;
}

.confirm-pop .confirm-pop__yes:focus-visible {
    outline: 2px solid rgba(0, 158, 247, .6);
    outline-offset: 2px;
}

.confirm-pop .confirm-pop__yes::before {
    content: none !important;
}

/* Destructive: a red confirm when a "danger" button opened it */
.position-relative:has(> button[class*="danger"]) > .confirm-pop .confirm-pop__yes {
    background-color: #c62f4f !important;
    border-color: #c62f4f !important;
}

.position-relative:has(> button[class*="danger"]) > .confirm-pop .confirm-pop__yes:hover,
.position-relative:has(> button[class*="danger"]) > .confirm-pop .confirm-pop__yes:focus-visible {
    background-color: #a8213f !important;
    border-color: #a8213f !important;
}

.position-relative:has(> button[class*="danger"]) > .confirm-pop .confirm-pop__yes:focus-visible {
    outline-color: rgba(198, 47, 79, .5);
}

@media (prefers-reduced-motion: reduce) {
    .confirm-pop:popover-open {
        animation: none;
    }
}