/*
 * Autor: Lukasz Turczyn DFS
 * Data: 2026-07-05
 * Opis: Style portu kalkulatora zdolnosci (z optymalizacjakredytowa.pl) dla creditembassy.pl.
 *       Sklad: src/css/calculator.css + blok <style> partiala kalkulatora (head).
 */

/* ===== EXACT COPY FROM POROWNYWARKA - DO NOT MODIFY ===== */
#calculator-page {
    --primary: #1B2A4A;
    --primary-light: #2C4070;
    --primary-color: #1B2A4A;
    --primary-dark: #0D1B2A;
    --cta: #D4A853;
    --cta-light: #E0B965;
    --accent: #D4A853;
    --accent-color: #D4A853;
    --accent-darker: #C09A43;
    --accent-darker-color: #C09A43;
    --success: #00D68F;
    --danger: #ff4757;
    --error-color: #e74c3c;
    --text-dark: #1a1a2e;
    --text-muted: #6c757d;
    --text-light: #ffffff;
    --light-bg: #F8F9FA;
    --border-color: #e2e8f0;
    --border-radius: 8px;
    --box-shadow: 0 4px 12px rgba(13, 27, 42, 0.08);
    --box-shadow-hover: 0 8px 24px rgba(13, 27, 42, 0.14);
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2.5rem;
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --transition-speed: 0.3s;
    --header-height: 0px;
}

.comparator-hero {
    background: #fff;
    padding: 48px 20px 32px;
    text-align: center;
    border-bottom: 1px solid #e8ecf0;
}
.comparator-hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}
.comparator-hero .hero-subtitle {
    font-size: 1.0625rem;
    color: #64748b;
    margin: 0 auto 20px;
    max-width: 520px;
    line-height: 1.6;
}
.hero-badges {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.hero-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #475569;
}
.hero-badge svg { color: #22c55e; flex-shrink: 0; }

.comparator-section {
    padding: 40px 20px;
    background: #fafbfc;
}
.comparator-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
}
@media (max-width: 960px) {
    .comparator-grid { grid-template-columns: 1fr; max-width: 720px; }
    .comparator-sidebar { order: -1; }
}
@media (max-width: 768px) {
    .comparator-section {
        padding: 24px 16px;
    }
    .comparator-grid {
        gap: 24px;
    }
}
@media (max-width: 480px) {
    .comparator-section {
        padding: 16px 12px;
    }
    .comparator-grid {
        gap: 16px;
    }
}

.comparator-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    overflow: hidden;
}
.card-header {
    padding: 24px 28px;
    background: #fafbfc;
    border-bottom: 1px solid #e8ecf0;
    display: flex;
    align-items: center;
    gap: 16px;
}
.card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1B2A4A 0%, #2C4070 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.card-header h2 { font-size: 1.25rem; font-weight: 700; color: #1a202c; margin: 0 0 2px; }
.card-header p { font-size: 0.875rem; color: #718096; margin: 0; }

/* Form - EXACT same as porownywarka */
.comparator-card form { padding: 28px; }
.form-step { display: none; }
.form-step.active { display: block; }

/* Mobile adjustments for calculator */
@media (max-width: 768px) {
    .comparator-card form {
        padding: 20px 16px;
    }
    .card-header {
        padding: 16px 20px;
    }
    .card-header h2 {
        font-size: 1.1rem;
    }
    .card-header p {
        font-size: 0.8125rem;
    }
    .card-icon {
        width: 40px;
        height: 40px;
    }
}
@media (max-width: 480px) {
    .comparator-card form {
        padding: 16px 12px;
    }
    .card-header {
        padding: 14px 16px;
        gap: 12px;
    }
    .card-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    .card-icon svg {
        width: 18px;
        height: 18px;
    }
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.form-row.single { grid-template-columns: 1fr; }

/* Tablet: stack vertically earlier */
@media (max-width: 900px) { 
    .form-row { 
        grid-template-columns: 1fr !important; 
        gap: 16px; 
    }
}
/* Mobile: tighter spacing */
@media (max-width: 600px) { 
    .form-row { 
        gap: 14px; 
    }
    .form-group label {
        font-size: 0.875rem;
    }
}
@media (max-width: 480px) {
    .form-row {
        gap: 12px;
    }
}

.form-group { display: flex; flex-direction: column; }
.form-group label { font-size: 0.8125rem; font-weight: 600; color: #2d3748; margin-bottom: 8px; }
.form-group label .required { color: #ff4757; }

.input-wrapper { position: relative; }
.input-wrapper input,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    font-size: 0.9375rem;
    font-weight: 500;
    border: 2px solid #e8ecf0;
    border-radius: 12px;
    background: #fff;
    color: #1a202c;
    transition: all 0.25s ease;
    outline: none;
    box-sizing: border-box;
}
.input-wrapper input[type="number"] { 
    padding-right: 50px;
    -moz-appearance: textfield;
}
.input-wrapper input[type="number"]::-webkit-outer-spin-button,
.input-wrapper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.input-wrapper input:focus, .form-group input:focus { border-color: #1B2A4A; box-shadow: 0 0 0 4px rgba(27, 42, 74, 0.1); }
.input-suffix {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #a0aec0;
    pointer-events: none;
}

/* Input z przyciskami +/- */
.input-with-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}
.input-with-buttons .input-wrapper {
    flex: 1;
    min-width: 0;
}
.input-btn {
    width: 44px;
    height: 48px;
    min-height: 48px;
    min-width: 44px;
    border: 2px solid #e8ecf0;
    background: #fff;
    border-radius: 12px;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1B2A4A;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.input-btn:hover {
    background: #1B2A4A;
    border-color: #1B2A4A;
    color: #fff;
}
.input-btn:active {
    transform: scale(0.95);
}

/* Mobile input buttons */
@media (max-width: 600px) {
    .input-with-buttons {
        gap: 6px;
    }
    .input-btn {
        width: 48px;
        height: 48px;
        min-height: 48px;
        min-width: 48px;
        border-radius: 10px;
        font-size: 1.25rem;
    }
}
@media (max-width: 400px) {
    .input-btn {
        width: 44px;
        min-width: 44px;
    }
}

.hint { font-size: 0.6875rem; color: #a0aec0; margin-top: 6px; }

.select-wrapper { position: relative; }
.select-wrapper select {
    width: 100%;
    padding: 14px 44px 14px 16px;
    font-size: 0.9375rem;
    font-weight: 500;
    border: 2px solid #e8ecf0;
    border-radius: 12px;
    background: #fff;
    color: #1a202c;
    cursor: pointer;
    appearance: none;
    outline: none;
}
.select-wrapper select:focus { border-color: #1B2A4A; box-shadow: 0 0 0 4px rgba(27, 42, 74, 0.1); }
.select-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #a0aec0; }

/* Mobile select */
@media (max-width: 480px) {
    .select-wrapper select {
        padding: 12px 40px 12px 14px;
        font-size: 0.875rem;
        border-radius: 10px;
    }
    .select-arrow {
        right: 14px;
    }
}

/* Buttons - EXACT same as porownywarka */
.btn-compare {
    width: 100%;
    padding: 16px 28px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #D4A853 0%, #E0B965 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.25s ease;
    box-shadow: 0 8px 30px rgba(212, 168, 83, 0.4);
}
.btn-compare:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(212, 168, 83, 0.45); }
.btn-compare .btn-spinner { display: none; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
.btn-compare.loading .btn-text { display: none; }
.btn-compare.loading .btn-spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-secondary {
    padding: 14px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    background: #fff;
    border: 2px solid #e8ecf0;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}
.btn-secondary:hover { border-color: #1B2A4A; color: #1B2A4A; }

.form-disclaimer { text-align: center; font-size: 0.75rem; color: #718096; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.form-disclaimer svg { color: #1B2A4A; }

/* Navigation between steps */
.form-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e8ecf0;
}
.form-navigation .btn-compare { width: auto; padding: 14px 28px; }

/* Mobile navigation and buttons */
@media (max-width: 600px) {
    .form-navigation {
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
        padding-top: 16px;
    }
    .form-navigation .btn-secondary {
        width: 100%;
        justify-content: center;
        order: 2;
    }
    .form-navigation .btn-compare {
        width: 100%;
        order: 1;
        padding: 14px 20px;
    }
    .btn-compare {
        padding: 14px 20px;
        font-size: 0.9375rem;
    }
    .btn-secondary {
        padding: 12px 16px;
        font-size: 0.875rem;
    }
}

/* Progress dots */
.progress-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 28px;
    border-bottom: 1px solid #e8ecf0;
}
.progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e8ecf0;
    transition: all 0.3s ease;
}
.progress-dot.active { background: #1B2A4A; transform: scale(1.25); }
.progress-dot.completed { background: #22c55e; }

@media (max-width: 480px) {
    .progress-dots {
        padding: 12px 16px;
        gap: 6px;
    }
    .progress-dot {
        width: 10px;
        height: 10px;
    }
}

/* Step header */
.step-header {
    font-size: 0.75rem;
    color: #718096;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.step-header strong { color: #1B2A4A; }

@media (max-width: 480px) {
    .step-header {
        font-size: 0.8125rem;
        margin-bottom: 16px;
        justify-content: center;
    }
}

/* Income source */
.income-source {
    background: #fff;
    border: 2px solid #e8ecf0;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
    transition: all 0.25s ease;
}
.income-source:hover {
    border-color: #cbd5e1;
}
.income-source-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.income-source-title { 
    font-size: 0.9375rem; 
    font-weight: 700; 
    color: #1a202c;
    display: flex;
    align-items: center;
    gap: 10px;
}
.income-source-title .source-number {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #1B2A4A 0%, #2C4070 100%);
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
}

/* Mobile income source */
@media (max-width: 480px) {
    .income-source {
        padding: 16px;
        border-radius: 12px;
        margin-bottom: 12px;
    }
    .income-source-header {
        margin-bottom: 16px;
    }
    .income-source-title {
        font-size: 0.875rem;
        gap: 8px;
    }
    .income-source-title .source-number {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
        border-radius: 6px;
    }
}
.btn-remove {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #fef2f2;
    color: #ef4444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: all 0.2s ease;
}
.btn-remove:hover { background: #ef4444; color: #fff; }
.income-source .form-row { margin-bottom: 0; }

.btn-add-income {
    padding: 12px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1B2A4A;
    background: #fff;
    border: 2px dashed #1B2A4A;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
    margin-bottom: 20px;
}
.btn-add-income:hover { background: #f0f9ff; }

@media (max-width: 480px) {
    .btn-add-income {
        width: 100%;
        justify-content: center;
        padding: 14px;
        font-size: 0.875rem;
    }
    .btn-remove {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }
}

/* Consents */
.consents-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e8ecf0; }
.form-group-checkbox { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.form-group-checkbox input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: #1B2A4A; cursor: pointer; }
.form-group-checkbox label { font-size: 0.75rem; color: #4a5568; line-height: 1.5; cursor: pointer; }
.form-group-checkbox label a { color: #1B2A4A; text-decoration: underline; }

/* Sidebar - EXACT same */
.comparator-sidebar { display: flex; flex-direction: column; gap: 16px; }
.sidebar-card { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid #f4f6f8; }
.sidebar-card.highlight { background: linear-gradient(135deg, #1B2A4A 0%, #2C4070 100%); color: #fff; border: none; }
.sidebar-icon { width: 44px; height: 44px; border-radius: 12px; background: #f4f6f8; display: flex; align-items: center; justify-content: center; color: #1B2A4A; margin-bottom: 14px; }
.sidebar-card.highlight .sidebar-icon { background: rgba(255, 255, 255, 0.2); color: #fff; }
.sidebar-card h3 { font-size: 0.9375rem; font-weight: 700; margin: 0 0 6px; color: #1a202c; }
.sidebar-card.highlight h3 { color: #fff; }
.sidebar-card p { font-size: 0.8125rem; color: #4a5568; margin: 0; line-height: 1.5; }
.sidebar-card.highlight p { color: rgba(255, 255, 255, 0.85); }
.sidebar-cta { display: inline-block; margin-top: 14px; padding: 10px 20px; background: #fff; color: #1B2A4A; border-radius: 8px; font-weight: 700; font-size: 0.8125rem; text-decoration: none; transition: all 0.25s ease; }
.sidebar-cta:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* Loading - EXACT same */
.loading-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(255, 255, 255, 0.98); display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.loading-overlay.active { display: flex; }
.loading-content { max-width: 360px; }
.loading-animation { position: relative; width: 100px; height: 100px; margin: 0 auto 28px; }
.loading-circle { position: absolute; inset: 0; border: 4px solid #e8ecf0; border-top-color: #1B2A4A; border-radius: 50%; animation: spin 1s linear infinite; }
.loading-icon { position: absolute; inset: 20px; display: flex; align-items: center; justify-content: center; color: #1B2A4A; }
.loading-content h3 { font-size: 1.25rem; font-weight: 700; color: #1a202c; margin: 0 0 8px; }
.loading-content p { font-size: 0.9375rem; color: #718096; margin: 0 0 28px; }
.loading-progress .progress-bar { height: 6px; background: #e8ecf0; border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.loading-progress .progress-fill { height: 100%; background: linear-gradient(135deg, #1B2A4A 0%, #2C4070 100%); border-radius: 3px; width: 0%; transition: width 0.3s ease; }
.loading-steps { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.loading-step { font-size: 0.8125rem; color: #718096; display: flex; align-items: center; gap: 8px; }
.loading-step.active { color: #1B2A4A; font-weight: 600; }
.loading-step.done { color: #22c55e; }

/* Results */
.results-section { display: none; padding: 28px; }
.results-section.active { display: block; }
.results-hero {
    background: linear-gradient(135deg, #1B2A4A 0%, #2C4070 100%);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}
.results-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.15);
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 14px;
}
.results-hero h3 { font-size: 0.9375rem; font-weight: 500; opacity: 0.9; margin: 0 0 10px; }
.results-amount { font-size: 2.25rem; font-weight: 800; margin: 0; }
.results-detail { font-size: 0.8125rem; opacity: 0.85; margin-top: 8px; }
.results-info {
    background: #fef9e7;
    border: 1px solid #f7dc6f;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 0.8125rem;
    color: #7d6608;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}
.results-cta {
    background: linear-gradient(135deg, #D4A853 0%, #E0B965 100%);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    color: #fff;
}
.results-cta h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.results-cta p { font-size: 0.8125rem; opacity: 0.95; margin: 0 0 16px; }
.results-cta .cta-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-white {
    padding: 12px 20px;
    background: #fff;
    color: #D4A853;
    border: none;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.btn-outline {
    padding: 12px 20px;
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
}
.btn-outline:hover { background: rgba(255,255,255,0.1); }

.hp-field { position: absolute; left: -9999px; opacity: 0; }

/* Error states */
.input-error { border-color: #ef4444 !important; }
.input-error:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important; }
.field-error { font-size: 0.75rem; color: #ef4444; margin-top: 6px; }
.select-wrapper .field-error { margin-top: 6px; }

/* Verification section */
.verification-section { display: none; padding: 28px; }
.verification-section.active { display: block; }
.verification-hero {
    text-align: center;
    padding: 32px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-radius: 16px;
    border: 1px solid #bbf7d0;
    margin-bottom: 24px;
}
.verification-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #fff;
}
.verification-hero h3 { font-size: 1.375rem; font-weight: 700; color: #1a202c; margin: 0 0 8px; }
.verification-hero p { font-size: 0.9375rem; color: #4a5568; margin: 0; }
.verification-email { font-weight: 700; color: #1B2A4A; }
.verification-form {
    max-width: 400px;
    margin: 0 auto;
}
.verification-form .form-group { margin-bottom: 16px; }
.verification-hint {
    text-align: center;
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 20px;
}
.btn-resend {
    background: none;
    border: none;
    color: #1B2A4A;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.btn-resend:hover { background: #f0f9ff; }
.btn-resend:disabled { opacity: 0.5; cursor: not-allowed; }

/* Has credentials button */
.btn-has-credentials {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1B2A4A;
    background: #fff;
    border: 2px solid #1B2A4A;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.btn-has-credentials:hover {
    background: #1B2A4A;
    color: #fff;
}
.btn-has-credentials svg { flex-shrink: 0; }

/* Credentials Modal */
.credentials-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}
.credentials-modal-overlay.active { display: flex; }
.credentials-modal {
    background: #fff;
    border-radius: 20px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.credentials-modal-header {
    padding: 24px 28px;
    background: linear-gradient(135deg, #1B2A4A 0%, #2C4070 100%);
    border-radius: 20px 20px 0 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.credentials-modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}
.credentials-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.credentials-modal-close:hover { background: rgba(255,255,255,0.3); }
.credentials-modal-body {
    padding: 28px;
}
.credentials-modal-body .form-group { margin-bottom: 20px; }
.credentials-modal-body .form-group:last-of-type { margin-bottom: 24px; }
.credentials-modal-footer {
    padding: 0 28px 28px;
}
.credentials-modal-footer .btn-compare { width: 100%; }
.credentials-modal-info {
    text-align: center;
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e8ecf0;
}

@media (max-width: 480px) {
    .credentials-modal {
        border-radius: 16px;
    }
    .credentials-modal-header {
        padding: 20px;
        border-radius: 16px 16px 0 0;
    }
    .credentials-modal-header h3 {
        font-size: 1rem;
    }
    .credentials-modal-body {
        padding: 20px;
    }
    .credentials-modal-footer {
        padding: 0 20px 20px;
    }
}


/* ===== calculator.css ===== */
/**
 * calculator.css - Credit calculator specific styles
 * Part of Optymalizacja Kredytowa stylesheet
 */

/* ==========================================================================
 CREDIT CALCULATOR STYLES v3.0
 Uses CSS variables from main :root block
 ========================================================================== */
/* ============================================
 Reset & Base - SCOPED TO CALCULATOR ONLY
 ============================================ */
.calculator-container,
.calculator-container *,
.calculator-container *::before,
.calculator-container *::after{
 box-sizing: border-box;
}
.calculator-container h1,
.calculator-container h2,
.calculator-container h3,
.calculator-container h4,
.calculator-container h5,
.calculator-container h6,
.calculator-container p,
.calculator-container ul,
.calculator-container ol,
.calculator-container form,
.calculator-container fieldset,
.calculator-container legend,
.calculator-container button,
.calculator-container input,
.calculator-container textarea,
.calculator-container select{
 margin: 0;
 padding: 0;
}
/* ============================================
 Accessibility
 ============================================ */
.skip-link:focus{
 top: 0;
}
.sr-only{
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border-width: 0;
}
*:focus-visible{
 outline: 2px solid var(--accent-color);
 outline-offset: 2px;
}
/* ============================================
 Container & Layout
 ============================================ */
.calculator-container{
 background-color: #fff;
 padding: 2.5rem;
 border-radius: 8px;
 box-shadow: var(--box-shadow);
 width: 100%;
 max-width: 900px;
 margin: 0 auto;
 font-family: var(--font-primary);
}
/* ============================================
 Header
 ============================================ */
.calculator-container header{
 text-align: center;
 margin-bottom: var(--spacing-xl);
 padding-bottom: var(--spacing-lg);
 border-bottom: 2px solid var(--border-color);
}
.calculator-container header h1{
 color: var(--primary-color);
 margin: 0 0 1rem 0;
 font-size: clamp(1.75rem, 4vw, 2.5rem);
 font-weight: 700;
 line-height: 1.2;
}
.calculator-container header p{
 color: var(--text-muted);
 font-size: 1.1rem;
 line-height: 1.6;
 max-width: 700px;
 margin: 0 auto;
}
/* ============================================
 Progress Bar - Sleek Modern Design
 ============================================ */
.calculator-container #progress-bar{
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: var(--spacing-xl);
 position: relative;
 padding: 0 1rem;
}
.calculator-container #progress-bar::before{
 content: '';
 position: absolute;
 top: 20px;
 left: 0;
 right: 0;
 height: 3px;
 background-color: var(--border-color);
 z-index: 1;
}
.calculator-container #progress-bar::after{
 content: '';
 position: absolute;
 top: 20px;
 left: 0;
 height: 3px;
 width: var(--progress-width, 0%);
 background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
 z-index: 2;
 transition: width var(--transition-speed) ease;
}
.calculator-container .progress-step{
 position: relative;
 z-index: 3;
 text-align: center;
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: .5rem;
 color: var(--text-muted);
 transition: color var(--transition-speed);
 cursor: pointer;
}
.calculator-container .progress-number{
 width: 40px;
 height: 40px;
 background-color: #fff;
 border: 3px solid var(--border-color);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 font-size: 1rem;
 transition: all var(--transition-speed);
}
.calculator-container .progress-step.active{
 color: var(--primary-color);
}
.calculator-container .progress-step.active .progress-number{
 border-color: var(--accent-color);
 background: linear-gradient(135deg, var(--accent-color), var(--accent-darker));
 color: var(--text-light);
 transform: scale(1.1);
 box-shadow: 0 3px 10px rgba(243, 112, 33, .3);
}
.calculator-container .progress-label{
 font-size: .875rem;
 font-weight: 500;
}
/* ============================================
 Form Steps (SCOPED TO CALCULATOR)
 ============================================ */
.calculator-container fieldset{
 border: none;
 padding: 0;
 margin: 0;
}
.calculator-container legend{
 padding: 0;
 display: table;
}
.calculator-container .form-step{
 display: none;
}
.calculator-container .form-step.active{
 display: block;
 animation: fadeInUp .4s ease;
}
@keyframes fadeInUp{
 from{
  opacity: 0;
  transform: translateY(20px);
}
 to{
  opacity: 1;
  transform: translateY(0);
}
}
.calculator-container .form-step h2{
 color: var(--primary-color);
 margin-top: 0;
 margin-bottom: 1rem;
 font-size: 1.75rem;
 font-weight: 600;
}
.calculator-container .step-description{
 color: var(--text-muted);
 margin-bottom: var(--spacing-lg);
 line-height: 1.7;
 font-size: 1.05rem;
}
/* ============================================
 Form Groups & Inputs
 ============================================ */
.calculator-container .form-group{
 margin-bottom: var(--spacing-md);
}
.calculator-container .form-group label{
 display: block;
 margin-bottom: .6rem;
 font-weight: 500;
 color: var(--text-dark);
 font-size: .95rem;
}
.calculator-container .required{
 color: var(--error-color);
 font-weight: 700;
}
.calculator-container .form-group input[type="text"],
.calculator-container .form-group input[type="number"],
.calculator-container .form-group input[type="email"],
.calculator-container .form-group input[type="tel"],
.calculator-container .form-group select,
.calculator-container .form-group textarea{
 width: 100%;
 padding: .8rem 1rem;
 border: 2px solid var(--border-color);
 border-radius: var(--border-radius);
 font-size: 1rem;
 font-family: var(--font-primary);
 transition: all var(--transition-speed);
 background-color: #fff;
}
.calculator-container .form-group input:hover,
.calculator-container .form-group select:hover,
.calculator-container .form-group textarea:hover{
 border-color: var(--primary-color);
}
.calculator-container .form-group input:focus,
.calculator-container .form-group select:focus,
.calculator-container .form-group textarea:focus{
 outline: none;
 border-color: var(--accent-color);
 box-shadow: 0 0 0 3px rgba(243, 112, 33, .1);
}
.calculator-container .hint{
 display: block;
 margin-top: .5rem;
 font-size: .85rem;
 color: var(--text-muted);
 font-style: italic;
}
/* Input with increment/decrement buttons - separate button design */
.calculator-container .input-with-buttons{
 display: flex;
 align-items: center;
 gap: 8px;
}
.calculator-container .input-with-buttons .input-wrapper{
 flex: 1;
 min-width: 0;
}
.calculator-container .input-btn{
 width: 44px;
 height: 48px;
 min-height: 48px;
 min-width: 44px;
 border: 2px solid var(--border-color);
 background: #fff;
 border-radius: var(--border-radius);
 font-size: 1.25rem;
 font-weight: 600;
 color: var(--primary-color);
 cursor: pointer;
 transition: all var(--transition-speed);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}
.calculator-container .input-btn:hover{
 background: var(--primary-color);
 border-color: var(--primary-color);
 color: #fff;
}
.calculator-container .input-btn:active{
 transform: scale(0.95);
}
/* Error state for input-with-buttons - border on the input wrapper */
.calculator-container .input-with-buttons.input-error .input-wrapper input{
 border-color: #ef4444;
}
@media (max-width: 600px){
 .calculator-container .input-with-buttons{
  gap: 6px;
 }
 .calculator-container .input-btn{
  width: 48px;
  height: 48px;
  min-height: 48px;
  min-width: 48px;
 }
}
@media (max-width: 400px){
 .calculator-container .input-btn{
  width: 44px;
  min-width: 44px;
 }
}
/* ============================================
 Income Sources - Card Style
 ============================================ */
.calculator-container #income-sources-container{
 margin-bottom: var(--spacing-lg);
}
.calculator-container .income-source{
 background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
 border: 2px solid var(--border-color);
 border-radius: var(--border-radius);
 padding: 1.5rem;
 margin-bottom: var(--spacing-md);
 position: relative;
 transition: all var(--transition-speed);
}
.calculator-container .income-source:hover{
 border-color: var(--primary-color);
 box-shadow: var(--box-shadow);
}
.calculator-container .income-source-header{
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 1rem;
}
.calculator-container .income-source-title{
 font-weight: 600;
 color: var(--primary-color);
 font-size: 1.1rem;
}
.calculator-container .remove-income-btn{
 background: none;
 border: none;
 color: var(--error-color);
 font-size: 1.5rem;
 cursor: pointer;
 transition: transform var(--transition-speed);
 padding: .25rem .5rem;
}
.calculator-container .remove-income-btn:hover{
 transform: scale(1.2) rotate(90deg);
}
/* ============================================
 Buttons - Modern Design (SCOPED TO CALCULATOR)
 ============================================ */
.calculator-container button,
.calculator-container .btn{
 font-family: var(--font-primary);
 font-weight: 600;
 border-radius: var(--border-radius);
 transition: all var(--transition-speed);
 cursor: pointer;
 border: none;
 padding: .8rem 1.8rem;
 font-size: 1rem;
}
.calculator-container .btn-next,
.calculator-container .btn-prev,
.calculator-container .btn-calculate,
.calculator-container .btn-submit{
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: .5rem;
}
.calculator-container .btn-next,
.calculator-container .btn-calculate,
.calculator-container .btn-submit{
 background: linear-gradient(135deg, var(--accent-color), var(--accent-darker));
 color: var(--text-light);
 box-shadow: var(--box-shadow);
}
.calculator-container .btn-next:hover,
.calculator-container .btn-calculate:hover,
.calculator-container .btn-submit:hover{
 transform: translateY(-2px);
 box-shadow: var(--box-shadow-hover);
}
.calculator-container .btn-prev{
 background-color: transparent;
 color: var(--primary-color);
 border: 2px solid var(--primary-color);
}
.calculator-container .btn-prev:hover{
 background-color: var(--primary-color);
 color: var(--text-light);
}
.calculator-container .btn-secondary{
 background-color: var(--light-bg);
 color: var(--primary-color);
 border: 2px solid var(--border-color);
 font-weight: 600;
}
.calculator-container .btn-secondary:hover{
 background-color: var(--primary-color);
 color: var(--text-light);
 border-color: var(--primary-color);
}
.calculator-container #add-income-source{
 width: 100%;
}
.calculator-container .navigation-buttons{
 display: flex;
 gap: 1rem;
 margin-top: var(--spacing-lg);
 justify-content: space-between;
}
.calculator-container .navigation-buttons button{
 flex: 1;
}
.calculator-container .btn-spinner{
 display: none;
 width: 16px;
 height: 16px;
 border: 2px solid rgba(255, 255, 255, .3);
 border-top-color: white;
 border-radius: 50%;
 animation: spin .8s linear infinite;
}
.calculator-container button.loading .btn-spinner{
 display: inline-block;
}
.calculator-container button.loading .btn-text{
 opacity: .7;
}
@keyframes spin{
 to{ transform: rotate(360deg);}
}
/* ============================================
 Results Section - Clean & Impactful
 ============================================ */
.calculator-container .results-section{
 margin-top: var(--spacing-xl);
 padding-top: var(--spacing-lg);
}
.calculator-container .results-section h2{
 text-align: center;
 color: var(--primary-color);
 margin-bottom: var(--spacing-lg);
 font-size: 2rem;
}
.calculator-container .results-summary{
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: var(--spacing-lg);
 margin-bottom: var(--spacing-xl);
}
.calculator-container .result-box{
 background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
 color: var(--text-light);
 padding: 2rem;
 border-radius: 8px;
 text-align: center;
 box-shadow: 0 5px 15px rgba(27, 42, 74, .2);
 transition: transform var(--transition-speed);
}
.calculator-container .result-box:hover{
 transform: translateY(-5px);
 box-shadow: 0 8px 20px rgba(27, 42, 74, .3);
}
.calculator-container .result-box .label{
 display: block;
 font-size: .95rem;
 opacity: .9;
 margin-bottom: .75rem;
 font-weight: 500;
}
.calculator-container .result-box .value{
 display: block;
 font-size: 2.5rem;
 font-weight: 700;
 line-height: 1;
}
/* ============================================
 Simulator Panel - Professional Look
 ============================================ */
.calculator-container .simulator-panel{
 margin-top: var(--spacing-xl);
 padding: var(--spacing-lg);
 background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
 border: 2px solid var(--border-color);
 border-radius: 8px;
 box-shadow: var(--box-shadow);
}
.calculator-container .simulator-panel h3{
 text-align: center;
 color: var(--primary-color);
 margin: 0 0 var(--spacing-lg) 0;
 font-size: 1.5rem;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: .75rem;
 font-weight: 600;
}
.calculator-container .slider{
 -webkit-appearance: none;
 appearance: none;
 width: 100%;
 height: 6px;
 background: var(--border-color);
 outline: none;
 border-radius: 3px;
 transition: opacity var(--transition-speed);
}
.calculator-container .slider::-webkit-slider-thumb{
 -webkit-appearance: none;
 appearance: none;
 width: 20px;
 height: 20px;
 background: var(--accent-color);
 cursor: grab;
 border-radius: 50%;
 box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
 transition: all var(--transition-speed);
}
.calculator-container .slider::-webkit-slider-thumb:hover{
 background: var(--accent-darker);
 transform: scale(1.2);
}
.calculator-container .slider::-webkit-slider-thumb:active{
 cursor: grabbing;
 transform: scale(0.95);
}
.calculator-container .slider::-moz-range-thumb{
 width: 20px;
 height: 20px;
 background: var(--accent-color);
 cursor: grab;
 border-radius: 50%;
 border: none;
 box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
 transition: all var(--transition-speed);
}
.calculator-container .slider::-moz-range-thumb:hover{
 background: var(--accent-darker);
 transform: scale(1.2);
}
.calculator-container .slider::-moz-range-thumb:active{
 cursor: grabbing;
 transform: scale(0.95);
}
.calculator-container .checkbox-label{
 display: flex;
 align-items: center;
 gap: .75rem;
 cursor: pointer;
 user-select: none;
}
.calculator-container .checkbox-label input[type="checkbox"]{
 width: 20px;
 height: 20px;
 cursor: pointer;
 accent-color: var(--accent-color);
}
.calculator-container output{
 font-weight: 700;
 color: var(--accent-color);
}
/* ============================================
 Lead Generation Section
 ============================================ */
.calculator-container .lead-gen-section{
 margin-top: var(--spacing-xl);
 padding: var(--spacing-xl);
 background: linear-gradient(135deg, var(--light-bg) 0%, #fff 100%);
 border: 2px solid var(--border-color);
 border-radius: 8px;
 box-shadow: var(--box-shadow);
}
.calculator-container .lead-gen-section h3{
 text-align: center;
 color: var(--primary-color);
 margin-bottom: 1rem;
 font-size: 1.5rem;
 font-weight: 600;
}
.calculator-container .lead-gen-section > p{
 text-align: center;
 max-width: 650px;
 margin: 0 auto var(--spacing-lg) auto;
 color: var(--text-muted);
 line-height: 1.7;
}
.calculator-container .form-group-checkbox{
 display: flex;
 align-items: flex-start;
 gap: .75rem;
 margin-bottom: var(--spacing-md);
}
.calculator-container .form-group-checkbox input[type="checkbox"]{
 margin-top: 3px;
 min-width: 20px;
 height: 20px;
 cursor: pointer;
 accent-color: var(--accent-color);
}
.calculator-container .form-group-checkbox label{
 font-size: .9rem;
 color: var(--text-dark);
 cursor: pointer;
 user-select: none;
 line-height: 1.6;
}
.calculator-container .form-group-checkbox label a{
 color: var(--accent-color);
 text-decoration: underline;
}
.calculator-container .form-group-checkbox label a:hover{
 color: var(--accent-darker);
}
/* ============================================
 Messages & Validation
 ============================================ */
.calculator-container .message{
 padding: 1rem;
 border-radius: var(--border-radius);
 margin-top: var(--spacing-md);
 font-weight: 500;
 text-align: center;
}
.calculator-container .message.success{
 background-color: #d4edda;
 color: #155724;
 border: 1px solid #c3e6cb;
}
.calculator-container .message.error{
 background-color: #f8d7da;
 color: #721c24;
 border: 1px solid #f5c6cb;
}
.calculator-container .error-message{
 color: var(--error-color);
 font-size: .875rem;
 margin-top: .5rem;
 display: block;
 font-weight: 500;
}
.calculator-container .is-invalid{
 border-color: var(--error-color) !important;
}
/* ============================================
 Tooltips
 ============================================ */
.calculator-container .tooltip-trigger{
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 20px;
 height: 20px;
 min-width: 20px;
 min-height: 20px;
 max-width: 20px;
 max-height: 20px;
 padding: 0;
 background-color: var(--primary-color);
 color: white;
 border-radius: 50%;
 cursor: help;
 font-size: .7rem;
 font-weight: 700;
 border: none;
 line-height: 1;
 transition: all var(--transition-speed);
}
.calculator-container .tooltip-trigger:hover{
 background-color: var(--accent-color);
 transform: scale(1.1);
}
.calculator-container .tooltip-modal{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, .6);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 9999;
 animation: fadeIn .2s ease;
}
@keyframes fadeIn{
 from{ opacity: 0;}
 to{ opacity: 1;}
}
.calculator-container .tooltip-content{
 background: white;
 padding: var(--spacing-lg);
 border-radius: var(--border-radius);
 max-width: 90%;
 max-height: 80vh;
 overflow-y: auto;
 position: relative;
 box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.calculator-container .tooltip-close{
 position: absolute;
 top: .5rem;
 right: .5rem;
 background: none;
 border: none;
 font-size: 1.5rem;
 cursor: pointer;
 color: var(--text-muted);
 width: 30px;
 height: 30px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 transition: all var(--transition-speed);
}
.calculator-container .tooltip-close:hover{
 background-color: var(--light-bg);
 color: var(--text-dark);
}
/* ============================================
 Loading Overlay
 ============================================ */
.calculator-container .loading-overlay{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, .7);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 z-index: 10000;
 color: white;
}
.calculator-container .spinner{
 width: 50px;
 height: 50px;
 border: 4px solid rgba(255, 255, 255, .3);
 border-top-color: white;
 border-radius: 50%;
 animation: spin .8s linear infinite;
}
.calculator-container .loading-overlay p{
 margin-top: var(--spacing-md);
 font-size: 1.1rem;
 font-weight: 500;
}
/* ============================================
 Responsive Design
 ============================================ */

/* ============================================
 Print Styles
 ============================================ */

/* ============================================
 Accessibility - Reduced Motion
 ============================================ */

/* ============================================
 CALCULATOR PAGE STYLES
 ============================================ */
.calculator-page{
 background: var(--light-bg);
}
.calculator-hero{
 background: linear-gradient(rgba(255, 255, 255, .95), rgba(248, 250, 252, .98));
 color: var(--text-dark);
 padding: 120px 0 80px;
 text-align: center;
 border-bottom: 1px solid #e2e8f0;
}
.calculator-hero h1{
 font-size: 2.75rem;
 font-weight: 700;
 margin-bottom: 1.25rem;
 color: #1B2A4A;
}
.calculator-hero .hero-subtitle{
 font-size: 1.25rem;
 font-weight: 400;
 color: #475569;
 max-width: 600px;
 margin: 0 auto;
}
.calculator-section{
 padding: 60px 0;
}
.calculator-section .calculator-container{
 background: #fff;
 border-radius: 16px;
 box-shadow: 0 10px 40px rgba(0, 0, 0, .1);
 padding: 3rem;
 max-width: 900px;
 margin: 0 auto;
}
.calculator-cta-section{
 margin-top: 3rem;
 padding: 2.5rem;
 background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
 border: 2px solid var(--border-color);
 border-radius: 12px;
 text-align: center;
}
.calculator-cta-section h3{
 color: var(--primary-color);
 font-size: 1.5rem;
 margin-bottom: 1rem;
}
.calculator-cta-section p{
 color: var(--text-muted);
 margin-bottom: 1.5rem;
 max-width: 500px;
 margin-left: auto;
 margin-right: auto;
}
.calculator-cta-section .cta-button{
 display: inline-flex;
 align-items: center;
 gap: .75rem;
 padding: 1rem 2rem;
 background: linear-gradient(135deg, var(--accent-color) 0%, #ea580c 100%);
 color: white;
 border-radius: 12px;
 font-weight: 600;
 text-decoration: none;
 transition: all .3s ease;
}
.calculator-cta-section .cta-button:hover{
 transform: translateY(-3px);
 box-shadow: 0 10px 30px rgba(249, 115, 22, .3);
}
.google-review-section{
 padding: 60px 0;
 background: #fff;
}
.review-card{
 display: flex;
 align-items: center;
 gap: 2rem;
 background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
 border: 2px solid #e2e8f0;
 border-radius: 16px;
 padding: 2rem 2.5rem;
 max-width: 800px;
 margin: 0 auto;
 transition: all .3s ease;
}
.review-card:hover{
 border-color: #4285f4;
 box-shadow: 0 10px 40px rgba(66, 133, 244, .15);
}
.review-icon{
 width: 70px;
 height: 70px;
 background: linear-gradient(135deg, #4285f4 0%, #34a853 50%, #fbbc05 75%, #ea4335 100%);
 border-radius: 16px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}
.review-icon i{
 font-size: 2rem;
 color: white;
}
.review-content{
 flex: 1;
}
.review-content h3{
 color: var(--text-dark);
 font-size: 1.25rem;
 margin-bottom: .5rem;
}
.review-content p{
 color: var(--text-muted);
 font-size: .95rem;
 line-height: 1.6;
 margin: 0;
}
.review-button{
 display: inline-flex;
 align-items: center;
 gap: .5rem;
 padding: .875rem 1.75rem;
 background: linear-gradient(135deg, #4285f4 0%, #1a73e8 100%);
 color: white;
 border-radius: 10px;
 font-weight: 600;
 text-decoration: none;
 transition: all .3s ease;
 white-space: nowrap;
}
.review-button:hover{
 transform: translateY(-2px);
 box-shadow: 0 8px 25px rgba(66, 133, 244, .4);
}
.review-button i{
 color: #fbbc05;
}
.footer-review-widget{
 display: none;
}
.google-review-card{
 margin-top: 20px;
 padding: 16px;
 background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
 border: 1px solid rgba(255,255,255,0.1);
 border-radius: 12px;
 display: flex;
 flex-direction: column;
 gap: 12px;
}
.google-review-header{
 display: flex;
 align-items: center;
 gap: 12px;
}
.google-logo{
 flex-shrink: 0;
}
.google-review-rating{
 display: flex;
 align-items: center;
 gap: 8px;
}
.google-stars{
 display: flex;
 gap: 2px;
}
.google-stars i{
 color: #FBBC05;
 font-size: 14px;
}
.google-rating-text{
 font-size: 1rem;
 font-weight: 700;
 color: #fff;
}
.google-review-btn{
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 10px 16px;
 background: #4285F4;
 color: #fff !important;
 border-radius: 8px;
 font-size: .875rem;
 font-weight: 600;
 text-decoration: none;
 transition: all .25s ease;
}
.google-review-btn:hover{
 background: #3367D6;
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(66, 133, 244, .4);
}
.google-review-btn i{
 font-size: .75rem;
 opacity: .8;
}

/* ============================================
 CALCULATOR PAGE - Header behavior
 ============================================ */
body.calculator-page-active .sticky-header{
 position: relative;
 background-color: rgba(255, 255, 255, .98);
 box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}
body.calculator-page-active .sticky-header.calculator-scrolled{
 position: fixed;
 top: 0;
}
body.calculator-page-active .sticky-header .logo svg #logo-name-text{
 fill: url(#logoGradient) !important;
}
body.calculator-page-active .sticky-header .logo svg #logo-title-text{
 fill: #6c757d !important;
}
body.calculator-page-active .sticky-header .nav-link:not(.nav-link-cta){
 color: var(--text-dark) !important;
}
body.calculator-page-active .sticky-header .nav-link:not(.nav-link-cta):hover{
 color: var(--primary) !important;
 background: rgba(27, 42, 74, .05) !important;
}
body.calculator-page-active .sticky-header .nav-link.nav-link-cta,
body.calculator-page-active .sticky-header .nav-link-cta{
 background: var(--accent-color) !important;
 color: #fff !important;
}
body.calculator-page-active .sticky-header .nav-link.nav-link-cta:hover,
body.calculator-page-active .sticky-header .nav-link-cta:hover{
 background: var(--accent-darker-color) !important;
 color: #fff !important;
}
body.calculator-page-active .sticky-header .current-language{
 background: #fff !important;
 border-color: var(--border-color) !important;
 color: var(--text-dark) !important;
}
body.calculator-page-active .sticky-header .hamburger-inner,
body.calculator-page-active .sticky-header .hamburger-inner::before,
body.calculator-page-active .sticky-header .hamburger-inner::after{
 background-color: var(--primary) !important;
}
body.calculator-page-active.calculator-header-fixed .calculator-page{
 padding-top: var(--header-height, 70px);
}
/* ============================================
 Calculator Results - Redesigned
 ============================================ */
.results-section{
 padding: 0;
}
.results-hero{
 background: #fff !important;
 color: #1a1a1a !important;
 padding: 2.5rem 2rem;
 border-radius: 16px;
 text-align: center;
 margin-bottom: 2rem;
 border: 1px solid #e0e0e0;
 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.results-badge{
 display: inline-flex;
 align-items: center;
 gap: .5rem;
 background: #e8f5e9 !important;
 color: #2e7d32 !important;
 padding: .5rem 1rem;
 border-radius: 50px;
 font-size: .9rem;
 font-weight: 600;
 margin-bottom: 1rem;
}
.results-badge i{
 color: #4caf50 !important;
}
.results-hero h2{
 font-size: 1.1rem;
 font-weight: 500;
 margin-bottom: .5rem;
 color: #666 !important;
}
.results-main-value{
 margin: 1rem 0;
}
.results-main-value .value-amount{
 font-size: 3.5rem;
 font-weight: 700;
 display: block;
 color: #1565c0;
 line-height: 1.2;
}
.results-installment{
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: .5rem;
 font-size: 1.1rem;
 margin-top: 1rem;
 padding: .75rem 1.5rem;
 background: #f5f5f5;
 border-radius: 8px;
 color: #333;
}
.installment-value{
 font-weight: 700;
 color: #1565c0;
}
.results-disclaimer{
 display: flex;
 align-items: center;
 gap: .75rem;
 font-size: .9rem;
 color: #5d4037;
 max-width: 100%;
 margin: 0 0 2rem;
 text-align: left;
 padding: 1rem 1.25rem;
 background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
 border-radius: 12px;
}
.results-disclaimer i{
 flex-shrink: 0;
 font-size: 1.25rem;
 color: #f9a825;
}
.results-benefits{
 background: #f8f9fa;
 padding: 2rem;
 border-radius: 16px;
 margin-bottom: 2rem;
}
.results-benefits h3{
 text-align: center;
 font-size: 1.4rem;
 margin-bottom: 1.5rem;
 color: #1a1a1a;
}
.results-benefits .benefits-grid{
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 1.5rem;
}
.results-benefits .benefit-item{
 display: flex;
 flex-direction: row;
 gap: 1rem;
 align-items: flex-start;
 text-align: left;
 padding: 0;
 background: transparent;
 border: none;
}
.results-benefits .benefit-icon{
 width: 48px;
 height: 48px;
 background: linear-gradient(135deg, #1565c0, #1976d2);
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}
.results-benefits .benefit-icon i{
 color: white;
 font-size: 1.2rem;
 margin-bottom: 0;
}
.results-benefits .benefit-content{
 display: flex;
 flex-direction: column;
 gap: .25rem;
}
.results-benefits .benefit-content strong{
 font-size: 1rem;
 color: #1a1a1a;
}
.results-benefits .benefit-content span{
 font-size: .9rem;
 color: #666;
 line-height: 1.4;
}
.results-cta-box{
 background: linear-gradient(135deg, #fff 0%, #f0f7ff 100%);
 border: 2px solid #1565c0;
 border-radius: 16px;
 padding: 2.5rem 2rem;
 text-align: center;
 margin-bottom: 1.5rem;
}
.results-cta-box h3{
 font-size: 1.5rem;
 color: #1a1a1a;
 margin-bottom: .75rem;
}
.results-cta-box p{
 color: #666;
 margin-bottom: 1.5rem;
 max-width: 500px;
 margin-left: auto;
 margin-right: auto;
}
.cta-buttons{
 display: flex;
 gap: 1rem;
 justify-content: center;
 flex-wrap: wrap;
 margin-bottom: 1.5rem;
}
.cta-button.primary{
 background: linear-gradient(135deg, #1565c0, #0d47a1);
 color: white;
 padding: 1rem 2rem;
 border-radius: 8px;
 font-weight: 600;
 display: inline-flex;
 align-items: center;
 gap: .5rem;
 text-decoration: none;
 transition: all .3s ease;
 box-shadow: 0 4px 15px rgba(21, 101, 192, .3);
}
.cta-button.primary:hover{
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(21, 101, 192, .4);
}
.results-cta-box .cta-button.secondary{
 background: #e3f2fd !important;
 color: #0d47a1 !important;
 padding: 1rem 2rem;
 border-radius: 8px;
 font-weight: 600;
 display: inline-flex;
 align-items: center;
 gap: .5rem;
 text-decoration: none;
 border: 2px solid #1565c0 !important;
 transition: all .3s ease;
}
.results-cta-box .cta-button.secondary:hover{
 background: #1565c0 !important;
 color: white !important;
}
.cta-trust{
 display: flex;
 justify-content: center;
 gap: 1.5rem;
 flex-wrap: wrap;
 font-size: .85rem;
 color: #666;
}
.cta-trust span{
 display: flex;
 align-items: center;
 gap: .4rem;
}
.cta-trust i{
 color: #1565c0;
}
.results-recalculate{
 text-align: center;
}
.btn-recalculate{
 background: transparent;
 border: none;
 color: #666;
 font-size: .95rem;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: .5rem;
 padding: .75rem 1.5rem;
 transition: color .3s ease;
}
.btn-recalculate:hover{
 color: #1565c0;
}

/* ==========================================
 STEP 4:CONTACT FORM STYLES
 ========================================== */
.form-row{
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1rem;
}

.consent-group{
 margin-top: 1.5rem;
 padding-top: 1.5rem;
 border-top: 1px solid #e2e8f0;
}
.consent-item{
 display: flex;
 align-items: flex-start;
 gap: .75rem;
 margin-bottom: 1rem;
 padding: 1rem;
 background: #f8fafc;
 border-radius: 8px;
 transition: background-color .2s ease;
}
.consent-item:hover{
 background: #f1f5f9;
}
.consent-item.required-consent{
 background: #fffbeb;
 border: 1px solid #fef3c7;
}
.consent-item input[type="checkbox"]{
 width: 20px;
 height: 20px;
 margin-top: 2px;
 flex-shrink: 0;
 cursor: pointer;
 accent-color: var(--primary-color);
}
.consent-item label{
 font-size: .85rem;
 line-height: 1.5;
 color: #475569;
 cursor: pointer;
}
.consent-item label .required{
 color: #dc2626;
 font-weight: 700;
}
.consent-item label a{
 color: var(--primary-color);
 text-decoration: underline;
}
/* ==========================================
 STEP 5:PIN DISPLAY STYLES
 ========================================== */
.pin-display,
.pin-verify{
 text-align: center;
 padding: 3rem 2rem;
 background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
 border-radius: 16px;
 margin-bottom: 2rem;
 border: 2px solid #bae6fd;
}
.pin-icon{
 width: 80px;
 height: 80px;
 margin: 0 auto 1.5rem;
 background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 8px 24px rgba(3, 105, 161, .3);
}
.pin-icon i{
 font-size: 2rem;
 color: white;
}
.pin-display h2,
.pin-verify h2{
 font-size: 1.5rem;
 color: #0c4a6e;
 margin-bottom: .75rem;
}
.pin-description{
 color: #475569;
 margin-bottom: 1.5rem;
}
.pin-code{
 font-family: 'Courier New', monospace;
 font-size: 3rem;
 font-weight: 700;
 letter-spacing: .5rem;
 color: #0369a1;
 background: white;
 padding: 1rem 2rem;
 border-radius: 12px;
 display: inline-block;
 margin-bottom: 1.5rem;
 border: 2px dashed #0284c7;
 user-select: all;
}
.pin-warning{
 display: flex;
 align-items: center;
 justify-content: center;
 gap: .5rem;
 color: #b45309;
 font-size: .9rem;
 background: #fffbeb;
 padding: .75rem 1rem;
 border-radius: 8px;
 margin-bottom: 1.5rem;
}
.pin-warning i{
 color: #f59e0b;
}
.btn-show-results{
 display: inline-flex;
 align-items: center;
 gap: .5rem;
 padding: 1rem 2rem;
 font-size: 1.1rem;
}
.pin-input-group{
 display: flex;
 justify-content: center;
 gap: 1rem;
 margin-bottom: 1rem;
}
#pin-input{
 font-family: 'Courier New', monospace;
 font-size: 2rem;
 font-weight: 700;
 letter-spacing: .5rem;
 text-align: center;
 width: 200px;
 padding: .75rem 1rem;
 border: 2px solid #cbd5e1;
 border-radius: 8px;
}
#pin-input:focus{
 border-color: var(--primary-color);
 outline: none;
 box-shadow: 0 0 0 3px rgba(27, 42, 74, .2);
}
.btn-verify-pin{
 padding: .75rem 1.5rem;
}
.pin-error{
 color: #dc2626;
 font-size: .9rem;
 margin-top: .5rem;
}
.calculator-container .progress-step{
 flex: 1;
 min-width: 60px;
}

/* ==========================================
 RESULTS LOOKUP PAGE STYLES
 ========================================== */
.lookup-container{
 max-width: 600px;
 margin: 0 auto;
}
.lookup-form-box{
 background: white;
 border-radius: 16px;
 padding: 3rem 2rem;
 box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
 text-align: center;
}
.lookup-icon{
 width: 80px;
 height: 80px;
 margin: 0 auto 1.5rem;
 background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
}
.lookup-icon i{
 font-size: 2rem;
 color: #0369a1;
}
.lookup-form{
 text-align: left;
 margin-top: 2rem;
}
.lookup-form .form-group{
 margin-bottom: 1.5rem;
}
.lookup-form input{
 width: 100%;
 padding: .875rem 1rem;
 font-size: 1rem;
 border: 2px solid #e2e8f0;
 border-radius: 8px;
 transition: border-color .2s ease;
}
.lookup-form input:focus{
 border-color: var(--primary-color);
 outline: none;
 box-shadow: 0 0 0 3px rgba(27, 42, 74, .1);
}
#lookup-pin{
 font-family: 'Courier New', monospace;
 font-size: 1.25rem;
 letter-spacing: .25rem;
 text-align: center;
}
.lookup-error{
 background: #fef2f2;
 border: 1px solid #fecaca;
 color: #dc2626;
 padding: 1rem;
 border-radius: 8px;
 margin-bottom: 1rem;
 text-align: center;
}
.btn-lookup{
 width: 100%;
 padding: 1rem;
 font-size: 1.1rem;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: .5rem;
}
.btn-lookup .btn-spinner{
 width: 20px;
 height: 20px;
 border: 2px solid rgba(255,255,255,0.3);
 border-top-color: white;
 border-radius: 50%;
 animation: spin .8s linear infinite;
}
@keyframes spin{
 to{ transform: rotate(360deg);}
}
.lookup-help{
 margin-top: 1.5rem;
 color: #64748b;
 font-size: .9rem;
 display: flex;
 align-items: flex-start;
 gap: .5rem;
 text-align: left;
}
.lookup-help i{
 color: #94a3b8;
 margin-top: 2px;
}
.lookup-help a{
 color: var(--primary-color);
 text-decoration: underline;
}
.lookup-results .results-hero{
 background: white;
 border-radius: 16px;
 padding: 2.5rem;
 text-align: center;
 box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}
.lookup-results .results-info{
 color: #64748b;
 font-size: .9rem;
 margin-bottom: 1rem;
}
.lookup-results .results-cta-box{
 margin-top: 2rem;
}
.lookup-actions{
 display: flex;
 gap: 1rem;
 justify-content: center;
 margin-top: 2rem;
 flex-wrap: wrap;
}
.lookup-actions .btn-secondary{
 display: inline-flex;
 align-items: center;
 gap: .5rem;
 padding: .75rem 1.5rem;
 background: white;
 border: 2px solid #e2e8f0;
 border-radius: 8px;
 color: #475569;
 text-decoration: none;
 font-weight: 500;
 transition: all .2s ease;
 cursor: pointer;
}
.lookup-actions .btn-secondary:hover{
 border-color: var(--primary-color);
 color: var(--primary-color);
}
/* ==========================================
 LOOKUP SECTION (ON CALCULATOR PAGE)
 ========================================== */
.lookup-section{
 margin-top: 2rem;
 border-top: 1px solid #e2e8f0;
 padding-top: 1.5rem;
}
.lookup-toggle{
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: .75rem;
 padding: 1rem;
 background: #f8fafc;
 border: 2px solid #e2e8f0;
 border-radius: 8px;
 color: #475569;
 font-size: .95rem;
 font-weight: 500;
 cursor: pointer;
 transition: all .2s ease;
}
.lookup-toggle:hover{
 background: #f1f5f9;
 border-color: #cbd5e1;
}
.lookup-toggle.open{
 border-color: var(--primary-color);
 background: #f0f9ff;
 color: var(--primary-color);
}
.lookup-toggle .lookup-chevron{
 transition: transform .2s ease;
}
.lookup-toggle.open .lookup-chevron{
 transform: rotate(180deg);
}
.lookup-panel{
 margin-top: 1rem;
 padding: 1.5rem;
 background: white;
 border: 2px solid #e2e8f0;
 border-radius: 8px;
}
.lookup-row{
 display: grid;
 grid-template-columns: 1fr 1fr auto;
 gap: 1rem;
 align-items: end;
}

.lookup-panel .form-group{
 margin-bottom: 0;
}
.lookup-panel input{
 width: 100%;
 padding: .75rem 1rem;
 border: 2px solid #e2e8f0;
 border-radius: 6px;
 font-size: 1rem;
}
.lookup-panel #lookup-pin{
 font-family: 'Courier New', monospace;
 letter-spacing: .15rem;
}
.lookup-panel .btn-lookup{
 height: 48px;
 padding: 0 1.5rem;
 white-space: nowrap;
 display: flex;
 align-items: center;
 gap: .5rem;
}
.lookup-panel .btn-spinner{
 width: 16px;
 height: 16px;
 border: 2px solid rgba(255,255,255,0.3);
 border-top-color: white;
 border-radius: 50%;
 animation: spin .8s linear infinite;
}
.lookup-panel .lookup-error{
 margin-top: 1rem;
 padding: .75rem 1rem;
 background: #fef2f2;
 border: 1px solid #fecaca;
 border-radius: 6px;
 color: #dc2626;
 font-size: .9rem;
}
/* ==========================================
 EMAIL STATUS MODAL
 ========================================== */
.email-modal{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, .6);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 10000;
 backdrop-filter: blur(4px);
}
.email-modal-content{
 background: white;
 border-radius: 16px;
 max-width: 480px;
 width: 90%;
 box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
 animation: modalSlideIn .3s ease;
}
@keyframes modalSlideIn{
 from{
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
}
 to{
  opacity: 1;
  transform: translateY(0) scale(1);
}
}
.email-modal-header{
 text-align: center;
 padding: 2rem 2rem 1rem;
}
.email-modal-icon{
 width: 72px;
 height: 72px;
 margin: 0 auto 1rem;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
}
.email-modal-icon.success{
 background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
}
.email-modal-icon.success svg{
 color: #28a745;
}
.email-modal-icon.error{
 background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
}
.email-modal-icon.error svg{
 color: #dc3545;
}
.email-modal-header h3{
 margin: 0;
 font-size: 1.25rem;
 color: #1e293b;
}
.email-modal-body{
 padding: 0 2rem 1.5rem;
 text-align: center;
}
.email-modal-body p{
 color: #64748b;
 margin-bottom: 1rem;
}
.email-details{
 background: #f8fafc;
 border-radius: 8px;
 padding: 1rem;
 text-align: left;
 font-size: .9rem;
}
.email-details-row{
 display: flex;
 justify-content: space-between;
 padding: .5rem 0;
 border-bottom: 1px solid #e2e8f0;
}
.email-details-row:last-child{
 border-bottom: none;
}
.email-details-label{
 color: #64748b;
}
.email-details-value{
 font-weight: 500;
 color: #1e293b;
}
.email-details-value.success{
 color: #28a745;
}
.email-details-value.error{
 color: #dc3545;
}
.email-modal-footer{
 padding: 0 2rem 2rem;
 text-align: center;
}
.email-modal-footer .btn-primary{
 min-width: 120px;
}
/* ==========================================
 CREDENTIALS DISPLAY (after registration)
 ========================================== */
.credentials-display{
 text-align: center;
 padding: 1rem;
}
.credentials-header{
 margin-bottom: 2rem;
}
.credentials-icon{
 width: 72px;
 height: 72px;
 margin: 0 auto 1rem;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
}
.credentials-icon.success{
 background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
 color: #28a745;
}
.credentials-header h3{
 font-size: 1.5rem;
 color: #1e293b;
 margin: 0;
}
.results-summary{
 background: #f8fafc;
 border-radius: 12px;
 padding: 1.5rem;
 margin-bottom: 2rem;
 color: var(--text-muted, #6c757d);
  font-size: 1rem;
}
.result-item{
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: .75rem 0;
 border-bottom: 1px solid #e2e8f0;
}
.result-item:last-child{
 border-bottom: none;
}
.result-label{
 color: #64748b;
}
.result-value{
 font-size: 1.25rem;
 font-weight: 600;
 color: #1B2A4A;
}
.credentials-box{
 background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
 border: 2px dashed #ffc107;
 border-radius: 12px;
 padding: 1.5rem;
 margin-bottom: 1.5rem;
 text-align: left;
}
.credentials-box h4{
 margin: 0 0 .5rem 0;
 color: #856404;
}
.credentials-info{
 font-size: .9rem;
 color: #856404;
 margin-bottom: 1rem;
}
.credential-row{
 display: flex;
 align-items: center;
 gap: .75rem;
 padding: .75rem;
 background: rgba(255, 255, 255, .7);
 border-radius: 8px;
 margin-bottom: .5rem;
}
.credential-label{
 font-weight: 600;
 color: #5d4e37;
 min-width: 100px;
}
.credential-value{
 flex: 1;
 font-family: 'Courier New', monospace;
 font-size: .95rem;
 background: white;
 padding: .5rem .75rem;
 border-radius: 4px;
 border: 1px solid #e0e0e0;
 word-break: break-all;
}
.credential-value.uuid{
 font-size: .8rem;
}
.copy-btn{
 background: none;
 border: none;
 cursor: pointer;
 font-size: 1.2rem;
 padding: .25rem;
 border-radius: 4px;
 transition: background .2s;
}
.copy-btn:hover{
 background: rgba(0, 0, 0, .1);
}
.credentials-notice{
 background: #e8f4fd;
 border-radius: 8px;
 padding: 1rem;
 margin-bottom: 2rem;
 color: #1e40af;
}
.credentials-notice p{
 margin: 0;
}
.credentials-cta{
 padding-top: 1rem;
 border-top: 1px solid #e2e8f0;
}
.credentials-cta p{
 color: #64748b;
 margin-bottom: 1rem;
}
.credentials-cta .btn-primary,
.credentials-cta .btn-secondary{
 display: inline-block;
 padding: .75rem 1.5rem;
 border-radius: 8px;
 text-decoration: none;
 margin: .5rem;
 font-weight: 500;
}
.credentials-cta .btn-primary{
 background: #1B2A4A;
 color: white;
}
.credentials-cta .btn-secondary{
 background: #f1f5f9;
 color: #334155;
 border: 1px solid #e2e8f0;
}

/* ==========================================
 EMAIL SENT SCREEN
 ========================================== */
.email-sent-display{
 text-align: center;
 padding: 2rem;
 max-width: 600px;
 margin: 0 auto;
}
.email-sent-header{
 margin-bottom: 2rem;
}
.email-sent-icon{
 width: 100px;
 height: 100px;
 margin: 0 auto 1.5rem;
 border-radius: 50%;
 background: linear-gradient(135deg, #e8f4fd 0%, #cce5ff 100%);
 display: flex;
 align-items: center;
 justify-content: center;
 color: #1B2A4A;
 animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse{
 0%, 100%{ transform: scale(1);}
 50%{ transform: scale(1.05);}
}
.email-sent-header h2{
 font-size: 1.75rem;
 color: #1e293b;
 margin: 0;
}
.email-sent-content{
 background: #f8fafc;
 border-radius: 16px;
 padding: 2rem;
 margin-bottom: 1.5rem;
}
.email-sent-message{
 font-size: 1.1rem;
 color: #334155;
 margin-bottom: 1.5rem;
}
.email-sent-message strong{
 color: #1B2A4A;
 font-family: monospace;
 font-size: 1rem;
}
.email-sent-info{
 text-align: left;
 margin: 1.5rem 0;
}
.email-sent-info .info-item{
 display: flex;
 align-items: flex-start;
 gap: 1rem;
 padding: .75rem;
 margin-bottom: .5rem;
 background: white;
 border-radius: 8px;
 border-left: 3px solid #1B2A4A;
}
.info-item .info-icon{
 font-size: 1.5rem;
 flex-shrink: 0;
}
.info-item span:last-child{
 color: #475569;
}
.email-sent-warning{
 background: #fef3cd;
 border: 1px solid #ffc107;
 border-radius: 8px;
 padding: 1rem;
 margin-top: 1rem;
}
.email-sent-warning p{
 margin: 0;
 color: #856404;
 font-size: .95rem;
}
.email-sent-lookup{
 background: white;
 border: 2px dashed #e2e8f0;
 border-radius: 12px;
 padding: 1.5rem;
 margin-bottom: 1.5rem;
}
.email-sent-lookup p{
 color: #64748b;
 margin-bottom: 1rem;
}
.btn-show-lookup{
 background: #f1f5f9;
 color: #334155;
 border: 1px solid #e2e8f0;
 padding: .75rem 1.5rem;
 border-radius: 8px;
 cursor: pointer;
 font-weight: 500;
 transition: all .2s;
}
.btn-show-lookup:hover{
 background: #e2e8f0;
 border-color: #cbd5e1;
}
.email-sent-cta{
 border-top: 1px solid #e2e8f0;
 padding-top: 1.5rem;
}
.email-sent-cta p{
 color: #64748b;
 margin-bottom: 1rem;
}
.email-sent-cta .btn-primary{
 display: inline-block;
 background: #1B2A4A;
 color: white;
 padding: 1rem 2rem;
 border-radius: 8px;
 text-decoration: none;
 font-weight: 600;
 font-size: 1.1rem;
}
/* ==========================================
 RECAPTCHA WRAPPER
 ========================================== */
.recaptcha-wrapper{
 margin: 1.5rem 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: .5rem;
}
.recaptcha-hint{
 font-size: .85rem;
 color: #64748b;
 margin: 0;
}
/* ==========================================
 RESPONSIVE
 ========================================== */

/* ==========================================
 EMAIL ERROR WARNING
 ========================================== */
.email-error-warning{
 background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
 border: 2px solid #ef4444;
 border-radius: 12px;
 padding: 1.5rem;
 margin-bottom: 1.5rem;
 text-align: center;
}
.email-error-warning p{
 color: #b91c1c;
 margin: 0 0 1rem 0;
}
.email-error-warning .btn-phone{
 display: inline-block;
 background: #ef4444;
 color: white;
 padding: .75rem 1.5rem;
 border-radius: 8px;
 text-decoration: none;
 font-weight: 600;
}
.email-sent-icon.warning{
 background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
 color: #ef4444;
}
.email-sent-icon.warning svg{
 stroke: #ef4444;
}
/* ==========================================
 EMAIL ERROR SCREEN - NEW DESIGN
 ========================================== */
.email-error-screen{
 text-align: center;
 padding: 2.5rem 1.5rem;
 max-width: 500px;
 margin: 0 auto;
}
.error-icon-wrapper{
 width: 120px;
 height: 120px;
 margin: 0 auto 1.5rem;
 border-radius: 50%;
 background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 8px 32px rgba(251, 191, 36, .3);
}
.error-icon-wrapper svg{
 stroke: #d97706;
}
.email-error-screen h2{
 font-size: 1.75rem;
 color: #1e293b;
 margin: 0 0 .5rem 0;
}
.email-error-screen .error-subtitle{
 font-size: 1rem;
 color: #64748b;
 margin: 0 0 1.5rem 0;
}
.error-info-box{
 background: #f0fdf4;
 border: 1px solid #86efac;
 border-radius: 12px;
 padding: 1rem 1.5rem;
 margin-bottom: 1.5rem;
}
.error-info-box p{
 margin: .25rem 0;
 color: #166534;
}
.error-contact-options{
 display: flex;
 flex-direction: column;
 gap: 1rem;
 margin-bottom: 1.5rem;
}
.error-contact-btn{
 display: flex;
 align-items: center;
 gap: 1rem;
 padding: 1rem 1.5rem;
 border-radius: 12px;
 text-decoration: none;
 transition: all .2s ease;
 text-align: left;
}
.error-contact-btn.email{
 background: linear-gradient(135deg, #1B2A4A 0%, #06C 100%);
 color: white;
 box-shadow: 0 4px 16px rgba(27, 42, 74, .3);
}
.error-contact-btn.email:hover{
 transform: translateY(-2px);
 box-shadow: 0 6px 24px rgba(27, 42, 74, .4);
}
.error-contact-btn.phone{
 background: white;
 border: 2px solid #e2e8f0;
 color: #334155;
}
.error-contact-btn.phone:hover{
 border-color: #1B2A4A;
 background: #f8fafc;
}
.error-contact-btn .btn-icon{
 font-size: 1.75rem;
 flex-shrink: 0;
}
.error-contact-btn .btn-content{
 display: flex;
 flex-direction: column;
}
.error-contact-btn .btn-label{
 font-size: .85rem;
 opacity: .8;
}
.error-contact-btn .btn-value{
 font-size: 1.1rem;
 font-weight: 600;
}
.error-contact-btn.email .btn-value{
 word-break: break-all;
}
.error-retry{
 padding-top: 1rem;
 border-top: 1px solid #e2e8f0;
}
.error-retry p{
 color: #94a3b8;
 margin: 0 0 .75rem 0;
 font-size: .9rem;
}
.btn-retry{
 background: transparent;
 border: 1px solid #cbd5e1;
 color: #64748b;
 padding: .5rem 1.25rem;
 border-radius: 8px;
 cursor: pointer;
 font-size: .9rem;
 transition: all .2s;
 padding: .75rem 1.5rem;
  background: var(--primary, #1B2A4A);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all .2s;
}
.btn-retry:hover{
 background: #f1f5f9;
 border-color: #94a3b8;
 color: #334155;
}

/* ============================================
 COMPARATOR PAGE STYLES
 ============================================ */
body.comparator-page-active .sticky-header{
 position: relative;
 background-color: rgba(255, 255, 255, .98);
 box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}
body.comparator-page-active .sticky-header.comparator-scrolled{
 position: fixed;
 top: 0;
}
body.comparator-page-active .sticky-header .logo svg #logo-name-text{
 fill: url(#logoGradient) !important;
}
body.comparator-page-active .sticky-header .logo svg #logo-title-text{
 fill: #6c757d !important;
}
body.comparator-page-active .sticky-header .nav-link:not(.nav-link-cta){
 color: var(--text-dark) !important;
}
body.comparator-page-active .sticky-header .nav-link:not(.nav-link-cta):hover{
 color: var(--primary) !important;
 background: rgba(27, 42, 74, .05) !important;
}
body.comparator-page-active .sticky-header .nav-link.nav-link-cta,
body.comparator-page-active .sticky-header .nav-link-cta{
 background: var(--accent-color) !important;
 color: #fff !important;
}
body.comparator-page-active .sticky-header .nav-link.nav-link-cta:hover,
body.comparator-page-active .sticky-header .nav-link-cta:hover{
 background: var(--accent-darker-color) !important;
 color: #fff !important;
}
body.comparator-page-active .sticky-header .current-language{
 background: #fff !important;
 border-color: var(--border-color) !important;
 color: var(--text-dark) !important;
}
body.comparator-page-active .sticky-header .hamburger{
 color: var(--primary) !important;
}
body.comparator-page-active .sticky-header .nav-dropdown-toggle{
 color: var(--text-dark) !important;
}
body.comparator-page-active .sticky-header .nav-dropdown-toggle:hover{
 color: var(--primary) !important;
 background: rgba(27, 42, 74, .05) !important;
}
body.comparator-page-active.comparator-header-fixed .comparator-page{
 padding-top: var(--header-height, 70px);
}
.comparator-page{
 background: var(--light-bg, #f8fafc);
 min-height: 100vh;
}
.comparator-hero{
 background: linear-gradient(rgba(255, 255, 255, .95), rgba(248, 250, 252, .98));
 color: var(--text-dark);
 padding: 120px 0 80px;
 text-align: center;
 border-bottom: 1px solid #e2e8f0;
}
.comparator-title{
 font-size: 2.75rem;
 font-weight: 700;
 margin-bottom: 1.25rem;
 color: #1B2A4A;
}
.comparator-subtitle{
 font-size: 1.25rem;
 font-weight: 400;
 color: #475569;
 max-width: 650px;
 margin: 0 auto;
 line-height: 1.6;
}
.comparator-form-section{
 padding: 60px 0;
}
.comparator-card{
 background: #fff;
 border-radius: 16px;
 box-shadow: 0 10px 40px rgba(0,0,0,0.1);
 padding: 2.5rem;
 max-width: 800px;
 margin: 0 auto;
}
.comparator-form-header{
 text-align: center;
 margin-bottom: 2rem;
 padding-bottom: 1.5rem;
 border-bottom: 1px solid #e2e8f0;
}
.comparator-form-header h2{
 font-size: 1.5rem;
 color: var(--primary, #1B2A4A);
 margin-bottom: .5rem;
 font-weight: 600;
}
.comparator-form-header p{
 color: var(--text-muted, #6c757d);
 font-size: 1rem;
}
.comparator-form .form-row{
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 1.5rem;
 margin-bottom: 1.5rem;
}
.comparator-form .form-group{
 display: flex;
 flex-direction: column;
}
.comparator-form .form-group label{
 font-weight: 500;
 margin-bottom: .5rem;
 color: var(--text-dark, #1a1a2e);
 font-size: .95rem;
}
.comparator-form .form-group input[type="number"],
.comparator-form .form-group select{
 padding: .875rem 1rem;
 border: 1px solid #e2e8f0;
 border-radius: 10px;
 font-size: 1rem;
 transition: all .2s;
 background: #fff;
 color: var(--text-dark);
}
.comparator-form .form-group input[type="number"]:focus,
.comparator-form .form-group select:focus{
 border-color: var(--primary, #1B2A4A);
 outline: none;
 box-shadow: 0 0 0 3px rgba(27,42,74,0.1);
}
.comparator-form .input-hint{
 font-size: .8rem;
 color: var(--text-muted, #6c757d);
 margin-top: .375rem;
}
.comparator-form input[type="range"]{
 width: 100%;
 height: 8px;
 border-radius: 4px;
 background: #e2e8f0;
 appearance: none;
 cursor: pointer;
 margin-top: .5rem;
}
.comparator-form input[type="range"]::-webkit-slider-thumb{
 appearance: none;
 width: 24px;
 height: 24px;
 border-radius: 50%;
 background: var(--primary, #1B2A4A);
 cursor: pointer;
 box-shadow: 0 2px 8px rgba(27,42,74,0.3);
 transition: transform .2s;
}
.comparator-form input[type="range"]::-webkit-slider-thumb:hover{
 transform: scale(1.1);
}
.comparator-form .range-value{
 text-align: center;
 font-weight: 600;
 color: var(--primary, #1B2A4A);
 margin-top: .75rem;
 font-size: 1.25rem;
}
.comparator-form .ltv-display{
 display: flex;
 flex-direction: column;
 background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
 padding: 1.25rem 1.5rem;
 border-radius: 12px;
 border: 1px solid #e2e8f0;
 margin-bottom: 1.5rem;
}
.ltv-info{
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: .75rem;
}
.ltv-label{
 font-weight: 500;
 color: var(--text-dark);
}
.ltv-value{
 font-weight: 700;
 font-size: 1.25rem;
 color: var(--primary, #1B2A4A);
}
.ltv-bar{
 height: 10px;
 background: #e2e8f0;
 border-radius: 5px;
 overflow: hidden;
}
.ltv-fill{
 height: 100%;
 background: linear-gradient(90deg, #22c55e, #22c55e);
 border-radius: 5px;
 transition: width .3s ease, background .3s ease;
}
.ltv-hint{
 font-size: .875rem;
 color: var(--text-muted, #6c757d);
 margin-top: .75rem;
 text-align: center;
 font-weight: 500;
}
.btn-compare{
 display: flex;
 align-items: center;
 justify-content: center;
 gap: .75rem;
 width: 100%;
 padding: 1rem 2rem;
 background: linear-gradient(135deg, var(--accent, #F37021) 0%, #ea580c 100%);
 color: #fff;
 border: none;
 border-radius: 12px;
 font-size: 1.1rem;
 font-weight: 600;
 cursor: pointer;
 transition: all .3s;
 margin-top: .5rem;
}
.btn-compare:hover:not(:disabled){
 transform: translateY(-3px);
 box-shadow: 0 10px 30px rgba(243,112,33,0.3);
}
.btn-compare:disabled{
 opacity: .7;
 cursor:not-allowed;
 transform: none;
}
.comparator-loading-section{
 padding: 80px 0;
 text-align: center;
}
.loading-content{
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 1.5rem;
}
.loading-spinner{
 width: 56px;
 height: 56px;
 border: 4px solid #e2e8f0;
 border-top-color: var(--primary, #1B2A4A);
 border-radius: 50%;
 animation: spin 1s linear infinite;
}
@keyframes spin{
 to{ transform: rotate(360deg);}
}
.loading-content p{
 font-size: 1.1rem;
 color: var(--text-muted);
}
.comparator-error-section{
 padding: 80px 0;
 text-align: center;
}
.error-content{
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 1.25rem;
 max-width: 400px;
 margin: 0 auto;
}
.error-content svg{
 color: #dc2626;
}
.error-content p{
 color: #dc2626;
 font-size: 1rem;
}
.btn-retry:hover{
 background: var(--primary-dark, #003d80);
}
.comparator-results-section{
 padding: 60px 0 80px;
 background: #fff;
}
.results-header{
 text-align: center;
 margin-bottom: 2.5rem;
}
.results-header h2{
 font-size: 1.75rem;
 color: var(--primary, #1B2A4A);
 margin-bottom: .5rem;
}
.results-grid{
 display: grid;
 gap: 1.5rem;
 max-width: 900px;
 margin: 0 auto;
}
.offer-card{
 background: #fff;
 border-radius: 16px;
 padding: 1.5rem;
 box-shadow: 0 4px 20px rgba(0,0,0,0.06);
 border: 1px solid #e2e8f0;
 position: relative;
 transition: all .3s ease;
}
.offer-card:hover{
 transform: translateY(-4px);
 box-shadow: 0 12px 40px rgba(0,0,0,0.12);
 border-color: #cbd5e1;
}
.offer-card.best-offer{
 border: 2px solid var(--accent, #F37021);
 box-shadow: 0 8px 30px rgba(243,112,33,0.15);
}
.best-badge{
 position: absolute;
 top: -12px;
 left: 24px;
 background: linear-gradient(135deg, var(--accent, #F37021), #ea580c);
 color: #fff;
 padding: .375rem 1rem;
 border-radius: 20px;
 font-size: .75rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: .5px;
}
.offer-header{
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 1.25rem;
 padding-bottom: 1rem;
 border-bottom: 1px solid #e2e8f0;
}
.bank-info{
 display: flex;
 align-items: center;
 gap: 1rem;
}
.bank-logo{
 width: 56px;
 height: 56px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 background: #f8fafc;
 border-radius: 12px;
 padding: 8px;
}
.bank-logo img{
 max-width: 100%;
 max-height: 100%;
 height: auto;
 object-fit: contain;
 filter: grayscale(100%) opacity(0.7);
 transition: filter .4s ease;
}
.offer-card:hover .bank-logo img{
 filter: grayscale(0%) opacity(1);
}
.bank-logo-fallback{
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 24px;
 filter: grayscale(100%) opacity(0.7);
 transition: filter .4s ease;
}
.offer-card:hover .bank-logo-fallback{
 filter: grayscale(0%) opacity(1);
}
.bank-name{
 font-weight: 600;
 font-size: 1.1rem;
 color: var(--text-dark);
}
.product-name{
 font-size: .8rem;
 color: var(--text-muted, #6c757d);
 margin-top: .125rem;
}
.offer-rate{
 text-align: right;
}
.rate-value{
 display: block;
 font-size: 1.75rem;
 font-weight: 700;
 color: var(--primary, #1B2A4A);
 line-height: 1.2;
}
.rate-label{
 font-size: .75rem;
 color: var(--text-muted, #6c757d);
 text-transform: uppercase;
 letter-spacing: .5px;
}
.offer-flags{
 display: flex;
 gap: .5rem;
 flex-wrap: wrap;
 margin-bottom: 1rem;
}
.offer-flag{
 padding: .25rem .625rem;
 border-radius: 6px;
 font-size: .7rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: .3px;
}
.offer-flag.eco{ background: #dcfce7; color: #166534;}
.offer-flag.rkm{ background: #dbeafe; color: #1e40af;}
.offer-flag.zero{ background: #fef3c7; color: #92400e;}
.offer-flag.fixed{ background: #f3e8ff; color: #7c3aed;}
.offer-details{
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1rem;
 margin-bottom: 1.25rem;
}
.detail-item{
 text-align: center;
 padding: .75rem;
 background: #f8fafc;
 border-radius: 10px;
}
.detail-label{
 display: block;
 font-size: .75rem;
 color: var(--text-muted, #6c757d);
 margin-bottom: .375rem;
 text-transform: uppercase;
 letter-spacing: .3px;
}
.detail-value{
 font-weight: 600;
 color: var(--text-dark);
}
.detail-value.highlight{
 color: var(--primary, #1B2A4A);
 font-size: 1.1rem;
}
.offer-cta{
 display: block;
 text-align: center;
 padding: .875rem;
 background: var(--primary, #1B2A4A);
 color: #fff;
 border-radius: 10px;
 text-decoration: none;
 font-weight: 600;
 transition: all .2s;
}
.offer-cta:hover{
 background: var(--primary-dark, #003d80);
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(27,42,74,0.3);
}
.results-cta{
 text-align: center;
 margin-top: 3rem;
 padding: 2rem;
 background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
 border-radius: 16px;
 border: 1px solid #e2e8f0;
 max-width: 600px;
 margin-left: auto;
 margin-right: auto;
}
.results-cta p{
 font-size: 1.1rem;
 margin-bottom: 1rem;
 color: var(--text-dark, #1a1a2e);
}
.results-cta .cta-button{
 display: inline-flex;
 align-items: center;
 gap: .5rem;
 padding: .875rem 1.75rem;
 background: linear-gradient(135deg, var(--accent, #F37021) 0%, #ea580c 100%);
 color: #fff;
 border-radius: 10px;
 text-decoration: none;
 font-weight: 600;
 transition: all .3s;
}
.results-cta .cta-button:hover{
 transform: translateY(-3px);
 box-shadow: 0 8px 25px rgba(243,112,33,0.3);
}
.comparator-info-section{
 padding: 80px 0;
 background: #f8fafc;
}
.info-grid{
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 2rem;
 max-width: 1000px;
 margin: 0 auto;
}
.info-card{
 text-align: center;
 padding: 2rem 1.5rem;
 background: #fff;
 border-radius: 16px;
 border: 1px solid #e2e8f0;
 transition: all .3s ease;
}
.info-card:hover{
 transform: translateY(-4px);
 box-shadow: 0 12px 40px rgba(0,0,0,0.08);
 border-color: #cbd5e1;
}
.info-icon{
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 64px;
 height: 64px;
 background: linear-gradient(135deg, rgba(27,42,74,0.1), rgba(44,64,112,0.1));
 border-radius: 16px;
 margin-bottom: 1.25rem;
 color: var(--primary, #1B2A4A);
}
.info-card h3{
 font-size: 1.1rem;
 margin-bottom: .75rem;
 color: var(--text-dark, #1a1a2e);
}
.info-card p{
 color: var(--text-muted, #6c757d);
 line-height: 1.6;
 font-size: .95rem;
}

/* ============================================
 COOKIE BANNER - Clean Redesign
 ============================================ */
.cookie-banner{
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 9999;
 background: rgba(33, 37, 41, .95);
 backdrop-filter: blur(12px);
 border-radius: 0;
 padding: 0;
 box-shadow: 0 -4px 24px rgba(0, 0, 0, .2);
 transform: translateY(100%);
 transition: transform .4s cubic-bezier(0.4, 0, .2, 1);
 font-family: var(--font-primary), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.cookie-banner:not(.hidden){
 transform: translateY(0);
}
.cookie-banner.hidden{
 display: block !important;
 visibility: hidden;
 pointer-events: none;
}
.cookie-banner .cookie-content{
 max-width: 100%;
 margin: 0 auto;
 padding: 18px 40px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 40px;
}
.cookie-banner .cookie-text{
 flex: 1;
 text-align: left;
}
.cookie-banner #cookie-banner-title,
.cookie-banner h3{
 font-size: 1rem;
 font-weight: 700;
 color: #f97316;
 margin: 0 0 4px 0;
 display: block;
 text-align: left;
}
.cookie-banner p,
.cookie-banner #cookie-banner-desc{
 font-size: .875rem;
 font-weight: 400;
 color: rgba(255, 255, 255, .85);
 margin: 0;
 line-height: 1.5;
 text-align: left;
}
.cookie-banner a{
 color: #60a5fa;
 text-decoration: underline;
 font-weight: 500;
}
.cookie-banner a:hover{
 color: #93c5fd;
}
.cookie-banner .cookie-actions{
 display: flex;
 align-items: center;
 gap: 10px;
 flex-shrink: 0;
 flex-wrap: wrap;
}
.cookie-banner button{
 font-family: inherit;
 font-size: .8125rem;
 font-weight: 600;
 padding: 10px 18px;
 border-radius: 8px;
 border: none;
 cursor: pointer;
 transition: all .2s ease;
 white-space: nowrap;
}
.cookie-banner .btn-cookie-accept,
.cookie-banner #accept-cookies{
 background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
 color: #fff;
 box-shadow: 0 2px 8px rgba(249, 115, 22, .3);
}
.cookie-banner .btn-cookie-accept:hover,
.cookie-banner #accept-cookies:hover{
 background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(249, 115, 22, .4);
}
.cookie-banner .btn-cookie-manage,
.cookie-banner #manage-cookies{
 background: #334155;
 color: #fff;
 border: 1px solid #475569;
}
.cookie-banner .btn-cookie-manage:hover,
.cookie-banner #manage-cookies:hover{
 background: #475569;
 border-color: #64748b;
}
.cookie-banner .btn-cookie-reject,
.cookie-banner #reject-cookies{
 background: transparent;
 color: rgba(255, 255, 255, .7);
 border: 1px solid rgba(255, 255, 255, .2);
}
.cookie-banner .btn-cookie-reject:hover,
.cookie-banner #reject-cookies:hover{
 background: rgba(255, 255, 255, .1);
 color: #fff;
 border-color: rgba(255, 255, 255, .3);
}
.cookie-settings-modal{
 position: fixed;
 inset: 0;
 z-index: 10000;
 background: rgba(0, 0, 0, .6);
 backdrop-filter: blur(4px);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px;
 opacity: 0;
 visibility: hidden;
 transition: all .3s ease;
}
.cookie-settings-modal.visible,
.cookie-settings-modal:not([hidden]){
 opacity: 1;
 visibility: visible;
}
.cookie-settings-modal[hidden]{
 display: none !important;
}
.cookie-settings-modal .modal-content{
 background: #fff;
 border-radius: 16px;
 padding: 28px;
 max-width: 480px;
 width: 100%;
 max-height: 80vh;
 overflow-y: auto;
 box-shadow: 0 20px 40px rgba(0, 0, 0, .2);
}
.cookie-settings-modal h2{
 font-size: 1.25rem;
 font-weight: 700;
 color: #1a202c;
 margin: 0 0 8px;
}
.cookie-settings-modal > .modal-content > p{
 font-size: .875rem;
 color: #64748b;
 margin: 0 0 24px;
}
.cookie-category{
 background: #f8fafc;
 border: 1px solid #e2e8f0;
 border-radius: 12px;
 padding: 16px;
 margin-bottom: 12px;
}
.cookie-category .category-header{
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 8px;
}
.cookie-category .category-header strong{
 font-size: .9375rem;
 font-weight: 600;
 color: #1a202c;
}
.cookie-category .always-active{
 font-size: .75rem;
 font-weight: 600;
 color: #22c55e;
 background: #f0fdf4;
 padding: 4px 10px;
 border-radius: 20px;
}
.cookie-category-description{
 font-size: .8125rem;
 color: #64748b;
 margin: 0;
 line-height: 1.5;
}
.toggle-switch{
 position: relative;
 display: inline-block;
 width: 44px;
 height: 24px;
}
.toggle-switch input{
 opacity: 0;
 width: 0;
 height: 0;
}
.toggle-switch .slider{
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #cbd5e1;
 transition: .3s;
 border-radius: 24px;
}
.toggle-switch .slider: before{
 position: absolute;
 content: "";
 height: 18px;
 width: 18px;
 left: 3px;
 bottom: 3px;
 background-color: white;
 transition: .3s;
 border-radius: 50%;
 box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}
.toggle-switch input:checked + .slider{
 background: linear-gradient(135deg, #1B2A4A 0%, #06c 100%);
}
.toggle-switch input:checked + .slider: before{
 transform: translateX(20px);
}
#save-cookie-settings{
 width: 100%;
 margin-top: 20px;
 padding: 14px 24px;
 font-size: .9375rem;
 font-weight: 600;
 color: #fff;
 background: linear-gradient(135deg, #1B2A4A 0%, #06c 100%);
 border: none;
 border-radius: 10px;
 cursor: pointer;
 transition: all .2s ease;
}
#save-cookie-settings:hover{
 background: linear-gradient(135deg, #003d80 0%, #05a 100%);
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(27, 42, 74, .3);
}

/* ==========================================================================
 MOBILE MENU FIX - Override conflicting styles
 ========================================================================== */


/* ===== Motyw Credit Embassy - nadpisania (2026-07-05) ===== */
#calculator-page .btn-next,
#calculator-page .btn-calculate,
#calculator-page .btn-submit,
#calculator-page .btn-compare { color: #1B2A4A; background: #D4A853; }
#calculator-page .btn-next:hover,
#calculator-page .btn-calculate:hover,
#calculator-page .btn-submit:hover,
#calculator-page .btn-compare:hover { background: #E0B965; }
#calculator-page .results-cta { background: linear-gradient(135deg, #D4A853 0%, #E0B965 100%); }
#calculator-page .results-cta { color: #1B2A4A; }
#calculator-page .results-cta p { opacity: 0.85; }
#calculator-page .btn-white { color: #1B2A4A; }
#calculator-page .comparator-hero { padding-top: 28px; }
#calculator-page .comparator-hero h2 { color: #1B2A4A; }