/* =====================================================================
   THEME "AUTO TICINO" - sfond krem, ar + zi (ngjyrat e logos), fonte të reja.
   Ngarkohet te header.php pas header.css. Çdo rregull fillon me "body" që
   të fitojë mbi CSS-të e faqeve (index.css, cars.css, <style> inline...)
   të cilat ngarkohen më vonë. Për t'u kthyer te dizajni i vjetër mjafton
   të hiqet <link> i theme.css nga header.php.
   Ngjyrat e header-it/top bar-it vijnë nga Admin > Impostazioni (databaza).
   ===================================================================== */

/* Fontet shërbehen nga jsDelivr (i njëjti lloj CDN si Font Awesome), jo nga Google Fonts */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/npm/@fontsource-variable/playfair-display@5/files/playfair-display-latin-wght-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/npm/@fontsource-variable/jost@5/files/jost-latin-wght-normal.woff2') format('woff2');
}

:root {
    --at-bg: #f6f1e7;          /* sfondi i faqes (krem) */
    --at-surface: #ffffff;     /* kartat */
    --at-surface-2: #fbf8f2;   /* sipërfaqe dytësore */
    --at-line: #e6dccb;        /* vijat/bordurat */
    --at-ink: #1c1814;         /* teksti kryesor */
    --at-ink-2: #5f564a;       /* teksti dytësor */
    --at-gold: #9a7432;        /* ari i logos */
    --at-gold-dark: #7c5c24;
    --at-gold-light: #c9a45c;
    --at-dark: #17130e;        /* zi e ngrohtë: butona, footer */
    --at-font-body: 'Jost', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --at-font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ===== BAZA ===== */
body {
    background-color: var(--at-bg);
    color: var(--at-ink);
    font-family: var(--at-font-body);
    font-size: 16px;
}
body .contact-page,
body .sell-page,
body .photo-count-badge {
    font-family: var(--at-font-body);
}
body button, body input, body select, body textarea {
    font-family: inherit;
}

body .section-title,
body .section-title h1,
body .page-title,
body .banner-title,
body .car-header .car-title,
body .similar-title,
body .info-card h3,
body .contact-card h3,
body .info-column h3,
body .form-column h3,
body .social-section h4,
body .sell-hero h1,
body .sell-fieldset legend,
body .home-intro-title,
body .legal-page h1,
body .legal-page h2,
body .error-title,
body .suggestions-title {
    font-family: var(--at-font-head);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--at-ink);
}

/* ===== HEADER ===== */
body header {
    box-shadow: 0 1px 0 var(--at-line), 0 6px 24px rgba(28, 24, 20, 0.06);
}
body .desktop-nav a {
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
body .desktop-nav a:not(.logout-btn):hover {
    background: transparent;
}
body .desktop-nav a.nav-sell-cta {
    background: var(--at-dark);
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 2px;
}
body .desktop-nav a.nav-sell-cta:hover {
    background: var(--at-gold);
    color: #fff !important;
}
body .desktop-nav a.nav-sell-cta::after {
    display: none;
}
body .top-bar {
    letter-spacing: 0.03em;
}
body .language-dropdown .selected-lang .arrow {
    color: inherit;
}

/* ===== HOME: SLIDER ===== */
body .banner-button {
    border-radius: 2px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body .banner-button:hover {
    background: var(--at-gold) !important;
}
body .banner-text {
    border-radius: 2px !important;
}

/* ===== FILTRAT ===== */
body .filter-section {
    background: var(--at-surface);
    border-top: 1px solid var(--at-line);
    border-bottom: 1px solid var(--at-line);
}
body .filters-section {
    background: var(--at-surface);
    border: 1px solid var(--at-line);
    border-radius: 2px;
}
body .filter-group label {
    color: var(--at-ink-2);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
body .select-wrapper select,
body .filter-group select,
body .filter-group input,
body .custom-select__trigger,
body .price-value-display {
    border: 1px solid var(--at-line);
    border-radius: 2px;
    color: var(--at-ink);
}
body .select-wrapper select:focus,
body .filter-group select:focus,
body .filter-group input:focus,
body .custom-select__trigger:focus {
    border-color: var(--at-gold);
}
body .custom-options {
    border-color: var(--at-line);
    border-radius: 0 0 2px 2px;
}
body .custom-option:hover { background: var(--at-surface-2); }
body .custom-option.selected { background: #f1e8d6; }
body #price-slider {
    background: linear-gradient(90deg, var(--at-line) 0%, var(--at-gold) 100%);
}
body #price-slider::-webkit-slider-thumb { background: var(--at-gold); }
body #price-slider::-moz-range-thumb { background: var(--at-gold); }

/* ===== BUTONAT ===== */
body .search-button,
body .btn-primary,
body .btn-submit,
body .view-all-link,
body .pagination-link.active,
body .btn-call {
    background: var(--at-dark);
    border: 1px solid var(--at-dark);
    color: #fff;
    border-radius: 2px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body .search-button:hover,
body .btn-primary:hover,
body .btn-submit:hover,
body .view-all-link:hover,
body .btn-call:hover {
    background: var(--at-gold);
    border-color: var(--at-gold);
}
body .btn-secondary,
body .view-all-button,
body .pagination-link {
    background: transparent;
    border: 1px solid var(--at-line);
    color: var(--at-ink);
    border-radius: 2px;
}
body .btn-secondary:hover,
body .view-all-button:hover,
body .pagination-link:hover {
    background: var(--at-surface);
    border-color: var(--at-gold);
}
body .pagination-link.active:hover {
    background: var(--at-dark);
    border-color: var(--at-dark);
}
body .btn-whatsapp { border-radius: 2px; }

/* ===== KARTAT E MAKINAVE ===== */
body .car-card,
body .similar-car,
body .suggestion-card,
body .no-results {
    background: var(--at-surface);
    border: 1px solid var(--at-line);
    border-radius: 2px;
}
body .car-card:hover,
body .similar-car:hover,
body .suggestion-card:hover {
    border-color: var(--at-gold);
}
body .car-title-small,
body .car-card .car-title,
body .similar-car-title,
body .suggestion-title {
    color: var(--at-ink);
    font-weight: 500;
}
body .car-price,
body .similar-price,
body .suggestion-price {
    color: var(--at-gold-dark);
    font-family: var(--at-font-head);
    font-weight: 700;
}
body .car-specs {
    color: var(--at-ink-2);
    border-top: 1px solid var(--at-line);
}
body .spec-item i,
body .spec-icon {
    color: var(--at-gold);
}

/* ===== TITUJT E SEKSIONEVE ===== */
body .section-title:after,
body .reviews-section .section-title:after,
body .section-title h1:after,
body .info-column h3:after,
body .form-column h3:after,
body .suggestions-title::after {
    background: var(--at-gold);
    border-radius: 0;
}

/* ===== MARKAT ===== */
body .brands-section {
    background: var(--at-surface-2);
    border-top: 1px solid var(--at-line);
    border-bottom: 1px solid var(--at-line);
}
body .brand-logo-container {
    background: var(--at-surface);
    border: 1px solid var(--at-line);
    border-radius: 2px;
}
body .brand-item:hover .brand-logo-container { border-color: var(--at-gold); }
body .brand-item:hover .brand-name { color: var(--at-gold-dark); }
body .brands-prev, body .brands-next,
body .reviews-prev, body .reviews-next {
    border-color: var(--at-line);
    color: var(--at-ink);
}
body .brands-prev:hover, body .brands-next:hover,
body .reviews-prev:hover, body .reviews-next:hover {
    background: var(--at-gold);
    border-color: var(--at-gold);
    color: #fff;
}

/* ===== INFO ===== */
body .info-card {
    background: var(--at-surface);
    border: 1px solid var(--at-line);
    border-radius: 2px;
}
body .info-icon {
    background: var(--at-dark);
    color: var(--at-gold-light);
}
body .info-icon i { color: var(--at-gold-light); }
body .info-card p { color: var(--at-ink-2); }

/* ===== RECENSIONET ===== */
body .reviews-section {
    background: var(--at-bg);
    border-top: 1px solid var(--at-line);
}
body .google-review-card {
    background: var(--at-surface);
    border: 1px solid var(--at-line);
    border-radius: 2px;
}
body .grs-rating {
    font-family: var(--at-font-head);
    color: var(--at-ink);
}
body .grs-count, body .grc-time { color: var(--at-ink-2); }
body .grc-avatar-placeholder { background: var(--at-gold); }
body .grc-see-all { color: var(--at-gold-dark); }
body .home-intro-title { color: var(--at-ink); }
body .home-intro-text { color: var(--at-ink-2); }

/* ===== FAQJA E MAKINËS ===== */
body .car-meta-info,
body .left-column,
body .price-section-desktop,
body .price-section-mobile,
body .specifications-section-desktop,
body .features-section-desktop,
body .contact-form-section-desktop,
body .similar-cars-section {
    border-radius: 2px;
    border-color: var(--at-line);
}
body .price-section-desktop,
body .specifications-section-desktop,
body .features-section-desktop,
body .contact-form-section-desktop,
body .left-column {
    border: 1px solid var(--at-line);
}
body .price-value {
    color: var(--at-gold-dark);
    font-family: var(--at-font-head);
}
body .thumbnail:hover,
body .thumbnail.active {
    border-color: var(--at-gold);
}
body .feature-item-left {
    background: var(--at-surface-2);
    border-left: 3px solid var(--at-gold);
    border-radius: 0;
    color: var(--at-ink);
}
body .feature-item-left:hover { background: #f1e8d6; }
body .car-subtitle span:not(.separator) {
    background: var(--at-surface-2);
    border-radius: 2px;
}
body .main-image-container,
body .thumbnail { border-radius: 2px; }
body .car-header,
body .description-section,
body .spec-item,
body .left-column .section-title {
    border-color: var(--at-line);
}

/* ===== FORMAT ===== */
body .form-group input,
body .form-group textarea,
body .form-group select {
    border: 1px solid var(--at-line);
    border-radius: 2px;
    background: var(--at-surface);
}
body .form-group input:focus,
body .form-group textarea:focus,
body .form-group select:focus {
    border-color: var(--at-gold);
}

/* ===== KONTAKT / SHIT MAKINËN / LIGJORE / 404 ===== */
body .contact-page,
body .sell-page,
body .map-section,
body .error-page {
    background: var(--at-bg);
}
body .contact-card,
body .form-column,
body .sell-form-box,
body .hours-list,
body .social-link,
body .consent-group,
body .photo-upload-box {
    background: var(--at-surface);
    border-color: var(--at-line);
    border-radius: 2px;
}
body .hours-list li { border-color: var(--at-line); }
body .contact-card:hover { border-color: var(--at-gold); }
body .card-icon { background: var(--at-surface-2); }
body .card-icon svg { fill: var(--at-gold); }
body .contact-card:hover .card-icon { background: var(--at-dark); }
body .card-content a { border-bottom-color: var(--at-line); color: var(--at-ink); }
body .card-content a:hover { border-bottom-color: var(--at-gold); }
body .social-link:hover { background: var(--at-dark); border-color: var(--at-dark); }
body .map-address a { color: var(--at-gold-dark); }
body .map-wrapper { border-color: var(--at-line); }
body .consent-placeholder button { background: var(--at-dark) !important; border-radius: 2px !important; }
body .sell-fieldset legend { border-bottom: 1px solid var(--at-gold); }
body .photo-upload-box:hover,
body .photo-upload-box.dragover { border-color: var(--at-gold); }
body .legal-page { color: var(--at-ink); }
body .legal-page nav.legal-toc,
body .legal-page th,
body .legal-page .legal-box { background: var(--at-surface); border-color: var(--at-line); }
body .legal-page .legal-box { border-left: 4px solid var(--at-gold); }
body .legal-page nav.legal-toc a { color: var(--at-gold-dark); }
body .legal-page button.legal-prefs { background: var(--at-dark); border-radius: 2px; }
body .error-code, body .error-icon { color: var(--at-gold); }
body .btn-error-primary { background: var(--at-dark); border-color: var(--at-dark); border-radius: 2px; }
body .btn-error-primary:hover { background: var(--at-gold); border-color: var(--at-gold); }

/* =====================================================================
   BLLOKU NË FUND TË FAQES: logo + hartë Google + telefona (footer.php)
   ===================================================================== */
.site-contact-footer {
    background: var(--at-surface);
    border-top: 3px solid var(--at-gold);
    margin-top: 60px;
    padding: 56px 20px 60px;
}
.site-contact-footer .scf-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
    align-items: stretch;
}
.scf-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.scf-logo {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 26px;
}
.scf-title {
    font-family: var(--at-font-head);
    font-size: 26px;
    font-weight: 600;
    color: var(--at-ink);
    margin-bottom: 18px;
}
.scf-phones {
    list-style: none;
    width: 100%;
    margin-bottom: 18px;
}
.scf-phones li + li { margin-top: 10px; }
.scf-phone {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--at-line);
    background: var(--at-surface-2);
    color: var(--at-ink);
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
.scf-phone:hover {
    border-color: var(--at-gold);
    background: #fff;
}
.scf-phone i {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--at-dark);
    color: var(--at-gold-light);
    font-size: 16px;
}
.scf-phone .scf-phone-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--at-ink-2);
}
.scf-phone .scf-phone-number {
    display: block;
    font-size: 21px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.scf-lines {
    list-style: none;
    color: var(--at-ink-2);
    font-size: 15px;
    line-height: 1.5;
}
.scf-lines li {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 5px 0;
}
.scf-lines i {
    color: var(--at-gold);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.scf-lines a {
    color: var(--at-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--at-line);
}
.scf-lines a:hover { border-bottom-color: var(--at-gold); }
.scf-map {
    position: relative;
    min-height: 380px;
    background: var(--at-surface-2);
    border: 1px solid var(--at-line);
}
.scf-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.scf-map .consent-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    color: var(--at-ink-2);
    font-size: 14px;
}
.scf-map .consent-placeholder i {
    font-size: 30px;
    color: var(--at-gold);
}
.scf-map .consent-placeholder button {
    padding: 11px 24px;
    border: 0;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 13px;
    cursor: pointer;
}
.scf-map .consent-placeholder button:hover { background: var(--at-gold) !important; }
.scf-map .consent-placeholder a { color: var(--at-gold-dark); }

body footer {
    background-color: var(--at-dark) !important;
    margin-top: 0 !important;
    font-size: 14px;
}

@media (max-width: 900px) {
    .site-contact-footer { padding: 40px 16px 44px; margin-top: 40px; }
    .site-contact-footer .scf-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .scf-info { align-items: center; text-align: center; }
    .scf-logo { max-width: 240px; margin-bottom: 20px; }
    .scf-phone { text-align: left; }
    .scf-lines { width: 100%; }
    .scf-lines li { justify-content: center; }
    .scf-map { min-height: 300px; }
}
@media (max-width: 480px) {
    .scf-title { font-size: 22px; }
    .scf-phone .scf-phone-number { font-size: 19px; }
}