/*
 * Stiluri proprii DriveCars.
 *
 * Se incarca dupa style.css si adauga doar ce nu exista in template:
 * banda de cautare, pasii procesului, scurtaturile de buget si cateva
 * ajustari pe cardul de masina. Nimic din template nu e rescris aici --
 * asa, o actualizare a temei nu sterge munca noastra.
 */

/*
 * Tema aseaza aproape totul pe float-uri (`.fl-wrap` = float:left;width:100%).
 * Orice bloc care isi creaza propriul context de formatare -- grid, flex --
 * se fereste de float-ul dinaintea lui si ramane cu latime zero. `clear`
 * il coboara sub float si ii reda latimea intreaga.
 */
.dc-gallery,
.dc-spec-grid,
.dc-facts,
.dc-steps,
.dc-makes,
.dc-band-links,
.dc-options,
.dc-cta,
.dc-toolbar,
.dc-search-grid {
    clear: both;
    width: 100%;
}

/*
 * Paleta Brain Storm S.R.L.
 *
 * Tema vine cu verde (#0D9762), dar il foloseste peste tot prin
 * `var(--main-color)` -- definit o singura data in style.css. Il suprascriem
 * aici, iar toata tema trece pe rosul brandului fara sa atingem fisierul temei.
 */
:root {
    --main-color: #E8182C;          /* rosu brand */
    --main-color-rgb: 232, 24, 44;  /* pentru rgba() */

    --dc-ink: #1A1A1A;              /* text principal */
    --dc-muted: #4A4A4A;            /* text secundar */
    --dc-soft: #F7F7F7;             /* fundal deschis */
    --dc-tint: #FDECEA;             /* nuanta de rosu */
    --dc-line: rgba(26, 26, 26, .12);
    --dc-radius: 10px;
}

.dc-center {
    text-align: center;
    margin-top: 30px;
}

.dc-section-lead {
    color: var(--dc-muted);
    font-size: 14px;
    margin: 6px 0 0;
    font-weight: 400;
}

/* ---------------------------------------------------------------- butoane */

.dc-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--main-color);
    color: #fff;
    border-radius: var(--dc-radius);
    padding: 14px 26px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .5px;
    transition: transform .2s ease, box-shadow .2s ease;
    margin: 0 6px 10px;
}

.dc-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(var(--main-color-rgb), .28);
}

.dc-btn-light {
    background: #fff;
    color: var(--dc-ink);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
}

.dc-btn-light:hover {
    color: var(--main-color);
}

/* -------------------------------------------------------------- cautarea */

.dc-search-band {
    position: relative;
    z-index: 20;
    margin-top: -60px;
    padding-bottom: 20px;
}

.dc-search {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(20, 33, 39, .14);
    padding: 26px 30px 22px;
    text-align: left;
}

.dc-search-title {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.dc-search-title h4 {
    font-size: 19px;
    font-weight: 700;
    color: var(--dc-ink);
    margin: 0;
}

.dc-search-title span {
    color: var(--dc-muted);
    font-size: 13px;
}

.dc-search-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.dc-field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--dc-muted);
    margin-bottom: 6px;
    font-weight: 600;
}

.dc-field select,
.dc-field input {
    width: 100%;
    height: 46px;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    padding: 0 12px;
    font-family: var(--main-font);
    font-size: 13px;
    color: var(--dc-ink);
    background: #fff;
    appearance: none;
}

.dc-field select:focus,
.dc-field input:focus {
    outline: none;
    border-color: var(--main-color);
}

.dc-field-submit {
    display: flex;
    align-items: flex-end;
}

.dc-field-submit button {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: var(--dc-radius);
    background: var(--main-color);
    color: #fff;
    font-family: var(--main-font);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: filter .2s ease;
}

.dc-field-submit button:hover {
    filter: brightness(1.08);
}

.dc-search-hint {
    margin-top: 14px;
    font-size: 12px;
    color: var(--dc-muted);
}

/* ------------------------------------------------------ scurtaturi buget */

.dc-band-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.dc-band-links a {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    padding: 10px 18px;
    color: var(--dc-ink);
    font-weight: 600;
    font-size: 13px;
    transition: border-color .2s ease, transform .2s ease;
}

.dc-band-links a span {
    font-size: 11px;
    font-weight: 400;
    color: var(--dc-muted);
    margin-top: 2px;
}

.dc-band-links a:hover {
    border-color: var(--main-color);
    color: var(--main-color);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------ card masina */

.dc-price-note {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--dc-muted);
    letter-spacing: 0;
    text-transform: none;
    margin-top: 2px;
}

.dc-card-meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: var(--dc-muted);
}

.dc-card-meta i {
    margin-right: 4px;
}

.dc-vin-ok {
    color: var(--main-color);
    font-weight: 600;
}

.dc-status-clean {
    background: var(--main-color) !important;
}

.dc-no-photo {
    background: var(--dc-soft) url("../images/logo2.png") center / 120px no-repeat;
    opacity: .35;
}

/* ------------------------------------------------------------ despre noi */

.dc-about-section {
    padding: 90px 0;
    position: relative;
}

.dc-about-section .wide_section-title h3,
.dc-about-section .wide_section-title h4,
.dc-about-section .wide_section-title p {
    color: #fff;
}

.dc-about-section .wide_section-title p {
    max-width: 720px;
    margin: 18px auto 0;
    opacity: .85;
    line-height: 1.8;
}

.dc-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 40px 0 10px;
}

.dc-fact {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    padding: 22px 16px;
}

.dc-fact strong {
    display: block;
    font-size: 30px;
    color: #fff;
    line-height: 1.1;
}

.dc-fact span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
}

/* --------------------------------------------------------------- procesul */

.dc-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
}

.dc-step {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 30px 24px 26px;
    text-align: left;
}

.dc-step-num {
    position: absolute;
    top: -14px;
    right: 20px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--main-color);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.dc-step i {
    font-size: 30px;
    color: var(--main-color);
}

.dc-step h4 {
    margin: 14px 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--dc-ink);
}

.dc-step p {
    font-size: 13px;
    color: var(--dc-muted);
    line-height: 1.7;
    margin: 0;
}

/* ------------------------------------------------------------------ marci */

.dc-makes-wrap {
    padding-bottom: 40px;
}

.dc-makes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dc-makes a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--dc-line);
    border-radius: 40px;
    padding: 10px 18px;
    color: var(--dc-ink);
    font-size: 13px;
    transition: border-color .2s ease, background .2s ease;
}

.dc-makes a strong {
    font-weight: 600;
}

.dc-makes a span {
    background: var(--dc-soft);
    border-radius: 20px;
    padding: 1px 9px;
    font-size: 11px;
    color: var(--dc-muted);
}

.dc-makes a:hover {
    border-color: var(--main-color);
    background: var(--dc-tint);
}

/* -------------------------------------------------------------------- CTA */

.dc-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    background: var(--dc-ink);
    border-radius: 16px;
    padding: 44px 46px;
}

.dc-cta h3 {
    color: #fff;
    font-size: 25px;
    margin: 0 0 10px;
}

.dc-cta p {
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
    max-width: 620px;
}

.dc-cta-actions {
    display: flex;
    flex-wrap: wrap;
}

/* ------------------------------------------------------ pagina de catalog */

.dc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--dc-line);
}

.dc-toolbar-count {
    font-size: 14px;
    color: var(--dc-ink);
    font-weight: 600;
}

.dc-toolbar-count span {
    color: var(--dc-muted);
    font-weight: 400;
}

.dc-empty {
    text-align: center;
    padding: 70px 20px;
}

.dc-empty i {
    font-size: 46px;
    color: var(--dc-line);
}

.dc-empty h4 {
    margin: 18px 0 8px;
    font-size: 19px;
    color: var(--dc-ink);
}

.dc-empty p {
    color: var(--dc-muted);
    font-size: 14px;
}

/* -------------------------------------------------------- pagina de masina */

/*
 * Inaltimea randurilor e fixata explicit: legaturile <a> sunt inline in tema,
 * asa ca o imagine cu `height:100%` nu are de ce sa se agate si se prabuseste
 * la cativa pixeli.
 */
.dc-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 110px;
    gap: 10px;
    margin-bottom: 26px;
}

.dc-gallery a {
    display: block;
    overflow: hidden;
    border-radius: var(--dc-radius);
}

.dc-gallery a:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.dc-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dc-spec-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--dc-line);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    overflow: hidden;
    margin-bottom: 28px;
}

.dc-spec {
    background: #fff;
    padding: 16px 18px;
}

.dc-spec span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--dc-muted);
    margin-bottom: 4px;
}

.dc-spec strong {
    font-size: 15px;
    color: var(--dc-ink);
}

.dc-price-box {
    background: var(--dc-ink);
    border-radius: 14px;
    padding: 28px;
    color: #fff;
    margin-bottom: 24px;
}

.dc-price-box .dc-price-total {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
}

.dc-price-box .dc-price-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
    margin-top: 6px;
}

.dc-price-lines {
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 16px;
}

.dc-price-lines div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
    padding: 5px 0;
    color: rgba(255, 255, 255, .8);
}

.dc-price-lines div strong {
    color: #fff;
    white-space: nowrap;
}

.dc-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dc-options span {
    background: var(--dc-soft);
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 12px;
    color: var(--dc-ink);
}

/*
 * Eticheta e pozitionata absolut intr-o latime stramta: la 800px se rupea in
 * "URMARESTE-" / "NE:", pe doua randuri, peste iconite.
 */
.header-social_title {
    white-space: nowrap;
}

/* ========================================== galeria de pe pagina masinii */
/*
 * Slide-ul isi rezerva inaltimea inainte sa soseasca fotografia. Fara asta,
 * containerul are inaltime zero cat timp imaginile se incarca, iar Swiper
 * calculeaza pe gol -- de acolo venea galeria care aparea abia dupa ce apasai
 * o sageata. Pozele Encar in rezolutie mare sunt 16:9.
 */
.single-slider .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ================================================== antetul paginii masinii */
/*
 * Fundalul e chiar fotografia anuntului, facuta in hala de inspectie Encar.
 * Sigla lor e pictata pe peretele din spate, sus in cadru, iar parallax-ul o
 * impingea si mai sus, tocmai peste antetul nostru. Coborand punctul de
 * interes ramane in cadru masina, care e subiectul, nu reclama altcuiva.
 */
.hero-section_sin .bg-hero .bg {
    background-position: center 78%;
}

/* =========================================================== antet: telefon */
/*
 * Tema aseaza bara de sus pe float-uri, iar blocul nostru de telefon nu avea
 * nicio regula, deci ateriza peste iconitele sociale.
 */
.header-top_phone {
    float: right;
    height: 40px;
    line-height: 40px;
    /* Eticheta "Urmareste-ne:" a temei e pozitionata absolut si iese 110px
       spre stanga blocului social; fara marja asta, ar cadea peste telefon. */
    margin-right: 130px;
}

/*
 * Pe ecrane mici tema ascunde tot continutul barei de sus, dar bara ramane
 * — 70px de negru gol. O umplem cu singurul lucru care conteaza pe telefon:
 * butonul de sunat, pe toata latimea.
 */
@media only screen and (max-width: 1064px) {
    .header-top_phone {
        display: block !important;
        float: none;
        margin: 0;
        height: 100%;
    }

    .header-top_phone a {
        display: flex;
        justify-content: center;
        height: 70px;
        font-size: 15px;
    }

    .header-top_phone i {
        font-size: 14px;
    }
}

.header-top_phone a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    white-space: nowrap;
}

.header-top_phone a:hover {
    color: var(--main-color);
}

.header-top_phone i {
    color: var(--main-color);
    font-size: 12px;
}

/* ======================================== select cu cautare si multi-select */

.dc-select {
    position: relative;
    width: 100%;
}

.dc-select-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    font-family: var(--main-font);
    font-size: 13px;
    color: var(--dc-ink);
    cursor: pointer;
    text-align: left;
}

.dc-select.is-open .dc-select-toggle,
.dc-select.has-selection .dc-select-toggle {
    border-color: var(--main-color);
}

.dc-select-toggle > i:first-child {
    color: var(--main-color);
    font-size: 15px;
}

.dc-select-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dc-select.has-selection .dc-select-label {
    font-weight: 600;
}

.dc-select-caret {
    font-size: 12px;
    color: var(--dc-muted);
    transition: transform .2s ease;
}

.dc-select.is-open .dc-select-caret {
    transform: rotate(180deg);
}

.dc-select-panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    box-shadow: 0 16px 40px rgba(26, 26, 26, .16);
    overflow: hidden;
}

.dc-select-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--dc-line);
}

.dc-select-search i {
    color: var(--dc-muted);
    font-size: 13px;
}

.dc-select-search input {
    flex: 1;
    border: none;
    outline: none;
    height: 30px;
    font-family: var(--main-font);
    font-size: 13px;
    color: var(--dc-ink);
    background: transparent;
}

.dc-select-options {
    max-height: 260px;
    overflow-y: auto;
}

.dc-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--dc-ink);
    transition: background .15s ease;
}

.dc-select-option:hover {
    background: var(--dc-soft);
}

.dc-select-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dc-select-box {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1px solid var(--dc-line);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-select-box i {
    font-size: 10px;
    color: #fff;
    opacity: 0;
}

.dc-select-option input:checked + .dc-select-box {
    background: var(--main-color);
    border-color: var(--main-color);
}

.dc-select-option input:checked + .dc-select-box i {
    opacity: 1;
}

.dc-select-name {
    flex: 1;
}

.dc-select-count {
    font-style: normal;
    font-size: 11px;
    color: var(--dc-muted);
    background: var(--dc-soft);
    border-radius: 20px;
    padding: 2px 8px;
}

.dc-select-empty {
    padding: 16px 14px;
    font-size: 13px;
    color: var(--dc-muted);
    text-align: center;
}

.dc-select-foot {
    border-top: 1px solid var(--dc-line);
    padding: 8px 14px;
}

.dc-select-clear {
    background: none;
    border: none;
    padding: 4px 0;
    font-family: var(--main-font);
    font-size: 12px;
    color: var(--main-color);
    cursor: pointer;
}

/* ================================================= butoane: aceeasi marime */

.dc-btn {
    min-height: 50px;
    justify-content: center;
    box-sizing: border-box;
}

.dc-center .dc-btn {
    min-width: 230px;
}

/* ============================================== responsiv (mobile first) */

@media only screen and (min-width: 600px) {
    .dc-search-grid { grid-template-columns: repeat(2, 1fr); }
    .dc-spec-grid { grid-template-columns: repeat(2, 1fr); }
    .dc-facts { grid-template-columns: repeat(2, 1fr); }
    .dc-steps { grid-template-columns: repeat(2, 1fr); }
    .dc-gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 130px; }
}

@media only screen and (min-width: 1065px) {
    .dc-search-band { margin-top: -60px; }
    .dc-search-grid { grid-template-columns: repeat(3, 1fr); }
    .dc-spec-grid { grid-template-columns: repeat(3, 1fr); }
    .dc-facts { grid-template-columns: repeat(4, 1fr); }
    .dc-steps { grid-template-columns: repeat(4, 1fr); }
    .dc-gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; }
    .dc-gallery a:first-child { grid-column: span 2; grid-row: span 2; }
}

/* Pana la desktop, banda de cautare nu se suprapune peste slider. */
@media only screen and (max-width: 1064px) {
    .dc-search-band { margin-top: 0; padding-top: 30px; }
    .dc-search { padding: 20px 18px; }
    .dc-gallery a:first-child { grid-column: span 2; grid-row: auto; }
    .dc-cta { padding: 30px 24px; }
    .dc-cta h3 { font-size: 21px; }
    .dc-center .dc-btn { min-width: 0; width: 100%; }
    .dc-btn { width: 100%; margin: 0 0 10px; }
    .dc-form-contacts { flex-direction: column; }
}

/* ================================= formularul de cautare (prima pagina) */

.dc-input {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
}

.dc-input:focus-within {
    border-color: var(--main-color);
}

.dc-input > i {
    color: var(--main-color);
    font-size: 15px;
    flex: 0 0 auto;
}

.dc-input input,
.dc-input select {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--main-font);
    font-size: 14px;
    color: var(--dc-ink);
    appearance: none;
    cursor: pointer;
}

.dc-input input {
    cursor: text;
}

/* Sageata select-ului, desenata in CSS ca sa nu depindem de o imagine. */
.dc-input select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--dc-muted) 50%),
        linear-gradient(135deg, var(--dc-muted) 50%, transparent 50%);
    background-position: right 4px center, right 0 center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 18px;
}

.dc-field-submit button {
    height: 52px;
    min-height: 52px;
}

.dc-search-foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--dc-line);
}

.dc-search-foot .dc-search-hint {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--dc-muted);
}

.dc-search-foot .dc-search-hint i {
    color: var(--main-color);
}

.dc-search-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dc-search-quick a {
    border: 1px solid var(--dc-line);
    border-radius: 40px;
    padding: 7px 14px;
    font-size: 12px;
    color: var(--dc-ink);
    white-space: nowrap;
    transition: border-color .2s ease, color .2s ease;
}

.dc-search-quick a:hover {
    border-color: var(--main-color);
    color: var(--main-color);
}

/*
 * In catalog, select-ul nostru sta pe locul unui `cs-intputwrap` al temei.
 * Il tinem in afara acelui ambalaj (regulile temei ii sterg bordura si ii
 * pozitioneaza absolut iconita), dar ii pastram spatierea.
 */
.dc-select-field {
    position: relative;
    margin-bottom: 20px;
}

/* Iconitele din interiorul select-ului raman in flux, orice ar zice tema. */
.dc-select .dc-select-toggle > i,
.dc-select .dc-select-search > i {
    position: static;
    top: auto;
    left: auto;
    transform: none;
}

@media only screen and (min-width: 600px) {
    .dc-search-foot {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media only screen and (min-width: 1065px) {
    .dc-field-wide { grid-column: span 3; }
    .dc-field-submit { grid-column: span 3; }
}

/* ===================================================== mobil: fara scroll lateral */
/*
 * Meniul off-canvas si panoul de filtre stau in afara ecranului, la dreapta
 * respectiv la stanga. Fara taierea asta, telefonul capata 20px de derulare
 * orizontala si pagina "tremura" la atingere.
 */
@media only screen and (max-width: 1064px) {
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    #main {
        overflow-x: clip;
    }
}

/*
 * Tema are `.custom-form button { border: none }` — specificitate (0,1,1),
 * mai mare decat `.dc-select-toggle`. Urcam la (0,2,0) ca butonul nostru sa-si
 * pastreze bordura si in interiorul formularelor temei.
 */
.dc-select .dc-select-toggle {
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    background: #fff;
    color: var(--dc-ink);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: none;
}

.dc-select.is-open .dc-select-toggle,
.dc-select.has-selection .dc-select-toggle {
    border-color: var(--main-color);
}

.dc-select .dc-select-clear {
    border: none;
    background: none;
    padding: 4px 0;
    width: auto;
    text-transform: none;
    letter-spacing: normal;
}

/* ==========================================================================
   RESTAURARE + REPARATII
   Blocul de mai jos a fost pierdut la o rescriere anterioara a fisierului.
   ========================================================================== */

/* ------------------------------------------------------------------ logo */
/* Tema e facuta pentru un logo-text lat si scund (.logo-holder are 14px). */
.logo-holder {
    height: 46px;
    line-height: 46px;
    margin-top: -23px;
}

.logo-holder img {
    height: 100%;
    width: auto;
}

.footer-widget-logo img {
    height: 74px;
    width: auto;
}

/* --------------------------------------------- antet: telefon centrat */
/* Bara are 70px; fara asta linkul de 40px statea lipit de marginea de sus. */
.header-top_phone {
    display: flex;
    align-items: center;
    height: 70px;
}

.header-top_phone a {
    height: auto;
    line-height: 1;
}

/* ------------------------------------------ descompunerea pretului (alb) */
.dc-price-lines_light div {
    color: var(--dc-muted);
    border-bottom: 1px solid var(--dc-line);
}

.dc-price-lines_light div:last-child {
    border-bottom: none;
}

.dc-price-lines_light div strong {
    color: var(--dc-ink);
}

.dc-price-lines_light .dc-price-total-row {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 2px solid var(--dc-ink);
    font-weight: 700;
}

.dc-price-lines_light .dc-price-total-row span,
.dc-price-lines_light .dc-price-total-row strong {
    color: var(--dc-ink);
    font-size: 15px;
}

/* ---------------------------------------------------------------- dotari */
.pp-single-features ul li span {
    display: block;
    color: var(--dc-ink);
    font-size: 13px;
}

.pp-single-features ul li span i {
    color: var(--main-color);
    margin-right: 8px;
}

/* -------------------------------------------------------------- formular */
.dc-form-ok {
    background: var(--dc-tint);
    border: 1px solid rgba(var(--main-color-rgb), .25);
    border-radius: var(--dc-radius);
    padding: 18px 20px;
    font-size: 14px;
    color: var(--dc-ink);
    line-height: 1.6;
}

.dc-form-ok i {
    color: var(--main-color);
    margin-right: 8px;
}

.dc-form-error {
    color: var(--main-color);
    font-size: 12px;
    margin: -10px 0 12px;
    text-align: left;
}

.custom-form textarea {
    min-height: 110px;
    resize: vertical;
}

/* ===================================== pagina masinii: antetul cu pretul */
/*
 * `.hero-section-opt` are `overflow:hidden` in tema, deci isi creeaza propriul
 * context de formatare si se fereste de blocul flotant de deasupra — ajungea
 * cu latime zero, iar randul cu VIN-ul iesea taiat peste caseta de pret.
 */
.hsc_flat .hero-section-opt {
    clear: both;
    width: 100%;
}

.hsc_flat .hero-section-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hsc_flat .property-single-header-price {
    align-self: flex-start;
    margin-top: 10px;
}

/* ----------------------------------------- lupa, centrata peste fotografie */
.single-slider .swiper-slide .box-media-zoom {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%) scale(.9);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}

.single-slider .swiper-slide:hover .box-media-zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.dc-slide-link {
    display: block;
    position: relative;
}

/* ============================== pret pe fundal rosu, in sliderul de acasa */
.home-hero-section .property-single-header-price {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    background: var(--main-color);
    border-radius: var(--dc-radius);
    padding: 12px 20px;
    margin: 6px 0 4px;
    box-shadow: 0 10px 30px rgba(var(--main-color-rgb), .35);
}

.home-hero-section .property-single-header-price strong {
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.home-hero-section .property-single-header-price .pshp_item,
.home-hero-section .property-single-header-price .pshp_item span {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

/* ============================================= cauta dupa marca: carduri */
.dc-makes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.dc-makes a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    padding: 16px 18px;
    color: var(--dc-ink);
    font-size: 14px;
    background: #fff;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.dc-makes a strong {
    font-weight: 600;
    letter-spacing: .2px;
}

.dc-makes a span {
    background: var(--dc-soft);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--dc-muted);
    flex: 0 0 auto;
}

.dc-makes a:hover {
    border-color: var(--main-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(26, 26, 26, .08);
}

.dc-makes a:hover span {
    background: var(--main-color);
    color: #fff;
}

@media only screen and (min-width: 600px) {
    .dc-makes { grid-template-columns: repeat(3, 1fr); }
}

@media only screen and (min-width: 1065px) {
    .dc-makes { grid-template-columns: repeat(5, 1fr); }
}

/* ================================================= CTA aliniat la stanga */
.dc-cta {
    display: block;
    text-align: left;
}

.dc-cta h3,
.dc-cta p {
    max-width: 720px;
}

.dc-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.dc-cta-actions .dc-btn {
    margin: 0;
}

/* ==================== contactele din formularul de verificare, ca butoane */
.dc-form-contacts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--dc-line);
}

.dc-form-contacts a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: var(--dc-radius);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    border: 1px solid transparent;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.dc-form-contacts .dc-contact-call {
    background: var(--dc-ink);
    color: #fff;
}

.dc-form-contacts .dc-contact-call:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(26, 26, 26, .25);
}

.dc-form-contacts .dc-contact-wa {
    background: #25D366;
    color: #fff;
}

.dc-form-contacts .dc-contact-wa:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(37, 211, 102, .35);
}

@media only screen and (min-width: 480px) {
    .dc-form-contacts { grid-template-columns: 1fr 1fr; }
}

/* ============================================================== subsolul */

.dc-footer-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 16px 0 20px;
}

.dc-footer-facts span {
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
}

.dc-footer-facts strong {
    display: block;
    font-size: 20px;
    color: #fff;
    line-height: 1.2;
}

.dc-footer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dc-footer-tags a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 30px;
    padding: 7px 13px;
    font-size: 12px;
    color: rgba(255, 255, 255, .75);
    transition: border-color .2s ease, color .2s ease;
}

.dc-footer-tags a em {
    font-style: normal;
    font-size: 10px;
    color: rgba(255, 255, 255, .45);
}

.dc-footer-tags a:hover {
    border-color: var(--main-color);
    color: #fff;
}

.dc-footer-tags a:hover em {
    color: var(--main-color);
}

.dc-footer-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 18px;
}

.dc-footer-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border-radius: var(--dc-radius);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.dc-footer-cta .dc-contact-call {
    background: var(--main-color);
}

.dc-footer-cta .dc-contact-wa {
    background: #25D366;
}

.dc-footer-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--dc-radius);
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
    line-height: 1.6;
}

.dc-footer-note i {
    color: var(--main-color);
    margin-top: 2px;
}

/* ========================================= cele doua transe de plata */

.dc-split {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.dc-split-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dc-split-amount {
    font-weight: 700;
    color: var(--dc-ink);
    line-height: 1.2;
}

.dc-split-when {
    color: var(--dc-muted);
    line-height: 1.35;
}

.dc-split-plus {
    align-self: center;
    color: var(--dc-muted);
    font-weight: 700;
}

/* Pe card: discret, doua randuri mici sub pret. */
.dc-split--inline {
    margin: 8px 0 12px;
    padding: 10px 12px;
    background: var(--dc-soft);
    border-radius: 8px;
}

.dc-split--inline .dc-split-amount { font-size: 13px; }
.dc-split--inline .dc-split-when { font-size: 10px; }
.dc-split--inline .dc-split-plus { font-size: 12px; }

/* Pe pagina masinii: mai vizibil, cu accent pe prima transa. */
.dc-split--block {
    margin: 16px 0 4px;
    padding: 14px 16px;
    background: var(--dc-tint);
    border: 1px solid rgba(var(--main-color-rgb), .18);
    border-radius: var(--dc-radius);
}

.dc-split--block .dc-split-amount { font-size: 17px; }
.dc-split--block .dc-split-when { font-size: 11px; }
.dc-split--block .dc-split-plus { font-size: 16px; }

@media only screen and (max-width: 420px) {
    .dc-split { flex-direction: column; }
    .dc-split-plus { align-self: flex-start; }
}

/* ============================================ masini deja privite (discret) */

.dc-seen .geodir-category-img:after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 26, .18);
    pointer-events: none;
    z-index: 2;
}

.dc-seen-badge {
    position: absolute;
    z-index: 3;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--main-color);
    color: #fff;
    border-radius: 20px;
    padding: 4px 11px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(var(--main-color-rgb), .35);
}

/* =========================================== pagina de masini asemanatoare */

.dc-reference {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--dc-soft);
    border-radius: var(--dc-radius);
    padding: 18px;
    margin-bottom: 30px;
}

.dc-reference-media {
    flex: 0 0 auto;
    width: 100%;
    max-width: 220px;
    border-radius: 8px;
    overflow: hidden;
}

.dc-reference-media img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.dc-reference-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--dc-muted);
    margin-bottom: 4px;
}

.dc-reference-body h4 {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 700;
}

.dc-reference-body h4 a {
    color: var(--dc-ink);
}

.dc-reference-body h4 a:hover {
    color: var(--main-color);
}

.dc-reference-body p {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--dc-muted);
}

.dc-reference-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--main-color);
}

@media only screen and (min-width: 600px) {
    .dc-reference { flex-direction: row; align-items: center; gap: 22px; }
    .dc-reference-media { width: 220px; }
}

/* ================================== slider-ul de buget de pe prima pagina */

.dc-field-range .dc-range {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    background: #fff;
}

.dc-field-range .dc-range .irs {
    width: 100%;
}

/* Slider-ul temei are nevoie de spatiu pentru etichetele de deasupra. */
.dc-field-range .irs--flat,
.dc-search .irs--flat {
    margin-top: 18px;
}

/* ========================= toate campurile, acelasi limbaj vizual */

.dc-input,
.dc-select .dc-select-toggle,
.dc-field-range .dc-range {
    min-height: 52px;
    font-size: 14px;
}

.dc-field label {
    margin-bottom: 8px;
}

/* Selectul nativ primeste aceeasi sageata ca al nostru. */
.dc-input select {
    background-image: none;
    padding-right: 22px;
}

.dc-field .dc-input {
    position: relative;
}

.dc-field .dc-input:has(select):after {
    content: '\f0d7';
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 5 Pro', sans-serif;
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--dc-muted);
    pointer-events: none;
}

/* ================================ select cu o singura alegere (radio) */

.dc-select-box--radio {
    border-radius: 50%;
}

.dc-select-box--radio i {
    font-size: 6px;
}

.dc-select--single .dc-select-option input:checked + .dc-select-box {
    background: var(--main-color);
    border-color: var(--main-color);
}

/* Casuta si denumirea, pe acelasi rand — tema forteaza `display:block` pe
   elementele din formulare, ceea ce le rupea pe doua randuri. */
.dc-select-option {
    display: flex !important;
    align-items: center;
    width: 100%;
}

.dc-select-option .dc-select-box,
.dc-select-option .dc-select-name,
.dc-select-option .dc-select-count {
    display: flex !important;
    align-items: center;
}

.dc-select-option .dc-select-name {
    display: block !important;
    flex: 1;
    margin: 0;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    color: var(--dc-ink);
}

/* ===================== masina deja vazuta: fotografia, putin mai stinsa */

.dc-seen .geodir-category-img:after {
    background: rgba(26, 26, 26, .12);
}

/* ============================= "cauta dupa marca": aer fata de titlu */

.dc-makes-wrap .boxed-content-title {
    margin-bottom: 4px;
}

.dc-makes {
    margin-top: 22px;
}

/* Cardurile au aceeasi latime: grila e cea care o impune, nu continutul. */
.dc-makes a {
    min-width: 0;
}

.dc-makes a strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ================================================ vazute recent (banda) */

.dc-recent-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 180px;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
}

.dc-recent-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    scroll-snap-align: start;
}

.dc-recent-media {
    display: block;
    width: 100%;
    height: 110px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--dc-soft);
}

.dc-recent-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.dc-recent-item:hover .dc-recent-media img {
    transform: scale(1.06);
}

.dc-recent-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--dc-ink);
    line-height: 1.3;
}

.dc-recent-price {
    font-size: 13px;
    color: var(--main-color);
    font-weight: 700;
}

.dc-recent-strip::-webkit-scrollbar {
    height: 6px;
}

.dc-recent-strip::-webkit-scrollbar-thumb {
    background: var(--dc-line);
    border-radius: 6px;
}

/* ===================================== subsolul fix chiar se descopera */
/*
 * `.content` e flotant (fl-wrap), iar `.height-emulator` nu era — asa ca se
 * aseza la inceputul paginii, nu dupa continut. Rezultat: spatiul care ar fi
 * trebuit sa descopere subsolul fix nu exista, iar continutul il acoperea.
 * Subsolul parea ca lipseste, desi era acolo tot timpul.
 */
.height-emulator {
    clear: both;
    float: left;
    width: 100%;
}

/* ================================================================ favorite */
.dc-fav {
    margin: 0;
}

/*
 * Randul de jos-stanga de pe fotografia cardului: inima, apoi numarul de poze.
 * Sus-stanga sunt etichetele de combustibil si caroserie, sus-dreapta "Fara
 * daune", jos-dreapta "Ai vazut-o" -- coltul asta era singurul liber.
 */
.dc-card-bottom {
    position: absolute;
    z-index: 5;
    left: 30px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dc-card-photos {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 1.1em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

.dc-card-photos i {
    color: var(--main-color);
}

.dc-fav--card button {
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--dc-ink);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .18s, color .18s, transform .18s;
}

.dc-fav--card button:hover {
    background: #fff;
    transform: scale(1.08);
}

.dc-fav--card.is-saved button,
.dc-fav--page.is-saved button {
    background: var(--main-color);
    color: #fff;
}

/*
 * Pe pagina masinii: "Salveaza" si "Verificare gratuita", impreuna in dreapta
 * barei cu sectiuni. Tema pozitiona absolut doar butonul de verificare, iar
 * "Salveaza" ramanea in flux, lipit de taburi si cu alt stil. Acum grupul e
 * cel pozitionat, iar ambele butoane copiaza forma lui `.like-btn`.
 */
.scrol-content-wrap.init_fix_nav .scrol-content-wrap-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* In flux, impins la dreapta. Pozitionat absolut, grupul intra peste taburi
   de indata ce bara era mai ingusta decat taburile plus butoanele; asa trece
   pe randul urmator. */
.dc-single-actions {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.dc-single-actions .like-btn {
    position: static;
    transform: none;
}

.dc-fav--page button {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 15px;
    border: 1px solid #eee;
    border-radius: 4px;
    background: #fff;
    color: inherit;
    font-family: var(--main-font);
    font-size: .9em;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.dc-fav--page button i {
    margin-right: 10px;
    color: var(--main-color);
}

.dc-fav--page button:hover {
    background: #f9f9f9;
    box-shadow: 0 10px 24px 0 rgba(0, 0, 0, .05);
}

/* Salvata: inima plina, fundal usor rosiatic -- nu un buton plin, ca sa nu
   concureze cu "Verificare gratuita". */
.dc-fav--page.is-saved button {
    border-color: rgba(var(--main-color-rgb), .35);
    background: rgba(var(--main-color-rgb), .06);
    color: var(--main-color);
}

@media only screen and (max-width: 560px) {
    .dc-single-actions {
        flex-wrap: wrap;
    }

    .dc-fav--page,
    .dc-fav--page button,
    .dc-single-actions .like-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/*
 * Butonul "Salvate" din antet, langa "Vezi toate masinile".
 *
 * Copiaza geometria lui `.header-btn` din tema (flotant la dreapta, 60px,
 * decalat 15px), dar nu ii foloseste clasa: tema ascunde `.header-btn` sub
 * 1068px, iar favoritele trebuie sa ramana la indemana si pe telefon.
 */
.dc-fav-btn {
    position: relative;
    top: 15px;
    float: right;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 60px;
    margin-right: 10px;
    padding: 0 22px;
    border: 1px solid #eee;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 10px 24px 0 rgba(0, 0, 0, .07);
    color: var(--dc-ink);
    font-size: .9em;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all .2s ease-in-out;
}

.dc-fav-btn i {
    font-size: 16px;
    color: var(--main-color);
}

.dc-fav-btn:hover {
    border-color: var(--main-color);
    background: var(--main-color);
    color: #fff;
}

.dc-fav-btn:hover i {
    color: #fff;
}

.dc-fav-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--main-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.dc-fav-btn:hover .dc-fav-count {
    background: #fff;
    color: var(--main-color);
}

.dc-fav-count[hidden] {
    display: none;
}

/* Pe telefon ramane doar inima si numarul, intr-un patrat langa meniu. */
@media only screen and (max-width: 1068px) {
    .dc-fav-btn {
        top: 16px;
        height: 48px;
        margin-right: 0;
        padding: 0 14px;
        box-shadow: none;
    }

    .dc-fav-btn-text {
        display: none;
    }
}

/* Pagina goala: cand nu s-a salvat nimic inca. */
.dc-empty {
    text-align: center;
    padding: 40px 20px;
}

.dc-empty > i {
    font-size: 34px;
    color: var(--main-color);
    margin-bottom: 14px;
    display: block;
}

.dc-empty h4 {
    font-size: 18px;
    margin-bottom: 8px;
}

.dc-empty p {
    max-width: 460px;
    margin: 0 auto 18px;
}

.dc-empty--hint {
    padding: 24px 20px 6px;
}

.dc-empty--hint p {
    margin-bottom: 0;
}

@media only screen and (max-width: 560px) {
    .dc-single-actions {
        flex-wrap: wrap;
    }

    .dc-fav--page button,
    .dc-single-actions .like-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ============================================ chemarea spre botul Telegram */
.dc-contact-tg {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--dc-radius);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    text-align: left;
    transition: background .18s, border-color .18s;
}

.dc-contact-tg:hover {
    background: rgba(255, 255, 255, .1);
    border-color: var(--main-color);
    color: #fff;
}

.dc-contact-tg i {
    font-size: 26px;
    color: #29a9eb;
    flex-shrink: 0;
}

.dc-contact-tg span {
    display: block;
    font-size: 11px;
    line-height: 1.5;
    opacity: .75;
}

.dc-contact-tg strong {
    display: block;
    font-size: 13px;
    opacity: 1;
    margin-bottom: 2px;
}

/* ================================== pagina masinii: randul de sub pret */
/*
 * "Tara de origine", VIN si "Vizualizari". Tema pune rubricile pe float si
 * caseta de vizualizari pe `position: absolute`, iar randul are
 * `overflow: hidden`: caseta absoluta nu-i da inaltime, deci randul ramanea
 * de 39px si taia textul pe jumatate. Ca rand flex, isi ia inaltimea din
 * continut.
 */
.hsc_flat .hero-section-opt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
    overflow: visible;
}

.hsc_flat .hero-section-opt .property-single-header-date {
    float: none;
}

.hsc_flat .hero-section-opt .hs-pv_wrap {
    position: static;
    margin-left: auto;
    transform: none;
}

/* ================================= catalog: butoanele de combustibil */
/*
 * Tema le aseaza absolut, sus-dreapta, intr-o cutie de 400px cu cate un
 * buton la 33%: gandite pentru trei optiuni. Cu sapte, se rupeau pe trei
 * randuri si, fiind absolute, cadeau peste campurile de dedesubt. Aici stau
 * in fluxul normal: titlul in stanga, butoanele in dreapta, si trec pe randul
 * urmator cand nu mai incap.
 */
.box_list-searh-input-wrap .list-searh-input-wrap-title_wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}

.box_list-searh-input-wrap .list-searh-input-radio_wrap {
    position: static;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: 100%;
    padding: 0;
}

.box_list-searh-input-wrap .header-search-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
    border: none;
}

.box_list-searh-input-wrap .header-search-radio .button-label {
    float: none;
    width: auto;
    height: 38px;
    line-height: 36px;
    padding: 0 16px;
    border: 1px solid var(--dc-line);
    border-radius: 20px;
    background: #fff;
    color: var(--dc-ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s;
}

.box_list-searh-input-wrap .header-search-radio .button-label:hover {
    border-color: var(--main-color);
    color: var(--main-color);
}

.box_list-searh-input-wrap .header-search-radio .radio-label:checked + .button-label {
    border-color: var(--main-color);
    background: var(--main-color);
    color: #fff;
}

.box_list-searh-input-wrap .reset-btn {
    position: static;
    flex-shrink: 0;
    transform: none;
}

@media only screen and (max-width: 768px) {
    .box_list-searh-input-wrap .list-searh-input-radio_wrap {
        width: 100%;
    }
}

/* ============================================================ paginarea */
/* Rand centrat, cu "..." intre grupuri. Tema stiliza doar ancorele, deci
   sagetile dezactivate (span) si golurile ramaneau fara forma. */
.pagination.float-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.pagination.float-pagination a,
.pagination.float-pagination > span {
    float: none;
    margin: 0;
}

.pagination .prevposts-link,
.pagination .nextposts-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border: 1px solid #eee;
    border-radius: 4px;
    background: #fff;
}

.pagination span.prevposts-link,
.pagination span.nextposts-link {
    opacity: .35;
    cursor: default;
}

.pagination a.current-page {
    border-color: var(--main-color);
    background: var(--main-color);
    color: #fff;
}

.dc-page-gap {
    width: 30px;
    text-align: center;
    color: var(--dc-ink);
    opacity: .5;
    letter-spacing: 2px;
}

@media only screen and (max-width: 560px) {
    .pagination.float-pagination a,
    .pagination .prevposts-link,
    .pagination .nextposts-link {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
}

/* Ornamentul temei: o bara rosie de 50px in dreapta randului, unde tema nu
   avea nimic. La noi acolo sta caseta "Vizualizari", iar bara o taia. */
.hsc_flat .hero-section-opt:before {
    display: none;
}

/* ======================================================= meniul de mobil */
/*
 * Pe tot ecranul, inchis la culoare, cu legaturi mari. Sus logo si inchidere,
 * la mijloc cautarea si paginile, jos cele doua butoane care conteaza pe
 * telefon: suna si WhatsApp.
 */
html.dc-menu-open,
html.dc-menu-open body {
    overflow: hidden;
}

.dc-mob-menu {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    background: #121212;
    color: #fff;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .22s ease, transform .22s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.dc-mob-menu[hidden] {
    display: none;
}

.dc-mob-menu.is-open {
    opacity: 1;
    transform: none;
}

.dc-mob-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.dc-mob-menu-logo img {
    height: 42px;
    width: auto;
}

.dc-mob-menu-close {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

.dc-mob-menu-close:hover,
.dc-mob-menu-close:focus-visible {
    border-color: var(--main-color);
    color: var(--main-color);
}

.dc-mob-menu-body {
    flex: 1;
    padding: 22px 20px 10px;
}

.dc-mob-menu-search {
    position: relative;
    margin-bottom: 22px;
}

.dc-mob-menu-search i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--main-color);
}

.dc-mob-menu-search input {
    width: 100%;
    height: 54px;
    padding: 0 18px 0 48px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 16px;   /* sub 16px iOS face zoom pe camp */
    outline: none;
}

.dc-mob-menu-search input::placeholder {
    color: rgba(255, 255, 255, .45);
}

.dc-mob-menu-search input:focus {
    border-color: var(--main-color);
}

.dc-mob-menu-nav {
    display: flex;
    flex-direction: column;
}

.dc-mob-menu-nav a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.2px;
    transition: color .15s, padding-left .15s;
}

.dc-mob-menu-nav a:hover,
.dc-mob-menu-nav a.is-active {
    color: var(--main-color);
    padding-left: 10px;
}

.dc-mob-menu-nr {
    min-width: 28px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .35);
}

.dc-mob-menu-nav a.is-active .dc-mob-menu-nr,
.dc-mob-menu-nav a:hover .dc-mob-menu-nr {
    color: var(--main-color);
}

.dc-mob-menu-nav .dc-fav-count {
    margin-left: auto;
}

.dc-mob-menu-nav .dc-mob-menu-cta {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(var(--main-color-rgb), .5);
    border-radius: 12px;
    background: rgba(var(--main-color-rgb), .12);
    font-size: 16px;
}

.dc-mob-menu-cta .dc-mob-menu-nr {
    color: var(--main-color);
    font-size: 16px;
}

.dc-mob-menu-bottom {
    padding: 18px 20px 26px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.dc-mob-menu-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dc-mob-menu-contact a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 54px;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.dc-mob-menu-contact .dc-contact-call {
    background: var(--main-color);
}

.dc-mob-menu-contact .dc-contact-wa {
    background: #25D366;
}

.dc-mob-menu-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.dc-mob-menu-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.dc-mob-menu-social span {
    margin-left: auto;
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
}

/* Pe desktop meniul temei ramane cum e. */
@media only screen and (min-width: 1069px) {
    .dc-mob-menu {
        display: none !important;
    }
}

/* ============================================ calculatorul "afla pretul" */
.dc-calc {
    padding: 34px 30px;
}

.dc-calc-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--dc-ink);
    text-align: left;
}

.dc-calc-row {
    display: flex;
    gap: 10px;
}

.dc-calc-input {
    position: relative;
    flex: 1;
}

.dc-calc-input i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--main-color);
}

.dc-calc-input input {
    width: 100%;
    height: 58px;
    padding: 0 18px 0 46px;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    background: #fff;
    font-size: 15px;
    outline: none;
}

.dc-calc-input input:focus {
    border-color: var(--main-color);
}

.dc-calc-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 58px;
    padding: 0 28px;
    border: none;
    border-radius: var(--dc-radius);
    background: var(--main-color);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .15s;
}

.dc-calc-submit:hover {
    filter: brightness(1.08);
    color: #fff;
}

.dc-calc-error {
    margin: 10px 0 0;
    color: var(--main-color);
    text-align: left;
}

.dc-calc-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 30px;
}

.dc-calc-step {
    position: relative;
    padding: 22px 20px;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    text-align: left;
}

.dc-calc-step > i {
    font-size: 26px;
    color: var(--main-color);
}

.dc-calc-step h4 {
    margin: 12px 0 6px;
    font-size: 16px;
}

.dc-calc-step p {
    margin: 0;
}

.dc-calc-step-nr {
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: 28px;
    font-weight: 700;
    color: rgba(26, 26, 26, .07);
}

.dc-calc-note {
    margin: 24px 0 0;
    text-align: left;
    font-size: 13px;
}

.dc-calc-note i {
    color: var(--main-color);
    margin-right: 6px;
}

/* --- asteptarea --- */
.dc-calc-wait {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.dc-calc-spinner {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 22px;
}

.dc-calc-spinner span {
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-top-color: var(--main-color);
    border-radius: 50%;
    animation: dc-spin 1.4s linear infinite;
}

.dc-calc-spinner span:nth-child(2) {
    inset: 12px;
    border-top-color: rgba(var(--main-color-rgb), .55);
    animation-duration: 1.9s;
    animation-direction: reverse;
}

.dc-calc-spinner span:nth-child(3) {
    inset: 24px;
    border-top-color: rgba(var(--main-color-rgb), .3);
    animation-duration: 2.6s;
}

.dc-calc-spinner i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    color: var(--dc-ink);
    animation: dc-drive 1.2s ease-in-out infinite alternate;
}

@keyframes dc-spin {
    to { transform: rotate(360deg); }
}

@keyframes dc-drive {
    from { transform: translate(-58%, -50%); }
    to { transform: translate(-42%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-calc-spinner span,
    .dc-calc-spinner i {
        animation: none;
    }
}

.dc-calc-wait h3 {
    font-size: 22px;
    margin-bottom: 8px;
}

.dc-calc-progress {
    height: 8px;
    margin: 22px 0 24px;
    border-radius: 4px;
    background: var(--dc-soft);
    overflow: hidden;
}

.dc-calc-progress span {
    display: block;
    width: 2%;
    height: 100%;
    border-radius: 4px;
    background: var(--main-color);
    transition: width 1s linear;
}

.dc-calc-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.dc-calc-checklist li {
    position: relative;
    padding: 10px 0 10px 34px;
    border-bottom: 1px solid var(--dc-line);
    color: rgba(26, 26, 26, .45);
    transition: color .3s;
}

.dc-calc-checklist li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid var(--dc-line);
    border-radius: 50%;
}

.dc-calc-checklist li.is-active {
    color: var(--dc-ink);
    font-weight: 600;
}

.dc-calc-checklist li.is-active::before {
    border-color: var(--main-color);
    border-top-color: transparent;
    animation: dc-spin .9s linear infinite;
}

.dc-calc-checklist li.is-done {
    color: var(--dc-ink);
}

.dc-calc-checklist li.is-done::before {
    border-color: var(--main-color);
    background: var(--main-color);
}

.dc-calc-sms {
    max-width: 560px;
    margin: 30px auto 0;
    padding: 22px;
    border: 1px dashed rgba(var(--main-color-rgb), .45);
    border-radius: var(--dc-radius);
    background: rgba(var(--main-color-rgb), .04);
    text-align: left;
}

.dc-calc-sms h4 {
    margin-bottom: 6px;
    font-size: 16px;
}

.dc-calc-sms h4 i {
    color: var(--main-color);
    margin-right: 6px;
}

.dc-calc-sms-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.dc-calc-sms-form input {
    flex: 1;
    height: 50px;
    padding: 0 16px;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    font-size: 16px;
}

.dc-calc-sms-form button {
    height: 50px;
    padding: 0 20px;
    border: none;
    border-radius: var(--dc-radius);
    background: var(--dc-ink);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.dc-calc-sms-ok {
    margin: 0;
    color: var(--dc-ink);
    font-weight: 600;
}

.dc-calc-sms-ok i {
    color: #25a55f;
    margin-right: 6px;
}

/* --- rezultat --- */
.dc-calc-result {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: left;
}

.dc-calc-result-img {
    min-height: 240px;
    border-radius: var(--dc-radius);
    background: var(--dc-soft) center / cover no-repeat;
}

.dc-calc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(37, 165, 95, .12);
    color: #1d8a4e;
    font-size: 12px;
    font-weight: 600;
}

.dc-calc-result h3 {
    margin: 12px 0 6px;
    font-size: 24px;
}

.dc-calc-price {
    display: flex;
    flex-direction: column;
    margin: 18px 0 22px;
}

.dc-calc-price strong {
    font-size: 34px;
    color: var(--main-color);
    line-height: 1.2;
}

.dc-calc-failed {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.dc-calc-failed > i {
    font-size: 40px;
    color: var(--main-color);
    margin-bottom: 14px;
}

.dc-calc-again {
    display: inline-block;
    margin-top: 18px;
    font-weight: 600;
}

@media only screen and (min-width: 768px) {
    .dc-calc-steps {
        grid-template-columns: repeat(3, 1fr);
    }

    .dc-calc-result {
        grid-template-columns: 1.1fr 1fr;
        align-items: center;
    }
}

@media only screen and (max-width: 640px) {
    .dc-calc {
        padding: 22px 16px;
    }

    .dc-calc-row,
    .dc-calc-sms-form {
        flex-direction: column;
    }

    .dc-calc-submit,
    .dc-calc-sms-form button {
        width: 100%;
    }
}