/* ============================================
   SWEETALERT2 CUSTOM STYLES
   Matches ThePupCircle design system
   ============================================ */

/* Custom popup styling */
.swal-custom-popup {
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Custom title styling */
.swal-custom-title {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    margin-bottom: 12px !important;
}

/* Custom text styling */
.swal-custom-text {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
}

/* Custom input styling */
.swal-custom-input {
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    font-family: 'Quicksand', sans-serif !important;
    transition: all 0.3s ease !important;
}

.swal-custom-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(31, 182, 255, 0.1) !important;
    outline: none !important;
}

/* Custom confirm button */
.swal-custom-confirm {
    border-radius: 8px !important;
    padding: 12px 32px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    border: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(31, 182, 255, 0.3) !important;
}

.swal-custom-confirm:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(31, 182, 255, 0.4) !important;
}

/* Custom cancel button */
.swal-custom-cancel {
    border-radius: 8px !important;
    padding: 12px 32px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    border: 2px solid #e5e7eb !important;
    background: white !important;
    color: var(--text-secondary) !important;
    transition: all 0.3s ease !important;
}

.swal-custom-cancel:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    transform: translateY(-2px) !important;
}

/* Icon sizing */
.swal2-icon {
    width: 5rem !important;
    height: 5rem !important;
    margin: 1.5rem auto !important;
}

/* Textarea specific styling */
.swal2-textarea.swal-custom-input {
    min-height: 100px !important;
    resize: vertical !important;
    font-family: 'Quicksand', sans-serif !important;
}

/* Select dropdown styling */
.swal2-select.swal-custom-input {
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 12px !important;
    padding-right: 40px !important;
}

/* Animation override */
.swal2-show {
    animation: swal2-show 0.3s !important;
}

.swal2-hide {
    animation: swal2-hide 0.2s !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .swal-custom-popup {
        background: var(--card-bg) !important;
    }
    
    .swal-custom-title {
        color: var(--text-primary) !important;
    }
    
    .swal-custom-text {
        color: var(--text-secondary) !important;
    }
    
    .swal-custom-input {
        background: var(--input-bg) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }
    
    .swal-custom-cancel {
        background: var(--card-bg) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }
    
    .swal-custom-cancel:hover {
        background: var(--hover-bg) !important;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .swal-custom-popup {
        padding: 20px !important;
        margin: 10px !important;
    }
    
    .swal-custom-title {
        font-size: 1.5rem !important;
    }
    
    .swal-custom-confirm,
    .swal-custom-cancel {
        padding: 10px 24px !important;
        font-size: 0.95rem !important;
    }
}