/**
 * Common CSP Utility Stylesheet (IPHACON 2027)
 * Consolidates inline styles into reusable, strict CSP-compliant classes.
 */

@import url('delegates/dashboard.css');

/* Width Utilities */
.w-5 { width: 5% !important; }
.w-8 { width: 8% !important; }
.w-10 { width: 10% !important; }
.w-12 { width: 12% !important; }
.w-15 { width: 15% !important; }
.w-18 { width: 18% !important; }
.w-20 { width: 20% !important; }
.w-22 { width: 22% !important; }
.w-25 { width: 25% !important; }
.w-28 { width: 28% !important; }
.w-30 { width: 30% !important; }
.w-35 { width: 35% !important; }
.w-40 { width: 40% !important; }
.w-45 { width: 45% !important; }
.w-50 { width: 50% !important; }
.w-60 { width: 60% !important; }
.w-70 { width: 70% !important; }
.w-80 { width: 80% !important; }

/* Display & Object-Fit */
.object-fit-cover { object-fit: cover !important; }
.object-fit-contain { object-fit: contain !important; }
.cursor-pointer { cursor: pointer !important; }

/* Dimensions */
.w-30px { width: 30px !important; }
.ced-logo-sm { width: 30px !important; height: auto; vertical-align: middle; }
.h-30px { height: 30px !important; }
.h-38px { height: 38px !important; }
.h-42px { height: 42px !important; }
.h-44px { height: 44px !important; }
.h-45px { height: 45px !important; }
.h-48px { height: 48px !important; }
.h-50px { height: 50px !important; }
.min-h-42px { min-height: 42px !important; }
.min-w-140px { min-width: 140px !important; }
.max-w-850px { max-width: 850px !important; }
.max-w-680px { max-width: 680px !important; }
.max-w-600px { max-width: 600px !important; }
.max-w-220px { max-width: 220px !important; height: auto !important; }
.max-w-155px { max-width: 155px !important; }

/* Font Sizes */
.fs-065rem { font-size: 0.65rem !important; }
.fs-07rem { font-size: 0.7rem !important; }
.fs-072rem { font-size: 0.72rem !important; }
.fs-075rem { font-size: 0.75rem !important; }
.fs-078rem { font-size: 0.78rem !important; }
.fs-08rem { font-size: 0.8rem !important; }
.fs-085rem { font-size: 0.85rem !important; }
.fs-09rem { font-size: 0.9rem !important; }
.fs-095rem { font-size: 0.95rem !important; }
.fs-1rem { font-size: 1rem !important; }
.fs-1-05rem { font-size: 1.05rem !important; }
.fs-1-1rem { font-size: 1.1rem !important; }
.fs-1-15rem { font-size: 1.15rem !important; }
.fs-1-2rem { font-size: 1.2rem !important; }
.fs-1-35rem { font-size: 1.35rem !important; }
.fs-1-45rem { font-size: 1.45rem !important; }
.fs-1-5rem { font-size: 1.5rem !important; }
.fs-2rem { font-size: 2rem !important; }
.fs-2-5rem { font-size: 2.5rem !important; }
.fs-3rem { font-size: 3rem !important; }
.fs-3-5rem { font-size: 3.5rem !important; }
.fs-4rem { font-size: 4rem !important; }

/* Letter Spacing */
.letter-spacing-05 { letter-spacing: 0.5px !important; }
.letter-spacing-1 { letter-spacing: 1px !important; }
.letter-spacing-2 { letter-spacing: 2px !important; }
.letter-spacing-7 { letter-spacing: 7px !important; }

/* Typography & Fonts */
.font-old-bookmark { font-family: old-bookmark, sans-serif !important; }

/* Border Radius */
.rounded-8 { border-radius: 8px !important; }
.rounded-10 { border-radius: 10px !important; }
.rounded-12 { border-radius: 12px !important; }
.rounded-14 { border-radius: 14px !important; }
.rounded-16 { border-radius: 16px !important; }
.rounded-20 { border-radius: 20px !important; }

/* Branding & Logos */
.ced-logo-img {
    width: 30px !important;
    height: 30px !important;
    vertical-align: middle !important;
}
.ced-brand-text {
    font-size: 15px !important;
    color: #cad90a !important;
    font-family: old-bookmark, sans-serif !important;
}
.auth-topbar {
    background: linear-gradient(90deg, #01579B 0%, #00897B 100%) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.logo-img-lg {
    max-height: 80px !important;
    object-fit: contain !important;
}
.logo-img-md {
    max-height: 75px !important;
    width: auto !important;
    object-fit: contain !important;
}
.logo-img-sm {
    max-height: 45px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Background Gradients & Colors */
.bg-gradient-dark-slate {
    background: linear-gradient(135deg, #0f172a, #1e293b, #334155) !important;
}
.bg-gradient-primary-card {
    background: linear-gradient(135deg, #2e3192, #4a5bcc) !important;
}
.bg-gradient-dark-auth {
    background: linear-gradient(135deg, #161b40 0%, #1e255e 50%, #2e3192 100%) !important;
}
.bg-gradient-danger-btn {
    background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
    border: none !important;
}
.btn-gradient-primary {
    background: linear-gradient(135deg, #2D69FF 0%, #1A52E0 100%) !important;
    border: none !important;
    color: #ffffff !important;
}
.btn-gradient-primary:hover {
    background: linear-gradient(135deg, #1A52E0 0%, #0F3BB3 100%) !important;
    color: #ffffff !important;
}
.bg-gradient-success {
    background: linear-gradient(135deg, #28a745, #218838) !important;
}
.border-bottom-primary-3 {
    border-bottom: 3px solid #2D69FF !important;
}
.cme-box-active {
    border-color: #10B981 !important;
    background: #ECFDF5 !important;
}
.cme-box-inactive {
    border-color: #E2E8F0 !important;
    background: #F8FAFC !important;
}
.cme-checkbox {
    width: 22px !important;
    height: 22px !important;
    cursor: pointer !important;
}
.pricing-breakdown-card {
    background: #F0F9FF !important;
    border: 1px dashed #0288D1 !important;
}
.btn-gradient-emerald {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    border: none !important;
}
.bg-verify-light {
    background-color: #F0F9FF !important;
    border-color: #BAE6FD !important;
}
.text-verify-info {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    color: #0369A1 !important;
}
.text-primary-theme {
    color: #2e3192 !important;
}
.bg-alert-soft-danger {
    background-color: #fff1f2 !important;
    color: #991b1b !important;
    font-size: 0.8rem !important;
}

/* Reusable Button Styles */
.btn-capsule {
    border-radius: 25px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    transition: all 0.25s ease !important;
}
.btn-capsule:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
}
.scroll-to-top-custom {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 18px !important;
}
.scroll-to-top-custom:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
}

/* Captcha & Auth Styles */
.captcha-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: #cbd5e1 !important;
}
.captcha-overlay {
    backdrop-filter: blur(2px);
}
.captcha-img-wrapper:hover .captcha-overlay {
    opacity: 1 !important;
}
.btn-submit-glow {
    background: linear-gradient(135deg, #1e255e 0%, #2e3192 50%, #4a5bcc 100%) !important;
    border: none !important;
    letter-spacing: 0.3px;
    color: #ffffff !important;
}
.btn-submit-glow:hover {
    background: linear-gradient(135deg, #161b40 0%, #242775 50%, #3e4eb3 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -4px rgba(46, 49, 146, 0.35) !important;
}
.btn-submit-glow:hover .submit-arrow {
    transform: translateX(3px);
}
.submit-arrow {
    transition: transform 0.2s ease;
}
.alert-custom-danger {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
}
.alert-custom-success {
    background-color: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
}
.hover-underline:hover {
    text-decoration: underline !important;
}

/* Dashboard Cards */
.dashboard-card {
    background: #ffffff;
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
}
.dashboard-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(2, 136, 209, 0.12) !important;
    border-color: rgba(2, 136, 209, 0.3) !important;
}
.dashboard-card .card-icon-box {
    transition: transform 0.3s ease;
}
.dashboard-card:hover .card-icon-box {
    transform: scale(1.1) rotate(-4deg);
}

/* Step 2 Cards & Interactive Selector Cards */
.step2-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease-in-out;
}
.step2-card:hover {
    border-color: rgba(45, 105, 255, 0.3);
    box-shadow: 0 4px 16px rgba(45, 105, 255, 0.06);
}
.step2-section-title {
    color: #2D69FF;
    font-weight: 700;
    font-size: 0.95rem;
}
.step2-radio-card {
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.step2-radio-card:hover {
    border-color: #93c5fd;
    background: #f0f9ff;
}
.step2-radio-input-yes:checked + .step2-radio-card {
    border-color: #2D69FF;
    background: #E1F0FF;
    box-shadow: 0 2px 8px rgba(45, 105, 255, 0.12);
}
.step2-radio-input-yes:checked + .step2-radio-card .radio-title {
    color: #2D69FF;
    font-weight: 700;
}
.step2-radio-input-yes:checked + .step2-radio-card .radio-icon {
    color: #2D69FF !important;
}
.step2-radio-input-no:checked + .step2-radio-card {
    border-color: #EF4444 !important;
    background: #FEF2F2 !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15) !important;
}
.step2-radio-input-no:checked + .step2-radio-card .radio-title {
    color: #DC2626 !important;
    font-weight: 700 !important;
}
.step2-radio-input-no:checked + .step2-radio-card .radio-icon {
    color: #DC2626 !important;
}
.step2-radio-input-no:checked + .step2-radio-card .no-badge {
    background-color: #FEE2E2 !important;
    color: #DC2626 !important;
    font-weight: 700 !important;
}
.total-fee-banner {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 14px;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(45, 105, 255, 0.2);
}