/* General Body and Layout Styles */
body { 
    background-color: #f8f9fa; 
    font-size: 0.875rem; 
    font-family: 'Heebo', sans-serif;
}

.site-frame {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1);
    overflow-x: hidden;
}

header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: #ffffff;
    border-top: 1px solid #000;
    border-bottom: 1px solid #dee2e6; 
}
.hr-black { border-top: 2px solid black; opacity: 0.75; }

/* Accessibility Styles */
.skip-link { position: absolute; top: -40px; left: 0; background: #000; color: white; padding: 8px; z-index: 1100; transition: top 0.3s; }
.skip-link:focus { top: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 3px solid #0d6efd !important; outline-offset: 2px; box-shadow: none !important; }

/* Typography and Sizing */
h1, .h1 { font-size: 1.6rem; } h2, .h2 { font-size: 1.4rem; } h4, .h4 { font-size: 1rem; } h5, .h5, .card-title { font-size: 1rem; }
.lead { font-size: 1rem; } .btn { font-size: 0.8rem; } .btn-lg { font-size: 1rem; }
.badge { font-size: 0.75rem; } .card-body, .card-header { padding: 0.8rem; } .list-group-item { padding: 0.6rem 1rem; font-size: 0.85rem; }
.search-form .form-control, .search-form .form-select, .form-control::placeholder { font-size: 0.8rem; }

/* Navigation Styles */
.navbar .container-fluid {
    border-bottom: 1px solid #bbb;
    padding-right: 0;
    padding-left: 1rem;
}
.navbar-brand img {
    height: 120px;
    width: auto;
}
.navbar-nav .nav-link { font-size: 1rem; display: flex; align-items: center; }
.navbar-nav .nav-link .bi { font-size: 1.5rem; }
.navbar .d-none.d-lg-flex .nav-link { white-space: nowrap; padding: 0.2rem 0.3rem; }
.navbar .d-none.d-lg-flex .nav-link.disabled { padding: 0 0.2rem; }

/* This makes the column a positioning anchor for the weather strip */
.navbar .col-lg-3 {
    position: relative;
}

/* Sidebar Styles */
.sidebar-container .position-sticky { top: 1rem; }
.sidebar-section h4 { font-family: 'Heebo', sans-serif; font-weight: 700; }
.sidebar-container .accordion-button {
    font-size: 0.8rem !important; 
    padding: 0.7rem 1rem !important;
}
.sidebar-container .accordion-button .bi { font-size: 1rem; margin-left: 0.3rem; }
.sidebar-container .accordion-collapse .list-group-item {
    font-size: 0.8rem;
    white-space: normal;
    line-height: 1.4;
}

/* Card Styles */
.card { 
    border: 1px solid #000 !important; 
    overflow: hidden; 
}
.card.border-warning { border-color: #ffc107 !important; }
.card.border-premium { border-color: #8ab4f8 !important; }

.card-body .card-content { flex-grow: 1; }

.card > a:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px; 
    background-color: #ffffff;
    overflow: hidden;
}

.card-img-top, .placeholder-image {
    width: 100%;
    height: 100%; 
}

.card-img-top {
    object-fit: contain; 
}

.placeholder-image {
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
}
.placeholder-image i {
    font-size: 4rem;
    opacity: 0.8;
}

.card-body .btn-details {
    background-color: #0d6efd;
    color: #fff;
    font-weight: bold;
    border-color: #0d6efd;
    width: 100%;
    display: block;
}
.card-body .business-address {
    font-size: 0.8rem;
    color: #6c757d;
}

.article-card .card-title {
    font-size: 1rem;
    line-height: 1.4;
}

.business-card, .property-card {
    display: flex;
    flex-direction: column;
    height: 100%; 
}
.business-card .card-body, .property-card .card-body {
    flex-grow: 1; 
}

/* Search Form Styles */
.search-form .form-control, .search-form .form-select { border: 1px solid black !important; }
.search-form .input-group > :not(:first-child) { margin-right: -1px; }
.search-form .input-group .btn { border: 1px solid black !important; }

.form-control, .form-select {
    border: 1px solid #000 !important;
}

/* Mobile Menu Styles */
.navbar-collapse.show .d-lg-none {
    max-height: 65vh !important;
    overflow-y: auto !important;
}
.navbar-collapse.show .d-lg-none::-webkit-scrollbar { width: 12px !important; }
.navbar-collapse.show .d-lg-none::-webkit-scrollbar-track { background: #f1f1f1 !important; }
.navbar-collapse.show .d-lg-none::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 6px !important;
}
.navbar-collapse.show .d-lg-none::-webkit-scrollbar-thumb:hover { background: #555 !important; }
.accordion-button::after { 
    margin-right: auto; 
    margin-left: 0; 
}

.card {
    width: 100% !important;
}

/* Styling for Advanced Search Toggle */
.advanced-search-features {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

/* Weather Strip and User Actions Styles */
#weather-strip {
    color: #000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    white-space: nowrap;
}

#top-nav-row {
  margin-bottom: 12px;
}

/* Footer Styles */
footer {
    background-color: #0d6efd; 
    color: #f8f9fa; 
}

footer .text-muted {
    color: #f8f9fa !important;
}

footer a {
    color: #ffffff; 
    font-weight: bold;
    text-decoration: underline;
}

footer a:hover {
    color: #dee2e6; 
}

.slug-section {
    border: 1px solid black !important;
    padding: 1rem;
    border-radius: 0.375rem;
    margin-top: 1rem;
}

.black-border-input {
    border: 1px solid black !important;
}

.content-image-limit {
    max-height: 65vh; 
    width: 100%;
    object-fit: contain; 
    background-color: #f8f9fa;
}

.business-card .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.bi-geo-alt-fill {
    color: red !important;
}
.alert {
    text-align: center;
}

/* =========================================
   CAROUSEL & SCROLLING STYLES (UPDATED)
   ========================================= */
.carousel-wrapper {
    position: relative;
    padding: 0 10px;
}

/* הודעה קופצת לגלילה */
.drag-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* מרכז המסך */
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: bold;
    pointer-events: none; /* כדי שלא יפריע ללחיצה */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 20;
    white-space: nowrap;
    backdrop-filter: blur(2px);
}

.carousel-wrapper:hover .drag-hint {
    opacity: 1; /* מופיע במעבר עכבר */
}

/* הסתרה לאחר 2 שניות אם רוצים ב-JS, אבל כרגע זה ב-CSS פשוט */

.scrolling-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; 
    scroll-behavior: smooth;
    gap: 1rem;
    padding-bottom: 1rem;
    scrollbar-width: none; 
    -ms-overflow-style: none;
    
    cursor: grab; 
    user-select: none;
}

.scrolling-wrapper.active {
    cursor: grabbing; 
    scroll-behavior: auto; 
}

.scrolling-wrapper::-webkit-scrollbar {
    display: none; 
}

.scrolling-wrapper .card-wrapper {
    flex: 0 0 auto;
    width: 280px;   
    pointer-events: none; 
}

.scrolling-wrapper .card-wrapper * {
    pointer-events: auto;
}

@media (max-width: 768px) {
    .scrolling-wrapper .card-wrapper {
        width: 240px; 
    }
}

/* --- עיצוב חדש ומודגש לכפתורי הגלילה --- */
.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    width: 45px; /* הגדלה */
    height: 45px; /* הגדלה */
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #212529; /* מסגרת שחורה ועבה */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* צל חזק יותר */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #000;
}

.scroll-btn i {
    font-size: 1.5rem; /* אייקון גדול יותר */
    font-weight: 900; /* אייקון שמן יותר */
    -webkit-text-stroke: 1px; /* הדגשה נוספת של האייקון */
}

.scroll-btn:hover {
    background: #212529; /* היפוך צבעים במעבר */
    color: #fff;
    border-color: #212529;
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
    transform: translateY(-50%) scale(1.1); /* הגדלה קלה במעבר */
}

.scroll-btn.left { left: -20px; }
.scroll-btn.right { right: -20px; }

/* הסתרת כפתורים במובייל */
@media (max-width: 768px) {
    .scroll-btn { display: none; }
    .carousel-wrapper { padding: 0; }
    /* במובייל לא צריך את ההודעה הצפה כי זה טבעי לגלול */
    .drag-hint { display: none; } 
}