/* ==========================================================================
   DICHIARAZIONE REDDITI — STYLE v3.0
   Match Ravvedimento-Smart / IMU Neobank Design Language
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700;900&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================================
   0. VARIABLES (Blue Neobank Identity)
   ========================================================================== */

:root {
    /* Palette — Blue (CAF Public Brand) */
    --dr-primary: #093561;
    --dr-primary-hover: #072a4d;
    --dr-primary-light: #dbeafe;
    --dr-primary-soft: #eff6ff;

    /* CAF Public Brand Tokens */
    --cafp-blu: #093561;
    --cafp-turchese: #048BA8;
    --cafp-acqua: #06C4B6;
    --cafp-arancione: #FFA500;

    /* Functional States */
    --dr-success: #10B981;
    --dr-warning: #D97706;
    --dr-danger: #DC2626;

    /* UI Base */
    --dr-bg-body: #F2F7FC;
    --dr-bg-input: #F1F5F9;
    --dr-border: #DFE3E6;
    --dr-text-main: #1E293B;
    --dr-text-light: #64748B;

    /* Effects */
    --dr-radius: 20px;
    --dr-radius-lg: 24px;
    --dr-shadow-card: 0 4px 12px rgba(9, 53, 97, 0.05);
    --dr-shadow-float: 0 24px 45px -18px rgba(9, 53, 97, 0.15);
    --dr-shadow-card-hover: 0 18px 40px -16px rgba(9, 53, 97, 0.25);
    --dr-focus-ring: 0 0 0 3px rgba(9, 53, 97, 0.15);
}

/* ==========================================================================
   1. RESET & FULL-WIDTH LAYOUT
   ========================================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    float: none;
    box-sizing: border-box;
    border: none;
    background: var(--dr-bg-body) !important;
    height: auto !important;
    min-height: auto !important;
}

#page,
#content,
#primary,
#main,
.site,
.site-content,
.content-area,
.site-main,
article:not(.dr-calc-link-card),
.entry-content,
.hentry,
.post,
.page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    border: none !important;
    background: transparent !important;
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    flex: none !important;
}

#secondary,
.sidebar,
.widget-area {
    display: none !important;
}

.site-content::before,
.site-content::after,
#primary::before,
#primary::after {
    display: none !important;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--dr-text-main);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ==========================================================================
   2. WRAPPER & COLUMNS (Exact Ravvedimento Match)
   ========================================================================== */

.imu-wrapper {
    width: 100%;
    padding: 40px 0 70px 0;
    overflow-x: hidden;
}

.imu-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.imu-main-col {
    max-width: 900px;
    margin: 0 auto;
}

/* ==========================================================================
   3. PAGE HEADER (Left-Border Accent)
   ========================================================================== */

.imu-page-title {
    background: #FFFFFF;
    padding: 34px 36px;
    margin-bottom: 22px;
    border-radius: var(--dr-radius);
    border: 1px solid var(--dr-border);
    border-left: 5px solid var(--dr-primary);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    transition: all 0.3s;
}

.imu-page-title:hover {
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    border-left-color: var(--dr-primary-hover);
}

.imu-page-title h1 {
    margin: 0 0 8px 0;
    font-size: 30px;
    font-weight: 700;
    color: #1C2024;
    letter-spacing: .01em;
}

.imu-page-sub {
    margin: 0;
    font-size: 15px;
    color: #5A6772;
    line-height: 1.5;
}

/* Meta Row */
.imu-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--dr-border);
}

.imu-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.imu-meta-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7A8691;
    font-weight: 700;
}

.imu-meta-value {
    font-size: 15px;
    font-weight: 600;
    color: #1C2024;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-green {
    color: var(--dr-primary) !important;
    font-weight: 700;
}

.status-green svg {
    width: 14px;
    height: 14px;
}

/* Info Bar Pills */
.imu-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 14px;
    font-size: 13px;
    color: #425160;
}

.imu-info-pill {
    background: #F7FAFF;
    border: 1px solid #E3ECF9;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-icon {
    display: inline-flex;
    align-items: center;
    color: var(--dr-primary);
    font-weight: 700;
}

.info-icon svg {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   4. BOX / CARD (Universal imu-box)
   ========================================================================== */

.imu-box {
    background: #FFFFFF;
    border: 1px solid var(--dr-border);
    border-radius: var(--dr-radius);
    padding: 22px 24px;
    box-shadow: var(--dr-shadow-card);
    margin-top: 20px;
    transition: all 0.3s;
}

.imu-box:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: #B8C5D0;
}

.imu-box h3 {
    margin: 0 0 14px 0;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid #E5EAF0;
    padding-bottom: 10px;
    position: relative;
    color: #1C2024;
    display: flex;
    align-items: center;
    gap: 8px;
}

.imu-box h3 svg {
    width: 18px;
    height: 18px;
    color: var(--dr-primary);
}

.imu-box h3::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--dr-primary), var(--dr-primary-hover));
    transition: width 0.4s;
}

.imu-box:hover h3::before {
    width: 80px;
}

/* ==========================================================================
   5. FAQ ACCORDION (details/summary — Ravvedimento Pattern)
   ========================================================================== */

/* ==========================================================================
   5. FAQ ACCORDION (details/summary — Ravvedimento Pattern)
   ========================================================================== */

.imu-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.imu-faq-item {
    background: #F9FBFF !important;
    border: 1px solid #E3ECF9 !important;
    border-radius: var(--dr-radius);
    overflow: hidden;
    transition: all 0.3s;
}

.imu-faq-item:hover {
    border-color: #CFE3FF !important;
    box-shadow: 0 4px 16px rgba(30, 64, 175, 0.08);
}

.imu-faq-item[open] {
    background: #FFFFFF !important;
    border-color: var(--dr-primary) !important;
    box-shadow: 0 4px 20px rgba(30, 64, 175, 0.1);
}

.imu-faq-item summary {
    cursor: pointer;
    padding: 18px 20px;
    font-weight: 700;
    font-size: 16px;
    color: #1e293b !important;
    background: transparent !important;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    outline: none;
}

.imu-faq-item summary::after {
    content: "+";
    font-weight: 300;
    color: var(--dr-primary);
    font-size: 24px;
    line-height: 1;
    transition: transform 0.2s;
}

.imu-faq-item[open] summary::after {
    content: "\2212";
    /* Minus sign */
    transform: rotate(180deg);
}

.imu-faq-item summary::-webkit-details-marker {
    display: none;
}

.imu-faq-body {
    padding: 0 20px 24px;
    font-size: 15px;
    color: #475569 !important;
    line-height: 1.6;
    background: #FFFFFF !important;
    border-top: 1px solid #f1f5f9;
}

.imu-faq-body p {
    margin: 0 0 10px 0;
}

.imu-faq-body p:last-child {
    margin: 0;
}

/* ==========================================================================
   6. GLOSSARY (Hover-Slide Cards)
   ========================================================================== */

.imu-glossary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.imu-glossary-item {
    background: #fff;
    border: 1px solid #EEF2F7;
    border-radius: var(--dr-radius);
    padding: 14px;
    transition: all 0.3s;
}

.imu-glossary-item:hover {
    background: var(--dr-primary-soft);
    border-color: var(--dr-primary-light);
    transform: translateX(4px);
}

.imu-glossary-term {
    font-weight: 700;
    color: var(--dr-primary);
    font-size: 15px;
    margin-bottom: 4px;
}

.imu-glossary-def {
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
}

/* ==========================================================================
   7. CHECKLIST
   ========================================================================== */

.dr-calc-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dr-calc-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    color: #334155;
    line-height: 1.5;
    padding: 10px 14px;
    background: #F9FBFF;
    border: 1px solid #EEF2F7;
    border-radius: var(--dr-radius);
    transition: all 0.2s;
}

.dr-calc-checklist li:hover {
    background: var(--dr-primary-soft);
    border-color: var(--dr-primary-light);
}

.dr-calc-checklist li svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ==========================================================================
   8. POWER CARDS (Alert Grid)
   ========================================================================== */

.dr-calc-power-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 20px 0;
}

.dr-calc-power-card {
    background: #fff;
    border: 1px solid var(--dr-border);
    border-radius: var(--dr-radius);
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #334155;
    box-shadow: var(--dr-shadow-card);
    transition: all 0.3s;
}

.dr-calc-power-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.dr-calc-pc-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--dr-primary-soft);
    color: var(--dr-primary);
}

.dr-calc-pc-icon svg {
    width: 18px;
    height: 18px;
}

.dr-calc-pc-text {
    flex: 1;
}

.dr-calc-pc-text strong {
    color: var(--dr-text-main);
}

/* Power Card Types */
.dr-calc-power-risparmio {
    border-left: 3px solid var(--dr-success);
}

.dr-calc-power-risparmio .dr-calc-pc-icon {
    background: #ecfdf5;
    color: var(--dr-success);
}

.dr-calc-power-redditi {
    border-left: 3px solid var(--dr-warning);
}

.dr-calc-power-redditi .dr-calc-pc-icon {
    background: #fffbeb;
    color: var(--dr-warning);
}

.dr-calc-power-limite,
.dr-calc-power-aumento {
    border-left: 3px solid var(--dr-danger);
}

.dr-calc-power-limite .dr-calc-pc-icon,
.dr-calc-power-aumento .dr-calc-pc-icon {
    background: #fef2f2;
    color: var(--dr-danger);
}

.dr-calc-power-giovani,
.dr-calc-power-bonus {
    border-left: 3px solid #8B5CF6;
}

.dr-calc-power-giovani .dr-calc-pc-icon,
.dr-calc-power-bonus .dr-calc-pc-icon {
    background: #f5f3ff;
    color: #8B5CF6;
}

.dr-calc-power-tracciabilita,
.dr-calc-power-codici {
    border-left: 3px solid var(--dr-primary);
}

.dr-calc-power-strategia .dr-calc-pc-icon {
    background: #fffbeb;
    color: #D97706;
}

/* ==========================================================================
   9. TRUST NOTE
   ========================================================================== */

.imu-trust-note {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
    background: var(--dr-primary-soft);
    border: 1px dashed var(--dr-primary-light);
    padding: 12px 14px;
    border-radius: var(--dr-radius);
    margin-top: 20px;
}

.imu-trust-note p {
    margin: 0;
}

/* ==========================================================================
   10. EXPERT INTRO & TIP BOX
   ========================================================================== */

.expert-p {
    font-size: 15px;
    line-height: 1.6;
    color: #475569;
    margin: 16px 0;
}

.dr-calc-tip {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    padding: 16px 20px;
    margin: 20px 0;
    border-radius: 0 var(--dr-radius) var(--dr-radius) 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14.5px;
    color: #92400e;
    line-height: 1.5;
}

.dr-calc-tip-icon {
    color: var(--dr-warning);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.dr-calc-tip-icon svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   11. RELATED TOOLS GRID
   ========================================================================== */

.dr-calc-grid-small {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.dr-calc-link-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--dr-radius);
    text-decoration: none;
    color: var(--dr-text-main);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.dr-calc-link-card:hover {
    border-color: var(--dr-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.dr-calc-link-card svg {
    color: var(--dr-primary);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ==========================================================================
   12. CALCULATOR CARDS (Premium IMU-Style)
   ========================================================================== */

/* --- Dashboard Layout --- */
.dr-calc-dashboard {
    max-width: 900px;
    margin: 0 auto;
}

.dr-calc-dashboard-header {
    text-align: center;
    margin-bottom: 30px;
}

.dr-calc-dashboard-header h2 {
    font-size: 2rem;
    font-weight: 900;
    color: #1C2024;
    margin: 0 0 6px;
}

.dr-calc-dashboard-sub {
    font-size: 1rem;
    color: var(--dr-text-light);
    font-weight: 600;
    margin: 0;
}

.dr-calc-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* --- Card Container --- */
.dr-calc-card {
    position: relative;
    background: #ffffff;
    border-radius: var(--dr-radius-lg);
    border: 1px solid var(--dr-border);
    box-shadow: var(--dr-shadow-float);
    color: var(--dr-text-main);
    box-shadow: var(--dr-shadow-float);
    color: var(--dr-text-main);
    overflow: visible;
    /* Fixed tooltip clipping */
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.dr-calc-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dr-shadow-card-hover);
}

/* --- Card Header (Gradient) --- */
.dr-calc-card-header {
    background: radial-gradient(circle at top left, #e0f2fe 0%, #ffffff 48%, #eef2ff 100%);
    padding: 22px 28px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
    display: flex;
    align-items: center;
    align-items: center;
    gap: 14px;
    border-radius: var(--dr-radius-lg) var(--dr-radius-lg) 0 0;
    /* Maintain radius after overflow:visible */
}

.dr-calc-card-header h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: #1C2024;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* --- Card Icon Badge --- */
.dr-calc-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--dr-primary), var(--dr-primary-hover));
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25);
}

.dr-calc-card-icon svg {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
}

/* --- Card Body (Form Area) --- */
.dr-calc-card-body {
    padding: 28px 28px 24px;
    background: #ffffff;
}

/* --- Form Groups --- */
.dr-calc-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dr-calc-form-group {
    margin-bottom: 20px;
}

.dr-calc-label,
.dr-calc-form-group label {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--dr-text-main);
    margin-bottom: 7px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

/* --- Inputs --- */
.dr-calc-input,
.dr-calc-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 13px 14px;
    border: 1px solid transparent;
    background-color: var(--dr-bg-input);
    border-radius: 10px;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--dr-text-main);
    font-family: 'Titillium Web', sans-serif;
}

@keyframes cafp-fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

/* Hidden by default, toggled via JS */
.cafp-extra-item {
    display: none;
}

/* Show-more button (FAQ / Glossario) */
.cafp-show-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 50px;
    border: 2px solid var(--dr-primary);
    background: transparent;
    color: var(--dr-primary);
    font-family: 'Titillium Web', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 10px;
}

.cafp-show-more-btn:hover {
    background: var(--dr-primary-soft);
    transform: translateY(-2px);
}

.cafp-show-more-btn.cafp-expanded {
    background: var(--dr-primary);
    color: #fff;
}

.dr-calc-input:focus,
.dr-calc-select:focus {
    background-color: #ffffff;
    border-color: var(--dr-primary);
    box-shadow: var(--dr-focus-ring);
    outline: none;
}

.dr-calc-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* --- Info Tooltip --- */
.dr-calc-info {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background: var(--dr-bg-input);
    color: var(--dr-text-light);
    border-radius: 50%;
    cursor: help;
    margin-left: 8px;
    transition: all 0.2s;
    z-index: 20;
}

.dr-calc-info svg {
    width: 14px;
    height: 14px;
}

.dr-calc-info:hover {
    background: var(--dr-primary);
    color: #fff;
    transform: translateY(-1px) scale(1.05);
}

.dr-calc-info::after {
    content: attr(data-text);
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: calc(100% + 8px);
    min-width: 220px;
    max-width: 280px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #0f172a;
    color: #e5e7eb;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    white-space: normal;
    z-index: 40;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.dr-calc-info::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 100%;
    border-width: 6px;
    border-style: solid;
    border-color: #0f172a transparent transparent transparent;
    opacity: 0;
    z-index: 39;
    transition: opacity 0.18s ease;
}

.dr-calc-info:hover::after,
.dr-calc-info:hover::before {
    opacity: 1;
    transform: translate(-50%, -2px);
}

/* --- Toggle Checkbox --- */
.dr-calc-toggle-group {
    margin-bottom: 18px;
}

.dr-calc-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dr-text-main);
}

.dr-calc-toggle-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--dr-border);
    border-radius: 5px;
    background: var(--dr-bg-input);
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
    flex-shrink: 0;
}

.dr-calc-toggle-label input[type="checkbox"]:checked {
    background: var(--dr-primary);
    border-color: var(--dr-primary);
}

.dr-calc-toggle-label input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.dr-calc-toggle-text {
    text-transform: none;
    letter-spacing: 0;
}

/* --- Comune feedback --- */
.dr-calc-comune-feedback {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--dr-primary);
    padding: 4px 10px;
    background: var(--dr-primary-soft);
    border-radius: 999px;
}

/* ==========================================================================
   13. CALCULATOR CTA BUTTON
   ========================================================================== */

.dr-calc-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--dr-primary), var(--dr-primary-hover));
    color: #fff;
    border: none;
    padding: 16px 20px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 1.05rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 5px 16px rgba(30, 64, 175, 0.28);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, background 0.35s ease, filter 0.15s ease;
    margin-top: 6px;
    font-family: 'Titillium Web', sans-serif;
    position: relative;
    overflow: hidden;
    outline: none;
    -webkit-appearance: none;
}

.dr-calc-btn:hover {
    transform: translateY(-3px) scale(1.012);
    box-shadow: 0 14px 30px rgba(9, 53, 97, 0.38);
    filter: brightness(1.06);
}

.dr-calc-btn:active {
    transform: scale(0.96) translateY(1px);
    box-shadow: 0 2px 8px rgba(9, 53, 97, 0.2);
    filter: brightness(0.97);
    transition: transform 0.06s ease, box-shadow 0.06s ease;
}

/* --- Ripple Effect --- */
.dr-calc-btn .dr-btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: dr-ripple-anim 0.55s linear;
    pointer-events: none;
}

@keyframes dr-ripple-anim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* --- Loading State --- */
.dr-calc-btn.is-loading {
    pointer-events: none;
    background: linear-gradient(135deg, #2a5a8f, #14406a);
    filter: none;
}

.dr-calc-btn.is-loading .dr-btn-label {
    opacity: 0.5;
}

.dr-calc-btn .dr-btn-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dr-spin 0.7s linear infinite;
    flex-shrink: 0;
}

.dr-calc-btn.is-loading .dr-btn-spinner {
    display: block;
}

@keyframes dr-spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- Success State --- */
.dr-calc-btn.is-success {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 8px 22px rgba(5, 150, 105, 0.38);
    pointer-events: none;
    transform: scale(1.008);
}

.dr-calc-btn .dr-btn-check {
    display: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    animation: dr-check-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dr-calc-btn.is-success .dr-btn-check {
    display: block;
}

.dr-calc-btn.is-success .dr-btn-spinner {
    display: none;
}

@keyframes dr-check-pop {
    0% {
        transform: scale(0) rotate(-20deg);
        opacity: 0;
    }

    70% {
        transform: scale(1.25) rotate(5deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.dr-calc-btn svg {
    stroke: #fff;
    flex-shrink: 0;
}

/* Keep legacy .dr-calc-btn-primary */
.dr-calc-btn-primary {
    width: 100%;
    background: linear-gradient(135deg, var(--dr-primary), var(--dr-primary-hover));
    color: #fff;
    border: none;
    padding: 18px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1.1rem;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(30, 64, 175, 0.3);
    transition: all 0.2s ease;
    font-family: 'Titillium Web', sans-serif;
}

.dr-calc-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(30, 64, 175, 0.4);
}

/* --- Small link button (suggestions) --- */
.dr-calc-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: var(--dr-primary);
    color: #fff;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: all 0.15s;
    margin-top: 8px;
}

.dr-calc-btn-sm:hover {
    background: var(--dr-primary-hover);
    transform: translateY(-1px);
}

/* ==========================================================================
   13b. RESULT BOX (Animated Panel)
   ========================================================================== */

.dr-calc-result-box {
    border-top: 1px solid var(--dr-border);
    background: linear-gradient(135deg, var(--dr-primary-soft) 0%, #ffffff 100%);
    padding: 28px 28px 24px;
    text-align: center;
    animation: dr-result-enter 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes dr-result-enter {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }

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

.dr-calc-result-box .dr-calc-result-label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    color: var(--dr-text-light);
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: 0.08em;
    animation: dr-result-enter 0.4s 0.05s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.dr-calc-result-box .dr-calc-result-value {
    display: block;
    font-size: 3rem;
    font-weight: 900;
    color: var(--dr-primary);
    line-height: 1.05;
    font-family: 'Inter', sans-serif;
    margin-bottom: 10px;
    animation: dr-value-pop 0.6s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes dr-value-pop {
    0% {
        opacity: 0;
        transform: scale(0.7);
        filter: blur(4px);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

    80% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
    }
}

/* Glow pulse after pop */
.dr-calc-result-box.dr-result-fresh .dr-calc-result-value {
    animation: dr-value-pop 0.6s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        dr-glow-pulse 1.2s 0.7s ease-out both;
}

@keyframes dr-glow-pulse {
    0% {
        text-shadow: 0 0 0px rgba(9, 53, 97, 0);
    }

    40% {
        text-shadow: 0 0 22px rgba(9, 53, 97, 0.35), 0 0 8px rgba(4, 139, 168, 0.25);
    }

    100% {
        text-shadow: 0 0 0px rgba(9, 53, 97, 0);
    }
}

.dr-calc-result-delta {
    font-size: 0.88rem;
    color: var(--dr-text-light);
    line-height: 1.7;
}

/* Staggered breakdown rows */
.dr-calc-result-delta>div {
    animation: dr-row-in 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.dr-calc-result-delta>div:nth-child(1) {
    animation-delay: 0.18s;
}

.dr-calc-result-delta>div:nth-child(2) {
    animation-delay: 0.25s;
}

.dr-calc-result-delta>div:nth-child(3) {
    animation-delay: 0.31s;
}

.dr-calc-result-delta>div:nth-child(4) {
    animation-delay: 0.37s;
}

.dr-calc-result-delta>div:nth-child(5) {
    animation-delay: 0.42s;
}

.dr-calc-result-delta>div:nth-child(6) {
    animation-delay: 0.47s;
}

.dr-calc-result-delta>div:nth-child(7) {
    animation-delay: 0.51s;
}

@keyframes dr-row-in {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.dr-calc-result-tag {
    display: inline-block;
    font-size: 0.84rem;
    color: #475569;
    font-weight: 500;
}

.dr-calc-result-tag svg {
    vertical-align: -2px;
    margin-right: 3px;
}

/* --- Rich Content Injection --- */
.dr-calc-rich-content {
    margin-top: 10px;
    /* Reduced from 15px */
    padding-top: 10px;
    /* Reduced from 15px */
    border-top: 1px dashed #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Reduced from 8px, very tight */
    text-align: left;
}

.dr-calc-tip {
    display: flex;
    gap: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left-width: 4px;
    /* Thick colored border */
    padding: 12px 14px;
    border-radius: 8px;
    /* Slightly more rounded */
    font-size: 0.9rem;
    /* Restore readable font size */
    color: #334155;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dr-calc-tip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.dr-calc-tip-icon {
    flex-shrink: 0;
    width: 36px;
    /* Fixed size container */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    /* Soft square */
    background: #f1f5f9;
    /* Default gray bg */
    color: #64748b;
    /* Default gray icon */
}

/* --- Color Variants --- */

/* Green (Risparmio / Money) */
.dr-calc-tip-green {
    border-left-color: #10b981;
}

.dr-calc-tip-green .dr-calc-tip-icon {
    background: #ecfdf5;
    color: #059669;
}

/* Red (Limit / Alert) */
.dr-calc-tip-red {
    border-left-color: #ef4444;
}

.dr-calc-tip-red .dr-calc-tip-icon {
    background: #fef2f2;
    color: #dc2626;
}

/* Orange (Strategy / Warning) */
.dr-calc-tip-orange {
    border-left-color: #f59e0b;
}

.dr-calc-tip-orange .dr-calc-tip-icon {
    background: #fffbeb;
    color: #d97706;
}

/* Purple (Special / Growth) */
.dr-calc-tip-purple {
    border-left-color: #8b5cf6;
}

.dr-calc-tip-purple .dr-calc-tip-icon {
    background: #f5f3ff;
    color: #7c3aed;
}

/* Blue (Info / Default) */
.dr-calc-tip-blue {
    border-left-color: #3b82f6;
}

.dr-calc-tip-blue .dr-calc-tip-icon {
    background: #eff6ff;
    color: #2563eb;
}

.dr-calc-tip-text strong {
    font-weight: 700;
    color: #1e293b;
    /* Darker strong text */
}

.dr-calc-mini-action {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #475569;
    font-weight: 500;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 6px;
}

.dr-calc-mini-action svg {
    color: #16a34a;
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   13c. SMART SUGGESTION (Cross-Link Panel)
   ========================================================================== */

.dr-calc-smart-suggestion {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 24px;
    margin: 0;
    background: #fffbeb;
    border-top: 1px solid #fcd34d;
    animation: slideUp 0.4s ease;
}

.dr-calc-suggestion-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(252, 211, 77, 0.25);
    color: #92400e;
}

.dr-calc-suggestion-content h4 {
    margin: 0 0 4px;
    font-size: 0.9rem;
    font-weight: 800;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dr-calc-suggestion-content p {
    margin: 0 0 6px;
    font-size: 0.85rem;
    color: #78350f;
    line-height: 1.5;
}

/* ==========================================================================
   14. ELIGIBILITY TABLE
   ========================================================================== */

.dr-calc-eligibility-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

.dr-calc-eligibility-table th {
    text-align: left;
    padding: 12px 8px;
    border-bottom: 2px solid #F1F5F9;
    color: var(--dr-text-light);
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
}

.dr-calc-eligibility-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #F1F5F9;
    color: #334155;
}

.dr-calc-badge-rigo {
    background: #0f172a;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
}

.num-val {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: var(--dr-primary);
}

/* ==========================================================================
   15. RESULT PANEL (Calculator Output)
   ========================================================================== */

.dr-calc-result-panel {
    background: linear-gradient(135deg, var(--dr-primary-soft) 0%, #FFFFFF 100%);
    padding: 30px;
    border-radius: 16px;
    border: 2px solid var(--dr-primary-light);
    text-align: center;
    margin-top: 24px;
    box-shadow: 0 10px 30px rgba(30, 64, 175, 0.05);
}

.dr-calc-result-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--dr-primary-hover);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.dr-calc-result-value {
    display: block;
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--dr-primary);
    line-height: 1.1;
    font-family: 'Inter', sans-serif;
}

.dr-calc-result-breakdown {
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--dr-text-light);
}

.dr-calc-result-breakdown b {
    color: var(--dr-text-main);
}

/* ==========================================================================
   16. AD SLOTS
   ========================================================================== */

.dr-calc-ad-container {
    margin: 32px auto;
    text-align: center;
    overflow: hidden;
    min-height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dr-calc-ad-container:empty {
    display: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

#dr-calc-ad-header {
    margin-bottom: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--dr-radius);
    padding: 16px;
}

#dr-calc-ad-content {
    margin-top: 20px;
    margin-bottom: 20px;
    background: #f1f5f9;
    border-radius: var(--dr-radius);
    padding: 16px;
}

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .imu-inner {
        padding: 0 16px;
    }

    .imu-page-title {
        padding: 20px;
    }

    .imu-page-title h1 {
        font-size: 22px;
    }

    .dr-calc-power-cards-grid {
        grid-template-columns: 1fr;
    }

    .dr-calc-grid-small {
        grid-template-columns: 1fr;
    }

    .imu-meta-row {
        gap: 14px;
    }

    /* Calculator Cards Mobile */
    .dr-calc-card-header {
        padding: 18px 20px 14px;
    }

    .dr-calc-card-header h3 {
        font-size: 1.1rem;
    }

    .dr-calc-card-body {
        padding: 20px 20px 18px;
    }

    .dr-calc-result-box {
        padding: 22px 20px 18px;
    }

    .dr-calc-result-box .dr-calc-result-value {
        font-size: 2.4rem;
    }

    .dr-calc-card-icon {
        width: 36px;
        height: 36px;
    }

    .dr-calc-card-icon svg {
        width: 18px;
        height: 18px;
    }

    .dr-calc-btn {
        font-size: 0.95rem;
        padding: 14px 16px;
    }

    .dr-calc-smart-suggestion {
        flex-direction: column;
        padding: 14px 18px;
    }

    .dr-calc-dashboard-header h2 {
        font-size: 1.5rem;
    }

    /* Tooltip repositioning */
    .dr-calc-info::after {
        left: auto;
        right: 0;
        transform: translate(0, 0);
        min-width: 180px;
    }

    .dr-calc-info::before {
        left: auto;
        right: 6px;
        transform: none;
    }
}

/* ==========================================================================
   18. ANIMATIONS
   ========================================================================== */

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes pulse-ad {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.refresh-anim {
    animation: pulse-ad 0.8s ease-in-out;
    border-color: var(--dr-primary);
    box-shadow: 0 0 15px rgba(30, 64, 175, 0.2);
}

/* ==========================================================================
   MODULES SLIDER (Premium Carousel)
   ========================================================================== */
.dr-calc-modules-slider {
    margin: 40px 0 32px 0;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    padding: 0 16px;
    /* Allow nav buttons to float outside */
}

/* Section Header (Flex Container for Title + Controls) */
.dr-calc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-left: 4px;
    padding-right: 4px;
}

.dr-calc-modules-slider h3 {
    margin: 0;
    font-family: 'Titillium Web', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1C2024;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Slider Header (Missing Style Restored) */
.dr-calc-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 4px;
}

/* Slider Controls (New Premium "Smart" Layout) */
.dr-calc-slider-controls {
    display: flex;
    gap: 12px;
    align-items: center;
}

.dr-calc-nav-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #E2E8F0;
    background: #ffffff;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 1;
}

.dr-calc-nav-btn:hover {
    border-color: var(--dr-primary);
    background: #EFF6FF;
    color: var(--dr-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.15);
}

.dr-calc-nav-btn:active {
    transform: scale(0.96);
}

.dr-calc-nav-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
    stroke: #475569 !important;
    fill: none !important;
}



.dr-calc-slider-track {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 10px 4px 30px 4px;
    /* Space for shadow */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
    -ms-overflow-style: none;
    /* Hide scrollbar IE */
}

.dr-calc-slider-track::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari */
}

.dr-calc-module-card {
    flex: 0 0 240px;
    /* Wider cards */
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: left;
    /* Align left for premium feel */
    text-decoration: none !important;
    color: var(--dr-text-main) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

/* Premium Hover Effect */
.dr-calc-module-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--dr-primary-light);
}

.dr-calc-module-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--dr-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dr-calc-module-card:hover::before {
    opacity: 1;
}

/* Icon Container */
.dr-calc-card-icon {
    width: 48px;
    height: 48px;
    background: var(--dr-primary-soft);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dr-primary);
    transition: background 0.3s ease, color 0.3s ease;
}

.dr-calc-module-card:hover .dr-calc-card-icon {
    background: var(--dr-primary);
    color: #ffffff;
}

.dr-calc-card-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    stroke: currentColor;
    fill: none;
}

/* Content */
.dr-calc-card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.dr-calc-module-card span.dr-title {
    font-family: 'Titillium Web', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--dr-text-main);
}

.dr-calc-module-card span.dr-subtitle {
    font-size: 13px;
    color: var(--dr-text-light);
    font-weight: 500;
}

/* Action Link arrow */
.dr-calc-card-action {
    font-size: 13px;
    font-weight: 600;
    color: var(--dr-primary);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
}

.dr-calc-card-action svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.dr-calc-module-card:hover .dr-calc-card-action svg {
    transform: translateX(3px);
}

/* ==========================================================================
   19. SINGLE CALCULATOR LAYOUT (IMU / WRAPPER)
   ========================================================================== */

.imu-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 60px;
}

.imu-inner {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.imu-page-title {
    margin-bottom: 40px;
    padding-top: 40px;
}

.imu-page-title h1 {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--dr-primary);
    line-height: 1.2;
    margin: 0 0 16px;
}

.imu-page-sub {
    font-size: 1.1rem;
    color: var(--dr-text-light);
    line-height: 1.6;
    max-width: 600px;
    margin: 0;
}

/* Meta Row (Year, Model, Normative) */
.imu-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--dr-border);
}

.imu-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.imu-meta-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--dr-text-light);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.imu-meta-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dr-text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}

.imu-meta-value.status-green {
    color: var(--dr-success);
}

.imu-meta-value svg {
    width: 16px;
    height: 16px;
}

/* Info Bar (Pills) */
.imu-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.imu-info-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--dr-border);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--dr-text-main);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.imu-info-pill .info-icon {
    display: flex;
    align-items: center;
    color: var(--dr-primary);
}

.imu-info-pill .info-icon svg {
    width: 16px;
    height: 16px;
}

/* Main Content Column */
.imu-main-col {
    width: 100%;
}

/* Box Style (Wrapper for Calculator) */
.imu-box {
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--dr-border);
    box-shadow: var(--dr-shadow-card);
    padding: 30px;
    margin-bottom: 30px;
}

.imu-box h3 {
    margin-top: 0;
    margin-bottom: 24px;
    font-family: 'Titillium Web', sans-serif;
    color: #1C2024;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.imu-box h3 svg {
    width: 24px;
    height: 24px;
}

/* Responsive adjustments for IMU layout */
@media (max-width: 768px) {
    .imu-page-title h1 {
        font-size: 1.8rem;
    }

    .imu-meta-row {
        gap: 16px;
    }

    .imu-box {
        padding: 20px;
    }
}

/* ==========================================================================
   20. ICONS (CSS Mask - Anti-Crash System)
   ========================================================================== */

.dr-icon {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: text-bottom;
}

.dr-icon-calculator {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIyIiB5PSIzIiB3aWR0aD0iMjAiIGhlaWdodD0iMTgiIHJ4PSIyIi8+PGxpbmUgeDE9IjIiIHkxPSI5IiB4Mj0iMjIiIHkyPSI5Ii8+PGxpbmUgeDE9IjEwIiB5MT0iMyIgeDI9IjEwIiB5Mj0iMjEiLz48L3N2Zz4=');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIyIiB5PSIzIiB3aWR0aD0iMjAiIGhlaWdodD0iMTgiIHJ4PSIyIi8+PGxpbmUgeDE9IjIiIHkxPSI5IiB4Mj0iMjIiIHkyPSI5Ii8+PGxpbmUgeDE9IjEwIiB5MT0iMyIgeDI9IjEwIiB5Mj0iMjEiLz48L3N2Zz4=');
}

.dr-icon-family {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTcgMjF2LTJhNCA0IDAgMCAwLTQtNEg1YTQgNCAwIDAgMC00IDR2MiIvPjxjaXJjbGUgY3g9IjkiIGN5PSI3IiByPSI0Ii8+PHBhdGggZD0iTTIzIDIxdi0yYTQgNCAwIDAgMC0zLTMuODciLz48cGF0aCBkPSJNMTYgMy4xM2E0IDQgMCAwIDEgMCA3Ljc1Ii8+PC9zdmc+');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTcgMjF2LTJhNCA0IDAgMCAwLTQtNEg1YTQgNCAwIDAgMC00IDR2MiIvPjxjaXJjbGUgY3g9IjkiIGN5PSI3IiByPSI0Ii8+PHBhdGggZD0iTTIzIDIxdi0yYTQgNCAwIDAgMC0zLTMuODciLz48cGF0aCBkPSJNMTYgMy4xM2E0IDQgMCAwIDEgMCA3Ljc1Ii8+PC9zdmc+');
}

.dr-icon-education {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjIgMTB2Nk0yIDEwbDEwLTUgMTAgNS0xMCA1eiIvPjxwYXRoIGQ9Ik02IDEydjVjMCAxIDQgMyA2IDNzNi0yIDYtM3YtNSIvPjwvc3ZnPg==');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjIgMTB2Nk0yIDEwbDEwLTUgMTAgNS0xMCA1eiIvPjxwYXRoIGQ9Ik02IDEydjVjMCAxIDQgMyA2IDNzNi0yIDYtM3YtNSIvPjwvc3ZnPg==');
}

.dr-icon-house {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyA5bDktNyA5IDd2MTFhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ6Ii8+PHBvbHlsaW5lIHBvaW50cz0iOSAyMiA5IDEyIDE1IDEyIDE1IDIyIi8+PC9zdmc+');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyA5bDktNyA5IDd2MTFhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ6Ii8+PHBvbHlsaW5lIHBvaW50cz0iOSAyMiA5IDEyIDE1IDEyIDE1IDIyIi8+PC9zdmc+');
}

.dr-icon-shield {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMjJzOC00IDgtMTBWNWwtOC0zLTggM3Y3YzAgNiA4IDEwIDggMTB6Ii8+PC9zdmc+');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgMjJzOC00IDgtMTBWNWwtOC0zLTggM3Y3YzAgNiA4IDEwIDggMTB6Ii8+PC9zdmc+');
}

.dr-icon-lightbulb {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48bGluZSB4MT0iOSIgeTE9IjE4IiB4Mj0iMTUiIHkyPSIxOCIvPjxsaW5lIHgxPSIxMCIgeTE9IjIyIiB4Mj0iMTQiIHkyPSIyMiIvPjxwYXRoIGQ9Ik0xNS4wOSAxNGMuMTgtLjk4LjY1LTEuNzQgMS40MS0yLjVBNC42NSA0LjY1IDAgMCAwIDE4IDggNiA2IDAgMCAwIDYgOGMwIDEgLjIzIDIuMjMgMS41IDMuNUE0LjYxIDQuNjEgMCAwIDEgOC45MSAxNCIvPjwvc3ZnPg==');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48bGluZSB4MT0iOSIgeTE9IjE4IiB4Mj0iMTUiIHkyPSIxOCIvPjxsaW5lIHgxPSIxMCIgeTE9IjIyIiB4Mj0iMTQiIHkyPSIyMiIvPjxwYXRoIGQ9Ik0xNS4wOSAxNGMuMTgtLjk4LjY1LTEuNzQgMS40MS0yLjVBNC42NSA0LjY1IDAgMCAwIDE4IDggNiA2IDAgMCAwIDYgOGMwIDEgLjIzIDIuMjMgMS41IDMuNUE0LjYxIDQuNjEgMCAwIDEgOC45MSAxNCIvPjwvc3ZnPg==');
}

.dr-icon-info {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxsaW5lIHgxPSIxMiIgeTE9IjE2IiB4Mj0iMTIiIHkyPSIxMiIvPjxsaW5lIHgxPSIxMiIgeTE9IjgiIHgyPSIxMi4wMSIgeTI9IjgiLz48L3N2Zz4=');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxsaW5lIHgxPSIxMiIgeTE9IjE2IiB4Mj0iMTIiIHkyPSIxMiIvPjxsaW5lIHgxPSIxMiIgeTE9IjgiIHgyPSIxMi4wMSIgeTI9IjgiLz48L3N2Zz4=');
}

.dr-icon-health {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAuODQgNC42MWE1LjUgNS41IDAgMCAwLTcuNzggMEwxMiA1LjY3bC0xLjA2LTEuMDZhNS41IDUuNSAwIDAgMC03Ljc4IDcuNzhsMS4wNiAxLjA2TDEyIDIxLjIzbDcuNzgtNy43OCAxLjA2LTEuMDZhNS41IDUuNSAwIDAgMCAwLTcuNzh6Ii8+PC9zdmc+');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAuODQgNC42MWE1LjUgNS41IDAgMCAwLTcuNzggMEwxMiA1LjY3bC0xLjA2LTEuMDZhNS41IDUuNSAwIDAgMC03Ljc4IDcuNzhsMS4wNiAxLjA2TDEyIDIxLjIzbDcuNzgtNy43OCAxLjA2LTEuMDZhNS41IDUuNSAwIDAgMCAwLTcuNzh6Ii8+PC9zdmc+');
}

.dr-icon-mortgage {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyA5bDktNyA5IDd2MTFhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ6Ii8+PHBvbHlsaW5lIHBvaW50cz0iOSAyMiA5IDEyIDE1IDEyIDE1IDIyIi8+PHBhdGggZD0iTTEyIDE0Yy41LTEgMi41LTEgMyAwIi8+PC9zdmc+');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyA5bDktNyA5IDd2MTFhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ6Ii8+PHBvbHlsaW5lIHBvaW50cz0iOSAyMiA5IDEyIDE1IDEyIDE1IDIyIi8+PHBhdGggZD0iTTEyIDE0Yy41LTEgMi41LTEgMyAwIi8+PC9zdmc+');
}

.dr-icon-paw {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgNWMuNjcgMCAxLjM1LjA5IDIgLjI2IDEuNzgtMiA1LjAzLTIuODQgNi40Mi0yLjI2IDEuNC41OC0uNDIgNy0uNDIgNyAuNTcgMS4wNyAxIDIuMjQgMSAzLjQ0QzIxIDE3LjkgMTYuOTcgMjEgMTIgMjFzLTktMy4xLTktNy41NmMwLTEuMjUuNDMtMi40MiAxLTMuNDQgMCAwLTEuODktNi40Mi0uNS03IDEuMzktLjU4IDQuNjcuMjYgNi41IDIuMjYuNjEtLjE3IDEuMjktLjI2IDItLjI2eiIvPjwvc3ZnPg==');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgNWMuNjcgMCAxLjM1LjA5IDIgLjI2IDEuNzgtMiA1LjAzLTIuODQgNi40Mi0yLjI2IDEuNC41OC0uNDIgNy0uNDIgNyAuNTcgMS4wNyAxIDIuMjQgMSAzLjQ0QzIxIDE3LjkgMTYuOTcgMjEgMTIgMjFzLTktMy4xLTktNy41NmMwLTEuMjUuNDMtMi40MiAxLTMuNDQgMCAwLTEuODktNi40Mi0uNS03IDEuMzktLjU4IDQuNjcuMjYgNi41IDIuMjYuNjEtLjE3IDEuMjktLjI2IDItLjI2eiIvPjwvc3ZnPg==');
}

.dr-icon-key {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjEgMmwtMiAybS03LjYxIDcuNjFhNS41IDUuNSAwIDEgMS03Ljc3OCA3Ljc3OCA1LjUgNS41IDAgMCAxIDcuNzc3LTcuNzc3em0wIDBMMTUuNSA3LjVtMCAwbDMgM0wyMiA3bC0zLTNtLTMuNSAzLjVMMTkgNCIvPjwvc3ZnPg==');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjEgMmwtMiAybS03LjYxIDcuNjFhNS41IDUuNSAwIDEgMS03Ljc3OCA3Ljc3OCA1LjUgNS41IDAgMCAxIDcuNzc3LTcuNzc3em0wIDBMMTUuNSA3LjVtMCAwbDMgM0wyMiA3bC0zLTNtLTMuNSAzLjVMMTkgNCIvPjwvc3ZnPg==');
}

.dr-icon-crypto {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik0xNiA4aC02YTIgMiAwIDEgMCAwIDRoNGEyIDIgMCAxIDEgMCA0SDgiLz48bGluZSB4MT0iMTIiIHkxPSIxOCIgeDI9IjEyIiB5Mj0iMjIiLz48bGluZSB4MT0iMTIiIHkxPSIyIiB4Mj0iMTIiIHkyPSI2Ii8+PC9zdmc+');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik0xNiA4aC02YTIgMiAwIDEgMCAwIDRoNGEyIDIgMCAxIDEgMCA0SDgiLz48bGluZSB4MT0iMTIiIHkxPSIxOCIgeDI9IjEyIiB5Mj0iMjIiLz48bGluZSB4MT0iMTIiIHkxPSIyIiB4Mj0iMTIiIHkyPSI2Ii8+PC9zdmc+');
}

.dr-icon-piggy {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIyIiB5PSI0IiB3aWR0aD0iMjAiIGhlaWdodD0iMTYiIHJ4PSIyIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTEiIHgyPSIxMiIgeTI9IjE3Ii8+PGxpbmUgeDE9IjkiIHkxPSIxNCIgeDI9IjE1IiB5Mj0iMTQiLz48L3N2Zz4=');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIyIiB5PSI0IiB3aWR0aD0iMjAiIGhlaWdodD0iMTYiIHJ4PSIyIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTEiIHgyPSIxMiIgeTI9IjE3Ii8+PGxpbmUgeDE9IjkiIHkxPSIxNCIgeDI9IjE1IiB5Mj0iMTQiLz48L3N2Zz4=');
}

.dr-icon-notax {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik00LjkzIDQuOTNsMTQuMTQgMTQuMTQiLz48L3N2Zz4=');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik00LjkzIDQuOTNsMTQuMTQgMTQuMTQiLz48L3N2Zz4=');
}

.dr-icon-savings {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIxIiB5PSI0IiB3aWR0aD0iMjIiIGhlaWdodD0iMTYiIHJ4PSIyIiByeT0iMiIvPjxsaW5lIHgxPSIxIiB5MT0iMTAiIHgyPSIyMyIgeTI9IjEwIi8+PC9zdmc+');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIxIiB5PSI0IiB3aWR0aD0iMjIiIGhlaWdodD0iMTYiIHJ4PSIyIiByeT0iMiIvPjxsaW5lIHgxPSIxIiB5MT0iMTAiIHgyPSIyMyIgeTI9IjEwIi8+PC9zdmc+');
}

.dr-icon-chart-down {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIyMyAxOCAxMy41IDguNSA4LjUgMTMuNSAxIDYiLz48cG9seWxpbmUgcG9pbnRzPSIxNyAxOCAyMyAxOCAyMyAxMiIvPjwvc3ZnPg==');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIyMyAxOCAxMy41IDguNSA4LjUgMTMuNSAxIDYiLz48cG9seWxpbmUgcG9pbnRzPSIxNyAxOCAyMyAxOCAyMyAxMiIvPjwvc3ZnPg==');
}

.dr-icon-alert {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTAuMjkgMy44NkwxLjgyIDE4YTIgMiAwIDAgMCAxLjcxIDNoMTYuOTRhMiAyIDAgMCAwIDEuNzEtM0wxMy43MSAzLjg2YTIgMiAwIDAgMC0zLjQyIDB6Ii8+PGxpbmUgeDE9IjEyIiB5MT0iOSIgeDI9IjEyIiB5Mj0iMTMiLz48bGluZSB4MT0iMTIiIHkxPSIxNyIgeDI9IjEyLjAxIiB5Mj0iMTciLz48L3N2Zz4=');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTAuMjkgMy44NkwxLjgyIDE4YTIgMiAwIDAgMCAxLjcxIDNoMTYuOTRhMiAyIDAgMCAwIDEuNzEtM0wxMy43MSAzLjg2YTIgMiAwIDAgMC0zLjQyIDB6Ii8+PGxpbmUgeDE9IjEyIiB5MT0iOSIgeDI9IjEyIiB5Mj0iMTMiLz48bGluZSB4MT0iMTIiIHkxPSIxNyIgeDI9IjEyLjAxIiB5Mj0iMTciLz48L3N2Zz4=');
}

.dr-icon-rocket {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNC41IDE2LjVjLTEuNSAxLjI2LTIgNS0yIDVzMy43NC0uNSA1LTJjLjcxLS44NC43LTIuMTMtLjA5LTIuOTFhMi4xOCAyLjE4IDAgMCAwLTIuOTEtLjA5eiIvPjxwYXRoIGQ9Ik0xMiAxNWwtMy0zYTIyIDIyIDAgMCAxIDItMy45NUExMi44OCAxMi44OCAwIDAgMSAyMiAyYzAgMi43Mi0uNzggNy41LTYgMTFhMjIuMzUgMjIuMzUgMCAwIDEtNCAyeiIvPjxwYXRoIGQ9Ik05IDEySDRzLjU1LTMuMDMgMi00YzEuNjItMS4wOCA1IDAgNSAwIi8+PHBhdGggZD0iTTEyIDE1djVzMy4wMy0uNTUgNC0yYzEuMDgtMS42MiAwLTUgMC01Ii8+PC9zdmc+');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNC41IDE2LjVjLTEuNSAxLjI2LTIgNS0yIDVzMy43NC0uNSA1LTJjLjcxLS44NC43LTIuMTMtLjA5LTIuOTFhMi4xOCAyLjE4IDAgMCAwLTIuOTEtLjA5eiIvPjxwYXRoIGQ9Ik0xMiAxNWwtMy0zYTIyIDIyIDAgMCAxIDItMy45NUExMi44OCAxMi44OCAwIDAgMSAyMiAyYzAgMi43Mi0uNzggNy41LTYgMTFhMjIuMzUgMjIuMzUgMCAwIDEtNCAyeiIvPjxwYXRoIGQ9Ik05IDEySDRzLjU1LTMuMDMgMi00YzEuNjItMS4wOCA1IDAgNSAwIi8+PHBhdGggZD0iTTEyIDE1djVzMy4wMy0uNTUgNC0yYzEuMDgtMS42MiAwLTUgMC01Ii8+PC9zdmc+');
}

.dr-icon-refresh {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIyMyA0IDIzIDEwIDE3IDEwIi8+PHBvbHlsaW5lIHBvaW50cz0iMSAyMCAxIDE0IDcgMTQiLz48cGF0aCBkPSJNMy41MSA5YTkgOSAwIDAgMSAxNC44NS0zLjM2TDIzIDEwTTEgMTRsNC42NCA0LjM2QTkgOSAwIDAgMCAyMC40OSAxNSIvPjwvc3ZnPg==');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIyMyA0IDIzIDEwIDE3IDEwIi8+PHBvbHlsaW5lIHBvaW50cz0iMSAyMCAxIDE0IDcgMTQiLz48cGF0aCBkPSJNMy41MSA5YTkgOSAwIDAgMSAxNC44NS0zLjM2TDIzIDEwTTEgMTRsNC42NCA0LjM2QTkgOSAwIDAgMCAyMC40OSAxNSIvPjwvc3ZnPg==');
}

.dr-icon-credit-card {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIxIiB5PSI0IiB3aWR0aD0iMjIiIGhlaWdodD0iMTYiIHJ4PSIyIiByeT0iMiIvPjxsaW5lIHgxPSIxIiB5MT0iMTAiIHgyPSIyMyIgeTI9IjEwIi8+PC9zdmc+');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIxIiB5PSI0IiB3aWR0aD0iMjIiIGhlaWdodD0iMTYiIHJ4PSIyIiByeT0iMiIvPjxsaW5lIHgxPSIxIiB5MT0iMTAiIHgyPSIyMyIgeTI9IjEwIi8+PC9zdmc+');
}


.dr-icon-check {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5bGluZSBwb2ludHM9IjIwIDYgOSAxNyA0IDEyIi8+PC9zdmc+');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5bGluZSBwb2ludHM9IjIwIDYgOSAxNyA0IDEyIi8+PC9zdmc+');
}

/* ==========================================================================
   21. INTERACTIVE ELEMENTS (Tabs & Accordions)
   ========================================================================== */

/* Simulator Tabs */
.cafp-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    background: #f1f5f9;
    padding: 6px;
    border-radius: 12px;
}

.cafp-tab-button {
    padding: 12px;
    border: none;
    background: transparent;
    color: #64748b;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cafp-tab-button:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--dr-primary);
}

.cafp-tab-button.cafp-active {
    background: #ffffff;
    color: var(--dr-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    font-weight: 700;
}

/* Tab Content Visibility */
.cafp-simulator-instance {
    display: none;
    animation: drFadeIn 0.3s ease-out;
}

.cafp-simulator-instance.cafp-active {
    display: block;
}

@keyframes drFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

/* FAQ Accordion */
.dr-calc-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dr-calc-acc-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: all 0.2s;
}

.dr-calc-acc-item:hover {
    border-color: var(--dr-primary-light);
}

.dr-calc-acc-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dr-text-main);
    cursor: pointer;
    font-family: 'Titillium Web', sans-serif;
}

.dr-calc-acc-header:hover {
    background: #f8fafc;
    color: var(--dr-primary);
}

/* Glossary Cards */
.dr-calc-glossary-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
}

.dr-calc-glossary-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s, box-shadow 0.2s;
}

.dr-calc-glossary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    border-color: var(--dr-primary-light);
}

.dr-calc-glossary-card dt {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
    color: var(--dr-primary);
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.dr-calc-glossary-card dd {
    margin: 0;
    font-size: 0.9rem;
    color: var(--dr-text-light);
    line-height: 1.5;
}

/* FAQ Content Animation & States */
.dr-calc-acc-content {
    display: none;
    padding: 16px;
    background: #fff;
    border-top: 1px solid #f1f5f9;
    color: #475569;
    line-height: 1.6;
}

.dr-calc-acc-item.active .dr-calc-acc-content {
    display: block;
    animation: drSlideDown 0.2s ease-out;
}

.dr-calc-acc-header .icon {
    font-size: 1.2rem;
    font-weight: 300;
    transition: transform 0.2s;
    display: inline-block;
}

.dr-calc-acc-item.active .dr-calc-acc-header .icon {
    transform: rotate(45deg);
    color: var(--dr-primary);
}

@keyframes drSlideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

/* WIZARD STEPS & ACCORDION COMPATIBILITY */
.cafp-form-step {
    display: none;
    animation: drFadeIn 0.3s ease-out;
}

.cafp-form-step.cafp-active {
    display: block;
}

/* Accordion Compatibility for cafp-* classes */
.cafp-accordion-content {
    display: none;
}

.cafp-accordion-content.cafp-active {
    display: block;
    animation: drSlideDown 0.2s ease-out;
}

.cafp-accordion-header svg {
    transition: transform 0.2s ease;
}

.cafp-accordion-header.cafp-active svg {
    transform: rotate(180deg);
}