:root {
    --bg: #f7f6f3;
    --surface: #ffffff;
    --text: #1b1b1b;
    --muted: #7a7772;
    --line: #e6e3dc;
    --header: #111111;
    --accent: #013ddf;
    --accent-dark: #0129a6;
    --accent-soft: #dce5fb;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    color: var(--text);
    background: var(--bg);
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.5;
}

button,
input,
textarea {
    font: inherit;
}

button {
    border-radius: 0;
}

a {
    color: inherit;
}

/* ---------- Header ---------- */

.site-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 96px;
    padding: 0 28px;
    background: var(--header);
    /* Keep the header fixed in place while the page scrolls/changes step */
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-header .logo img {
    height: 58px;
    width: auto;
    display: block;
}

.site-header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
    overflow: hidden;
}

.site-header-center .logo-text {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.site-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.header-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    color: #ffffff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.header-link:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.header-link.is-active {
    background: var(--accent);
    border-color: var(--accent);
}

/* ---------- Layout ---------- */

#lfb_form.lfb_fullscreen {
    width: 100%;
    min-height: calc(100vh - 96px);
    padding: 24px 20px 40px;
    background: var(--bg);
}

#lfb_mainPanel {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    /* Keeps every step (including the shorter ones with no image, and the
       gallery) the same overall height, so the footer stays hidden below
       the fold consistently instead of only on the taller steps */
    min-height: calc(100vh - 220px);
}

.lfb_genSlide {
    width: 100%;
    /* Offset for the sticky header so scrollIntoView doesn't hide content
       behind it or cause an abrupt jump */
    scroll-margin-top: 116px;
}

.footer-fab-stack {
    display: none;
}

.footer-img {
    margin-top: 60px;
    text-align: center;
}

/* ---------- Page intro ---------- */

.page-title {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.15;
}

.page-intro {
    max-width: 640px;
    margin: 0 0 32px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

/* ---------- Step indicator ---------- */

.step-indicator {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 24px;
    padding: 14px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.step-dot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.step-dot-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.step-dot-label {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.step-dot.is-active .step-dot-num {
    color: #ffffff;
    background: var(--accent);
    border-color: var(--accent);
}

.step-dot.is-active .step-dot-label {
    color: var(--text);
    font-weight: 700;
}

.step-dot.is-done .step-dot-num {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--accent-soft);
}

.step-dot-sep {
    flex: 1 1 16px;
    min-width: 12px;
    height: 1px;
    margin: 0 2px;
    background: var(--line);
}

/* ---------- Spec sections (one step at a time) ---------- */

.spec-section {
    display: flex;
    flex-direction: column;
    /* Same minimum height on every step (matches the main panel's own
       min-height) so the sticky nav bar below always has room to land in
       the same spot on screen, even when a step's content is short */
    min-height: calc(100vh - 220px);
    padding: 0 0 24px;
}

/* Grows to fill the guaranteed min-height, pushing the nav bar down to
   the bottom of the step instead of leaving it stranded right under a
   short amount of content */
.spec-section-content {
    flex: 1 0 auto;
}

.spec-section-body {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
    gap: 32px;
    padding: 24px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.spec-section-main {
    display: flex;
    flex-direction: column;
}

.spec-section-main h2 {
    margin: 0 0 16px;
    color: var(--text);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
}

.spec-section-main p {
    margin: 0 0 24px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}

.step-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    min-height: 200px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
}

.step-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 260px;
    object-fit: contain;
    padding: 16px;
}

.step-media-empty {
    background: var(--accent-soft);
    border-style: dashed;
}

/* Aside stretches to the full height of the row (matches the left
   column's title + intro + image) and stays top-aligned so "Detalii
   tehnice" lines up with the title on the left. */
.spec-section-aside {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

.spec-aside-label {
    display: block;
    margin-bottom: 14px;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.spec-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.spec-list li {
    position: relative;
    padding: 13px 0 13px 20px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}

.spec-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    width: 7px;
    height: 7px;
    background: var(--accent);
}

/* ---------- Step navigation ---------- */

.step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
}

/* Used on the spec steps so Pasul anterior / următor stay visible without
   scrolling — but unlike position:fixed, sticky lets the bar scroll away
   with its section once the user reaches the bottom of the page, so the
   footer logo becomes visible instead of staying covered. */
.step-nav-fixed {
    position: sticky;
    bottom: 0;
    margin-top: 32px;
    padding: 16px 0;
    background: var(--bg);
    border-top: 1px solid var(--line);
    z-index: 500;
}

/* ---------- Buttons ---------- */

.btn,
.btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    min-height: 48px;
    padding: 12px 26px;
    color: #ffffff;
    background: var(--accent);
    border: 0;
    border-radius: 3px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.btn:hover {
    background: var(--accent-dark);
    color: #ffffff;
    transform: translateY(-1px);
}

.btn-ghost {
    color: var(--text);
    background: transparent;
    border: 1px solid var(--line);
}

.btn-ghost:hover {
    color: var(--text);
    background: var(--surface);
    border-color: var(--muted);
    transform: translateY(-1px);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.btn:disabled:hover {
    background: transparent;
    transform: none;
}

/* ---------- Final / summary screen ---------- */

.summary-section .page-title {
    margin-top: 4px;
}

/* Center the intro paragraph on the summary screen */
.summary-section .page-intro {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.final-block {
    padding: 44px 0;
    border-top: 1px solid var(--line);
}

.final-kicker {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.section-title {
    margin: 0 0 22px;
    color: var(--text);
    font-size: 26px;
    font-weight: 700;
}

/* Modifier used on the "Personalizare și opțiuni disponibile" heading */
.section-title.text-center {
    text-align: center;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 0 0 48px;
}

.advantage-card {
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
}

.advantage-card h3 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
}

.advantage-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.customization-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
    row-gap: 0;
    max-width: 640px;
    margin: 0 auto 48px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.customization-list li {
    position: relative;
    padding: 14px 0 14px 20px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: 14px;
}

.customization-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 21px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.contact-block {
    text-align: center;
}

.contact-copy {
    max-width: 620px;
    margin: 0 auto 24px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
}

/* ---------- Gallery (Imagini) ---------- */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin: 4px 0 8px;
}

.gallery-item {
    margin: 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.gallery-item img,
.gallery-item video {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    background: var(--accent-soft);
}

.gallery-item figcaption {
    padding: 12px 14px;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
}

/* ---------- Floating action stack (Email / Facebook / TikTok / WhatsApp) ---------- */

.fab-stack {
    position: fixed;
    right: 18px;
    bottom: 96px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.fab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: #ffffff;
    background: #1e1e1e;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.fab-item:hover {
    background: var(--accent);
    transform: translateY(-2px);
}

/* WhatsApp stays the primary/largest icon, anchored at the bottom */
.fab-item.fab-main {
    width: 52px;
    height: 52px;
    font-size: 22px;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
    .spec-section-body {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .spec-section-aside {
        height: auto;
        justify-content: flex-start;
    }

    .step-media {
        max-width: 100%;
    }

    .step-dot-label {
        display: none;
    }
}

@media (max-width: 700px) {
    .site-header {
        height: 72px;
        padding: 0 12px;
        gap: 6px;
    }

    .site-header .logo img {
        height: 34px;
    }

    .site-header-center .logo-text {
        font-size: 11px;
        letter-spacing: 0.01em;
    }

    .header-link {
        padding: 7px 10px;
        font-size: 12px;
    }

    /* Keep all 5 step dots on one row, centered — scroll horizontally on
       the rare case they don't fit instead of wrapping a lone dot */
    .step-indicator {
        flex-wrap: nowrap;
        justify-content: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 14px;
    }

    .step-dot {
        flex: 0 0 auto;
        padding: 6px 4px;
    }

    .step-dot-sep {
        flex: 0 0 20px;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 14px;
    }

    .gallery-item img,
    .gallery-item video {
        height: 140px;
    }

    .lfb_genSlide {
        scroll-margin-top: 90px;
    }

    #lfb_form.lfb_fullscreen {
        padding: 34px 16px 48px;
    }

    .page-title {
        font-size: 30px;
    }

    .advantages-grid,
    .customization-list {
        grid-template-columns: 1fr;
    }

    .step-nav {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .step-nav .btn {
        width: 100%;
    }

    /* The floating icon stack is replaced by the static row in the
       footer (above the logo) on mobile, so it doesn't cover content */
    .fab-stack {
        display: none;
    }

    .footer-fab-stack {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
    }

    .footer-fab-stack .fab-item {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .footer-fab-stack .fab-item.fab-main {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .step-nav-fixed {
        padding: 12px 0;
    }
}