/* ========================================
   MODERN MODAL SYSTEM
   ======================================== */

/* Modal Backdrop - Deep iOS Blur */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
}

.modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Container */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.modal-container.active {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

/* Modal Dialog - Premium Apple Styling */
.modal-dialog {
    background: #ffffff;
    border-radius: 28px;
    /* Extremely rounded like iOS cards */
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.08),
        0 0 1px rgba(0, 0, 0, 0.1);
    max-width: 1000px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.94) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 10000;
    pointer-events: auto;
    border: 0.5px solid rgba(0, 0, 0, 0.05);
}

.modal-container.active .modal-dialog {
    transform: scale(1) translateY(0);
}

/* Modal Header - Clean iOS Look */
.modal-container .modal-dialog .modal-header,
.modal-dialog .modal-header,
.modal-header {
    padding: 24px 32px !important;
    border-bottom: none !important;
    /* Borderless header */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
}

.modal-container .modal-dialog .modal-header .modal-title,
.modal-dialog .modal-header .modal-title,
.modal-header .modal-title {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #000000 !important;
    letter-spacing: -0.5px !important;
    margin: 0 !important;
}

.modal-close {
    background: #f2f2f7;
    /* iOS Light Gray Button */
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #3a3a3c;
    transition: all 0.2s;
    font-size: 1.1rem;
}

.modal-close:hover {
    background: #e5e5ea;
    transform: scale(1.05);
    color: #000;
}

/* Modal Body */
.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* Custom Scrollbar */
.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Modal Footer - iOS Buttons style */
.modal-footer {
    padding: 24px 32px !important;
    border-top: none !important;
    /* Borderless footer */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-shrink: 0;
}

.modal-btn {
    padding: 12px 28px;
    border-radius: 14px;
    /* Squircle rounded corners */
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
}

.modal-btn-secondary {
    background: #f2f2f7;
    color: #007aff;
    /* Apple System Blue */
}

.modal-btn-secondary:hover {
    background: #e5e5ea;
    transform: scale(1.02);
}

.modal-btn-primary {
    background: linear-gradient(135deg, #007aff 0%, #0018ff 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
}

.modal-btn-primary:hover {
    transform: scale(1.03) translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 122, 255, 0.35);
}

.modal-btn-primary:active {
    transform: scale(0.98);
}

.modal-btn:disabled {
    opacity: 0.4;
    filter: grayscale(1);
    cursor: not-allowed;
    transform: none !important;
}

/* Loading State */
.modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #64748b;
}

.modal-loading i {
    font-size: 2rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .modal-dialog {
        max-width: 100%;
        max-height: 100dvh;
        border-radius: 8px;
        margin: 0;
    }

    .modal-container {
        padding: 0;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Modern Forms (Sileo/iOS Style) */
.modern-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.modern-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #8e8e93;
    /* Apple Gray */
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: 4px;
}

.modern-input,
.modern-select {
    background: #f2f2f7 !important;
    border: 1px solid transparent !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #000000 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* Specific styling for native selects to add a custom arrow */
.modern-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 14px !important;
    padding-right: 40px !important;
}

/* Hide native arrows in IE and Edge */
.modern-select::-ms-expand {
    display: none !important;
}

.modern-input:focus,
.modern-select:focus {
    background: #ffffff !important;
    border-color: #007aff !important;
    box-shadow: 0 2px 10px rgba(0, 122, 255, 0.1) !important;
    outline: none !important;
}

/* Modern Chips (Sileo/iOS Style) */
.modern-chip,
.search-chip-modern {
    display: inline-flex;
    align-items: center;
    background: #f2f2f7;
    color: #1c1c1e;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-right: 8px;
    margin-bottom: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    animation: chipIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modern-chip:hover,
.search-chip-modern:hover {
    background: #e5e5ea;
}

.modern-chip-remove,
.search-chip-remove {
    background: none;
    border: none;
    padding: 0;
    margin-left: 8px;
    color: #8e8e93;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.modern-chip-remove:hover,
.search-chip-remove:hover {
    color: #ff3b30;
    /* iOS Red */
}

@keyframes chipIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* Placeholder cross-browser compatibility */
.modern-input::-webkit-input-placeholder {
    color: #c7c7cc;
    opacity: 1;
}

.modern-input::-moz-placeholder {
    color: #c7c7cc;
    opacity: 1;
}

.modern-input:-ms-input-placeholder {
    color: #c7c7cc;
}

.modern-input::-ms-input-placeholder {
    color: #c7c7cc;
}

.modern-input::placeholder {
    color: #c7c7cc;
    opacity: 1;
}

/* Select Option Panels (Sileo/iOS style for Select2) */
.select2-container--bootstrap-5 .select2-dropdown {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
    padding: 6px !important;
    margin-top: 6px !important;
    animation: selectIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.select2-results__options {
    padding: 0 !important;
}

.select2-results__option {
    padding: 10px 16px !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #1c1c1e !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-bottom: 2px !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: #007aff !important;
    /* iOS Blue */
    color: #ffffff !important;
    transform: scale(1.01);
}

.select2-results__option[aria-selected="true"] {
    background-color: #f2f2f7 !important;
    color: #007aff !important;
    font-weight: 700 !important;
}

.select2-results__option[aria-selected="true"].select2-results__option--highlighted {
    background-color: #007aff !important;
    color: #ffffff !important;
}

/* Search Field styling */
.select2-search--dropdown {
    padding: 8px 12px 12px 12px !important;
}

.select2-search--dropdown .select2-search__field {
    background: #efeff4 !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-size: 0.9rem !important;
    color: #000 !important;
}

@keyframes selectIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.channel-pill input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.channel-pill:has(input:checked) {
    background: rgba(37, 99, 235, 0.05);
    border-color: #2563EB;
    color: #2563EB;
}

/* Details View Styles */
.details-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.details-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.col-span-3 {
    grid-column: span 3;
}

.details-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.details-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.details-label i {
    color: #94a3b8;
    font-size: 0.9em;
}

.details-value {
    font-size: 0.95rem;
    color: #1e293b;
    font-weight: 500;
}

.details-value.text-lg {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0f172a;
}

.details-value.text-primary {
    color: #2563EB;
}

.text-success {
    color: #10b981;
}

/* Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-open {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.status-closed {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.badge-gray {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
}

/* Timeline/History Styles */
.timeline-section {
    margin-top: 24px;
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: none;
}

.timeline-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeline-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    position: relative;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: #64748b;
}

.timeline-content {
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.5;
}

.timeline-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.85rem;
    display: flex;
    gap: 16px;
    color: #64748b;
}

/* Action Buttons Container */
.actions-bar {
    display: flex;
    gap: 12px;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    background: white;
    border: 1px solid #cbd5e1;
    color: #475569;
    transition: all 0.2s;
}

.action-btn:hover {
    background: #f8fafc;
    border-color: #2563EB;
    color: #2563EB;
}

.action-btn.primary {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563EB;
}

.action-btn.primary:hover {
    background: #dbeafe;
    border-color: #2563EB;
}

/* Dropzone */
.dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s;
}

.dropzone:hover {
    border-color: #2563EB;
    background: rgba(37, 99, 235, 0.02);
}

.dropzone.dragover {
    border-color: #2563EB;
    background: rgba(37, 99, 235, 0.05);
}

/* File List */
#fileList {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.875rem;
}

.file-item-name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
}

.file-item-remove {
    color: #ef4444;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.file-item-remove:hover {
    background: rgba(239, 68, 68, 0.1);
}


/* Icon Select Wrapper */
#my-icon-select {
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px;
}

/* ========================================
   Z-INDEX FIXES FOR THIRD-PARTY COMPONENTS
   ======================================== */

/* Select2 Dropdown - Only inside modal */
/* Dynamic z-index handled by JS now */
/* .modal-dialog .select2-container,
.modal-body .select2-container {
    z-index: 10001 !important;
}

.modal-dialog .select2-dropdown,
.modal-body .select2-dropdown {
    z-index: 10001 !important;
} */

/* Select2 outside modal - normal z-index */
.select2-dropdown {
    z-index: 9999;
}

/* jQuery UI Autocomplete */
.ui-autocomplete {
    z-index: 10002 !important;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ui-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.9rem;
}

.ui-menu-item:hover,
.ui-menu-item.ui-state-active,
.ui-menu-item.ui-state-focus {
    background: #f0f9ff;
    color: #0369a1;
}


/* Icon Select Dropdown */
.icons {
    z-index: 10001 !important;
}

.icon-select-container {
    z-index: 10001 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-section {
        padding: 16px;
    }

    .channel-pills {
        flex-direction: column;
    }

    .channel-pill {
        width: 100%;
        justify-content: flex-start;
    }
}

:root {
    --primary: #1d4ed8;
    --primary-hover: #163bb0;
    --secondary: #4a90e2;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --text: #1f2937;
    --text-muted: #6b7280;
    --bg: #f9fafb;
    --border: #e5e7eb;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --crop-size: min(clamp(280px, 70vw, 600px), 70vh);
}

/* Sileo Style Toast Notifications (iOS Inspired) */
.modern-toast-container {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    z-index: 200000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    max-width: 420px !important;
    pointer-events: none !important;
}

.modern-toast {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    padding: 14px 18px !important;
    border-radius: 22px !important;
    /* iOS Extreme Rounded */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.05) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    gap: 16px !important;
    border: 0.5px solid rgba(0, 0, 0, 0.05) !important;
    animation: toastPremiumIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    will-change: transform, opacity;
    opacity: 0;
    transform: translateX(60px) scale(0.95);
    pointer-events: auto !important;
    min-width: 340px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Sileo Icon Container (Squircle) */
.modern-toast-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
    color: white !important;
}

.modern-toast.warning .modern-toast-icon {
    background: linear-gradient(135deg, #ff9500 0%, #ffcc00 100%) !important;
    box-shadow: 0 4px 10px rgba(255, 149, 0, 0.3) !important;
}

.modern-toast.success .modern-toast-icon {
    background: linear-gradient(135deg, #34c759 0%, #30d158 100%) !important;
    box-shadow: 0 4px 10px rgba(52, 199, 89, 0.3) !important;
}

.modern-toast.error .modern-toast-icon {
    background: linear-gradient(135deg, #ff3b30 0%, #ff453a 100%) !important;
    box-shadow: 0 4px 10px rgba(255, 59, 48, 0.3) !important;
}

.modern-toast.info .modern-toast-icon {
    background: linear-gradient(135deg, #007aff 0%, #0a84ff 100%) !important;
    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3) !important;
}

.modern-toast-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
}

.modern-toast-title {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    letter-spacing: -0.4px !important;
}

.modern-toast-message {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #8e8e93 !important;
    /* iOS Grey */
    line-height: 1.3 !important;
}

.modern-toast-close {
    margin-left: auto !important;
    background: #f2f2f7 !important;
    /* iOS Button Gray */
    border: none !important;
    color: #3a3a3c !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.modern-toast-close:hover {
    background: #e5e5ea !important;
}

/* Sileo Progress Bar (Subtle) */
.modern-toast-progress {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 3px !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.02) !important;
}

.modern-toast-progress-bar {
    height: 100% !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.08) !important;
    transform-origin: left !important;
}

@keyframes toastPremiumIn {
    from {
        transform: translateX(60px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes toastPremiumOut {
    to {
        transform: translateY(-10px) scale(0.98);
        opacity: 0;
    }
}

/* Sileo Style Confirmation Modals (iOS Inspired) */
.modern-confirm-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.45) !important;
    /* Backdrop Blur */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2000000 !important;
    opacity: 1 !important;
}

.modern-confirm-modal {
    background: #ffffff !important;
    width: 320px !important;
    border-radius: 28px !important;
    /* Extra rounded per Apple style */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    font-family: -apple-system, system-ui, sans-serif !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.modern-confirm-header {
    width: 100% !important;
    padding: 24px 0 !important;
    display: flex !important;
    justify-content: center !important;
}

.modern-confirm-header.danger {
    color: #ff3b30 !important;
}

.modern-confirm-header.warning {
    color: #ff9500 !important;
}

.modern-confirm-header.success {
    color: #34c759 !important;
}

.modern-confirm-header.info {
    color: #007aff !important;
}

.modern-confirm-icon-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: #f2f2f7 !important;
}

.modern-confirm-body {
    padding: 0 24px 24px !important;
}

.modern-confirm-title {
    margin: 0 0 8px 0 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    letter-spacing: -0.5px !important;
}

.modern-confirm-message {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #3a3a3c !important;
    line-height: 1.4 !important;
}

.modern-confirm-footer {
    display: flex !important;
    width: 100% !important;
    border-top: 0.5px solid rgba(0, 0, 0, 0.1) !important;
}

.modern-confirm-btn {
    flex: 1 !important;
    padding: 16px !important;
    border: none !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    letter-spacing: -0.4px !important;
}

.modern-confirm-btn:active {
    background: #f2f2f7 !important;
}

.modern-confirm-btn.cancel {
    color: #8e8e93 !important;
    border-right: 0.5px solid rgba(0, 0, 0, 0.1) !important;
}

.modern-confirm-btn.confirm.danger {
    color: #ff3b30 !important;
}

.modern-confirm-btn.confirm.warning {
    color: #ff9500 !important;
}

.modern-confirm-btn.confirm.success {
    color: #34c759 !important;
}

.modern-confirm-btn.confirm.info {
    color: #007aff !important;
}

/* Input styles for Confirm Modal */
.modern-confirm-input-wrapper {
    width: 100% !important;
    margin-top: 15px !important;
}

.modern-confirm-input {
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: #f2f2f7 !important;
    font-size: 14px !important;
    font-family: inherit !important;
    resize: none !important;
    height: 60px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    text-align: left !important;
}

.modern-confirm-input:focus {
    border-color: #007aff !important;
    background: #ffffff !important;
}

.modern-confirm-input.is-invalid {
    border-color: #ff3b30 !important;
    background: rgba(255, 59, 48, 0.05) !important;
}


/* Custom Animations for Confirm Modals */
@keyframes confirmOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes confirmOverlayFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes confirmModalIn {
    0% { transform: scale(0.9) translateY(10px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes confirmModalOut {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.95) translateY(10px); opacity: 0; }
}

/* Animation Classes */
.confirm-animate-in {
    animation: confirmModalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.confirm-animate-out {
    animation: confirmModalOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.overlay-animate-in {
    animation: confirmOverlayFadeIn 0.3s ease forwards !important;
}

.overlay-animate-out {
    animation: confirmOverlayFadeOut 0.3s ease forwards !important;
}


@media (max-width: 480px) {
    .modern-confirm-modal {
        width: 85% !important;
    }
}