/*
 * VOGO eBS — public shortcode styles for [vogo_ebs_service] wizard.
 * 4-step flow: Descriere · Formular · Previzualizare · Trimitere.
 *
 * Palette aligned with shortcode-services + html_ansvsa templates.
 * @file_version 1.0.26
 */

/* Font stack consistent with vogo.me (Inter Tight) — see memory/vogo-ui.md.
   Applied to wizard root + all descendants so inputs/labels/buttons inherit. */
.vogo-ebs-wizard,
.vogo-ebs-wizard * {
    font-family: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.vogo-ebs-wizard {
    max-width: 920px;
    margin: 32px auto;
    color: #1e293b;
}

/* ──────────────────────────────────────────────────────────────────────
   STEPPER — 4 horizontal nodes with connecting lines.
   ────────────────────────────────────────────────────────────────────── */
.vogo-ebs-wizard-stepper {
    display: flex;
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    counter-reset: step;
}
.vogo-ebs-wizard-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    text-align: center;
}
/* Connector line on the right side of each step except the last. */
.vogo-ebs-wizard-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 17px;       /* center of the 36px circle (offset for stroke alignment) */
    left: calc(50% + 24px);
    right: calc(-50% + 24px);
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
}
.vogo-ebs-wizard-step--done:not(:last-child)::after {
    background: #2d8659;
}

.vogo-ebs-wizard-step__num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    z-index: 1;
    position: relative;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.vogo-ebs-wizard-step__num svg {
    width: 18px;
    height: 18px;
}
.vogo-ebs-wizard-step--done .vogo-ebs-wizard-step__num {
    background: #2d8659;
    color: #fff;
}
.vogo-ebs-wizard-step--active .vogo-ebs-wizard-step__num {
    background: #1a4d6e;
    color: #fff;
    box-shadow: 0 0 0 5px rgba(26, 77, 110, 0.12);
}

.vogo-ebs-wizard-step__label {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.vogo-ebs-wizard-step--done .vogo-ebs-wizard-step__label {
    color: #2d8659;
}
.vogo-ebs-wizard-step--active .vogo-ebs-wizard-step__label {
    color: #1a4d6e;
}

@media (max-width: 600px) {
    .vogo-ebs-wizard-step__label { font-size: 10px; }
    .vogo-ebs-wizard-step__num   { width: 32px; height: 32px; font-size: 13px; }
    .vogo-ebs-wizard-step:not(:last-child)::after {
        top: 15px;
        left: calc(50% + 20px);
        right: calc(-50% + 20px);
    }
}

/* ──────────────────────────────────────────────────────────────────────
   HEADER card — service title + current step label. Visible on all steps.
   ────────────────────────────────────────────────────────────────────── */
.vogo-ebs-wizard__header {
    margin: 0 0 18px;
    padding: 0 4px;
    text-align: left;
}
/* Service title — matches .vogo-ebs-wizard__section-title typography (per user spec).
   Double-class selector = (0,2,0) — beats theme `.entry-content h2` (0,1,1)
   which would otherwise override BOTH font-family AND font-size with serif/36px. */
.vogo-ebs-wizard .vogo-ebs-wizard__header-title {
    margin: 0;
    font-family: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #0C2F59;
    letter-spacing: -0.01em;
}
.vogo-ebs-wizard__header-step {
    margin: 4px 0 0;
    font-size: 14px;
    font-style: italic;
    color: #94a3b8;
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .vogo-ebs-wizard__header-step  { font-size: 13px; }
    .vogo-ebs-wizard .vogo-ebs-wizard__success h3 { font-size: 24px; }
}

/* ──────────────────────────────────────────────────────────────────────
   CONTENT card (between stepper and nav).
   ────────────────────────────────────────────────────────────────────── */
.vogo-ebs-wizard__content {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 20px;
    min-height: 280px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

@media (max-width: 600px) {
    .vogo-ebs-wizard__content { padding: 24px 20px; }
}

/* Step 1 — description layout. Title matches .vogo-ebs-wizard__section-title typography.
   Double-class selector to beat theme h-level selectors. */
.vogo-ebs-wizard .vogo-ebs-wizard__title {
    margin: 0 0 8px;
    font-family: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #0C2F59;
    letter-spacing: -0.01em;
}
.vogo-ebs-wizard__subtitle {
    margin: 0 0 18px;
    font-size: 16px;
    color: #475569;
    line-height: 1.5;
}
/* Official label-value list — formal look for public-institution context.
   Forecolor matches html_detl_1 header navy (#0C2F59) for institutional consistency. */
.vogo-ebs-wizard__meta {
    margin: 22px 0 0;
    padding: 14px 18px;
    background: #f8fafc;
    border: 1px solid #e3e8ee;
    border-left: 3px solid #0C2F59;
    border-radius: 4px;
}
.vogo-ebs-wizard__meta-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
}
.vogo-ebs-wizard__meta-row + .vogo-ebs-wizard__meta-row {
    border-top: 1px dashed #e2e8f0;
    margin-top: 4px;
    padding-top: 8px;
}
.vogo-ebs-wizard__meta-label {
    margin: 0;
    flex: 0 0 90px;
    font-size: 13px;
    font-weight: 700;
    color: #0C2F59;
    letter-spacing: 0.01em;
}
.vogo-ebs-wizard__meta-value {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #0C2F59;
}

.vogo-ebs-wizard__description {
    color: #1e293b;
    font-size: 17px;
    line-height: 1.7;
}
.vogo-ebs-wizard__description p { margin: 0 0 14px; }
.vogo-ebs-wizard__description p:last-child { margin-bottom: 0; }
.vogo-ebs-wizard__description ul,
.vogo-ebs-wizard__description ol { margin: 0 0 14px 22px; }

.vogo-ebs-wizard__empty,
.vogo-ebs-wizard .vogo-ebs-empty {
    color: #94a3b8;
    font-style: italic;
    padding: 16px 0;
    text-align: center;
}

/* ──────────────────────────────────────────────────────────────────────
   STEP 1 — Shared public sections (Atașamente / Legislație / FAQ).
   ────────────────────────────────────────────────────────────────────── */
.vogo-ebs-wizard__section {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #e2e8f0;
}
.vogo-ebs-wizard__section-title {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 700;
    color: #0C2F59;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vogo-ebs-wizard__section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0C2F59;
    flex-shrink: 0;
}
.vogo-ebs-wizard__section-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}
.vogo-ebs-wizard__section-label {
    line-height: 1.2;
}
.vogo-ebs-wizard__section-empty {
    color: #94a3b8;
    font-style: italic;
    font-size: 14px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 6px;
}

/* Atașamente necesare — flat ul cu pastilă „obligatoriu". */
.vogo-ebs-wizard__attachments-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vogo-ebs-wizard__attachments-item {
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #e3e8ee;
    border-left: 3px solid #0C2F59;
    border-radius: 4px;
    font-size: 14px;
    color: #0C2F59;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
    cursor: default;
}
.vogo-ebs-wizard__attachments-item:hover {
    background: #0C2F59;
    color: #ffffff;
    border-color: #0C2F59;
    transform: translateY(-1px);
}
.vogo-ebs-wizard__attachments-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: currentColor;
    display: block;
}
.vogo-ebs-wizard__attachments-label {
    flex: 1;
    line-height: 1.4;
}
.vogo-ebs-wizard__attachments-download {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    color: currentColor;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.vogo-ebs-wizard__attachments-download svg {
    width: 16px;
    height: 16px;
    display: block;
}
.vogo-ebs-wizard__attachments-download:hover,
.vogo-ebs-wizard__attachments-download:focus {
    background: rgba(12, 47, 89, 0.12);
    transform: translateY(-1px);
}
.vogo-ebs-wizard__attachments-item:hover .vogo-ebs-wizard__attachments-download:hover,
.vogo-ebs-wizard__attachments-item:hover .vogo-ebs-wizard__attachments-download:focus {
    background: rgba(255, 255, 255, 0.18);
}
.vogo-ebs-wizard__attachments-req {
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    color: #94a3b8;
    background: transparent;
    padding: 0;
    transition: color .15s ease;
}
.vogo-ebs-wizard__attachments-item:hover .vogo-ebs-wizard__attachments-req {
    color: rgba(255, 255, 255, 0.7);
}

/* Legislație — listă info-blocks cu titlu + text + link. */
.vogo-ebs-wizard__info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vogo-ebs-wizard__info-item {
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e3e8ee;
    border-left: 3px solid #0C2F59;
    border-radius: 4px;
}
.vogo-ebs-wizard__info-title {
    font-size: 14px;
    font-weight: 700;
    color: #0C2F59;
    margin-bottom: 4px;
}
.vogo-ebs-wizard__info-text {
    font-size: 14px;
    line-height: 1.6;
    color: #334155;
}
.vogo-ebs-wizard__info-text p { margin: 0 0 6px; }
.vogo-ebs-wizard__info-text p:last-child { margin-bottom: 0; }
.vogo-ebs-wizard__info-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #0C2F59;
    text-decoration: none;
}
.vogo-ebs-wizard__info-link:hover { text-decoration: underline; }

/* FAQ accordion (păstrat din v1.0.3, label-uri actualizate). */
.vogo-ebs-wizard__faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vogo-ebs-wizard__faq-item {
    border: 1px solid #e3e8ee;
    border-radius: 8px;
    background: #f8fafc;
    overflow: hidden;
    transition: border-color .15s ease, background .15s ease;
}
.vogo-ebs-wizard__faq-item[open] {
    background: #fff;
    border-color: #cbd5e1;
}
.vogo-ebs-wizard__faq-question {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 38px;
    line-height: 1.4;
}
.vogo-ebs-wizard__faq-question::-webkit-details-marker { display: none; }
.vogo-ebs-wizard__faq-question::after {
    content: '+';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 400;
    color: #64748b;
    line-height: 1;
    transition: transform .15s ease;
}
.vogo-ebs-wizard__faq-item[open] .vogo-ebs-wizard__faq-question::after {
    content: '−';
    color: #1a4d6e;
}
.vogo-ebs-wizard__faq-answer {
    padding: 0 16px 14px;
    font-size: 14px;
    line-height: 1.65;
    color: #334155;
}
.vogo-ebs-wizard__faq-answer p { margin: 0 0 10px; }
.vogo-ebs-wizard__faq-answer p:last-child { margin-bottom: 0; }
.vogo-ebs-wizard__faq-link {
    margin-top: 8px !important;
    font-size: 13px;
}
.vogo-ebs-wizard__faq-link a {
    color: #1a4d6e;
    text-decoration: none;
    font-weight: 600;
}
.vogo-ebs-wizard__faq-link a:hover { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────────────
   NAVIGATION row (Back / Next).
   ────────────────────────────────────────────────────────────────────── */
.vogo-ebs-wizard__nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.vogo-ebs-wizard__nav-left,
.vogo-ebs-wizard__nav-right {
    display: flex;
    gap: 10px;
}
.vogo-ebs-wizard__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    font-family: inherit;
}
.vogo-ebs-wizard__btn--primary {
    background: #2d8659;
    color: #fff;
    box-shadow: 0 4px 12px rgba(45, 134, 89, 0.25);
}
.vogo-ebs-wizard__btn--primary:hover,
.vogo-ebs-wizard__btn--primary:focus {
    background: #1a4d6e;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(26, 77, 110, 0.30);
}
.vogo-ebs-wizard__btn--secondary {
    background: transparent;
    color: #475569;
    border: 1px solid #cbd5e1;
}
.vogo-ebs-wizard__btn--secondary:hover,
.vogo-ebs-wizard__btn--secondary:focus {
    border-color: #1a4d6e;
    color: #1a4d6e;
    background: #f8fafc;
}

/* Solid ANSVSA navy — primary action variant on step 4 (Descarcă PDF / Trimite email).
   Aligned with html_ansvsa templates and the accesibility module palette. */
.vogo-ebs-wizard__btn--ansvsa {
    background: #0C2F59;
    color: #fff;
    border: 1px solid #0C2F59;
    box-shadow: 0 4px 12px rgba(12, 47, 89, 0.25);
}
.vogo-ebs-wizard__btn--ansvsa:hover,
.vogo-ebs-wizard__btn--ansvsa:focus {
    background: #01255C;
    color: #fff;
    border-color: #01255C;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(1, 37, 92, 0.30);
}

/* Outline variant — used on step 1 "Mai departe" (soft navigation forward).
   White fill + navy border/text/icon (forecolor = standard institutional blue). */
.vogo-ebs-wizard__btn--outline {
    background: #ffffff;
    color: #0C2F59;
    border: 1px solid #0C2F59;
    border-radius: 5px;
}
.vogo-ebs-wizard__btn--outline:hover,
.vogo-ebs-wizard__btn--outline:focus {
    background: #0C2F59;
    color: #ffffff;
    border-color: #0C2F59;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(12, 47, 89, 0.25);
}

/* ──────────────────────────────────────────────────────────────────────
   STEP 2 — Form fields rendered as actual interactive inputs.
   ────────────────────────────────────────────────────────────────────── */
.vogo-ebs-wizard__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vogo-ebs-wizard-form__title {
    margin: 12px 0 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e3e8ee;
    font-size: 18px;
    font-weight: 700;
    color: #0C2F59;
}
.vogo-ebs-wizard-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vogo-ebs-wizard-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vogo-ebs-wizard-field__label {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}
.vogo-ebs-wizard-field__req {
    color: #dc2626;
    font-weight: 700;
}
.vogo-ebs-wizard-field__desc {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}
.vogo-ebs-wizard-field input[type="text"],
.vogo-ebs-wizard-field input[type="email"],
.vogo-ebs-wizard-field input[type="tel"],
.vogo-ebs-wizard-field input[type="number"],
.vogo-ebs-wizard-field input[type="date"],
.vogo-ebs-wizard-field input[type="file"],
.vogo-ebs-wizard-field input[type="datetime-local"],
.vogo-ebs-wizard-field select,
.vogo-ebs-wizard-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: #1e293b;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.vogo-ebs-wizard-field input:focus,
.vogo-ebs-wizard-field select:focus,
.vogo-ebs-wizard-field textarea:focus {
    outline: none;
    border-color: #2d8659;
    box-shadow: 0 0 0 3px rgba(45, 134, 89, 0.12);
}
.vogo-ebs-wizard-field textarea { resize: vertical; min-height: 96px; }

/* Name field — two columns prename/surname. */
.vogo-ebs-wizard-field__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 520px) {
    .vogo-ebs-wizard-field__row { grid-template-columns: 1fr; }
}

/* Radio / checkbox choice list. */
.vogo-ebs-wizard-field__choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e3e8ee;
    border-radius: 6px;
}
.vogo-ebs-wizard-field__choice {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #1e293b;
    cursor: pointer;
}
.vogo-ebs-wizard-field__choice input { margin: 0; flex-shrink: 0; }

.vogo-ebs-wizard-field__html-content {
    padding: 12px 14px;
    background: #eff6ff;
    border-left: 3px solid #1a4d6e;
    border-radius: 4px;
    font-size: 14px;
    color: #1e293b;
}
.vogo-ebs-wizard-field__placeholder {
    padding: 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    color: #94a3b8;
    font-style: italic;
    font-size: 13px;
    text-align: center;
}

/* ──────────────────────────────────────────────────────────────────────
   SIGNATURE canvas — mandatory mouse-signature pad at the bottom of Step 2.
   ────────────────────────────────────────────────────────────────────── */
.vogo-ebs-wizard-signature {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px dashed #e3e8ee;
}
.vogo-ebs-wizard-signature__title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #0C2F59;
}
.vogo-ebs-wizard-signature__hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}
.vogo-ebs-wizard-signature__canvas {
    display: block;
    width: 100%;
    max-width: 600px;
    height: 200px;
    background: #fff;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    cursor: crosshair;
    touch-action: none; /* prevent scroll while signing on touchscreens */
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.04);
}
.vogo-ebs-wizard-signature__canvas:focus {
    outline: none;
    border-color: #2d8659;
    box-shadow: 0 0 0 3px rgba(45, 134, 89, 0.12);
}
.vogo-ebs-wizard-signature__actions {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.vogo-ebs-wizard-signature__status {
    font-size: 13px;
    font-weight: 600;
    color: #15803d;
}

/* Placeholder for future-step renders (S2/S3/S4 stubs). */
.vogo-ebs-wizard__step--placeholder {
    text-align: center;
    padding: 50px 20px;
    color: #94a3b8;
}
.vogo-ebs-wizard__step--placeholder h3 {
    color: #1e293b;
    margin: 0 0 8px;
    font-weight: 700;
}
.vogo-ebs-wizard__step--placeholder p {
    margin: 0;
    font-size: 14px;
}

/* ──────────────────────────────────────────────────────────────────────
   STEP 4 — Success block (after submit). Typography matches ansvsa hero h1+lead.
   Double-class selector beats theme `.entry-content h3` specificity (0,1,1).
   ────────────────────────────────────────────────────────────────────── */
.vogo-ebs-wizard .vogo-ebs-wizard__success h3 {
    font-family: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    color: #0C2F59;
    margin: 0 0 14px;
}
.vogo-ebs-wizard .vogo-ebs-wizard__success p {
    font-family: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: clamp(1.05rem, 1.86vw, 1.5rem);
    font-weight: 400;
    line-height: 1.42;
    letter-spacing: 0;
    color: #475569;
    margin: 0 0 14px;
}

/* ──────────────────────────────────────────────────────────────────────
   STEP 3 — Preview (read-only review of submitted form data).
   ────────────────────────────────────────────────────────────────────── */
.vogo-ebs-wizard__step--3 .vogo-ebs-wizard-form__title {
    margin: 18px 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: #0C2F59;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e8f0;
}
.vogo-ebs-wizard-preview-list {
    margin: 0 0 20px;
    padding: 0;
}
.vogo-ebs-wizard-preview-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 14px;
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
}
.vogo-ebs-wizard-preview-row:last-child { border-bottom: 0; }
/* Zebra starting WITH the first row filled (odd indices → filled). */
.vogo-ebs-wizard-preview-row:nth-child(odd) { background: #f8fafc; }
.vogo-ebs-wizard-preview-label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    line-height: 1.5;
}
.vogo-ebs-wizard-preview-value {
    margin: 0;
    font-size: 14px;
    color: #0C2F59;
    line-height: 1.5;
    word-break: break-word;
}
.vogo-ebs-wizard-preview-empty {
    color: #94a3b8;
    font-style: italic;
}

/* Signature preview block. */
.vogo-ebs-wizard-preview-signature {
    margin-top: 20px;
    padding: 14px 18px;
    background: #f8fafc;
    border: 1px solid #e3e8ee;
    border-left: 3px solid #0C2F59;
    border-radius: 4px;
}
.vogo-ebs-wizard-preview-signature .vogo-ebs-wizard-preview-label {
    margin-bottom: 10px;
}
.vogo-ebs-wizard-preview-signature-img {
    display: block;
    max-width: 100%;
    max-height: 200px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}
.vogo-ebs-wizard-preview-signature--missing {
    border-left-color: #dc2626;
    background: #fef2f2;
    color: #991b1b;
    font-size: 14px;
}

@media (max-width: 600px) {
    .vogo-ebs-wizard-preview-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .vogo-ebs-wizard-preview-label { font-size: 12px; }
}

/* ──────────────────────────────────────────────────────────────────────
   RESPONSIVE COMPREHENSIVE PASS — additional tablet/mobile breakpoints.
   Each rule targets a specific issue identified in audit.
   ────────────────────────────────────────────────────────────────────── */

/* Tablet — reduce content card padding before 600px breakpoint kicks in. */
@media (max-width: 720px) {
    .vogo-ebs-wizard__content { padding: 22px 18px; }
    .vogo-ebs-wizard .vogo-ebs-wizard__success h3 { font-size: 28px; }
    .vogo-ebs-wizard-form__title { font-size: 15px; }
}

/* Phone — signature canvas height reduced (cramped at 200px on landscape mobile);
   touch targets >= 44px (WCAG min) on wizard nav buttons. */
@media (max-width: 480px) {
    .vogo-ebs-wizard { margin: 16px 8px; }
    .vogo-ebs-wizard__content { padding: 18px 14px; }
    .vogo-ebs-wizard .vogo-ebs-wizard__success h3 { font-size: 20px; }
    .vogo-ebs-wizard__header-step { font-size: 12px; }
    .vogo-ebs-wizard__description { font-size: 15px; }
    .vogo-ebs-wizard__btn { padding: 12px 18px; min-height: 44px; font-size: 13px; }
    .vogo-ebs-wizard__nav { flex-direction: column-reverse; gap: 8px; }
    .vogo-ebs-wizard__nav-left,
    .vogo-ebs-wizard__nav-right { width: 100%; }
    .vogo-ebs-wizard__nav-left .vogo-ebs-wizard__btn,
    .vogo-ebs-wizard__nav-right .vogo-ebs-wizard__btn { width: 100%; justify-content: center; }
    .vogo-ebs-wizard-signature__canvas { height: 140px; }
    .vogo-ebs-wizard-field__row { gap: 6px; }
    .vogo-ebs-wizard-preview-label { font-size: 11px; }
    .vogo-ebs-wizard-preview-value { font-size: 13px; }
}

/* Ultra-narrow (<360px) — final compaction; landscape signature pad needs more shrink. */
@media (max-width: 360px) {
    .vogo-ebs-wizard__content { padding: 14px 10px; }
    .vogo-ebs-wizard .vogo-ebs-wizard__success h3 { font-size: 18px; }
    .vogo-ebs-wizard-signature__canvas { height: 110px; }
    .vogo-ebs-wizard-stepper { gap: 0; }
}

/* ──────────────────────────────────────────────────────────────────────
   LOCATION PICKER — OpenLayers base layer (field type `map`).
   Container is 100% width × 500px high; readouts row sits below.
   ────────────────────────────────────────────────────────────────────── */
.vogo-ebs-location-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vogo-ebs-location-picker__map {
    width: 100%;
    height: 500px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
    background: #f1f5f9;
}
.vogo-ebs-location-picker__readouts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.vogo-ebs-location-picker__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vogo-ebs-location-picker__label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.02em;
}
.vogo-ebs-location-picker__readout {
    width: 130px;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    font-family: monospace;
    font-size: 13px;
    color: #0C2F59;
    background: #f8fafc;
}
.vogo-ebs-location-picker__reset {
    margin-left: auto;
    padding: 8px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
.vogo-ebs-location-picker__reset:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #1e293b;
}
.vogo-ebs-location-picker__hint {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    font-style: italic;
}
/* Status indicator shown for transient operations (geolocation lookup,
   address ↔ map sync). Hidden by default, toggled by ebs-location-picker.js. */
.vogo-ebs-location-picker__status {
    display: inline-block;
    padding: 4px 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    font-size: 12px;
    color: #1d4ed8;
    align-self: flex-start;
}
.vogo-ebs-location-picker__status[hidden] { display: none; }
.vogo-ebs-location-picker__status--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

/* Address input toolbar — injected by ebs-location-picker.js when the address
   field is bound to a map picker. The "apply" (▶) button sits INSIDE the input
   on the right edge (absolute); other actions (📍 geolocate, ✕ clear) live
   outside as a small toolbar. Visibility per-button is set inline (hidden
   attribute), CSS handles only sizing + hover. */
.vogo-ebs-address-wrap {
    display: flex;
    align-items: stretch;
    gap: 4px;
}
.vogo-ebs-address-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
}
.vogo-ebs-address-input-wrap > input {
    width: 100%;
    padding-right: 38px !important;
    box-sizing: border-box;
}
.vogo-ebs-address-actions {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-shrink: 0;
}
.vogo-ebs-address-actions button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vogo-ebs-address-actions button:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0C2F59;
}
.vogo-ebs-address-actions button[hidden] { display: none; }
.vogo-ebs-address-actions button svg {
    width: 16px;
    height: 16px;
    display: block;
}
/* Apply button — overlaid INSIDE the input, right edge. Navy ANSVSA solid. */
.vogo-ebs-address-actions__apply {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #0C2F59;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    z-index: 2;
}
.vogo-ebs-address-actions__apply:hover { background: #01255C; }
.vogo-ebs-address-actions__apply[hidden] { display: none; }
.vogo-ebs-address-actions__apply svg {
    width: 14px;
    height: 14px;
    display: block;
}

@media (max-width: 600px) {
    .vogo-ebs-location-picker__map { height: 360px; }
    .vogo-ebs-location-picker__readout { width: 110px; font-size: 12px; }
    .vogo-ebs-location-picker__reset { margin-left: 0; width: 100%; }
}