/**
 * SlideKlip SweetAlert2 Custom Styles
 * Minimal styling - ready for design team customization
 */

/* =================================
   Main Popup Styling
   ================================= */
.slideklip-swal-popup {
    border-radius: 12px !important;
    padding: 2rem !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =================================
   Title & Content
   ================================= */
.slideklip-swal-title {
    font-weight: 600 !important;
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
}

.slideklip-swal-content {
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

/* =================================
   Buttons
   ================================= */
.swal2-actions {
    gap: 0.75rem;
}

.swal2-styled.btn {
    font-weight: 500;
    border-radius: 8px;
    padding: 0.625rem 1.5rem;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.swal2-styled.btn:focus {
    box-shadow: none !important;
}

/* =================================
   Toast Notifications
   ================================= */
.swal2-toast {
    border-radius: 8px !important;
    padding: 1rem 1.5rem !important;
    align-items: center !important;
    display: flex !important;
}

.swal2-toast .swal2-icon {
    margin: 0 !important;
    margin-right: 12px !important;
}

.swal2-toast .swal2-title {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* =================================
   Responsive Design
   ================================= */
@media (max-width: 768px) {
    .slideklip-swal-popup {
        padding: 1.5rem !important;
        margin: 1rem !important;
    }

    .slideklip-swal-title {
        font-size: 1.25rem !important;
    }
}

/* =================================
   Additional Customizations
   ================================= */

/* Add your custom styles below */
/* Design team can customize colors, backgrounds, borders, etc. */

.swal2-popup .btn.btn-danger {
    background-color: red !important;
    border-color: red !important;
    color: var(--white, #fff) !important;
}

.swal2-popup .btn.btn-secondary {
    background-color: var(--color-bg-light, #F3F3F3) !important;
    border-color: var(--color-bg-light, #F3F3F3) !important;
    color: var(--theme-body-font-color, #333) !important;
}

.swal2-confirm {
    background-color: var(--color-primary-blue) !important;
    border-color: var(--color-primary-blue) !important;
    color: var(--white, #fff) !important;
}