/**
 * apb-popup.css — Modal auth (connexion / inscription visiteur / créer fiche pro).
 *
 * v2.29.0 — Migré sur les design tokens canoniques (apb-tokens.css).
 * Avant : font system-ui, palette legacy #185FA5/#E2E6EA, off-brand.
 * Après : Inter via --apb-sans, navy brand --apb-brand, beige cream cohérent,
 * radius/shadow/motion alignés sur le reste du design system.
 *
 * Le popup est le 1er touchpoint quand un visiteur clique "Connexion" →
 * doit refléter le brand immédiatement, pas un look générique de plugin.
 */

/* ════════════════════════════════════════════════════════════
   MODAL container
   ════════════════════════════════════════════════════════════ */
.apb-popup {
    position: fixed;
    inset: 0;
    z-index: var(--apb-z-popup, 100000);
    display: none;
    align-items: center;
    justify-content: center;
    font-family: var(--apb-sans, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
    color: var(--apb-ink, #0F172A);
    padding: 16px;
    box-sizing: border-box;
}
.apb-popup.apb-open { display: flex; }

.apb-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 42, 74, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ════════════════════════════════════════════════════════════
   CARD
   ════════════════════════════════════════════════════════════ */
.apb-popup-box {
    position: relative;
    width: min(560px, 100%);
    max-height: min(92vh, 720px);
    overflow-y: auto;
    background: var(--apb-surface, #FFFFFF);
    border: 1px solid var(--apb-line, #E7E3D9);
    border-radius: var(--apb-radius-lg, 18px);
    padding: 32px 36px 36px;
    box-shadow: var(--apb-shadow-3, 0 24px 48px rgba(11, 42, 74, 0.18));
    box-sizing: border-box;
    /* Tape "drapeau belge" décoratif en haut de la card */
    background-image:
        linear-gradient(
            to right,
            var(--apb-belgium-black, #0B2A4A) 0%,
            var(--apb-belgium-black, #0B2A4A) 33%,
            var(--apb-belgium-amber, #F59E0B) 33%,
            var(--apb-belgium-amber, #F59E0B) 66%,
            var(--apb-belgium-red, #EF3340) 66%
        );
    background-repeat: no-repeat;
    background-size: 100% 4px;
    background-position: top left;
}

@media (max-width: 540px) {
    .apb-popup-box {
        padding: 28px 22px 28px;
        border-radius: var(--apb-radius-md, 14px);
    }
}

.apb-popup-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    font-size: 26px;
    cursor: pointer;
    color: var(--apb-ink-3, #64748B);
    line-height: 1;
    border-radius: var(--apb-radius-sm, 10px);
    transition: background var(--apb-dur-fast, 150ms), color var(--apb-dur-fast, 150ms);
    display: grid;
    place-items: center;
}
.apb-popup-close:hover {
    background: var(--apb-bg-soft, #F4F2EC);
    color: var(--apb-ink, #0F172A);
}

/* ════════════════════════════════════════════════════════════
   TITLE
   ════════════════════════════════════════════════════════════ */
.apb-popup-title {
    margin: 6px 0 4px;
    color: var(--apb-ink, #0F172A);
    font-family: var(--apb-display, var(--apb-sans));
    font-size: 24px;
    font-weight: 700;
    letter-spacing: var(--apb-tracking-tight, -0.025em);
    line-height: 1.2;
}

/* ════════════════════════════════════════════════════════════
   TABS — sous-titre + 3 onglets (connexion / visiteur / pro)
   ════════════════════════════════════════════════════════════ */
.apb-popup-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--apb-line, #E7E3D9);
    margin: 18px 0 22px;
    overflow-x: auto;
    scrollbar-width: none;
}
.apb-popup-tabs::-webkit-scrollbar { display: none; }

.apb-popup-tab {
    background: transparent;
    border: 0;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    color: var(--apb-ink-3, #64748B);
    border-bottom: 2px solid transparent;
    transition: color var(--apb-dur-fast, 150ms), border-color var(--apb-dur-fast, 150ms);
    white-space: nowrap;
    font-weight: 500;
}
.apb-popup-tab:hover {
    color: var(--apb-ink, #0F172A);
}
.apb-popup-tab.apb-tab-active {
    color: var(--apb-brand, #0B2A4A);
    border-bottom-color: var(--apb-brand, #0B2A4A);
    font-weight: 700;
}

.apb-popup-panel { display: none; }
.apb-popup-panel.apb-panel-active { display: block; }

/* ════════════════════════════════════════════════════════════
   POPUP TRIGGER (bouton qui ouvre le popup)
   ════════════════════════════════════════════════════════════ */
.apb-popup-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--apb-brand, #0B2A4A);
    color: var(--apb-ink-on-brand, #FFFFFF);
    border: 0;
    border-radius: var(--apb-radius-sm, 10px);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--apb-dur-fast, 150ms), transform var(--apb-dur-fast, 150ms),
                box-shadow var(--apb-dur, 220ms);
    min-height: 44px;
    line-height: 1.2;
}
.apb-popup-open:hover {
    background: var(--apb-brand-2, #143D69);
    color: var(--apb-ink-on-brand, #FFFFFF);
    transform: translateY(-1px);
    box-shadow: var(--apb-shadow-1, 0 4px 12px rgba(11, 42, 74, 0.18));
}
.apb-popup-open:active {
    transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════
   FORM helpers — utilisés par tous les panels
   ════════════════════════════════════════════════════════════ */
.apb-form-row { margin-bottom: 16px; }
.apb-form-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--apb-ink-2, #334155);
    font-family: inherit;
}
.apb-form-row input[type=text],
.apb-form-row input[type=email],
.apb-form-row input[type=password],
.apb-form-row input[type=tel] {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--apb-line, #E7E3D9);
    border-radius: var(--apb-radius-sm, 10px);
    font-family: inherit;
    font-size: 15px;
    color: var(--apb-ink, #0F172A);
    background: var(--apb-surface, #FFFFFF);
    box-sizing: border-box;
    transition: border-color var(--apb-dur-fast, 150ms), box-shadow var(--apb-dur-fast, 150ms);
    min-height: 44px;
}
.apb-form-row input[type=text]:focus,
.apb-form-row input[type=email]:focus,
.apb-form-row input[type=password]:focus,
.apb-form-row input[type=tel]:focus {
    outline: none;
    border-color: var(--apb-brand, #0B2A4A);
    box-shadow: 0 0 0 3px rgba(11, 42, 74, 0.10);
}
.apb-form-row input::placeholder {
    color: var(--apb-ink-4, #94A3B8);
    font-weight: 400;
}

.apb-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    background: var(--apb-brand, #0B2A4A);
    color: var(--apb-ink-on-brand, #FFFFFF);
    border: 0;
    border-radius: var(--apb-radius-sm, 10px);
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    min-height: 48px;
    transition: background var(--apb-dur-fast, 150ms), transform var(--apb-dur-fast, 150ms),
                box-shadow var(--apb-dur, 220ms);
}
.apb-form-submit:hover:not(:disabled) {
    background: var(--apb-brand-2, #143D69);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(11, 42, 74, 0.18);
}
.apb-form-submit:disabled {
    background: var(--apb-ink-4, #94A3B8);
    cursor: not-allowed;
}

/* Variant primary amber — used for "Créer ma fiche" CTA inside panel pro */
.apb-form-submit--amber {
    background: var(--apb-accent, #F59E0B);
    color: var(--apb-accent-ink, #1A1204);
    box-shadow: var(--apb-shadow-amber, 0 6px 16px rgba(245, 158, 11, 0.30));
}
.apb-form-submit--amber:hover:not(:disabled) {
    background: var(--apb-accent-2, #E88B05);
    color: var(--apb-accent-ink, #1A1204);
    box-shadow: var(--apb-shadow-amber-2, 0 12px 24px rgba(245, 158, 11, 0.40));
}

.apb-form-error {
    color: var(--apb-danger-2, #B91C1C);
    background: var(--apb-danger-soft, #FEF2F2);
    border: 1px solid var(--apb-danger-border, #FCA5A5);
    border-radius: var(--apb-radius-sm, 10px);
    padding: 10px 12px;
    font-size: 13px;
    margin-top: 8px;
}
.apb-form-success {
    color: var(--apb-ok-2, #065F46);
    background: var(--apb-ok-soft, #ECFDF5);
    border: 1px solid var(--apb-ok-border, #A7F3D0);
    border-radius: var(--apb-radius-sm, 10px);
    padding: 10px 12px;
    font-size: 13px;
}

/* Hint text below form */
.apb-popup-panel p,
.apb-popup-panel .apb-popup-hint {
    font-size: 13px;
    color: var(--apb-ink-3, #64748B);
    line-height: 1.5;
}
.apb-popup-panel a {
    color: var(--apb-brand, #0B2A4A);
    text-decoration: underline;
    text-decoration-color: rgba(11, 42, 74, 0.35);
    text-underline-offset: 2px;
    transition: text-decoration-color var(--apb-dur-fast, 150ms);
}
.apb-popup-panel a:hover {
    text-decoration-color: var(--apb-brand, #0B2A4A);
}