@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300;400;500;700&display=swap');

/* =========================================
   4. תפריט עליון (Header) - תיקון גובה וצבעים
   ========================================= */

/* הגדרות בסיס לכל המצבים – body .navbar כדי לנצח את Bootstrap .sticky-top (position: sticky) */
body .navbar,
body .navbar.sticky-top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important; /* מעל כל המקטעים כדי שלא ייעלם בגלילה */
    transition: all 0.3s ease;
    padding: 10px 0;
    margin-top: 0 !important;
}

/* --- מצב A: הדר חד סולידי (דפים פנימיים/בלוג) --- */
/* רווח רק בתוכן הראשי (main), לא ב-body – כדי שהלוגו והתפריט יישארו ממש בראש */
body.header-solid {
    padding-top: 1 !important;
}

body.header-solid main#main-content {
    padding-top: calc(var(--dynamic-header-height, 80px) + 30px) !important; /* דינמי לפי גובה ההדר */

}

body.header-solid .navbar {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

body.header-solid .navbar-brand span, 
body.header-solid .navbar-brand i,
body.header-solid .nav-link {
    color: #333 !important;
    text-shadow: none !important;
}

/* --- מצב B: הדר שקוף + עדין (דף בית עם Hero) --- */
body.header-transparent {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* מצב התחלתי (לפני גלילה) - זכוכית עדינה */
body.header-transparent:not(.scrolled) .navbar {
    /* הורדתי משמעותית את הכהות (מ-0.2 ל-0.05) */
    background-color: rgba(0, 0, 0, 0.05) !important; 
    
    /* ריככתי את ה-Blur (מ-8px ל-4px) למראה טבעי יותר */
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* קו דקיק וכמעט בלתי נראה */
    
    /* גרדיאנט עדין הרבה יותר - רק כדי שהלוגו הלבן יבלוט */
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 100%);
}

/* טקסטים לבנים במצב שקוף */
body.header-transparent:not(.scrolled) .navbar-brand span,
body.header-transparent:not(.scrolled) .navbar-brand i,
body.header-transparent:not(.scrolled) .nav-link {
    color: #ffffff !important;
    font-weight: 500;
    /* צל עדין לטקסט כדי שיהיה קריא גם על רקע בהיר */
    text-shadow: 0 1px 3px rgba(0,0,0,0.4); 
}

/* --- מצב C: גלילה (Sticky) --- */
/* כשיורדים למטה - ההדר הופך ללבן */
body.header-transparent.scrolled .navbar {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 8px 0; /* הקטנה קלה נוספת בגלילה */
}

body.header-transparent.scrolled .navbar-brand span,
body.header-transparent.scrolled .navbar-brand i,
body.header-transparent.scrolled .nav-link {
    color: #333 !important;
    text-shadow: none !important;
}

/* --- תיקון מיקום Hero --- */
body.header-transparent .hero-section,
body.header-transparent .video-hero-section {
    margin-top: 0 !important;
    padding-top: 140px !important; /* התאמתי לגובה החדש */
    min-height: 100vh;
}

/* --- גודל לוגו בהדר (גדול יותר ללוגואים רחבים) --- */
.navbar-brand img {
    max-height: 80px;
    width: auto;
}
@media (max-width: 991px) {
    .navbar-brand img {
        max-height: 60px;
    }
}

/* --- התאמות למובייל (Mobile Fixes) --- */
@media (max-width: 991px) {
    body.header-solid main#main-content {
        padding-top: calc(var(--dynamic-header-height, 80px) + 30px) !important; /* דינמי גם במובייל */
    }
    
    /* הקופסה של התפריט הנפתח */
    .navbar-collapse {
        background: #ffffff !important; /* תמיד רקע לבן */
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        margin-top: 10px;
        position: relative;
        z-index: var(--z-dropdown); /* שימוש במשתנה החדש */
    }
    
    /* הקישורים בתוך התפריט */
    /* התיקון: שרשור של מספר מחלקות כדי ליצור "סלקטור-על" שינצח את הלבן של ההדר השקוף */
    body .navbar .navbar-collapse .navbar-nav .nav-link {
        color: #333333 !important; 
        border-bottom: 1px solid #f0f0f0;
        padding: 10px;
        text-shadow: none !important;
        font-weight: 500 !important;
    }

    /* תיקון כפתור ההמבורגר (Toggler) */
    /* כשההדר שקוף (למעלה) - הכפתור צריך להיות לבן */
    body.header-transparent:not(.scrolled) .navbar-toggler {
        border-color: rgba(255,255,255,0.4);
    }
    
    /* החלפת האייקון ללבן כשהרקע שקוף */
    body.header-transparent:not(.scrolled) .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* כשההדר נגלל (הופך ללבן) - הכפתור חוזר להיות כהה */
    body.header-transparent.scrolled .navbar-toggler-icon,
    body.header-solid .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
}









/* =========================================
   תיקון והתאמת לוגו (Logo Fix)
   ========================================= */



/* --- תיקון וידאו הירו (YouTube Background) --- */
.video-hero-section {
    position: relative;
    overflow: hidden;
}

.video-bg-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.video-bg-container iframe {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw; height: 100vh;
    min-width: 177.77vh; 
    min-height: 56.25vw;
    opacity: 0.8; 
}


/* AEO Component Styling */
.answer-block-section {
    position: relative;
    background-color: #ffffff;
}

/* הדגשה עדינה לקופסת התשובה הקצרה */
.answer-block-section .bg-light {
    background-color: #f8f9fc !important; /* כחלחל אפרפר עדין מאוד */
}

/* במצב עריכה - טיפ למשתמש */
body[contenteditable="true"] .answer-block-section::after {
    content: "💡 טיפ ל-AI: כתוב עובדות יבשות. בלי שיווק.";
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 12px;
    background: #fff3cd;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #ffeeba;
    color: #856404;
    pointer-events: none;
}


/* ריווח נוח לקריאה בחלק המורחב */
.answer-block-section ul li {
    margin-bottom: 10px;
}
/* הדגשת תחילת בולט */
.answer-block-section ul li strong {
    color: var(--primary-dark);
}

/* תיקון כרטיסיות שירותים */
.features-section .card, 
.features-section .p-4 {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* הצמדה למעלה במקום מירכוז אנכי שיכול לחתוך */
    overflow: visible !important; /* מבטל הסתרה אם היתה */
}

/* =========================================================
   Ultimate Fix for Features Cards (Height & Overflow)
   ========================================================= */

/* 1. איתחול מבנה העמודות */
.features-section .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* מותח את כל העמודות לאותו גובה */
}

.features-section .row > div[class*='col-'] {
    display: flex; /* הופך את העמודה לקונטיינר פלקס */
    margin-bottom: 30px; /* רווח בין שורות */
}

/* 2. עיצוב הכרטיסייה עצמה */
.features-section .p-4.bg-white {
    /* מבטיח שהכרטיס תופס את כל המקום בעמודה */
    width: 100%;
    
    /* הגדרת גובה גמישה - קריטי! */
    height: 100%; 
    min-height: auto;
    
    /* מבנה פנימי */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    
    /* מניעת חיתוך בכל מחיר */
    overflow: visible !important;
    
    /* ריווח פנימי נדיב */
    padding-bottom: 40px !important;
    box-sizing: border-box;
}

/* 3. ביטול הגבלות גובה על אלמנטים פנימיים (למקרה של Copy-Paste) */
.features-section .p-4.bg-white > div,
.features-section .p-4.bg-white p,
.features-section .p-4.bg-white span,
.features-section .p-4.bg-white font {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    white-space: normal !important; /* שובר שורות ארוכות */
}

/* 4. טיפול במצב ריחוף (למניעת קפיצות) */
.features-section .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: translateZ(0); /* האצת חומרה */
}

.features-section .hover-lift:hover {
    transform: translateY(-5px);
    z-index: 5; /* מעלה מעל השכנים */
    position: relative; /* נדרש ל-Z-Index */
}




/* public/assets/css/modern.css - תיקון גבולות */

.section-wrapper {
    position: relative !important;
    overflow: visible !important;
    z-index: auto !important; /* מאפשר ל-z-index של הכפתורים לנצח */
}

/* התאמה למצב עריכה כדי למנוע הסתרה ע"י הניווט הצף */
body[contenteditable="true"] .navbar {
    z-index: 1000 !important; 
}


/* ==========================================================================
   תיקון מיקום כפתורים במקטע הראשון (HERO) - MODERN
   ========================================================================== */

/* 1. הורדת כפתורי הניהול השמאליים (גרירה + מחיקה) */
main > .section-wrapper:first-child .section-controls {
    top: 140px !important;       /* מוריד אותם מתחת להדר */
    z-index: 100000 !important;  /* מבטיח שהם יהיו מעל הכל ולחיצים */
}

/* ==========================================================================
   תיקון התנגשות כפתורי עריכה ב-Hero (Modern)
   ========================================================================== */

/* הבקרה מצומדת ל-start (ב-RTL: ימין) וצמודה לפינה */

/* פס הבקרה: רוחב מלא, מתחת להדר השקוף – כפתור ימין, סרגל גובה שמאל (דסקטופ בלבד) */
main > .section-wrapper:first-child .hero-section .position-absolute.top-0.start-0.hero-edit-controls,
main > .section-wrapper:first-child .video-hero-section .position-absolute.top-0.start-0 {
    left: 10px !important;
    right: 10px !important;
    top: 110px !important;
    transform: none !important;
    width: auto !important;
    z-index: 100001 !important;
}
.hero-section .hero-edit-controls {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.hero-section .hero-edit-controls .hero-height-slider,
.hero-section .hero-edit-controls .bg-white.p-2 {
    flex-shrink: 0;
}
.hero-section .hero-edit-controls .bg-white.p-2 {
    margin: 0 !important;
}
/* הזזת סרגל הגובה ימינה כדי שלא יסתיר את לחצן הגרירה של המקטע (רווח קבוע) */
.hero-section .hero-edit-controls .hero-height-slider {
    margin-inline-end: 56px !important;
    padding-bottom: 4px !important;
}
.hero-section .hero-edit-controls .hero-height-slider .form-range {
    margin-bottom: 0;
}
[dir="rtl"] .hero-section .hero-edit-controls .hero-height-slider {
    margin-left: 56px !important;
    margin-right: 0 !important;
}

/* ==========================================================================
   תיקון תפריט כפתור ב-Hero (Z-Index & Overflow)
   ========================================================================== */

/* 1. הגדרת עדיפות למעטפת של המקטע הראשון (הירו) */
/* זה מבטיח שכל מה שיוצא ממנו (כמו תפריט) יעלה מעל המקטע שמתחתיו */
main > .section-wrapper:first-child {
    z-index: 21 !important; 
    position: relative;
}

/* 2. אישור חריגה מגבולות המקטע */
/* אם לא נגדיר זאת, התפריט ייחתך בגבול התחתון של ה-Hero */
.hero-section {
    overflow: visible !important;
}

/* תיבת כפתורי עריכה (Background & Height) ב-Hero – התאמה למובייל */
@media (max-width: 768px) {
    .hero-section .position-absolute.top-0.start-0.hero-edit-controls {
        left: 8px !important;
        right: 8px !important;
        top: 70px !important;
        margin: 0 !important;
        z-index: 1000 !important;
    }
    /* סרגל הגובה מוסתר במובייל – נשאר רק בדסקטופ */
    .hero-section .hero-edit-controls .hero-height-slider {
        display: none !important;
    }
    .hero-section .hero-center-content,
    .hero-section .hero-center-content h1,
    .hero-section .hero-center-content p {
        position: relative;
        z-index: 1;
    }
    .hero-section .hero-edit-controls .hero-height-slider,
    .hero-section .hero-edit-controls .bg-white.p-2 {
        transform: scale(0.85) !important;
        transform-origin: top left;
        opacity: 0.5;
        transition: opacity 0.2s ease;
    }
    [dir="rtl"] .hero-section .hero-edit-controls .hero-height-slider,
    [dir="rtl"] .hero-section .hero-edit-controls .bg-white.p-2 {
        transform-origin: top right;
    }
    .hero-section .hero-edit-controls .hero-height-slider:hover,
    .hero-section .hero-edit-controls .bg-white.p-2:hover {
        opacity: 1;
    }
}

/* =========================================
   Design Pack: Creative (single alternative to Modern)
   ========================================= */

/* --- A. Header: relative, solid white, centered logo + nav below --- */
body.style-creative .navbar,
body.style-creative .navbar.sticky-top {
    position: relative !important;
    top: auto !important;
    background: #ffffff !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
body.style-creative .navbar .container {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
    justify-content: center;
}
body.style-creative .navbar-brand {
    margin-bottom: 0.5rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.style-creative .navbar-collapse {
    justify-content: center !important;
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-top: 15px;
    width: 100%;
}
body.style-creative .navbar-collapse .navbar-nav {
    margin-right: 0 !important;
    margin-left: 0 !important;
    justify-content: center !important;
    flex-wrap: wrap;
}
body.style-creative .navbar-collapse .nav-link {
    font-weight: 600;
    color: #333 !important;
    text-shadow: none;
    border-radius: 6px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
body.style-creative .navbar-collapse .nav-link:hover {
    color: var(--primary-color, #3b82f6) !important;
    background: color-mix(in srgb, var(--primary-color, #3b82f6) 8%, transparent);
}

/* --- Nav link hover: underline animation (centered menu) --- */
body.style-creative .nav-item .nav-link {
    position: relative;
    transition: color 0.3s ease;
}
body.style-creative .nav-item .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 5px;
    left: 50%;
    background-color: var(--primary-color, #3b82f6);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
body.style-creative .nav-item .nav-link:hover::after {
    width: 80%;
}
body.style-creative .nav-item .nav-link:hover {
    color: var(--primary-color, #3b82f6) !important;
}

body.style-creative .navbar-brand span,
body.style-creative .navbar-brand i {
    color: #333 !important;
    text-shadow: none;
}
body.style-creative {
    padding-top: 0 !important;
}
body.style-creative main#main-content {
    padding-top: 0 !important;
}

/* =========================================
   FIX: Creative Pack - Black Menu & Top Waves
   ========================================= */

/* 1. Mobile Menu Visibility (Black Hamburger – base64 SVG so icon always renders) */
@media (max-width: 991px) {
    body.style-creative .navbar-collapse {
        background-color: #ffffff !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    }
    body.style-creative .navbar-toggler {
        background-color: #333 !important;
        border: 2px solid #333 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        margin-top: 12px;
    }
    body.style-creative .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHJlY3QgeD0iNSIgeT0iNyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjMiIGZpbGw9IiNmZmYiLz48cmVjdCB4PSI1IiB5PSIxMyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjMiIGZpbGw9IiNmZmYiLz48cmVjdCB4PSI1IiB5PSIyMCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjMiIGZpbGw9IiNmZmYiLz48L3N2Zz4=") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 24px 24px !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }
    body.style-creative .navbar-nav .nav-link {
        color: #333 !important;
        border-bottom: 1px solid #f9f9f9;
    }
    body.style-creative.header-transparent .navbar {
        background-color: #ffffff !important;
    }
}

/* --- Typography: serif headings, sans-serif body --- */
body.style-creative h1,
body.style-creative h2,
body.style-creative h3,
body.style-creative .navbar-brand {
    font-family: 'Frank Ruhl Libre', serif !important;
    letter-spacing: 0.5px;
}
body.style-creative p,
body.style-creative a,
body.style-creative button {
    font-family: 'Rubik', sans-serif;
}

/* 2. Smooth waves at the TOP (hanging from header, gentle curve) */
body.style-creative .hero-section,
body.style-creative .video-hero-section {
    clip-path: none !important;
    padding-bottom: 100px !important;
    position: relative;
    overflow: hidden;
    margin-bottom: 0 !important;
}

/* Smooth sine-style wave SVG (no sharp angles) – overlap header to remove white gap */
body.style-creative .hero-section::before,
body.style-creative .hero-section::after,
body.style-creative .video-hero-section::before,
body.style-creative .video-hero-section::after {
    content: "";
    display: block !important;
    position: absolute;
    top: -24px;
    left: 0;
    width: 100%;
    height: 56px;
    background-repeat: repeat-x;
    background-size: 2000px 56px;
    pointer-events: none;
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C150,90 350,10 500,50 C650,90 850,10 1000,50 L1000,100 L0,100 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

body.style-creative .hero-section::before,
body.style-creative .video-hero-section::before {
    z-index: 4;
    opacity: 0.55;
    animation: wave-slide 28s linear infinite;
    height: 64px;
    background-size: 2000px 64px;
}

body.style-creative .hero-section::after,
body.style-creative .video-hero-section::after {
    z-index: 5;
    opacity: 1;
    animation: wave-slide 18s linear infinite reverse;
}

@keyframes wave-slide {
    0% { background-position-x: 0; }
    100% { background-position-x: 2000px; }
}

/* Same waves at the BOTTOM of Hero (flow into next section) */
body.style-creative .hero-waves-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;
    pointer-events: none;
    z-index: 4;
}

body.style-creative .hero-waves-bottom::before,
body.style-creative .hero-waves-bottom::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;
    background-repeat: repeat-x;
    background-size: 2000px 56px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C150,90 350,10 500,50 C650,90 850,10 1000,50 L1000,100 L0,100 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    /* no flip: curve at top (hero side), fill flows down into next section */
}

body.style-creative .hero-waves-bottom::before {
    z-index: 4;
    opacity: 0.55;
    animation: wave-slide 28s linear infinite;
    height: 64px;
    background-size: 2000px 64px;
}

body.style-creative .hero-waves-bottom::after {
    z-index: 5;
    opacity: 1;
    animation: wave-slide 18s linear infinite reverse;
}

/* --- C. Contact section: גל כ־::before מעל הסקשן (שחור על רקע בהיר) כדי שייראה --- */
body.style-creative section.bg-dark-custom {
    position: relative !important;
    overflow: visible !important;
    padding-top: 0 !important;
    /* רק גרדיאנט – בלי גל ברקע (כדי שלא יהיה פס שחור) */
    background-image: radial-gradient(circle at center, #222 0%, #000 100%) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: cover !important;
    background-color: #000 !important;
}
/* גל קטן כמפריד – גובה 50px כדי שלא יכסה את הסקשן שמעל */
body.style-creative section.bg-dark-custom::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -50px !important;
    height: 50px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,40 Q120,25 240,40 Q360,55 480,40 Q600,25 720,40 Q840,55 960,40 Q1080,25 1200,40 Q1320,55 1440,40 L1440,80 L0,80 Z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% 100% !important;
    pointer-events: none !important;
}
body.style-creative section.bg-dark-custom .container {
    padding-top: 1rem !important;
}

/* =========================================
   FIX: Text-Image Section Mobile Overflow
   ========================================= */

@media (max-width: 768px) {
    .text-image-section .lead,
    .text-image-section p,
    .text-image-section div[data-field="text"] {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        display: block !important;
    }
    .text-image-section .col-md-6 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        overflow: hidden !important;
    }
}

/* =========================================
   FIX: Text-Video Mobile Overflow (Aggressive)
   ========================================= */

@media (max-width: 768px) {
    .content-fix {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .section-text-video .row,
    .text-video-section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    .content-fix h2,
    .content-fix .lead,
    .content-fix div[data-field="text"],
    .content-fix p {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }
}

/* =========================================
   FIX: Text-Video Overflow & Layout Reset (Mobile)
   ========================================= */

@media (max-width: 768px) {
    .text-video-section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        display: block !important;
    }
    .text-video-section .col-md-6,
    .text-video-section .content-fix {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        transform: none !important;
        opacity: 1 !important;
        position: static !important;
    }
    .text-video-section h2,
    .text-video-section div,
    .text-video-section p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        max-width: 100% !important;
    }
}

/* =========================================
   FIX: Mobile Hero Clean Layout (No Black Gap)
   ========================================= */

@media (max-width: 768px) {
    .hero-section, .video-hero-section {
        height: auto !important;
        min-height: 400px !important;
        background-color: transparent !important;
        background-size: cover !important;
        background-position: center center !important;
        padding: 80px 15px 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    body.style-creative .hero-section,
    body.style-creative .video-hero-section {
        padding-bottom: 50px !important;
    }
    .hero-section .hero-bg-img-wrap {
        display: none !important;
    }
    .hero-section .container, .video-hero-section .container {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        padding: 0 !important;
        display: block !important;
        height: auto !important;
    }
    .hero-section h1, .video-hero-section h1 {
        font-size: 2rem !important;
        margin-bottom: 15px;
    }
    .hero-section p, .video-hero-section p {
        font-size: 1.1rem !important;
        margin-bottom: 25px;
    }
}

/* ==========================================================================
   FIX: Mobile Editor UI Optimization (Hero Section)
   ========================================================================== */

@media (max-width: 768px) {

    /* 1. Fix Background & Height Controls: row, below header, button right / slider left */
    body[contenteditable="true"] main > .section-wrapper:first-child .hero-section .position-absolute.top-0.start-0.hero-edit-controls,
    body[contenteditable="true"] main > .section-wrapper:first-child .hero-section .position-absolute.top-0.start-0,
    body[contenteditable="true"] main > .section-wrapper:first-child .video-hero-section .position-absolute.top-0.start-0 {
        top: 70px !important;
        left: 8px !important;
        right: 8px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        transform: none !important;
        z-index: 100005 !important;
    }

    /* 2. Fix the Button's Settings Gear Icon */
    body[contenteditable="true"] .hero-section .d-inline-block.position-relative > .btn-dark.rounded-circle,
    body[contenteditable="true"] .video-hero-section .d-inline-block.position-relative > .btn-dark.rounded-circle {
        top: -15px !important;
        left: -10px !important;             /* Anchor to top-left of the button */
        right: auto !important;
        transform: none !important;         /* Remove 'translate-middle' which distorts on mobile */
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 15 !important;
    }

    /* 3. Fix the Button Settings Dropdown Menu */
    body[contenteditable="true"] .hero-section [id^="btn-opts-"],
    body[contenteditable="true"] .video-hero-section [id^="btn-opts-"] {
        top: 110% !important;               /* Push below the button */
        left: 50% !important;
        transform: translateX(-50%) !important; /* Center exactly under the button */
        min-width: 200px !important;
        width: auto !important;
        margin-top: 10px !important;
        z-index: 1000 !important;
    }
}


/* ==========================================================================
   Live Search — Navbar Row 2 Global Dropdown
   ========================================================================== */

/* ── Navbar Row 2 separator ── */
.navbar-search-row {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ── Search form wrapper: max-width + position anchor for the dropdown ── */
/* max-width (600px) and width (100%) are set inline; CSS just guards position */
.ls-wrap {
    position: relative;   /* dropdown is absolute relative to this */
}

/* Mobile: let the form span the full available width */
@media (max-width: 991px) {
    .ls-wrap {
        max-width: 100% !important;
    }
}

/* ── Input shell ── */
.ls-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* ── Search icon — RTL: sits on the right ── */
.ls-icon {
    position: absolute;
    inset-inline-start: 0.85rem;
    font-size: 0.75rem;
    color: #aaa;
    pointer-events: none;
    z-index: 2;
    transition: color 0.2s;
}

/* ── Input ── */
.ls-input {
    width: 100%;
    border: none;
    border-radius: 50px;
    /* right pad for icon, left pad for spinner */
    padding: 0.45rem 2.2rem 0.45rem 2.2rem;
    font-size: 0.875rem;
    background: #f1f3f5;
    color: #1a1a1a;
    outline: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    text-align: start;
}

.ls-input:focus {
    background: #fff;
    box-shadow: 0 0 0 2px var(--primary-color, #3b82f6);
}

.ls-input-wrap:focus-within .ls-icon {
    color: var(--primary-color, #3b82f6);
}

/* ── Spinner: trailing end (RTL = left, LTR = right) ── */
.ls-spinner {
    position: absolute;
    inset-inline-end: 0.75rem;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-top-color: var(--primary-color, #3b82f6);
    border-radius: 50%;
    animation: ls-spin 0.65s linear infinite;
    display: none;
    flex-shrink: 0;
}

.ls-spinner.active { display: block; }

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

/* ── Transparent-header adaptations ── */
body.header-transparent:not(.scrolled) .ls-input {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
body.header-transparent:not(.scrolled) .ls-input::placeholder { color: rgba(255, 255, 255, 0.6); }
body.header-transparent:not(.scrolled) .ls-icon               { color: rgba(255, 255, 255, 0.6); }
body.header-transparent:not(.scrolled) .ls-input:focus {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* ── Results dropdown ── */
.ls-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    width: 100%;
    z-index: 1050;
    margin-top: 5px;
    max-height: 400px;
    overflow-y: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    scrollbar-width: thin;
}

.ls-dropdown.open { display: block; }

/* ── Individual result row ── */
.ls-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    text-decoration: none !important;
    color: #1a1a1a !important;
    transition: background 0.13s ease;
    border-bottom: 1px solid #f2f2f2;
}
.ls-item:last-child { border-bottom: none; }
.ls-item:hover      { background: #f6f7fb; }

/* Product thumbnail */
.ls-thumb {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
    background: #f8f8f8;
    border: 1px solid #eee;
}

/* Text column */
.ls-item-body {
    flex: 1;
    min-width: 0;
    text-align: start;
}

.ls-item-title {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1a1a1a;
    line-height: 1.35;
}

.ls-item-price {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-color, #3b82f6);
    margin-top: 3px;
    line-height: 1;
}

/* "No results" message */
.ls-empty {
    padding: 1.25rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: #999;
    direction: rtl;
    margin: 0;
}

/* Mobile: dropdown inherits 100% width from wrapper, no override needed */