/* ── Webview Mode (mobile webview app) ───────────────────────────────────── */
/* Activat când URL conține ?webview=1, persistă în sesiune.
   Ascunde header/footer/sidebar și ajustează layout-ul pentru full-screen mobile. */
body.webview-mode {
    background: #fff !important;
}

body.webview-mode .dashboard-section,
body.webview-mode section.dashboard {
    padding: 0 !important;
    background: #fff !important;
}

body.webview-mode .dashboard-content,
body.webview-mode .dashboard-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    flex-basis: 100% !important;
}

/* Anulăm grid-ul .row > .col al dashboard-ului în webview */
body.webview-mode .dashboard .row {
    margin: 0 !important;
}

body.webview-mode .dashboard [class*="col-"] {
    padding: 0 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Header Top Bar ascuns suplimentar (deja are display:none, dar safety) */
body.webview-mode .header-topbar,
body.webview-mode .main-header,
body.webview-mode .main-footer {
    display: none !important;
}

/* ── Header Top Bar ──────────────────────────────────────────────────────── */
.header-topbar {
    display: none; /* Ascuns temporar — la cererea clientului */
    background: #1a1a2e;
    color: #ccc;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}

.topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.topbar-item i {
    color: #e94560;
    font-size: 13px;
}

.topbar-item a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.2s;
}

.topbar-item a:hover {
    color: #fff;
}

/* ── Credit Questions (dynamic per product) ──────────────────────────────── */
.dynamic-questions-container {
    margin: 24px 0;
    padding: 20px 24px;
    background: #f0f2fe;
    border-radius: 12px;
    border-left: 4px solid #2958d9;
    animation: dqFadeIn 0.3s ease;
}

@keyframes dqFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.dq-header {
    margin-bottom: 16px;
}

.dq-header h4 {
    color: #180047;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.dq-hint {
    color: #4b5563;
    font-size: 13px;
    margin: 0;
}

.dq-field {
    margin-bottom: 14px;
}

.dq-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #180047;
    margin-bottom: 6px;
}

.dq-field .form-control {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #cad1fe;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.2s;
}

.dq-field .form-control:focus {
    border-color: #2958d9;
    outline: none;
    box-shadow: 0 0 0 3px rgba(41, 88, 217, 0.1);
}

.dq-radio-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.dq-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    padding: 8px 14px;
    border: 1px solid #cad1fe;
    border-radius: 24px;
    background: #fff;
    transition: all 0.15s;
}

.dq-radio:hover {
    border-color: #2958d9;
}

.dq-radio input[type="radio"] {
    margin: 0;
}

.dq-radio:has(input:checked) {
    background: #2958d9;
    color: #fff;
    border-color: #2958d9;
}

/* ── CUI Lookup (ANAF) ───────────────────────────────────────────────────── */
.cui-lookup-result {
    margin-top: 8px;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    animation: cuiFadeIn 0.2s ease;
}

@keyframes cuiFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.cui-lookup-loading {
    color: #2958d9;
    font-style: italic;
    background: #f0f2fe;
    padding: 10px 14px;
    border-radius: 10px;
    border-left: 3px solid #2958d9;
}

.cui-lookup-error {
    color: #b91c1c;
    background: #fef2f2;
    padding: 10px 14px;
    border-radius: 10px;
    border-left: 3px solid #dc2626;
}

.cui-lookup-success {
    background: #f0f2fe;
    border-left: 3px solid #2958d9;
}

.cui-lookup-success .cui-name {
    font-size: 15px;
    color: #180047;
    margin-bottom: 6px;
}

.cui-lookup-success .cui-badges {
    margin-bottom: 8px;
}

.cui-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 4px;
}

.cui-badge-ok {
    background: #d1fae5;
    color: #065f46;
}

.cui-badge-error {
    background: #fee2e2;
    color: #991b1b;
}

.cui-badge-info {
    background: #dbeafe;
    color: #1e40af;
}

.cui-badge-muted {
    background: #e5e7eb;
    color: #374151;
}

.cui-detail {
    color: #4b5563;
    font-size: 13px;
    margin-top: 4px;
}

.cui-detail i {
    color: #2958d9;
    margin-right: 4px;
}

/* ── Klaro! Cookie Consent — MK Kredit brand ─────────────────────────────── */
.klaro .cookie-notice,
.klaro .cookie-modal .cm-modal {
    font-family: 'Noto Sans', Arial, sans-serif !important;
    background: #180047 !important;
    color: #ffffff !important;
}

.klaro .cookie-notice {
    border-radius: 16px !important;
    max-width: 480px !important;
    box-shadow: 0 15px 50px rgba(24, 0, 71, 0.35) !important;
    padding: 24px !important;
}

.klaro .cookie-notice .cn-body p,
.klaro .cookie-modal .cm-body p,
.klaro .cookie-notice p,
.klaro .cookie-modal .cm-modal .cm-header p,
.klaro .cookie-modal .cm-modal .cm-services p {
    color: #ffffff !important;
}

.klaro .cookie-notice strong,
.klaro .cookie-modal strong,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-modal h1,
.klaro .cookie-modal h2 {
    color: #ffffff !important;
}

/* Buton principal "Accept toate" */
.klaro .cm-btn-success,
.klaro .cm-btn.cm-btn-accept,
.klaro .cm-btn.cm-btn-accept-all {
    background: #2958d9 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 28px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(41, 88, 217, 0.3) !important;
    transition: all 0.2s ease !important;
}

.klaro .cm-btn-success:hover,
.klaro .cm-btn.cm-btn-accept:hover,
.klaro .cm-btn.cm-btn-accept-all:hover {
    background: #1d47c2 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(41, 88, 217, 0.4) !important;
}

/* Buton "Refuză toate" / secundar */
.klaro .cm-btn-decline,
.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cm-btn-right {
    background: transparent !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 28px !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.klaro .cm-btn-decline:hover,
.klaro .cm-btn.cm-btn-danger:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Link-uri din text */
.klaro .cn-learn-more,
.klaro .cookie-notice a,
.klaro .cookie-modal a {
    color: #579af2 !important;
    text-decoration: underline !important;
}

.klaro .cn-learn-more:hover,
.klaro .cookie-notice a:hover,
.klaro .cookie-modal a:hover {
    color: #cad1fe !important;
}

/* Switch-uri categorii (Analytics, Marketing, Social) */
.klaro .cm-list-input:checked + .cm-list-label .slider {
    background: #2958d9 !important;
}

.klaro .cm-list-input + .cm-list-label .slider {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Containere scopuri — doar vizual, păstrăm layout-ul original Klaro */
.klaro .cookie-modal .cm-modal .cm-purposes .cm-purpose {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
}

.klaro .cookie-modal .cm-services li {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    margin-bottom: 6px !important;
}

/* Switch-urile să nu fie tăiate */
.klaro .cookie-modal .cm-list-input,
.klaro .cookie-modal .cm-list-label,
.klaro .cookie-modal .cm-list-label .slider,
.klaro .cm-list-label .slider {
    overflow: visible !important;
}

/* Fix poziționare switch-uri + alinierea textului */
.klaro .cookie-modal .cm-list-input,
.klaro .context-notice .cm-list-input,
.klaro .cookie-notice .cm-list-input {
    position: relative !important;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service p,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose p,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p {
    margin-left: 50px !important;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-content,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-content {
    margin-left: 0 !important;
}

/* Footer modal */
.klaro .cookie-modal .cm-modal .cm-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
}

/* Ascundem Powered by Klaro */
.klaro .cn-powered-by,
.klaro .cm-powered-by {
    display: none !important;
}

/* ── Product Badge (Dobândă Fixă) ─────────────────────────────────────────── */
.carousel-image,
.credit-page-image,
.business-hero-image {
    position: relative;
}

.product-badge {
    position: absolute !important;
    top: 20px !important;
    left: 10px !important;
    width: 124px !important;
    height: auto !important;
    aspect-ratio: unset !important;
    object-fit: contain !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

@media (max-width: 991px) {
    .product-badge {
        width: 100px !important;
        left: 20px !important;
        transform: none !important;
    }
}

@media (max-width: 575px) {
    .product-badge {
        width: 80px !important;
        top: 10px !important;
        left: 10px !important;
        transform: none !important;
    }
}

/* ── Footer Schedule ─────────────────────────────────────────────────────── */
.footer-schedule {
    margin: 0 0 34px 0;
}

.footer-schedule-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 22px 0;
    line-height: 1.4;
}

.footer-schedule-value {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
    line-height: 1.5;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .topbar-content {
        justify-content: center;
        gap: 12px;
        font-size: 12px;
    }
}

@media (max-width: 575px) {
    .header-topbar {
        padding: 4px 0;
    }

    .topbar-content {
        gap: 8px;
        font-size: 11px;
    }
}

/* ── Validare client-side (telefon / luni) — mesaj inline sub câmp ────────── */
.client-error {
    display: block;
    width: 100%;
    margin-top: 6px;
    color: #ff6b6b;
    font-size: 13px;
    line-height: 1.4;
}

.form-control.is-invalid,
.inline-input.is-invalid {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.22);
}

/* ── Header mobil: logo nu se mai suprapune cu butonul „Autentificare" ──
   (login-section e poziționat ABSOLUT în app.css → pe ecrane înguste ajungea
   peste logo — feedback Bogdan 10 iul, pct. 1). Limităm lățimea logo-ului la
   spațiul rămas (buton + hamburger ≈ 210px) și micșorăm butonul pe foarte mic. */
@media (max-width: 1199px) {
    .main-header .navbar-brand { max-width: calc(100vw - 220px); }
    .main-header .navbar-brand .logo-img { max-width: 100%; object-fit: contain; }
}
@media (max-width: 400px) {
    .main-header .login-section .button { padding: 8px 12px; font-size: 13px; }
}

/* ── Carusel homepage: paginarea numerică (01-04, absolută în dreapta: right:50px,
   bule 45px) nu se mai suprapune cu textul cardului — pe EN textul e mai lung și
   intra sub numere (Bogdan 14 iul). app.css dă padding-right:15%, care la lățimi
   mici scade sub zona bulelor → max() garantează spațiul minim. Specificitate
   completă ca să bată regula din app.css. ── */
.hero .carousel-container .heroSwiper .swiper-slide .carousel-card p {
    padding-right: max(15%, 105px);
}

/* ── Intro „plain" — pt. pagini FĂRĂ imagine de fundal (ex. Sugestii și reclamații):
   app.css dă padding 295px sus + titlu ALB (gândite pt. hero cu imagine închisă) →
   titlul era invizibil și distanța până la conținut uriașă. ── */
.intro-section--plain {
    padding: 170px 0 30px;
}
.intro-section--plain .intro-content .intro-title {
    color: #180047;
    min-height: auto;
}
@media (max-width: 768px) {
    .intro-section--plain { padding: 130px 0 20px; }
}

/* ── Pagini de conținut create din admin (BREAD „Pagini", ex. Finanțarea
   responsabilă) — tipografie pt. HTML-ul din WYSIWYG. ── */
.custom-page-section {
    padding: 20px 0 80px;
}
.custom-page-content {
    max-width: 900px;
    color: #180047;
    font-size: 16px;
    line-height: 1.7;
}
.custom-page-content p { margin: 0 0 16px; }
.custom-page-content h2,
.custom-page-content h3,
.custom-page-content h4 {
    color: #180047;
    margin: 28px 0 12px;
    line-height: 1.3;
}
.custom-page-content h2 { font-size: 26px; }
.custom-page-content h3 { font-size: 21px; }
.custom-page-content h4 { font-size: 18px; }
.custom-page-content ul,
.custom-page-content ol { margin: 0 0 16px; padding-left: 24px; }
.custom-page-content li { margin-bottom: 6px; }
.custom-page-content a { color: #2958d9; text-decoration: underline; }
.custom-page-content img { max-width: 100%; height: auto; border-radius: 8px; }
.custom-page-content table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.custom-page-content table td,
.custom-page-content table th { border: 1px solid #e0e0ef; padding: 8px 12px; }
.custom-page-content blockquote {
    border-left: 4px solid #2958d9;
    margin: 0 0 16px;
    padding: 8px 16px;
    background: #f5f6fb;
}
@media (max-width: 768px) {
    .custom-page-section { padding: 10px 0 50px; }
}

/* ── FAQ cu intro „plain" (uniformizare cu Sugestii și paginile de conținut, Bogdan 6 aug):
   app.css dă .faqs-section padding-top 195px (gândit fără intro) → compact când există intro ── */
.faqs-section.faqs-section--with-intro {
    padding: 20px 0 100px;
}
@media (max-width: 768px) {
    .faqs-section.faqs-section--with-intro { padding: 10px 0 60px; }
}

/* ── Paginația listării de articole (audit SEO 12 aug) ── */
.articles-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 34px;
}

/* ── Mobil: butonul principal din capul meniului hamburger (14 aug „Solicită credit",
   17 aug „Autentificare" — cerere Bogdan de inversare cu butonul de lângă logo).
   Vizibil doar sub breakpoint-ul de colaps (li-ul are d-xl-none). ── */
.navbar-nav .menu-cta {
    display: inline-block;
    margin: 6px auto 10px;
    padding: 10px 26px;
    background: #2958d9;
    color: #fff;
    font-family: 'NotoSans-SemiBold', sans-serif;
    font-size: 15px;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s ease;
}

.navbar-nav .menu-cta:hover,
.navbar-nav .menu-cta:focus {
    background: #1d43b0;
    color: #fff;
    text-decoration: none;
}

.navbar-nav .nav-item.d-xl-none {
    text-align: center;
}

/* ── Desktop: „Solicită credit" ca buton la finalul meniului (Bogdan, 17 aug) ── */
.navbar-nav .nav-cta {
    display: inline-block;
    margin-left: 10px;
    /* meniul absoarbe spațiul liber, deci fără marginea asta butonul s-ar lipi
       de selectorul de limbă din dreapta */
    margin-right: 22px;
    padding: 8px 18px;
    background: #2958d9;
    color: #fff;
    font-family: 'NotoSans-SemiBold', sans-serif;
    font-size: 14px;
    line-height: normal;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease;
}
.navbar-nav .nav-cta:hover,
.navbar-nav .nav-cta:focus {
    background: #1d43b0;
    color: #fff;
    text-decoration: none;
}

/* Între 1200 și 1400px containerul rămâne de 1140px, iar butonul depășea cu ~12px:
   strângem discret spațierea elementelor de meniu (invizibil ca aspect, suficient ca loc). */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* Iconițele sociale dispar din antet (rămân în footer) — eliberează 68px, exact
       cât să încapă butonul fără să înghesuim elementele de meniu între ele. */
    /* specificitate peste app.css (.main-header .navbar .navbar-collapse .navbar-right .social-icons) */
    .main-header .navbar .navbar-collapse .navbar-right .social-icons { display: none; }
    .navbar-nav .nav-cta { margin-left: 8px; padding-left: 14px; padding-right: 14px; }
}

/* ── Sumar de erori în capul formularului de înregistrare (Bogdan, 20 aug) ── */
.register-errors {
    background: #fdf3f4;
    border-left: 3px solid #dc3545;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #721c24;
    font-size: 14px;
}
.register-errors strong { display: block; margin-bottom: 6px; }
.register-errors ul { margin: 0; padding-left: 18px; }
.register-errors li { margin-bottom: 3px; }

/* ── Antet lipit de marginea de sus, pe desktop (Bogdan, 20 aug 2026) ────────
   ⚠️ În mod normal `.main-header` este `position: absolute` și stă SUPRAPUS peste
   imaginea de intro — asta e partea de design. Nu îi schimbăm starea de repaus:
   dacă o facem `sticky`, antetul intră în flux, împinge tot conținutul în jos și
   primește fundal alb peste logo-ul alb (exact ce s-a stricat pe 25 aug).
   Lipirea se aplică DOAR după derulare, prin clasa `is-stuck` pusă de
   public/js/sticky-header.js, care schimbă și logo-ul pe varianta închisă. */
@media (min-width: 1200px) {
    .main-header.is-stuck {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1030;
        background: #fff;
        box-shadow: 0 2px 14px rgba(16, 20, 60, .10);
        animation: mk-header-coboara .25s ease;
    }
    /* bara cu program și telefon nu are ce căuta în antetul strâns */
    .main-header.is-stuck .header-topbar {
        display: none;
    }
    /* ancorele să nu ajungă sub antetul lipit (ex. „#lista-articole", „#form") */
    [id] {
        scroll-margin-top: 110px;
    }
}

@keyframes mk-header-coboara {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* ── Iconița de locație pe cardurile și pagina de carieră (Bogdan, 21 aug 2026) ──
   Când lista de orașe se rupe pe două rânduri (frecvent pe mobil), iconița era
   centrată pe verticală față de tot blocul, adică plutea între rânduri. O punem
   pe primul rând, unde o caută ochiul. */
/* selectorul lung e cerut de specificitatea din app.css
   (.career-intro-section .career-intro-content .career-details .career-detail) */
.career-intro-section .career-intro-content .career-details .career-detail,
.job-location {
    align-items: flex-start;
}
.career-intro-section .career-intro-content .career-details .career-detail i,
.job-location i {
    line-height: 1.2;   /* cutia iconiței cât un rând de text, ca să stea pe primul */
}