/* ==========================================================================
   Autotelex Import Plugin - Styling voor Grid & Detailpagina
   ========================================================================== */

/* 1. Occasion Overzicht (Grid Layout) */
.occ-grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin: 40px 0; }
.occ-grid-card { background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 4px 10px rgba(0,0,0,0.05); display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.occ-grid-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.occ-grid-img-wrap { display: block; width: 100%; height: 220px; overflow: hidden; background: #f8fafc; }
.occ-grid-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.occ-grid-no-img { height: 100%; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 14px; }
.occ-grid-content { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; }
.occ-grid-title { margin: 0 0 4px 0 !important; }
.occ-grid-title a { font-size: 22px !important; font-weight: 800; color: #000000; text-decoration: none; letter-spacing: -0.5px; }
.occ-grid-subtitle { font-size: 14px; color: #334155; margin-bottom: 16px; min-height: 21px; }
.occ-grid-divider { border: 0; border-top: 1px solid #e2e8f0; margin: 0 0 16px 0; }
.occ-grid-specs { list-style: none !important; padding: 0 !important; margin: 0 0 20px 0 !important; }
.occ-grid-specs li { display: flex; font-size: 14px; color: #000; margin-bottom: 6px; line-height: 1.5; }
.occ-lbl { font-weight: 700; width: 130px; flex-shrink: 0; }
.occ-val { font-weight: 400; display: flex; align-items: center; gap: 6px; }
.occ-grid-price-row { text-align: right; margin-bottom: 16px; margin-top: auto; }
.occ-grid-price { font-size: 18px; font-weight: 700; color: #000; }
.occ-grid-btn-row { display: flex; }
.occ-grid-btn { background: #fbbf24; color: #000000 !important; font-weight: 700; font-size: 14px; padding: 10px 20px; text-decoration: none; border-radius: 4px; transition: background 0.2s; }
.occ-grid-btn:hover { background: #f59e0b; }

/* Oude Auto-Card Animatie (Fallback) */
.auto-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.auto-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important; }
.auto-card > a { position: relative; overflow: hidden; background-color: #f5f5f5; }
.auto-card img { transition: opacity 0.25s ease, filter 0.25s ease; }
.auto-card:hover img { filter: brightness(1.03); }

/* 2. Detailpagina (Single) - Layout & Kaarten */
.occ-single-wrap { max-width: 1240px; margin: 0 auto; padding: 50px 24px 90px 24px !important; }
.occ-hero-header { margin-bottom: 35px; }
.occ-title-main { font-size: 34px !important; font-weight: 800; color: #0f172a; letter-spacing: -0.5px; margin: 0 0 14px 0 !important; line-height: 1.25; }
.occ-subtitle-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.occ-tag { background: #f1f5f9; color: #475569; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 6px; }
.occ-main-columns { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(370px, 1fr); gap: 30px; align-items: start; }
.occ-left-content, .occ-right-sidebar { display: flex; flex-direction: column; gap: 30px; }
.occ-right-sidebar { position: sticky; top: 90px; }
.occ-gallery-card, .occ-card { position: relative; width: 100%; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; margin: 0 !important; box-shadow: 0 12px 32px -6px rgba(15, 23, 42, 0.08) !important; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.occ-gallery-card:hover, .occ-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -8px rgba(15, 23, 42, 0.12) !important; }
.occ-card { padding: 34px !important; }
.occ-description-card h2, .occ-options-card h2, .occ-specs-card h3 { font-size: 20px; font-weight: 700; color: #0f172a; margin: 0 0 22px 0; padding-bottom: 14px; border-bottom: 2px solid #f1f5f9; }
.occ-prose { color: #334155; font-size: 15px; line-height: 1.8; }

/* 3. Detailpagina - Galerij (Inclusief Swipe) */
.occ-gallery-card { padding: 30px 24px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.occ-gallery { display: flex; flex-direction: column; gap: 15px; width: 100%; }
.occ-gallery-main img { width: 100% !important; height: auto !important; max-height: 480px; aspect-ratio: 4/3; object-fit: contain !important; border-radius: 8px; display: block; margin: 0 auto !important; }
.occ-gallery-thumbs { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; gap: 10px !important; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.occ-thumb { flex: 0 0 25% !important; min-width: 80px !important; max-width: 100px !important; cursor: pointer; border: 2px solid transparent; border-radius: 4px; overflow: hidden; transition: all 0.2s ease; }
.occ-thumb img { width: 100% !important; height: 100% !important; aspect-ratio: 4/3; object-fit: cover; display: block !important; opacity: 0.7; transition: opacity 0.2s ease; }
.occ-thumb.active { border-color: #facc15 !important; }
.occ-thumb.active img, .occ-thumb:hover img { opacity: 1; }
.occ-gallery-thumbs::-webkit-scrollbar { height: 6px; }
.occ-gallery-thumbs::-webkit-scrollbar-track { background: transparent; border-radius: 4px; }
.occ-gallery-thumbs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* 4. Detailpagina - Zijbalk, Knoppen & Kenteken */
.occ-price-card { border-top: 5px solid #0f172a !important; }
.occ-price-top { margin-bottom: 18px; }
.occ-price-label { display: block; font-size: 12px; text-transform: uppercase; font-weight: 700; letter-spacing: 1.2px; color: #64748b; margin-bottom: 4px; }
.occ-price-digits { display: block; font-size: 38px; font-weight: 900; color: #0f172a; letter-spacing: -0.5px; }
.occ-plate-container { margin-bottom: 24px; }
.nl-plate { display: inline-flex; align-items: center; background: #eab308; border: 2px solid #1e293b; border-radius: 6px; overflow: hidden; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); }
.nl-flag { background: #1d4ed8; color: #ffffff; font-size: 10px; font-weight: 900; padding: 7px 8px; }
.nl-code { padding: 3px 14px; font-size: 17px; font-weight: 900; letter-spacing: 2.5px; color: #0f172a; }
.occ-nap-label { background: #facc15; color: #000; font-size: 10px; font-weight: 800; padding: 1px 4px; border-radius: 2px; }
.occ-cta-actions { display: flex; flex-direction: column; gap: 12px; }
.occ-btn-primary { background: #0f172a; color: #ffffff !important; text-align: center; padding: 15px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15); }
.occ-btn-primary:hover { background: #1e293b; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.2); }
.occ-btn-secondary { background: #f8fafc; border: 1px solid #cbd5e1; color: #1e293b !important; text-align: center; padding: 13px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background 0.2s ease; }
.occ-btn-secondary:hover { background: #e2e8f0; }
.occ-btn-whatsapp { background: #25D366; color: #ffffff !important; text-align: center; padding: 13px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2); }
.occ-btn-whatsapp:hover { background: #128C7E; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(37, 211, 102, 0.3); }

/* 5. Detailpagina - Specificaties Tabel */
.occ-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0; }
.occ-table th, .occ-table td { padding: 12px 10px; border-bottom: 1px solid #e2e8f0; text-align: left; transition: background-color 0.2s ease; }
.occ-table th { color: #64748b; font-weight: 600; width: 45%; }
.occ-table td { color: #0f172a; font-weight: 500; }
.occ-table tr:hover th, .occ-table tr:hover td { background-color: #f8fafc; }
.occ-table td.occ-table-subheader { background-color: #f1f5f9 !important; font-weight: 800; text-transform: uppercase; font-size: 12px; color: #475569; padding-top: 24px !important; padding-bottom: 8px !important; letter-spacing: 0.5px; border-bottom: 2px solid #cbd5e1; }
.occ-table tr:hover td.occ-table-subheader { background-color: #f1f5f9 !important; }

/* 6. Responsieve Optimalisatie (Tablets & Mobiel) */
@media (min-width: 768px) and (max-width: 989px) {
    .occ-single-wrap { padding: 30px 16px 60px 16px !important; }
    .occ-main-columns { grid-template-columns: minmax(0, 1.2fr) minmax(310px, 1fr); gap: 20px; }
    .occ-left-content, .occ-right-sidebar { gap: 20px; }
    .occ-card { padding: 24px !important; }
    .occ-gallery-card { padding: 16px; }
    .occ-gallery-card img.occ-featured-img { max-height: 300px; }
    .occ-table th, .occ-table td { padding: 10px 8px !important; font-size: 12px; }
    .occ-price-digits { font-size: 28px; }
}

@media (max-width: 767px) {
    .occ-single-wrap { padding: 20px 16px 50px 16px !important; }
    .occ-grid-container { grid-template-columns: 1fr; }
    .occ-main-columns, .occ-left-content, .occ-right-sidebar { grid-template-columns: 1fr; gap: 20px; }
    .occ-right-sidebar { position: static; }
    .occ-gallery-card, .occ-card { border-radius: 12px; box-shadow: 0 6px 15px -4px rgba(15, 23, 42, 0.08) !important; }
    .occ-card { padding: 20px !important; }
    .occ-gallery-card { padding: 16px; }
    .occ-table th, .occ-table td { padding: 12px 10px !important; font-size: 13px; }
    .occ-price-digits { font-size: 32px; }
}