/**
 * Custom SweetAlert2 Styling
 * Matches the Resort App theme using resort_theme.css variables
 */

/* ============================================
   SWEETALERT POPUP STYLING
   ============================================ */

.resort-swal-popup {
    border-radius: 15px !important;
    padding: 2rem !important;
    box-shadow: 0px 10px 25px rgba(26, 155, 142, 0.15) !important;
    font-family: "Encode Sans Semi Expanded", sans-serif !important;
}

.resort-swal-title {
    color: var(--resort-text-heading) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    padding: 0.5rem 0 1rem 0 !important;
}

.resort-swal-text {
    color: var(--resort-text-light) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

/* ============================================
   BUTTON STYLING
   ============================================ */

.resort-swal-confirm-btn {
    background-image: var(--resort-primary-gradient) !important;
    color: var(--resort-white) !important;
    border: none !important;
    border-radius: 9px !important;
    padding: 11px 35px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0px 4px 10px rgba(26, 155, 142, 0.25) !important;
}

.resort-swal-confirm-btn:hover {
    background-image: linear-gradient(to right, var(--resort-primary-light), var(--resort-primary)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0px 6px 15px rgba(26, 155, 142, 0.35) !important;
}

.resort-swal-confirm-btn:focus {
    outline: none !important;
    box-shadow: 0px 0px 0px 3px var(--resort-focus-shadow) !important;
}

.resort-swal-cancel-btn {
    background: var(--resort-white) !important;
    color: var(--resort-text) !important;
    border: 1px solid var(--resort-border) !important;
    border-radius: 9px !important;
    padding: 11px 35px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: all 0.3s ease !important;
    margin-right: 10px !important;
}

.resort-swal-cancel-btn:hover {
    background: var(--resort-danger) !important;
    color: var(--resort-white) !important;
    border: 1px solid var(--resort-danger) !important;
}

.resort-swal-cancel-btn:focus {
    outline: none !important;
    box-shadow: 0px 0px 0px 3px rgba(220, 53, 69, 0.25) !important;
}

.resort-swal-actions {
    margin-top: 1.5rem !important;
}

/* ============================================
   CLOSE BUTTON
   ============================================ */

.swal2-close {
    color: var(--resort-text-light) !important;
    font-size: 28px !important;
    transition: all 0.2s ease !important;
}

.swal2-close:hover {
    color: var(--resort-text-heading) !important;
}

/* ============================================
   ICON STYLING
   ============================================ */

.swal2-icon {
    border-width: 3px !important;
}

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

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(40, 167, 69, 0.3) !important;
}

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

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

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

.swal2-icon.swal2-question {
    border-color: var(--resort-primary) !important;
    color: var(--resort-primary) !important;
}

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

.resort-toast-popup {
    border-radius: 10px !important;
    padding: 1rem 1.5rem !important;
    box-shadow: 0px 5px 20px rgba(26, 155, 142, 0.3) !important;
    font-family: "Encode Sans Semi Expanded", sans-serif !important;
    z-index: 99999 !important;
    min-width: 300px !important;
}

.resort-toast-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--resort-text-heading) !important;
}

.swal2-toast .swal2-icon {
    margin: 0 1rem 0 0 !important;
}

/* Ensure toast container has highest z-index and doesn't block page interaction */
.swal2-container.swal2-top-end,
.swal2-container.swal2-top,
.swal2-container.swal2-top-start,
.swal2-container.swal2-bottom-end,
.swal2-container.swal2-bottom,
.swal2-container.swal2-bottom-start {
    z-index: 999999 !important;
    pointer-events: none !important;
}

/* Center positioned alerts should use default SweetAlert behavior */
.swal2-container.swal2-center {
    z-index: 10000 !important;
}

/* Re-enable pointer events on toast popups */
.swal2-container.swal2-top-end > .swal2-popup,
.swal2-container.swal2-top > .swal2-popup,
.swal2-container.swal2-top-start > .swal2-popup,
.swal2-container.swal2-bottom-end > .swal2-popup,
.swal2-container.swal2-bottom > .swal2-popup,
.swal2-container.swal2-bottom-start > .swal2-popup {
    pointer-events: all !important;
}

/* Ensure proper stacking for Bootstrap modals vs SweetAlert */
.modal-backdrop {
    z-index: 1055 !important;
}

.modal {
    z-index: 1056 !important;
}

/* SweetAlert shown on top of Bootstrap modals */
.swal2-container.swal2-shown {
    z-index: 10000 !important;
}

/* ============================================
   INPUT STYLING
   ============================================ */

.swal2-input,
.swal2-textarea,
.swal2-select {
    border: 1px solid var(--resort-border) !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    color: var(--resort-text) !important;
    font-family: "Encode Sans Semi Expanded", sans-serif !important;
    transition: all 0.3s ease !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: var(--resort-primary) !important;
    box-shadow: 0px 0px 0px 3px rgba(26, 155, 142, 0.1) !important;
    outline: none !important;
}

.swal2-validation-message {
    background: #fef2f2 !important;
    border-left: 4px solid var(--resort-danger) !important;
    color: #dc2626 !important;
    font-size: 13px !important;
    border-radius: 5px !important;
    padding: 10px 15px !important;
}

/* ============================================
   FIELD VALIDATION STYLING
   ============================================ */

/* Error state for input fields */
.field-error,
.is-invalid {
    border-color: var(--resort-danger) !important;
    background-color: #fef2f2 !important;
    box-shadow: 0px 0px 0px 3px rgba(220, 53, 69, 0.1) !important;
}

.field-error:focus,
.is-invalid:focus {
    border-color: #dc2626 !important;
    box-shadow: 0px 0px 0px 4px rgba(220, 53, 69, 0.15) !important;
    outline: none !important;
}

/* Success state for input fields */
.is-valid {
    border-color: var(--resort-success) !important;
    background-color: #f0fdf4 !important;
    box-shadow: 0px 0px 0px 3px rgba(40, 167, 69, 0.1) !important;
}

.is-valid:focus {
    border-color: #059669 !important;
    box-shadow: 0px 0px 0px 4px rgba(40, 167, 69, 0.15) !important;
    outline: none !important;
}

/* Error message styling */
.field-error-message,
.invalid-feedback {
    display: block !important;
    color: #dc2626 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-top: 5px !important;
    padding: 5px 10px !important;
    background: #fef2f2 !important;
    border-left: 3px solid var(--resort-danger) !important;
    border-radius: 5px !important;
    line-height: 1.4 !important;
}

.field-error-message::before,
.invalid-feedback::before {
    content: "? ";
    font-size: 14px;
    margin-right: 4px;
}

/* Valid feedback */
.valid-feedback {
    display: block !important;
    color: #059669 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-top: 5px !important;
    padding: 5px 10px !important;
    background: #f0fdf4 !important;
    border-left: 3px solid var(--resort-success) !important;
    border-radius: 5px !important;
}

.valid-feedback::before {
    content: "? ";
    font-size: 14px;
    margin-right: 4px;
}

/* ============================================
   FORM GROUP VALIDATION HELPERS
   ============================================ */

.form-group.has-error .form-control {
    border-color: var(--resort-danger) !important;
    background-color: #fef2f2 !important;
}

.form-group.has-success .form-control {
    border-color: var(--resort-success) !important;
    background-color: #f0fdf4 !important;
}

/* Label color for error/success states */
.form-group.has-error label {
    color: #dc2626 !important;
}

.form-group.has-success label {
    color: #059669 !important;
}

/* ============================================
   LOADING SPINNER
   ============================================ */

.swal2-loading .swal2-icon {
    border-color: var(--resort-primary) !important;
}

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

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media only screen and (max-width: 767px) {
    .resort-swal-popup {
        padding: 1.5rem !important;
    }

    .resort-swal-title {
        font-size: 20px !important;
    }

    .resort-swal-text {
        font-size: 14px !important;
    }

    .resort-swal-confirm-btn,
    .resort-swal-cancel-btn {
        padding: 10px 25px !important;
        font-size: 13px !important;
    }

    .field-error-message,
    .invalid-feedback {
        font-size: 12px !important;
    }
}

/* ============================================
   ANIMATION ENHANCEMENTS
   ============================================ */

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Animate when showing - slide in from top */
.swal2-show.resort-swal-popup {
    animation: slideInFromTop 0.3s ease-out !important;
}

/* Animate when hiding - smooth fade out */
.swal2-hide.resort-swal-popup {
    animation: fadeOut 0.2s ease-in !important;
}

/* Shake animation for errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.field-error {
    animation: shake 0.5s ease-in-out;
}