/* =============================================================================
   style.css  ──  stil pentru caruselul de formulare (Aur / Auto / Electronice)
   Inspirat după poza 2: card alb cu colțuri rotunjite, două coloane,
   buton galben, checkbox de termeni, subsol cu telefoane.
   ============================================================================= */

:root {
    --galben:        #e5c247; /* butonul „Solicită evaluare" */
    --galben-hover:  #d8b53e;
    --text:          #1f2430;
    --text-moale:    #6b7280;
    --bordura:       #d8dade;
    --fundal:        #eef0f2;
    --card:          #ffffff;
    --rosu:          #d23b3b;
    --verde:         #1e7e34;
    --albastru:      #2563eb;
    --whatsapp:      #25d366;
    --radius-card:   16px;
    --radius-camp:   8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fundal);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text);
}

/* ─────────────────────────────────────────────────────────────────────────
   CARUSEL
   ───────────────────────────────────────────────────────────────────────── */
.carusel {
    max-width: 900px;
    margin: 0 auto;
}

/* Butoanele-tab de sus (Aur / Auto / Electronice) */
.carusel-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.carusel-tab {
    border: 1px solid var(--bordura);
    background: #fff;
    color: var(--text-moale);
    font-size: 15px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s;
}
.carusel-tab:hover { border-color: #b9bcc2; }
.carusel-tab.activ {
    background: var(--text);
    color: #fff;
    border-color: var(--text);
}

/* Zona cu săgeți + fereastra care „taie" slide-urile */
.carusel-viewport {
    position: relative;
    padding: 0 52px; /* loc pentru săgeți pe desktop */
}
.carusel-fereastra { overflow: hidden; }

.carusel-pista {
    display: flex;
    transition: transform .35s ease;
}
.carusel-slide {
    flex: 0 0 100%;   /* fiecare slide = exact lățimea ferestrei */
    padding: 4px;     /* ca umbra cardului să nu fie tăiată */
}

/* Săgețile stânga/dreapta */
.carusel-sageata {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--bordura);
    background: #fff;
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: background .15s;
    z-index: 2;
}
.carusel-sageata:hover { background: #f6f6f6; }
.carusel-sageata.stanga  { left: 0; }
.carusel-sageata.dreapta { right: 0; }

/* Punctele de jos */
.carusel-puncte {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}
.carusel-punct {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c7cad0;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .15s, transform .15s;
}
.carusel-punct.activ { background: var(--text); transform: scale(1.2); }

/* ─────────────────────────────────────────────────────────────────────────
   CARDUL FORMULARULUI (stil poza 2)
   ───────────────────────────────────────────────────────────────────────── */
.card {
    background: var(--card);
    border-radius: var(--radius-card);
    box-shadow: 0 10px 35px rgba(0,0,0,.07);
    padding: 38px 44px 34px;
}

.card select {
    height: auto;
}

.card-titlu {
    text-align: center;
    font-size: 27px;
    font-weight: 800;
    margin: 0 0 28px;
}

/* Grilă pe 2 coloane (desktop) → 1 coloană (mobil) */
.grila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 26px;
}
.full { grid-column: 1 / -1; }

/* Un câmp = etichetă + input */
.camp label {
    display: block;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 7px;
}
.obligatoriu { color: var(--rosu); }

.camp input,
.camp select {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid var(--bordura);
    border-radius: var(--radius-camp);
    background: #fff;
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.camp input::placeholder { color: #9aa0a6; }
.camp input:focus,
.camp select:focus {
    outline: none;
    border-color: #1f2430;
    box-shadow: 0 0 0 3px rgba(31,36,48,.08);
}
.camp input.invalid,
.camp select.invalid { border-color: var(--rosu); }

.ajutor {
    font-size: 13px;
    color: var(--text-moale);
    margin-top: 6px;
}

/* Caseta de ESTIMARE (doar la aur) */
.estimare {
    grid-column: 1 / -1;
    background: #fffae8;
    border: 1px solid var(--galben);
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 20px;
}
a.buton-nou {
    margin: auto;
    text-align: center;
    display: block;
    max-width: 200px;
}
.estimare .titlu {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-moale);
    margin-bottom: 4px;
}
.estimare .valoare { font-size: 28px; font-weight: 800; }
.estimare .nota { font-size: 13px; color: var(--text-moale); margin-top: 10px; }

/* Rândul cu checkbox „termeni și condiții" */
.termeni {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    margin-top: 2px;
}
.termeni input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.termeni a { color: var(--albastru); text-decoration: none; }
.termeni a:hover { text-decoration: underline; }

/* Butonul galben */
.buton-trimite {
    grid-column: 1 / -1;
    margin-top: 8px;
    width: 100%;
    padding: 15px;
    background: var(--galben);
    color: #1f2430;
    font-size: 17px;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-camp);
    cursor: pointer;
    transition: background .15s;
}
.buton-trimite:hover { background: var(--galben-hover); }

/* Subsolul cu telefoane */
.contact {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 26px;
}
.contact a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    font-size: 22px;
    font-weight: 800;
}
.contact .pastila {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.contact .wa  { background: var(--whatsapp); }
.contact .tel { background: var(--galben); color: #1f2430; }
.contact svg { width: 17px; height: 17px; display: block; }

/* Mesaje succes / eroare */
.mesaj {
    margin: 0 0 18px;
    padding: 14px 18px;
    border-radius: 10px;
    font-weight: 600;
}
.mesaj-ok     { background: #e7f6ec; border: 1px solid var(--verde); color: var(--verde); }
.mesaj-eroare { background: #fdecea; border: 1px solid var(--rosu);  color: var(--rosu); }
.mesaj-eroare ul { margin: 8px 0 0; padding-left: 20px; font-weight: 400; }

/* Honeypot anti-spam (ascuns) */
.capcana { position: absolute; left: -9999px; }

/* ─── Responsive ─── */
@media (max-width: 720px) {
    .card { padding: 26px 20px 28px; }
    .grila { grid-template-columns: 1fr; }
    .card-titlu { font-size: 23px; }
    .carusel-viewport { padding: 0; }
    .carusel-sageata { display: none; } /* pe mobil: tab-uri + swipe + puncte */
    .contact a { font-size: 19px; }
}

/* Buton „Evaluare aur nouă" (apare sub mesajul de succes) */
.buton-nou {
    display: inline-block;
    margin-top: 14px;
    padding: 12px 20px;
    background: #fff;
    color: #1f2430;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid var(--galben);
    border-radius: var(--radius-camp);
    transition: background .15s;
}
.buton-nou:hover { background: var(--galben); }