/* ==========================================================================
   AUTOLINK - GLOBÁLNE ŠTÝLY (Wizzard, Profil, Detail, Financovanie, Ponuka)
   ========================================================================== */

/* 1. SPOLOČNÉ PRVKY A TYPOGRAFIA */
.autolink-wrapper { font-family: Arial, sans-serif; color: #000000; font-size: 12px; }
input, select, textarea { color: #000000; font-size: 12px; border: 1px solid #ccc; border-radius: 4px; padding: 8px 10px; }

/* 2. KROKOVÝ FORMULÁR (WIZZARD) */
.autolink-wizard-wrap { background-color: #f4f7f9; border-radius: 8px; max-width: 1000px; margin: 0 auto; box-shadow: 0 4px 20px rgba(0,0,0,0.05); overflow: hidden; }
.wizard-title { color: #000000; text-align: center; margin-bottom: 20px; font-size: 16px; font-weight: bold; }
.wizard-steps-header { display: flex; background-color: #ffffff; border-bottom: 1px solid #e0e5eb; }
.step-nav-item { flex: 1; text-align: center; padding: 12px; color: #000000; font-size: 11px; font-weight: bold; text-transform: uppercase; border-bottom: 3px solid transparent; opacity: 0.5; }
.step-nav-item.active { opacity: 1; border-bottom: 3px solid #4A7833; color: #4A7833; }
.wizard-step { display: none; padding: 30px; }
.wizard-step.active { display: block; }
.category-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; }
.cat-card input { display: none; }
.cat-content { background: #ffffff; padding: 20px; border-radius: 8px; cursor: pointer; border: 1px solid #d1d9e0; transition: 0.2s; }
.cat-card input:checked + .cat-content { border-color: #4A7833; box-shadow: 0 0 0 2px rgba(74, 120, 51, 0.2); }
.cat-title { display: block; color: #000000; font-size: 13px; font-weight: bold; margin-bottom: 5px; }
.cat-desc { display: block; color: #666; font-size: 10px; line-height: 1.4; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-group label { display: block; color: #000000; font-size: 11px; font-weight: bold; margin-bottom: 5px; }
.btn-wizard { background: #4A7833 !important; color: #ffffff !important; border: none !important; padding: 10px 20px !important; border-radius: 4px !important; cursor: pointer !important; font-size: 11px !important; font-weight: bold !important; float: right; margin-top: 20px; }
.btn-prev { background: transparent !important; border: 1px solid #4A7833 !important; color: #000000 !important; float: left; }

/* Wizzard - Výbava checkboxy */
.al-vybava-wizzard { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; }
.al-vybava-box { background: #ffffff; padding: 15px 20px; border: 1px solid #eaeaea; border-radius: 6px; }
.al-checkbox-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.al-checkbox-item { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #000000; cursor: pointer; }
.al-checkbox-item input { margin: 0; cursor: pointer; accent-color: #4A7833; width: auto; }

/* 3. UŽÍVATEĽSKÝ PROFIL (DASHBOARD) */
.autolink-dashboard-wrap { max-width: 1000px; margin: 0 auto; background: #f4f7f9; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
.dashboard-header { background: #ffffff; padding: 15px 20px; border-bottom: 1px solid #e0e5eb; }
.dashboard-header h2 { color: #000000; font-size: 16px; margin: 0; }
.dashboard-header p { color: #000000; font-size: 11px; margin: 5px 0 0 0; }
.dashboard-ads-list { padding: 20px; }
.ad-list-item { display: flex; background: #ffffff; border: 1px solid #d1d9e0; border-radius: 6px; margin-bottom: 15px; padding: 15px; align-items: center; gap: 15px; }
.ad-image { width: 100px; height: 75px; border-radius: 4px; background: #eee; flex-shrink: 0; background-size: cover; background-position: center; }
.ad-info { flex-grow: 1; }
.ad-info h3 { color: #000000; font-size: 13px; margin: 0 0 5px 0; }
.ad-meta { color: #000000; font-size: 10px; }
.badge-top { background: #ffcc00; color: #000000; font-size: 9px; padding: 2px 5px; border-radius: 3px; }
.ad-actions { display: flex; flex-direction: column; gap: 5px; min-width: 140px; }
.btn-action { padding: 6px 10px; border-radius: 4px; border: none; font-size: 10px; font-weight: bold; cursor: pointer; color: #000000; text-align: center; }
.btn-pay { background: #28a745; color: #ffffff; }
.btn-top { background: #ffcc00; }
.btn-edit { background: #e0e5eb; }

/* ==========================================================================
   4. DETAIL INZERÁTU (KARTA VOZIDLA) - PIXEL PERFECT WIDE
   ========================================================================== */
.al-main-bg { background-color: #f4f7f9; padding: 40px 15px; font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.al-single-wrapper { display: flex; gap: 30px; max-width: 1280px; width: 100%; margin: 0 auto; color: #000000; }
.al-left-col { flex: 1; min-width: 0; margin-top: -20px;}
.al-right-col { width: 340px; flex-shrink: 0; }
.al-breadcrumbs { font-size: 11px; color: #999; margin-bottom: 20px; }
.al-title { font-size: 28px; color: #000000; margin: 0 0 20px 0; font-weight: bold; }

/* Galéria */
.al-gallery-wrap { margin-bottom: 30px; }
.al-main-img-box { position: relative; border-radius: 6px; overflow: hidden; height: 500px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.al-main-img { width: 100%; height: 100%; object-fit: cover; }
.al-badge-fav { position: absolute; top: 20px; left: 0; background: #8ba364; color: #ffffff; padding: 6px 15px; font-size: 11px; font-weight: bold; border-radius: 0 4px 4px 0; z-index: 10; letter-spacing: 0.5px;}
.al-thumb-row { display: flex; gap: 8px; margin-top: 8px; }
.al-thumb { flex: 1; height: 80px; background-size: cover; background-position: center; border-radius: 4px; cursor: pointer; transition: 0.2s; border: 2px solid transparent; }
.al-thumb:hover { border-color: #4A7833; }
.empty-thumb { background-color: #e9ecef; }

/* Tabuľka parametrov */
.al-specs-container { background: #ffffff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); border: 1px solid #eaeaea; padding: 0 30px; }
.al-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; padding: 25px 0; border-bottom: 1px solid #f0f0f0; }
.al-specs-grid-bottom { border-bottom: none; }
.al-spec-row { display: flex; padding: 12px 0; border-bottom: 1px solid #f9f9f9; }
.al-lbl { width: 40%; color: #666666; font-size: 13px; }
.al-val { width: 60%; color: #000000; font-size: 13px; font-weight: bold; }

/* Pravé boxy */
.al-box { background: #ffffff; border-radius: 6px; padding: 25px; margin-bottom: 20px; border: 1px solid #eaeaea; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
.al-price-wrap { text-align: center; padding-bottom: 20px; border-bottom: 3px solid #4A7833; margin-bottom: 25px; }
.al-price-label { color: #666; font-size: 14px; margin-bottom: 5px; font-weight: bold; display: block; text-transform: uppercase; }
.al-price { font-size: 32px; color: #4A7833; font-weight: bold; }
.al-price-dph { color: #888; font-size: 11px; margin-top: 5px; }
.al-fin-row-input { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 12px; color: #666;}
.al-input-group { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
.al-input-group input { border: none; padding: 10px; width: 80px; text-align: right; outline: none; font-weight: bold; color: #000; }
.al-input-group span { padding: 10px; background: #f9f9f9; color: #666; border-left: 1px solid #ddd; }
.al-fin-row-result { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; background: #f9f9f9; padding: 10px; border-radius: 4px; border: 1px solid #eee;}
.al-fin-row-result select { border: none; background: transparent; font-weight: bold; outline: none; }
.al-splatka-vysledok { font-size: 18px; font-weight: bold; color: #000000; }
.al-fin-vyhody { list-style: none; padding: 0; margin: 0 0 25px 0; font-size: 13px; line-height: 1.5; }
.al-fin-vyhody li { margin-bottom: 15px; }
.al-check { color: #4A7833; font-weight: bold; margin-right: 5px; }
.al-sub { display: block; padding-left: 18px; color: #000; font-size: 13px;}

/* Ochrana tlačidiel na karte inzerátu (Predajca a Financovanie) proti ružovej */
button.al-btn-green, 
.al-single-wrapper button.al-btn-green { 
    width: 100% !important; 
    background-color: #4A7833 !important; 
    color: #ffffff !important; 
    border: none !important; 
    padding: 14px !important; 
    border-radius: 4px !important; 
    font-weight: bold !important; 
    cursor: pointer !important; 
    font-size: 14px !important; 
    transition: 0.2s !important; 
    box-shadow: none !important;
}
button.al-btn-green:hover, 
.al-single-wrapper button.al-btn-green:hover { background-color: #3c6129 !important; }

.al-seller-info { display: flex; gap: 15px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #eee; margin-bottom: 20px;}
.al-avatar img { border-radius: 50%; }
.al-seller-title { font-size: 15px; margin: 0 0 15px 0; color: #000; font-weight: bold;}
.al-form-group { margin-bottom: 15px; }
.al-form-group label { display: block; font-size: 11px; color: #666; margin-bottom: 5px; }
.al-input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; color: #000; box-sizing: border-box; background: #fff; font-family: inherit;}
.al-checkbox-label { font-size: 11px; display: flex; gap: 8px; margin-bottom: 20px; align-items: center; color: #666;}

/* VÝBAVA A TEXT NA KARTE (MODERNÝ DIZAJN - EXTRA SILNÉ) */
.al-single-wrapper .al-equipment-modern-wrap { background: #ffffff !important; border-radius: 8px !important; border: 1px solid #eaeaea !important; padding: 30px !important; margin-top: 30px !important; box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important; width: 100%; box-sizing: border-box; }
.al-single-wrapper .al-desc-title { font-size: 20px !important; color: #000000 !important; font-weight: bold !important; margin-top: 0 !important; margin-bottom: 20px !important; padding-bottom: 15px !important; border-bottom: 1px solid #f0f0f0 !important; }
.al-single-wrapper .al-tabs-header { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; border-bottom: 2px solid #f0f0f0 !important; margin-bottom: 25px !important; }
.al-single-wrapper button.al-tab-btn { background: transparent !important; border: 1px solid transparent !important; border-bottom: 3px solid transparent !important; padding: 10px 20px !important; margin: 0 !important; font-size: 15px !important; font-weight: bold !important; color: #888888 !important; cursor: pointer !important; border-radius: 0 !important; box-shadow: none !important; text-transform: none !important; }
.al-single-wrapper button.al-tab-btn:hover { color: #4A7833 !important; }
.al-single-wrapper button.al-tab-btn.active { color: #4A7833 !important; border-bottom-color: #4A7833 !important; }
.al-single-wrapper .al-tab-pane { display: none; }
.al-single-wrapper .al-tab-pane.active { display: block; animation: alFadeIn 0.4s ease; }
@keyframes alFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.al-single-wrapper .al-tab-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 15px 30px !important; }
.al-single-wrapper .al-tab-item { display: flex !important; align-items: center !important; font-size: 14px !important; color: #333333 !important; }
.al-single-wrapper .al-tab-item::before { content: '' !important; display: inline-block !important; min-width: 18px !important; height: 18px !important; margin-right: 12px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A7833' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }
.al-single-wrapper .al-desc-wrap { background: #ffffff !important; border-radius: 8px !important; border: 1px solid #eaeaea !important; padding: 30px !important; margin-top: 30px !important; box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important; }
.al-single-wrapper .al-desc-content { font-size: 14px !important; color: #444444 !important; line-height: 1.7 !important; }

/* ==========================================================================
   5. STRÁNKA PONUKA VOZIDIEL (KATALÓG A FILTER)
   ========================================================================== */
.al-listing-wrapper { display: flex; gap: 30px; max-width: 1280px; margin: 40px auto; font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; color: #000; }
.al-sidebar { width: 300px; flex-shrink: 0; }
.al-filter-box { background: #fff; padding: 25px; border-radius: 8px; border: 1px solid #eaeaea; box-shadow: 0 4px 20px rgba(0,0,0,0.03); }
.al-filter-box h3 { font-size: 18px; font-weight: bold; margin-top: 0; margin-bottom: 25px; color: #000; }
.al-filter-row { margin-bottom: 15px; }
.al-split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.al-filter-box input[type="text"], .al-filter-box input[type="number"], .al-filter-box select { width: 100%; padding: 12px 15px; border: 1px solid #e0e5eb; border-radius: 6px; font-size: 13px; color: #333; background-color: #fafbfc; box-sizing: border-box; transition: 0.2s ease; outline: none; font-family: inherit; }
.al-filter-box input:focus, .al-filter-box select:focus { border-color: #4A7833; background-color: #fff; }
.al-toggle-wrap { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; margin-top: 5px;}
.al-toggle-label { font-size: 14px; font-weight: 500; color: #444; }
.al-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.al-toggle input { opacity: 0; width: 0; height: 0; }
.al-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #e0e5eb; transition: .3s; border-radius: 34px; }
.al-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.al-toggle input:checked + .al-slider { background-color: #4A7833; }
.al-toggle input:checked + .al-slider:before { transform: translateX(20px); }
.al-adv-toggle-wrap { text-align: center; margin: 20px 0; border-top: 1px dashed #eee; border-bottom: 1px dashed #eee; padding: 15px 0;}
#al-adv-btn { font-size: 13px; color: #4A7833; font-weight: bold; cursor: pointer; transition: 0.2s; }
#al-adv-btn:hover { color: #3b5e28; text-decoration: underline; }

/* Ochrana tlačidiel vo filtri proti ružovej */
.al-listing-wrapper button.al-btn-filter { width: 100% !important; background-color: #4A7833 !important; color: #ffffff !important; border: none !important; padding: 15px !important; border-radius: 6px !important; font-weight: bold !important; cursor: pointer !important; font-size: 14px !important; transition: all 0.2s ease !important; margin-top: 10px !important; text-transform: none !important; box-shadow: 0 4px 12px rgba(74, 120, 51, 0.2) !important; }
.al-listing-wrapper button.al-btn-filter:hover { background-color: #3b5e28 !important; box-shadow: 0 6px 16px rgba(74, 120, 51, 0.3) !important; }
.al-listing-wrapper a.al-btn-reset { display: block !important; text-align: center !important; font-size: 12px !important; color: #888888 !important; margin-top: 15px !important; text-decoration: none !important; font-weight: bold !important; }
.al-listing-wrapper a.al-btn-reset:hover { color: #d9534f !important; text-decoration: underline !important; }

/* Hlavný obsah (Mriežka) */
.al-grid-content { flex: 1; min-width: 0; }
.al-listing-header h2 { font-size: 26px; color: #000; margin-top: 0; margin-bottom: 30px; font-weight: bold; }
.al-cars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.al-car-card { background: #fff; border-radius: 8px; border: 1px solid #eaeaea; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: all 0.3s ease; display: flex; flex-direction: column; }
.al-car-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.06); }
.al-card-img { display: block; width: 100%; height: 210px; background-size: cover; background-position: center; border-bottom: 3px solid #4A7833; }
.al-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.al-card-title { font-size: 16px; font-weight: bold; margin: 0 0 10px 0; line-height: 1.3; }
.al-card-title a { color: #000; text-decoration: none; transition: 0.2s;}
.al-card-title a:hover { color: #4A7833; }
.al-card-price { font-size: 22px; font-weight: bold; color: #4A7833; margin-bottom: 15px; }
.al-card-specs { font-size: 13px; color: #666; line-height: 1.6; margin-bottom: 20px; flex: 1; }
.al-card-footer { display: flex; justify-content: flex-end; border-top: 1px solid #f0f0f0; padding-top: 15px; }
.al-btn-detail { background: #f4f7f9 !important; color: #4A7833 !important; padding: 10px 20px !important; border-radius: 6px !important; text-decoration: none !important; font-size: 13px !important; font-weight: bold !important; transition: 0.2s !important; border: 1px solid transparent !important; }
.al-btn-detail:hover { background: #4A7833 !important; color: #fff !important; }

/* Responzivita pre Mobily a Tablety */
@media (max-width: 1100px) { .al-cars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
    .al-main-bg { position: static; width: auto; margin: 0; }
    .al-single-wrapper { flex-direction: column; }
    .al-right-col { width: 100%; }
    .al-main-img-box { height: 250px; }
    .al-specs-grid { grid-template-columns: 1fr; gap: 0; border-bottom: none; }
    .al-checkbox-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 850px) {
    .al-listing-wrapper { flex-direction: column; }
    .al-sidebar { width: 100%; }
}
@media (max-width: 550px) { .al-cars-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
    .al-checkbox-grid { grid-template-columns: 1fr; }
    .al-single-wrapper .al-tab-grid { grid-template-columns: 1fr !important; }
}



/* ==========================================================================
   DETAIL INZERÁTU - ŠPECIFICKÉ PRE SLUŽBY A EČV
   ========================================================================== */
.al-service-info-box {
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #eaeaea !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important;
}

.al-service-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.al-service-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f9f9f9;
    padding-bottom: 10px;
}

.al-service-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.al-service-lbl {
    width: 30%;
    color: #666666;
    font-size: 14px;
}

.al-service-val {
    width: 70%;
    color: #000000;
    font-size: 15px;
    font-weight: bold;
}



/* ==========================================================================
   DETAIL INZERÁTU - LIGHTBOX A GALÉRIA
   ========================================================================== */
.al-thumb-row { 
    flex-wrap: wrap; /* Povolí zalomenie do nového riadku */
}
.al-thumb { 
    flex: 1 1 calc(20% - 8px); /* Udrží 5 fotiek v riadku a zvyšok hodí nižšie */
    min-width: 80px; 
}

/* Lightbox (Vyskakovacie okno pre fotky) */
.al-lightbox { 
    display: none; 
    position: fixed; 
    z-index: 999999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.92); 
    align-items: center; 
    justify-content: center; 
    backdrop-filter: blur(5px);
}
.al-lightbox-content { 
    max-width: 90%; 
    max-height: 85vh; 
    border-radius: 4px; 
    box-shadow: 0 0 30px rgba(0,0,0,0.6); 
    object-fit: contain; 
    user-select: none;
}
.al-lightbox-close { 
    position: absolute; 
    top: 25px; 
    right: 40px; 
    color: #fff; 
    font-size: 45px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.2s; 
    z-index: 100000; 
    line-height: 1;
}
.al-lightbox-close:hover { color: #4A7833; transform: scale(1.1); }

.al-lightbox-prev, .al-lightbox-next { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    color: #fff; 
    font-size: 40px; 
    font-weight: bold; 
    cursor: pointer; 
    padding: 20px; 
    transition: 0.2s; 
    user-select: none; 
    z-index: 100000; 
}
.al-lightbox-prev { left: 2%; }
.al-lightbox-next { right: 2%; }
.al-lightbox-prev:hover, .al-lightbox-next:hover { color: #4A7833; background-color: rgba(255,255,255,0.1); border-radius: 50%; }

.al-lightbox-counter { 
    position: absolute; 
    bottom: 25px; 
    left: 50%; 
    transform: translateX(-50%); 
    color: #fff; 
    font-size: 16px; 
    font-weight: bold; 
    letter-spacing: 2px; 
    background: rgba(0,0,0,0.5);
    padding: 8px 16px;
    border-radius: 20px;
}

@media (max-width: 768px) {
    .al-lightbox-prev, .al-lightbox-next { font-size: 25px; padding: 10px; }
    .al-lightbox-close { top: 10px; right: 20px; font-size: 35px; }
}

/* ==========================================================================
   DETAIL INZERÁTU - GALÉRIA A LIGHTBOX (VYSKAKOVACIE OKNO)
   ========================================================================== */
/* Zobrazenie všetkých náhľadov pod sebou */
.al-thumb-row { 
    display: flex; 
    flex-wrap: wrap; /* Dovolí fotkám skočiť do ďalšieho riadku */
    gap: 8px; 
    margin-top: 8px; 
}
.al-thumb { 
    width: calc(20% - 6.4px); /* Presne 5 fotiek v riadku */
    height: 80px; 
    background-size: cover; 
    background-position: center; 
    border-radius: 4px; 
    cursor: pointer; 
    transition: 0.2s; 
    border: 2px solid transparent; 
}
.al-thumb:hover, .al-thumb.active-thumb { border-color: #4A7833; }

/* Vyskakovacie okno Galérie (Lightbox) */
.al-lightbox { 
    display: none; position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.95); align-items: center; justify-content: center; backdrop-filter: blur(5px);
}
.al-lightbox-content { 
    max-width: 90%; max-height: 85vh; border-radius: 4px; box-shadow: 0 0 30px rgba(0,0,0,0.8); object-fit: contain; user-select: none;
}
.al-lightbox-close { 
    position: absolute; top: 20px; right: 30px; color: #fff; font-size: 50px; font-weight: bold; cursor: pointer; transition: 0.2s; z-index: 100000; line-height: 1;
}
.al-lightbox-close:hover { color: #4A7833; transform: scale(1.1); }
.al-lightbox-prev, .al-lightbox-next { 
    position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 50px; cursor: pointer; padding: 20px; transition: 0.2s; user-select: none; z-index: 100000; 
}
.al-lightbox-prev { left: 2%; }
.al-lightbox-next { right: 2%; }
.al-lightbox-prev:hover, .al-lightbox-next:hover { color: #4A7833; }
.al-lightbox-counter { 
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 16px; font-weight: bold; letter-spacing: 2px; background: rgba(0,0,0,0.6); padding: 8px 16px; border-radius: 20px;
}

@media (max-width: 768px) {
    .al-thumb { width: calc(33.333% - 5.4px); height: 70px; } /* Na mobile 3 fotky v riadku */
    .al-lightbox-prev, .al-lightbox-next { font-size: 30px; padding: 10px; }
    .al-lightbox-close { top: 10px; right: 15px; font-size: 40px; }
}


/* ==========================================================================
   DETAIL INZERÁTU - INLINE GALÉRIA A ŠÍPKY
   ========================================================================== */
/* Šípky priamo na hlavnej fotke */
.al-inline-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    border: none;
    font-size: 24px;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 20;
    transition: 0.2s ease;
    border-radius: 4px;
}
.al-inline-arrow:hover { background: #4A7833; }
.al-inline-prev { left: 15px; }
.al-inline-next { right: 15px; }

/* Zobrazenie všetkých náhľadov pod sebou */
.al-thumb-row { 
    display: flex; 
    flex-wrap: wrap; /* Toto dovolí fotkám skočiť do ďalšieho riadku */
    gap: 8px; 
    margin-top: 8px; 
}
.al-thumb { 
    width: calc(20% - 6.4px); /* 5 fotiek v riadku */
    height: 80px; 
    background-size: cover; 
    background-position: center; 
    border-radius: 4px; 
    cursor: pointer; 
    transition: 0.2s; 
    border: 2px solid transparent; 
    opacity: 0.6; /* Jemne priehľadné, kým sa na ne neklikne */
}
.al-thumb:hover { opacity: 1; border-color: #ccc; }
.al-thumb.active-thumb { opacity: 1 !important; border-color: #4A7833 !important; }

/* Lightbox Vyskakovacie okno (Ak si to zákazník chce zväčšiť) */
.al-lightbox { display: none; position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.92); align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.al-lightbox-content { max-width: 90%; max-height: 85vh; border-radius: 4px; box-shadow: 0 0 30px rgba(0,0,0,0.6); object-fit: contain; user-select: none; }
.al-lightbox-close { position: absolute; top: 25px; right: 40px; color: #fff; font-size: 45px; font-weight: bold; cursor: pointer; transition: 0.2s; z-index: 100000; line-height: 1; }
.al-lightbox-close:hover { color: #4A7833; transform: scale(1.1); }
.al-lightbox-prev, .al-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; padding: 20px; transition: 0.2s; user-select: none; z-index: 100000; background: transparent; border:none; }
.al-lightbox-prev { left: 2%; }
.al-lightbox-next { right: 2%; }
.al-lightbox-prev:hover, .al-lightbox-next:hover { color: #4A7833; background-color: rgba(255,255,255,0.1); border-radius: 50%; }
.al-lightbox-counter { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 16px; font-weight: bold; letter-spacing: 2px; background: rgba(0,0,0,0.5); padding: 8px 16px; border-radius: 20px; }

@media (max-width: 768px) {
    .al-thumb { width: calc(33.333% - 5.4px); height: 70px; } /* Na mobile 3 fotky v riadku */
}

/* ==========================================================================
   DETAIL INZERÁTU - TELEFÓN PREDAJCU
   ========================================================================== */
.al-seller-phone-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f9fbf9;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 25px;
    border: 1px solid #dce8d5;
}
.al-phone-number {
    font-size: 22px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    letter-spacing: 0.5px;
}
.al-phone-number:hover {
    color: #4A7833;
}


/* ==========================================================================
   DETAIL INZERÁTU - TELEFÓN PREDAJCU (VYLADENÝ)
   ========================================================================== */
a.al-seller-phone-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    background: #f4fbf5 !important; /* Jemné zelené pozadie */
    padding: 15px 20px !important;
    border-radius: 8px !important;
    margin-bottom: 25px !important;
    border: 2px solid #4A7833 !important; /* Hrubší zelený rámik */
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
}

/* Hover efekt: Celé tlačidlo sa vyfarbí do zelena */
a.al-seller-phone-box:hover {
    background: #4A7833 !important;
    box-shadow: 0 6px 15px rgba(74, 120, 51, 0.3) !important;
}

a.al-seller-phone-box svg {
    stroke: #4A7833 !important;
    transition: all 0.3s ease !important;
}

a.al-seller-phone-box:hover svg {
    stroke: #ffffff !important;
}

.al-seller-phone-box .al-phone-number {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #4A7833 !important; /* Vynútená zelená proti ružovej zo šablóny */
    text-decoration: none !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
    margin: 0 !important;
}

a.al-seller-phone-box:hover .al-phone-number {
    color: #ffffff !important; /* Po prejdení myšou zbelie */
}

/* ==========================================================================
   KOMPLEXNÁ MOBILNÁ OPTIMALIZÁCIA — AUTOLINK
   ========================================================================== */

/* === GLOBÁLNE MOBILE ZÁKLADY === */
* { -webkit-tap-highlight-color: rgba(74,120,51,.15); }
html { scroll-behavior: smooth; }

/* === SPÄŤ TLAČIDLO A NAVIGÁCIA NA DETAILE === */
.al-mobile-back {
    display: none;
    align-items: center; justify-content: space-between;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #eaeaea;
    max-width: 1280px; margin: -40px auto 20px;
    position: relative; z-index: 10;
    border-radius: 0 0 8px 8px;
}
.al-back-btn {
    display: flex; align-items: center; gap: 6px;
    color: #4A7833; font-size: 14px; font-weight: 700;
    text-decoration: none; padding: 8px 12px;
    border: 1.5px solid #dce8d5; border-radius: 8px;
    background: #f8fbf7; transition: .18s;
}
.al-back-btn:hover { background: #4A7833; color: #fff; border-color: #4A7833; }
.al-all-ads-btn {
    font-size: 13px; color: #888; text-decoration: none;
    padding: 8px 12px; border: 1px solid #eee; border-radius: 8px;
    transition: .18s;
}
.al-all-ads-btn:hover { color: #4A7833; border-color: #4A7833; }

/* === STICKY MOBILNÁ LIŠTA === */
.al-mobile-sticky-bar {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    background: #fff;
    border-top: 2px solid #eaeaea;
    padding: 12px 16px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    align-items: center; justify-content: space-between;
    box-shadow: 0 -4px 20px rgba(0,0,0,.1);
}
.al-msb-price {
    font-size: 22px; font-weight: 900; color: #4A7833; line-height: 1;
}
.al-msb-call {
    display: flex; align-items: center; gap: 8px;
    background: #4A7833; color: #fff;
    padding: 13px 24px; border-radius: 10px;
    font-size: 15px; font-weight: 800; text-decoration: none;
    transition: background .18s;
}
.al-msb-call:hover { background: #3a6226; }

/* === HEADER HAMBURGER MENU === */
.al-hamburger {
    display: none; flex-direction: column; justify-content: center;
    gap: 5px; width: 36px; height: 36px; cursor: pointer;
    background: none; border: none; padding: 4px;
}
.al-hamburger span {
    display: block; width: 24px; height: 2px;
    background: #333; border-radius: 2px; transition: .3s;
}
.al-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.al-hamburger.open span:nth-child(2) { opacity: 0; }
.al-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.al-mobile-nav {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,30,66,.97); z-index: 99998;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 12px;
}
.al-mobile-nav.open { display: flex; }
.al-mobile-nav a {
    color: #fff; font-size: 22px; font-weight: 800;
    text-decoration: none; padding: 14px 32px;
    border: 1.5px solid rgba(255,255,255,.15); border-radius: 12px;
    width: 260px; text-align: center; transition: .18s;
}
.al-mobile-nav a:hover { background: rgba(255,255,255,.1); border-color: #6ee05a; }
.al-mobile-nav-close {
    position: absolute; top: 20px; right: 20px;
    color: #fff; font-size: 32px; cursor: pointer;
    background: none; border: none; line-height: 1;
}

/* === MOBILNÝ FILTER TOGGLE (LISTING) === */
.al-filter-toggle-btn {
    display: none; width: 100%; padding: 14px 18px;
    background: #4A7833; color: #fff; border: none; border-radius: 10px;
    font-size: 15px; font-weight: 800; font-family: inherit;
    cursor: pointer; margin-bottom: 16px;
    align-items: center; justify-content: space-between;
}
.al-filter-toggle-btn svg { transition: transform .3s; }
.al-filter-toggle-btn.open svg { transform: rotate(180deg); }

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

/* Tablet (768–1024) */
@media (max-width: 1024px) {
    .al-header-container { padding: 12px 16px; }
    .al-main-nav { gap: 16px; }
    .al-main-nav a { font-size: 14px; }
    .al-catalog-container { margin: 20px auto; }
}

/* Mobil (≤768) */
@media (max-width: 768px) {

    /* Header */
    .al-global-header { position: sticky; top: 0; z-index: 9990; }
    .al-header-container { padding: 10px 16px; gap: 0; justify-content: space-between; flex-direction: row !important; }
    .al-main-nav { display: none !important; }
    .al-header-right > *:not(.al-hamburger) { display: none !important; }
    .al-hamburger { display: flex !important; }
    .al-logo img { max-width: 120px !important; }

    /* Back button + sticky bar */
    .al-mobile-back { display: flex !important; margin: 0 0 12px; border-radius: 0; padding: 8px 12px; }
    .al-mobile-sticky-bar { display: flex !important; }

    /* Kompenzácia sticky baru na detaile */
    .al-main-bg { padding-bottom: 90px !important; }

    /* Single page layout */
    .al-main-bg { padding: 16px 12px 90px; }
    .al-single-wrapper { flex-direction: column; gap: 16px; }
    .al-left-col { margin-top: 0; }
    .al-right-col { width: 100% !important; }
    .al-title { font-size: 20px; margin-bottom: 12px; }
    .al-breadcrumbs { display: none; } /* Na mobile je back btn */

    /* Galéria */
    .al-main-img-box { height: 240px !important; border-radius: 10px; }
    .al-thumb { height: 60px !important; }
    .al-thumb-row { gap: 6px; }

    /* Parametre tabuľka */
    .al-specs-container { padding: 0 16px; }
    .al-specs-grid { grid-template-columns: 1fr !important; gap: 0; }
    .al-spec-row { padding: 10px 0; }
    .al-lbl, .al-val { font-size: 13px; }

    /* Výbava tabuľka */
    .al-single-wrapper .al-tab-grid { grid-template-columns: 1fr !important; }
    .al-single-wrapper button.al-tab-btn { padding: 8px 12px !important; font-size: 13px !important; }

    /* Pravé boxy — cena skrytá (je v sticky bare) */
    .al-right-unified-box:first-child { display: none; }

    /* Listing page */
    .al-catalog-container { margin: 12px auto; }
    .al-top-nav-tabs { gap: 0; border-bottom-width: 1px; }
    .al-nav-tab { padding: 10px 16px !important; font-size: 14px !important; }

    /* Filter sidebar */
    .al-grid-sidebar { display: none; }
    .al-grid-sidebar.mobile-open { display: block !important; }
    .al-filter-toggle-btn { display: flex !important; }

    /* Inzeráty grid */
    .al-cars-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .al-car-card { border-radius: 10px; }
    .al-card-img { height: 130px !important; }
    .al-card-body { padding: 10px 10px 12px !important; }
    .al-card-title a { font-size: 14px !important; }
    .al-card-price { font-size: 16px !important; }
    .al-spec-item { padding: 3px 5px !important; font-size: 11px !important; }
    .al-btn-detail { padding: 9px 0 !important; font-size: 12px !important; }

    /* List view na mobile = grid */
    .al-cars-list .al-car-card { flex-direction: column !important; }
    .al-cars-list .al-card-img { width: 100% !important; height: 160px !important; border-radius: 10px 10px 0 0 !important; }

    /* Listing top bar */
    .al-listing-top-bar { flex-direction: row; align-items: center; }
    .al-result-count { font-size: 12px; }

    /* Wizard form */
    .autolink-wizard-wrap { border-radius: 0; margin: 0 -12px; }
    .wizard-step { padding: 16px; }
    .form-grid { grid-template-columns: 1fr !important; }
    .step-nav-item { font-size: 9px; padding: 10px 6px; }
    .al-checkbox-grid { grid-template-columns: 1fr 1fr !important; }

    /* Profil */
    .al-profile-wrap { padding: 0 4px; }
    .al-prof-tabs { gap: 0; }
    .al-prof-tab { padding: 10px 14px !important; font-size: 13px !important; }
    .al-my-ad-card { flex-direction: column; }
    .al-my-ad-img { width: 100% !important; height: 160px; }
    .al-my-ad-content { padding: 12px; }
    .al-my-ad-title { font-size: 15px; }
    .al-form-grid { grid-template-columns: 1fr !important; }

    /* Financovanie formulár */
    .autolink-fin-box { padding: 16px; }
    .fin-form-group { margin-bottom: 10px; }

    /* Auth */
    .al-auth-page { padding: 16px; min-height: 70vh; }
    .al-auth-body { padding: 20px 18px 24px; }
    .al-auth-card { border-radius: 16px; }

    /* Footer */
    .al-global-footer { padding: 40px 16px 20px; }
    .al-footer-container { grid-template-columns: 1fr !important; gap: 24px !important; }

    /* Homepage */
    .alh-scard { padding: 18px 16px 16px; border-radius: 14px 14px 0 0; }
    .alh-scard-fields { flex-direction: column; }
    .alh-scard-fields select,
    .alh-scard-fields input[type=number] { min-width: 100% !important; }
    .alh-sbtn { width: 100%; justify-content: center; padding: 14px; }
    .alh-scard-row2 { flex-direction: column; }
    .alh-scard-row2 select,
    .alh-scard-row2 input { min-width: 100% !important; }
    .alh-featured-grid { grid-template-columns: 1fr 1fr !important; }
    .alh-fcard-img { height: 140px !important; }
    .alh-cta-grid { grid-template-columns: 1fr !important; }
    .alh-features { grid-template-columns: 1fr 1fr !important; }
    .alh-cats-grid { grid-template-columns: repeat(3, 1fr); }
    .alh-hero { padding: 36px 16px 0; }
    .alh-hero-h1 { font-size: 30px !important; letter-spacing: -1px; }
    .alh-hero-sub { font-size: 14px; margin-bottom: 24px; }
    .alh-trust { gap: 8px; }
    .alh-trust-item { font-size: 12px; padding: 6px 10px; }
}

/* Malý mobil (≤420) */
@media (max-width: 420px) {
    .al-cars-grid { grid-template-columns: 1fr !important; }
    .alh-featured-grid { grid-template-columns: 1fr !important; }
    .alh-cats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .alh-features { grid-template-columns: 1fr !important; }
    .al-captcha-row { flex-direction: column; align-items: flex-start; }
}