/* =========================================================
   FLYHOTEL - SWEETALERT / ALERTS
   ========================================================= */

/* =========================================================
   MODALI
   ========================================================= */

.fh-swal-popup {
    width: min(420px, calc(100vw - 24px)) !important;
    padding: 1.1rem !important;
    background: var(--fh-surface) !important;
    color: var(--fh-text) !important;
    border: 1px solid var(--fh-border-soft) !important;
    border-radius: var(--fh-radius-lg) !important;
    box-shadow: var(--fh-shadow-lg) !important;
}

.fh-swal-title {
    margin: .55rem 0 .2rem !important;
    padding: 0 !important;
    color: var(--fh-text) !important;
    font-size: 1.1rem !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
}

.fh-swal-content {
    margin: .25rem 0 0 !important;
    padding: 0 !important;
    color: var(--fh-text-muted) !important;
    font-size: .9rem !important;
    line-height: 1.4 !important;
}

.fh-swal-actions {
    width: 100% !important;
    margin: 1rem 0 0 !important;
    gap: .5rem !important;
}

.fh-swal-btn {
    min-height: 40px;
    padding: .45rem .9rem;
    border: 1px solid transparent;
    border-radius: var(--fh-radius-sm);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition:
        background-color var(--fh-transition-fast),
        border-color var(--fh-transition-fast),
        color var(--fh-transition-fast),
        transform var(--fh-transition-fast);
}

.fh-swal-btn:active {
    transform: scale(.98);
}

.fh-swal-btn-primary {
    color: var(--fh-primary-contrast);
    background: var(--fh-primary);
    border-color: var(--fh-primary);
}

.fh-swal-btn-primary:hover {
    background: var(--fh-primary-hover);
    border-color: var(--fh-primary-hover);
}

.fh-swal-btn-secondary {
    color: var(--fh-text-secondary);
    background: var(--fh-surface);
    border-color: var(--fh-border);
}

.fh-swal-btn-secondary:hover {
    color: var(--fh-text);
    background: var(--fh-surface-hover);
}

.fh-swal-btn-danger {
    color: #fff;
    background: var(--fh-danger);
    border-color: var(--fh-danger);
}

.fh-swal-btn-danger:hover {
    filter: brightness(.94);
}

.fh-swal-btn-edit {
    color: var(--fh-text) !important;
    background: var(--fh-bg-secondary) !important;
    border-color: var(--fh-border) !important;
}

.fh-swal-btn-edit:hover,
.fh-swal-btn-edit:focus {
    color: var(--fh-text) !important;
    background: var(--fh-surface-hover) !important;
    border-color: var(--fh-text-muted) !important;
}

.fh-swal-btn-edit:active {
    color: var(--fh-text) !important;
    background: var(--fh-bg-secondary) !important;
    border-color: var(--fh-text-secondary) !important;
}

[data-fh-theme="dark"] .fh-swal-btn-edit {
    color: #f1f4f3 !important;
    background: #2b3032 !important;
    border-color: #4a5255 !important;
}

[data-fh-theme="dark"] .fh-swal-btn-edit:hover,
[data-fh-theme="dark"] .fh-swal-btn-edit:focus {
    color: #fff !important;
    background: #353b3e !important;
    border-color: #626b6e !important;
}

.fh-swal-popup .swal2-icon {
    margin: .25rem auto .2rem !important;
    transform: scale(.8);
}

/* =========================================================
   TOAST
   ========================================================= */

body.swal2-toast-shown .swal2-container {
    padding: 1rem .65rem .65rem !important;
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

.fh-toast.swal2-popup.swal2-toast {
    width: min(320px, calc(100vw - 20px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 20px) !important;
    min-height: 0 !important;
    height: auto !important;

    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;

    align-items: center !important;
    justify-content: flex-start !important;
    gap: .45rem !important;

    margin: 0 !important;
    padding: .52rem .62rem !important;

    color: var(--fh-text) !important;
    background: color-mix(in srgb,
            var(--fh-surface-elevated) 94%,
            transparent) !important;

    border: 1px solid color-mix(in srgb,
            var(--fh-border) 85%,
            transparent) !important;

    border-radius: var(--fh-radius-sm) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15) !important;

    overflow: hidden !important;
    pointer-events: auto;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.fh-toast-title,
.fh-toast.swal2-popup.swal2-toast .swal2-title {
    min-width: 0 !important;
    flex: 1 1 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--fh-text) !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: left !important;

    overflow-wrap: anywhere;
}

.fh-toast.swal2-popup.swal2-toast .swal2-html-container {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--fh-text-secondary) !important;
    font-size: .7rem !important;
    line-height: 1.2 !important;
    text-align: left !important;
}

.fh-toast.swal2-popup.swal2-toast .swal2-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    flex: 0 0 22px !important;

    margin: 0 !important;
    padding: 0 !important;
    font-size: .68rem !important;
}

.fh-toast.swal2-popup.swal2-toast .swal2-close {
    position: static !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    flex: 0 0 22px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--fh-text-muted) !important;
    font-size: .95rem !important;
    line-height: 1 !important;
}

.fh-toast.swal2-popup.swal2-toast .swal2-timer-progress-bar-container {
    height: 2px !important;
}

.fh-toast.swal2-popup.swal2-toast .swal2-timer-progress-bar {
    background: color-mix(in srgb,
            var(--fh-primary) 75%,
            transparent) !important;
}

/* =========================================================
   ICONE SWEETALERT
   ========================================================= */

.swal2-icon.swal2-success {
    color: var(--fh-success) !important;
    border-color: var(--fh-success) !important;
}

.swal2-icon.swal2-error {
    color: var(--fh-danger) !important;
    border-color: var(--fh-danger) !important;
}

.swal2-icon.swal2-warning {
    color: var(--fh-warning) !important;
    border-color: var(--fh-warning) !important;
}

.swal2-icon.swal2-info {
    color: var(--fh-info) !important;
    border-color: var(--fh-info) !important;
}

.swal2-loader {
    border-color:
        var(--fh-primary) transparent var(--fh-primary) transparent !important;
}

/* =========================================================
   BACKDROP MODALI
   ========================================================= */

body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show {
    background: rgba(0, 0, 0, .4) !important;
}

[data-fh-theme="dark"] body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show {
    background: rgba(0, 0, 0, .58) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {
    .fh-swal-popup {
        width: calc(100vw - 16px) !important;
        padding: .95rem !important;
    }

    .fh-swal-title {
        font-size: 1.02rem !important;
    }

    .fh-swal-content {
        font-size: .85rem !important;
    }

    .fh-swal-actions {
        gap: .4rem !important;
    }

    .fh-swal-btn {
        min-height: var(--fh-touch-target);
        flex: 1;
        padding-inline: .65rem;
    }

    body.swal2-toast-shown .swal2-container {
        padding: .8rem .45rem .45rem !important;
    }

    .fh-toast.swal2-popup.swal2-toast {
        width: min(270px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
        min-height: 0 !important;
        height: auto !important;

        gap: .38rem !important;
        padding: .4rem .5rem !important;

        background: color-mix(in srgb,
                var(--fh-surface-elevated) 92%,
                transparent) !important;

        box-shadow: 0 3px 11px rgba(0, 0, 0, .14) !important;
    }

    .fh-toast.swal2-popup.swal2-toast .swal2-icon {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        flex-basis: 20px !important;
        font-size: .6rem !important;
    }

    .fh-toast-title,
    .fh-toast.swal2-popup.swal2-toast .swal2-title {
        font-size: .69rem !important;
        line-height: 1.16 !important;
    }

    .fh-toast.swal2-popup.swal2-toast .swal2-html-container {
        font-size: .64rem !important;
        line-height: 1.16 !important;
    }

    .fh-toast.swal2-popup.swal2-toast .swal2-close {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        flex-basis: 20px !important;
        font-size: .85rem !important;
    }
}

@media (max-width: 390px) {
    .fh-toast.swal2-popup.swal2-toast {
        width: min(250px, calc(100vw - 14px)) !important;
        padding: .38rem .46rem !important;
    }

    .fh-toast-title,
    .fh-toast.swal2-popup.swal2-toast .swal2-title {
        font-size: .67rem !important;
    }
}

/* =========================================================
   FLYALERT - FORM
   ========================================================= */

.fh-swal-form-popup {
    width: min(520px, calc(100vw - 24px)) !important;
}

.fh-alert-form {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-top: .35rem;
    text-align: left;
}

.fh-alert-form-group {
    min-width: 0;
}

.fh-alert-form-label {
    display: block;
    margin-bottom: .3rem;
    color: var(--fh-text-secondary);
    font-size: .75rem;
    font-weight: 800;
}

.fh-alert-form-help {
    margin-top: .28rem;
    color: var(--fh-text-muted);
    font-size: .67rem;
    line-height: 1.3;
}

.fh-alert-form .form-control,
.fh-alert-form .input-group-text {
    min-height: 40px;
    color: var(--fh-text);
    background: var(--fh-surface);
    border-color: var(--fh-border);
}

.fh-alert-form .input-group-text {
    color: var(--fh-text-muted);
    background: var(--fh-bg-secondary);
}

.fh-alert-form .form-control:focus {
    border-color: var(--fh-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fh-primary) 12%, transparent);
}

@media (max-width: 575.98px) {
    .fh-swal-form-popup {
        width: calc(100vw - 16px) !important;
    }

    .fh-alert-form {
        gap: .7rem;
    }

    .fh-alert-form .form-control,
    .fh-alert-form .input-group-text {
        min-height: 42px;
    }
}

/* =========================================================
   FLYALERT - SCELTA A 3 PULSANTI
   ========================================================= */

.fh-swal-choice-popup {
    width: min(560px, calc(100vw - 24px)) !important;
}

.fh-swal-choice-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: auto auto minmax(180px, 1fr);
    align-items: stretch !important;
    gap: .45rem !important;
    margin-top: 1rem !important;
}

.fh-swal-choice-actions .fh-swal-btn {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    margin: 0 !important;
    padding: .45rem .65rem;
    white-space: nowrap;
}

.fh-swal-choice-primary {
    min-width: 190px !important;
}

@media (max-width: 575.98px) {
    .fh-swal-choice-popup {
        width: calc(100vw - 16px) !important;
    }

    .fh-swal-choice-actions {
        grid-template-columns: 1fr 1fr !important;
    }

    .fh-swal-choice-actions .fh-swal-choice-primary {
        grid-column: 1 / -1;
        grid-row: 1;
        min-width: 0 !important;
    }

    .fh-swal-choice-actions .swal2-deny {
        grid-column: 1;
        grid-row: 2;
    }

    .fh-swal-choice-actions .swal2-cancel {
        grid-column: 2;
        grid-row: 2;
    }
}