/* ==========================================================================
   Responsive CSS Framework for Refualaam.co.il
   Phase E - Mobile-Friendly Design
   Created: 15/02/2026 | Updated: 15/02/2026

   Strategy: CSS-only overrides for existing table-based layout.
   Desktop layout (972px+) remains UNCHANGED.
   ========================================================================== */

/* ==========================================================================
   1. BASE RESPONSIVE OVERRIDES
   ========================================================================== */

/* Make the main layout table fluid */
.frameBg,
.frameBgs {
  max-width: 972px;
  width: 100% !important;
  box-sizing: border-box;
}

/* Responsive images (already in structure.css but reinforced) */
img {
  max-width: 100%;
  height: auto;
}

/* Prevent iOS zoom on form focus */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
  font-size: 16px !important;
}

/* Camera slider images - constrain within container */
.camera_wrap img,
.camera_wrap .imgLoaded,
img.imgLoaded {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

/* NOTE: Mobile-specific slider/logo fixes moved inside @media (max-width: 768px)
   Homepage uses viewport=device-width so media queries fire correctly on mobile */

/* ==========================================================================
   2. TABLET BREAKPOINT (768px and below)
   ========================================================================== */

@media (max-width: 768px) {

  /* ========================================
     R6-FIX1: Body/HTML margin & overflow reset
     ======================================== */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }

  table.frameBg {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
  }

  /* ========================================
     GLOBAL - Force table layout to stack
     ======================================== */

  table.frameBg,
  table.frameBg > tbody,
  table.frameBg > tbody > tr,
  table.frameBg > tbody > tr > td,
  table.frameBgs,
  table.frameBgs > tbody,
  table.frameBgs > tbody > tr,
  table.frameBgs > tbody > tr > td {
    display: block !important;
    width: 100% !important;
  }

  /* Remove fixed dimensions from main frame */
  .frameBg,
  .frameBgs {
    height: auto !important;
    margin-top: 0 !important;
    background-image: none !important;
    background-color: #FFFFFF;
  }

  .bottomFrameBg {
    height: auto !important;
    background-image: none !important;
    background-color: #2c2c2c;
    padding: 15px;
  }

  .bodyBg {
    background-image: none !important;
    background-color: #e8ebec;
  }

  /* Typography */
  body { font-size: 15px; }
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }

  /* Table cells padding */
  .frameBg td,
  .frameBgs td {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }

  /* ========================================
     PREVENT HORIZONTAL SCROLL (CRITICAL)
     ======================================== */

  html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* FIX R2-3: Global overflow containment - prevent horizontal scroll */
  .frameBg,
  .frameBg td:not(.slider-parent-td),
  .frameBg table {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* R9-FIX: Force overflow visible on ALL elements in logo/menu area to prevent clipping.
     The global .frameBg td / .frameBg table rule above applies overflow-x:hidden,
     which causes browser to convert overflow-y:visible → auto → CLIPS content.
     Must override on every element in the ancestor chain from logo to frameBg. */
  .frameBg > tbody > tr:first-child > td:first-child {
    overflow: visible !important;
  }
  div[style*="margin-top:-210px"],
  div[style*="margin-top:-210px"] table,
  div[style*="margin-top:-210px"] tbody,
  div[style*="margin-top:-210px"] tr,
  div[style*="margin-top:-210px"] td {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  /* R9-FIX2: Override inner table height:10px inline style that constrains logo area */
  div[style*="margin-top:-210px"] > table {
    height: auto !important;
  }

  /* bottomFrameBg TR: 360px + 15px padding each side = 390px overflow */
  .bottomFrameBg {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* reCAPTCHA badge - keep within viewport (was causing 546px scrollWidth) */
  .grecaptcha-badge {
    right: 0 !important;
    left: auto !important;
    overflow: hidden !important;
  }

  /* Override ALL inline max-width values that exceed viewport */
  [style*="max-width: 920px"],
  [style*="max-width:920px"],
  [style*="max-width: 860px"],
  [style*="max-width:860px"],
  [style*="max-width: 800px"],
  [style*="max-width:800px"],
  [style*="max-width: 900px"],
  [style*="max-width:900px"] {
    max-width: 100% !important;
  }

  /* Logo area table prevent overflow */
  div[style*="margin-top:-210px"] table {
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  /* Hero stats - constrain max-width */
  #hero-stats > div {
    max-width: 100% !important;
  }

  /* Kill ALL fixed-height rows */
  tr[style*="height:280px"],
  tr[style*="height: 280px"],
  tr[style*="height:200px"],
  tr[style*="height: 200px"] {
    height: auto !important;
  }

  /* ========================================
     INLINE STYLES OVERRIDES (AGGRESSIVE)
     ======================================== */

  /* Override ALL large inline widths */
  [style*="width:972px"],
  [style*="width: 972px"],
  [style*="width:900px"],
  [style*="width: 900px"],
  [style*="width:800px"],
  [style*="width: 800px"],
  [style*="width:700px"],
  [style*="width: 700px"],
  [style*="width:600px"],
  [style*="width: 600px"],
  [style*="width:570px"],
  [style*="width: 570px"],
  [style*="width:550px"],
  [style*="width: 550px"],
  [style*="width:500px"],
  [style*="width: 500px"],
  [style*="width:450px"],
  [style*="width: 450px"],
  [style*="width:400px"],
  [style*="width: 400px"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Float resets for mobile - ALL floated elements */
  .frameBg [style*="float:right"],
  .frameBg [style*="float: right"],
  .frameBg [style*="float:left"],
  .frameBg [style*="float: left"],
  .bottomFrameBg [style*="float:right"],
  .bottomFrameBg [style*="float: right"],
  .bottomFrameBg [style*="float:left"],
  .bottomFrameBg [style*="float: left"] {
    float: none !important;
    width: 100% !important;
  }

  /* R9e: Keep loginPanel bar floats on mobile - "התנתק" and icons stay on LEFT */
  .gradientBoxesWithOuterShadows [style*="float:left"],
  .gradientBoxesWithOuterShadows [style*="float: left"] {
    float: left !important;
    width: auto !important;
  }

  /* R9e: LoginPanel bar mobile adjustments */
  .gradientBoxesWithOuterShadows {
    height: auto !important;
    min-height: 30px;
    padding: 4px 8px !important;
    overflow: visible !important;
  }

  .gradientBoxesWithOuterShadows table {
    table-layout: auto !important;
  }

  .gradientBoxesWithOuterShadows td {
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  /* R9e: Hide long "ניהול קורסים" text on mobile - too wide */
  .gradientBoxesWithOuterShadows a#loginPanel[href*="checkout"] {
    display: none !important;
  }

  /* Negative margins - reset ALL */
  [style*="margin-left:-"],
  [style*="margin-top:-"],
  [style*="margin-right:-"] {
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
  }

  /* ========================================
     NAVIGATION - Hamburger Menu
     ======================================== */

  .mobile-hamburger {
    display: block !important;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    background: #222;
    border: none;
    border-radius: 5px;
    padding: 10px 12px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }

  .mobile-hamburger span {
    display: block;
    width: 24px;
    height: 3px;
    background: #fff;
    margin: 4px 0;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
  }

  .mobile-hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .mobile-hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .mobile-hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* Hide desktop nav */
  .topMenuRefuaLaam {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: rgba(34, 34, 34, 0.97);
    height: 100vh !important;
    overflow-y: auto;
    padding-top: 60px;
  }

  .topMenuRefuaLaam.mobile-open {
    display: block !important;
  }

  .menu ul > li {
    display: block !important;
    float: none !important;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .menu ul li a {
    display: block !important;
    padding: 16px 20px !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 48px !important;
  }

  .dropdownContain {
    position: static !important;
    width: 100% !important;
    margin-left: 0 !important;
    top: auto !important;
    pointer-events: auto !important;
  }

  .dropOut {
    width: 100% !important;
    float: none !important;
    opacity: 1 !important;
    margin-top: 0 !important;
    background: rgba(255,255,255,0.05);
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .dropOut ul {
    float: none !important;
    padding: 0 !important;
  }

  .dropOut ul li {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    padding: 12px 15px !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  .dropOut ul li a {
    color: #ddd !important;
  }

  .dropOut .triangle {
    display: none !important;
  }

  .menuRegister {
    background-color: #ff8c00;
    margin: 10px 20px;
    border-radius: 8px;
  }

  /* ========================================
     LOGO AREA - menu.php logo buttons
     ======================================== */

  /* Reset the -210px margin div - R8: more padding + bg + z-index */
  div[style*="margin-top:-210px"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    padding: 0 !important;
    text-align: center;
    overflow: visible !important;
    z-index: 5 !important;
    background: #fff !important;
  }

  /* All tables inside logo area (except green buttons which have own rules) */
  div[style*="margin-top:-210px"] table {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* R9d: Hide 15px spacer row in outer table */
  div[style*="margin-top:-210px"] > table > tbody > tr:last-child {
    display: none !important;
  }

  /* Logo image only */
  div[style*="margin-top:-210px"] img[alt*="לוגו"] {
    width: auto !important;
  }

  /* FIX 1: Outer menu table - stack cells vertically (use order instead of column-reverse to avoid overflow) */
  div[style*="margin-top:-210px"] > table {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  div[style*="margin-top:-210px"] > table > tbody {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  div[style*="margin-top:-210px"] > table > tbody > tr {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  div[style*="margin-top:-210px"] > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
  }

  /* Reorder: Logo first (order -1), green buttons last (order 1) */
  div[style*="margin-top:-210px"] > table > tbody > tr > td:last-child {
    order: -1 !important;
  }
  div[style*="margin-top:-210px"] > table > tbody > tr > td:first-child {
    order: 1 !important;
  }

  /* Green course buttons row - force single line with full width available */
  table[style*="margin-top:-80px"],
  table[style*="margin-top: -80px"] {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-collapse: separate !important;
  }

  table[style*="margin-top:-80px"] tbody,
  table[style*="margin-top: -80px"] tbody {
    display: flex !important;
    width: 100% !important;
  }

  table[style*="margin-top:-80px"] tr,
  table[style*="margin-top: -80px"] tr {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 1px;
  }

  table[style*="margin-top:-80px"] td,
  table[style*="margin-top: -80px"] td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    flex-shrink: 1;
  }

  table[style*="margin-top:-80px"] td a,
  table[style*="margin-top: -80px"] td a {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* R8-FIX2: Green buttons bigger - single row like desktop */
  table[style*="margin-top:-80px"] img,
  table[style*="margin-top: -80px"] img {
    height: 40px !important;
    width: auto !important;
  }

  /* Main logo - size set in R2-1 fix above */

  /* R6-FIX4: H1 smaller for longer text */
  .page-h1 {
    font-size: 15px !important;
    margin: 4px auto !important;
    padding: 3px 8px !important;
  }

  /* R6-FIX3: Logo image - larger display + ensure visible (R8: opacity + margin-bottom) */
  div[style*="margin-top:-210px"] img[alt*="לוגו"] {
    width: 160px !important;
    max-width: 45vw !important;
    height: auto !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    display: block !important;
    visibility: visible !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    z-index: 10 !important;
    opacity: 1 !important;
  }

  /* FIX R3-2: Logo container - ensure minimum dimensions for image loading */
  div[style*="margin-top:-210px"] > table > tbody > tr > td:last-child {
    min-height: 50px !important;
  }

  /* Nav -73px margin reset */
  nav[style*="margin-top:-73px"] {
    margin-top: 0 !important;
  }

  /* -80px margin divs in menu */
  div[style*="margin-top:-80px"] {
    margin-top: 0 !important;
  }

  /* ========================================
     CAMERA SLIDER
     ======================================== */

  /* R6-FIX2: Camera slider - 100vw negative margin technique to break out of parent padding */
  #camera_wrap_1 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    margin-bottom: 10px !important;
    min-height: 200px !important;
    height: 200px !important;
    max-height: 250px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #camera_wrap_1 > div,
  #camera_wrap_1 .camera_fakehover,
  #camera_wrap_1 .cameraSlide,
  #camera_wrap_1 .camera_src,
  #camera_wrap_1 .cameraCont,
  #camera_wrap_1 .cameraSlide > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Slider parent TD - remove padding that squeezes slider */
  .frameBg td.slider-parent-td {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Camera slider height */
  .camera_wrap {
    min-height: 200px !important;
    height: 200px !important;
    max-height: 250px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .camera_wrap > div,
  #camera_wrap_1 > div {
    height: 100% !important;
    overflow: hidden !important;
  }

  #camera_wrap_1 .cameraSlide,
  #camera_wrap_1 .camera_src {
    height: 200px !important;
    min-height: 200px !important;
  }

  /* Ensure slider images fill container properly */
  #camera_wrap_1 .cameraSlide img,
  #camera_wrap_1 .camera_src img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
  }

  /* R7-FIX: Target imgLoaded specifically - plugin sets inline width/margin via JS */
  #camera_wrap_1 img.imgLoaded {
    width: 100% !important;
    min-width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    top: 0 !important;
    margin-top: 0 !important;
  }

  .camera_wrap .camera_pag {
    bottom: 5px !important;
  }

  .camera_wrap .camera_caption {
    font-size: 14px !important;
    padding: 8px !important;
  }

  /* ========================================
     HERO STATS BAR
     ======================================== */

  #hero-stats > div {
    gap: 15px !important;
    flex-wrap: wrap !important;
    padding: 15px 10px !important;
  }

  #hero-stats > div > div {
    min-width: 40% !important;
    flex: 0 0 45% !important;
  }

  #hero-stats .hero-counter {
    font-size: 28px !important;
  }

  /* ========================================
     ABOUT LINE WIDE - Updates title bar (CRITICAL)
     ======================================== */

  .aboutlineWide {
    min-width: unset !important;
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    background-image: none !important;
    background-color: transparent;
    text-align: center !important;
  }

  .gradient6 {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    text-align: center !important;
    padding: 8px 15px !important;
    box-sizing: border-box;
  }

  .gradient6 h2 {
    font-size: 18px !important;
    text-align: center !important;
  }

  .gradient6 h2 span {
    display: none !important;
  }

  /* ========================================
     HOMEPAGE - Vision/About Section
     ======================================== */

  /* The vision text divs with 600px width from aboutlineWide area */
  .frameBg .aboutlineWide ~ div,
  .frameBg td > div[style] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ========================================
     FORMS
     ======================================== */

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Contact form table - keep 2-column layout so labels stay above their inputs */
  /* FIX 3: Override generic block display for contact form tables */
  .frameBg form table {
    width: 100% !important;
    table-layout: fixed !important;
  }

  .frameBg form table tbody,
  .frameBg form table tr {
    display: table-row !important;
    width: 100% !important;
  }

  .frameBg form table td {
    display: table-cell !important;
    width: 50% !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
  }

  #contact_form,
  .contact-form,
  form[name="contact"] {
    width: 100% !important;
    padding: 15px !important;
    box-sizing: border-box;
  }

  /* ========================================
     BUTTONS
     ======================================== */

  .myButtonBlue,
  .myButtonGreen,
  .myButtonRed {
    font-size: 18px !important;
    padding: 12px 20px !important;
    margin-top: 15px !important;
    display: block !important;
    text-align: center;
    width: auto !important;
    box-sizing: border-box;
  }

  /* ========================================
     CONTENT AREAS
     ======================================== */

  .text {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Inner tables in content - make responsive */
  .frameBg td > table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .frameBg td > table td {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* ========================================
     HOMEPAGE - Hero CTA Section
     ======================================== */

  div[style*="border-radius: 16px"][style*="max-width: 800px"] {
    padding: 20px 15px !important;
    margin: 20px 10px !important;
  }

  div[style*="border-radius: 16px"] div[style*="display: flex"][style*="gap: 15px"] {
    flex-direction: column !important;
    align-items: center !important;
  }

  div[style*="border-radius: 16px"] div[style*="display: flex"][style*="gap: 15px"] a {
    width: 80% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* ========================================
     HOMEPAGE - Service Cards
     ======================================== */

  div[style*="display: flex"][style*="max-width: 860px"] {
    gap: 10px !important;
    padding: 0 10px !important;
    flex-wrap: wrap !important;
  }

  div[style*="display: flex"][style*="max-width: 860px"] > a {
    min-width: 140px !important;
    max-width: 48% !important;
    flex: 0 0 46% !important;
    padding: 15px 10px !important;
  }

  /* ========================================
     HOMEPAGE - Login/Updates Two-Column
     ======================================== */

  td[style*="width:570px"] {
    width: 100% !important;
  }

  /* Login/register buttons */
  td > a > img#menuImg,
  td > a > img#registerImg {
    display: block !important;
    margin: 10px auto !important;
    max-width: 250px !important;
  }

  /* FIX 4: Updates section - show ALL content, no internal scroll */
  div[style*="overflow-y: scroll"][style*="height:460px"],
  div[style*="overflow-y:scroll"][style*="height:460px"],
  div[style*="overflow-y: scroll"][style*="height: 460px"],
  div[style*="overflow-y:scroll"][style*="height: 460px"] {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* Updates inner table - stack image + text (high specificity to override FB buttons rule) */
  div[style*="overflow-y: scroll"] table,
  div[style*="overflow-y: scroll"] table tbody,
  div[style*="overflow-y: scroll"] table tr,
  div[style*="overflow-y:scroll"] table,
  div[style*="overflow-y:scroll"] table tbody,
  div[style*="overflow-y:scroll"] table tr {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }

  .frameBg div[style*="overflow-y"] table td,
  .frameBg div[style*="overflow-y"] table[style*="float"] td {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  div[style*="overflow-y"] table td img {
    max-width: 120px !important;
    height: auto !important;
    display: block;
    margin: 8px auto;
  }

  /* Email/phone contact block */
  div[style*="width:250px"][style*="float:right"] {
    float: none !important;
    width: 100% !important;
    margin: 15px auto !important;
    margin-top: 15px !important;
    text-align: center !important;
  }

  /* Contact block images (email/phone icons) */
  div[style*="width:250px"] img {
    max-width: 220px !important;
    height: auto !important;
    display: block;
    margin: 8px auto;
  }

  /* "Next group" promo table */
  table[style*="width:200px"][dir="rtl"] {
    margin: 15px auto !important;
    width: 90% !important;
    max-width: 300px !important;
  }

  table[style*="width:200px"][dir="rtl"] img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Facebook group/page buttons table */
  .frameBg td > table[style*="float:right"] {
    float: none !important;
    width: auto !important;
    margin: 15px auto !important;
  }

  .frameBg td > table[style*="float:right"] td {
    display: inline-block !important;
    width: auto !important;
    padding: 5px !important;
  }

  .frameBg td > table[style*="float:right"] img {
    max-width: 140px !important;
    height: auto !important;
  }

  /* ========================================
     HOMEPAGE - FAQ Section
     ======================================== */

  #faq {
    padding: 15px 12px !important;
    margin: 20px 10px !important;
  }

  #faq h3 {
    font-size: 16px !important;
  }

  /* ========================================
     HOMEPAGE - Internal Links Section
     ======================================== */

  section[style*="max-width: 900px"][style*="border-radius: 10px"] {
    margin: 20px 10px !important;
    padding: 15px 10px !important;
  }

  section[style*="max-width: 900px"][style*="border-radius: 10px"] a {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* ========================================
     FOOTER - Old table-based footer
     ======================================== */

  .bottomFrameBg table {
    width: 100% !important;
  }

  .bottomFrameBg table td {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  .bottomFrameBg td[style*="width:700px"] {
    width: 100% !important;
  }

  .bottomFrameBg div[style*="float:left"],
  .bottomFrameBg div[style*="float:right"] {
    float: none !important;
    margin: 10px auto !important;
    text-align: center !important;
  }

  .bottomFrameBg a.lst {
    display: inline-block;
    padding: 4px 6px;
    line-height: 2;
  }

  /* New footer legal section */
  footer[style*="max-width: 900px"] {
    margin: 20px 10px 80px !important;
  }

  /* ========================================
     SOCIAL CHAT WIDGETS - Mobile positioning
     ======================================== */

  /* Don't auto-open WhatsApp popup on mobile */
  .wa-chat-popup.open {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* But allow manual open to still work */
  .wa-chat-popup.open.user-opened {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* All chat popups - smaller on mobile */
  .wa-chat-popup,
  .msg-chat-popup,
  .ig-chat-popup,
  .tt-chat-popup {
    width: calc(100vw - 30px) !important;
    max-width: 325px !important;
    bottom: 70px !important;
    left: 15px !important;
    right: auto !important;
  }

  /* FIX 5: Social floating buttons - stack vertically in bottom-right */
  .wa-floating-btn,
  .msg-floating-btn,
  .ig-floating-btn,
  .tt-floating-btn {
    width: 44px !important;
    height: 44px !important;
    right: 8px !important;
    left: auto !important;
  }

  .wa-floating-btn {
    bottom: 15px !important;
  }

  .msg-floating-btn {
    bottom: 65px !important;
  }

  .ig-floating-btn {
    bottom: 115px !important;
  }

  .tt-floating-btn {
    bottom: 165px !important;
  }

  .wa-floating-btn img,
  .msg-floating-btn img,
  .ig-floating-btn img,
  .tt-floating-btn img {
    width: 44px !important;
    height: 44px !important;
  }

  /* Accessibility widget - above social buttons */
  .accessibility-toggle-btn,
  .acc-widget-btn {
    bottom: 10px !important;
    left: 10px !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 9990 !important;
  }

  /* ========================================
     VOXIA POPUP - mobile friendly
     ======================================== */

  .incoming-call-popup {
    width: 90vw !important;
    max-width: 400px !important;
  }

  /* ========================================
     SERVICE PAGES - Grids to single column
     ======================================== */

  .offers-grid,
  .branch-grid,
  .areas-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .method-steps {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .features-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .price-compare,
  .payment-plans,
  .online-branch {
    flex-direction: column !important;
    gap: 15px !important;
  }

  .stats-bar,
  .stats-row {
    flex-wrap: wrap !important;
    gap: 15px !important;
    justify-content: center !important;
  }

  .stats-bar > div,
  .stats-row > div {
    min-width: 40% !important;
    flex: 0 0 45% !important;
  }

  .comparison-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 13px !important;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 8px 6px !important;
    white-space: nowrap;
  }

  .faq-item {
    padding: 12px !important;
  }

  .faq-item h3,
  .faq-question {
    font-size: 16px !important;
  }

  .steps-container {
    gap: 15px !important;
  }

  .steps-container > div,
  .step-card {
    padding: 15px !important;
  }

}

/* ==========================================================================
   3. MOBILE BREAKPOINT (480px and below)
   ========================================================================== */

@media (max-width: 480px) {

  /* Even smaller typography */
  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }

  /* Tighter padding */
  .frameBg td:not(.slider-parent-td),
  .frameBgs td {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Slider parent TD - zero padding at 480px too */
  .frameBg td.slider-parent-td {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Hero stats - 2 columns on small screens */
  #hero-stats > div {
    gap: 15px !important;
    padding: 20px 10px !important;
  }

  #hero-stats > div > div {
    min-width: 40% !important;
    flex: 0 0 45%;
  }

  #hero-stats .hero-counter {
    font-size: 24px !important;
  }

  /* Logo - smaller on 480px */
  div[style*="margin-top:-210px"] img[alt*="לוגו"] {
    width: 160px !important;
  }

  /* Green course buttons - R8: bigger on 480px too */
  table[style*="margin-top:-80px"] img,
  table[style*="margin-top: -80px"] img {
    height: 45px !important;
  }

  /* Buttons - full width on small screens */
  .myButtonBlue,
  .myButtonGreen,
  .myButtonRed {
    font-size: 18px !important;
    padding: 10px 16px !important;
    width: 100% !important;
    display: block !important;
  }

  /* Camera slider - keep fixed height on small screens */
  .camera_wrap,
  #camera_wrap_1 {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 200px !important;
    width: 100% !important;
  }

  #camera_wrap_1 .cameraSlide,
  #camera_wrap_1 .camera_src,
  #camera_wrap_1 .cameraSlide img,
  #camera_wrap_1 .camera_src img {
    height: 180px !important;
  }

  /* Review/rate cards */
  .text {
    line-height: 22px !important;
  }

  /* ========================================
     HOMEPAGE - Service Cards (small screens)
     ======================================== */

  /* Service cards - full width on small screens */
  div[style*="display: flex"][style*="max-width: 860px"] > a {
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* CTA buttons - full width on small screens */
  div[style*="border-radius: 16px"] div[style*="display: flex"][style*="gap: 15px"] a {
    width: 100% !important;
  }

  /* Hero CTA heading */
  div[style*="border-radius: 16px"] h3 {
    font-size: 20px !important;
  }

  /* Internal links - 2 per row */
  section[style*="max-width: 900px"][style*="border-radius: 10px"] a {
    flex: 0 0 45% !important;
  }

  /* ========================================
     SERVICE PAGES - Small screen overrides
     ======================================== */

  .features-grid {
    grid-template-columns: 1fr !important;
  }

  .stats-bar > div,
  .stats-row > div {
    min-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .comparison-table {
    font-size: 12px !important;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 6px 4px !important;
  }
}

/* ==========================================================================
   4. DESKTOP (hamburger hidden, ensure no interference)
   ========================================================================== */

@media (min-width: 769px) {
  .mobile-hamburger {
    display: none !important;
  }

  /* Ensure desktop nav is always visible */
  .topMenuRefuaLaam {
    display: block !important;
  }
}

/* ==========================================================================
   5. UTILITY CLASSES
   ========================================================================== */

/* Hide on mobile */
@media (max-width: 768px) {
  .mobile-hide {
    display: none !important;
  }
}

/* Hide on desktop */
@media (min-width: 769px) {
  .desktop-hide {
    display: none !important;
  }
}

/* Full width on mobile */
@media (max-width: 768px) {
  .mobile-full {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* Stack elements on mobile */
@media (max-width: 768px) {
  .mobile-stack {
    display: block !important;
    float: none !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   6. MOBILE OVERRIDES (body.is-mobile) - JS-injected class on real mobile devices
   Uses screen.width detection because viewport=1024 makes @media queries useless
   ========================================================================== */

/* --- Floating widget buttons: smaller + horizontal row --- */
body.is-mobile .wa-floating-btn,
body.is-mobile .msg-floating-btn,
body.is-mobile .ig-floating-btn,
body.is-mobile .tt-floating-btn {
    width: 44px !important;
    height: 44px !important;
    bottom: 12px !important;
}
body.is-mobile .wa-floating-btn svg,
body.is-mobile .msg-floating-btn svg,
body.is-mobile .ig-floating-btn svg,
body.is-mobile .tt-floating-btn svg {
    width: 24px !important;
    height: 24px !important;
}
body.is-mobile .wa-floating-btn { right: 8px !important; }
body.is-mobile .msg-floating-btn { right: 60px !important; }
body.is-mobile .ig-floating-btn { right: 112px !important; }
body.is-mobile .tt-floating-btn { right: 164px !important; }

/* --- Widget chat popups: full-width on mobile --- */
body.is-mobile .wa-chat-popup,
body.is-mobile .msg-chat-popup,
body.is-mobile .ig-chat-popup,
body.is-mobile .tt-chat-popup {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    bottom: 70px !important;
}

/* --- AI chat widget (purple) --- */
body.is-mobile .chat-floating-btn {
    width: 44px !important;
    height: 44px !important;
    bottom: 12px !important;
    right: 216px !important;
}
body.is-mobile .chat-popup-container {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    bottom: 70px !important;
    max-height: 70vh !important;
}

/* --- Accessibility widget button --- */
body.is-mobile .accessibility-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    bottom: 65px !important;
    right: 8px !important;
}

/* --- Old header logo: cancel negative margin --- */
body.is-mobile div[style*="margin-top:-210px"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
body.is-mobile div[style*="margin-top:-210px"] img {
    width: 160px !important;
    max-width: 45vw !important;
}
body.is-mobile .topMenuRefuaLaam {
    margin-top: 0 !important;
}

/* --- Old header course buttons table --- */
body.is-mobile table[style*="margin-top:-80px"] {
    margin-top: 0 !important;
}

/* --- Hamburger menu button (for mobile AND narrow nav overflow) --- */
body.is-mobile .mobile-hamburger,
body.is-narrow-nav .mobile-hamburger {
    display: block !important;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    background: #222;
    border: none;
    border-radius: 5px;
    padding: 10px 12px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
body.is-mobile .mobile-hamburger span,
body.is-narrow-nav .mobile-hamburger span {
    display: block;
    width: 24px;
    height: 3px;
    background: #fff;
    margin: 4px 0;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}
body.is-mobile .mobile-hamburger.active span:nth-child(1),
body.is-narrow-nav .mobile-hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
body.is-mobile .mobile-hamburger.active span:nth-child(2),
body.is-narrow-nav .mobile-hamburger.active span:nth-child(2) {
    opacity: 0;
}
body.is-mobile .mobile-hamburger.active span:nth-child(3),
body.is-narrow-nav .mobile-hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* --- Hide nav-links when narrow (hamburger replaces inline nav) --- */
body.is-narrow-nav .nav-links {
    display: none !important;
}

/* --- Also hide top-panel items that overflow at 1024px --- */
body.is-narrow-nav .top-panel {
    overflow: visible !important;
}
body.is-narrow-nav .top-panel-inner {
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* --- Mobile nav overlay (nav-links fullscreen) --- */
body.is-mobile .nav-links.mobile-open,
body.is-narrow-nav .nav-links.mobile-open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9998 !important;
    background: rgba(34,34,34,0.97) !important;
    padding-top: 60px !important;
    align-items: center !important;
    overflow-y: auto !important;
    list-style: none !important;
}
body.is-mobile .nav-links.mobile-open li,
body.is-narrow-nav .nav-links.mobile-open li {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
body.is-mobile .nav-links.mobile-open .nav-link,
body.is-narrow-nav .nav-links.mobile-open .nav-link {
    white-space: normal !important;
    font-size: 18px !important;
    padding: 16px 20px !important;
    color: #fff !important;
    display: block !important;
    text-decoration: none !important;
}
body.is-mobile .nav-links.mobile-open .nav-dropdown-menu,
body.is-narrow-nav .nav-links.mobile-open .nav-dropdown-menu {
    display: block !important;
    position: static !important;
    background: rgba(0,0,0,0.3) !important;
    box-shadow: none !important;
}
body.is-mobile .nav-links.mobile-open .nav-dropdown-menu a,
body.is-narrow-nav .nav-links.mobile-open .nav-dropdown-menu a {
    color: #ccc !important;
    padding: 12px 20px !important;
    display: block !important;
    font-size: 16px !important;
}

/* ==========================================================================
   7. PRINT STYLES (bonus - hide nav on print)
   ========================================================================== */

@media print {
  .mobile-hamburger,
  .topMenuRefuaLaam,
  .accessibility-toggle-btn,
  .incoming-call-popup {
    display: none !important;
  }
}

/* ==========================================================================
   8. MOBILE VIEWPORT SWAP - html.is-mobile rules
   When viewport is swapped to device-width on mobile, CSS values work at face value.
   ========================================================================== */

/* RTL overflow fix */
html.is-mobile,
html.is-mobile body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* --- Floating widgets (44px = actual 44px with proper viewport) --- */
html.is-mobile .wa-floating-btn,
html.is-mobile .msg-floating-btn,
html.is-mobile .ig-floating-btn,
html.is-mobile .tt-floating-btn {
    width: 44px !important;
    height: 44px !important;
    bottom: 12px !important;
}
html.is-mobile .wa-floating-btn svg,
html.is-mobile .msg-floating-btn svg,
html.is-mobile .ig-floating-btn svg,
html.is-mobile .tt-floating-btn svg {
    width: 24px !important;
    height: 24px !important;
}
html.is-mobile .wa-floating-btn { right: 8px !important; }
html.is-mobile .msg-floating-btn { right: 60px !important; }
html.is-mobile .ig-floating-btn { right: 112px !important; }
html.is-mobile .tt-floating-btn { right: 164px !important; }
html.is-mobile .wa-chat-popup,
html.is-mobile .msg-chat-popup,
html.is-mobile .ig-chat-popup,
html.is-mobile .tt-chat-popup {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    bottom: 70px !important;
}

/* --- Old header logo (margin-top:-210px) --- */
html.is-mobile div[style*="margin-top:-210px"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
html.is-mobile div[style*="margin-top:-210px"] img {
    width: 160px !important;
    max-width: 45vw !important;
}
html.is-mobile .topMenuRefuaLaam {
    margin-top: 0 !important;
}

/* --- New header (contact.html design_preview) --- */
html.is-mobile .logo-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
html.is-mobile .logo-img {
    height: 80px !important;
}
html.is-mobile .nav-links {
    display: none !important;
}
html.is-mobile .nav-links.mobile-open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9998 !important;
    background: rgba(34,34,34,0.97) !important;
    padding-top: 60px !important;
    align-items: center !important;
}
html.is-mobile .nav-links.mobile-open .nav-link {
    white-space: normal !important;
    font-size: 18px !important;
    padding: 16px 20px !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    width: 100%;
    text-align: center;
}

/* --- Homepage (combined_base.html) mobile overrides --- */
html.is-mobile .top-panel-inner {
    padding-right: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
}
html.is-mobile .top-panel-link {
    font-size: 0.85rem !important;
    padding: 10px 8px !important;
}
html.is-mobile .top-panel {
    padding: 4px 0 !important;
}
html.is-mobile .navbar-inner {
    max-width: 100% !important;
    padding: 0 8px !important;
}
html.is-mobile .logo-img {
    height: 60px !important;
}
html.is-mobile .logo-wrapper {
    margin-top: -20px !important;
    margin-bottom: -20px !important;
    margin-right: 0 !important;
}
html.is-mobile .hero h1 {
    font-size: 1.6rem !important;
    white-space: normal !important;
    transform: none !important;
    padding: 0 10px !important;
}
html.is-mobile .hero-content {
    max-width: 100% !important;
    padding: 20px 10px 10px 10px !important;
    margin-top: -20px !important;
}
html.is-mobile .hero-subtitle {
    font-size: 1rem !important;
}
html.is-mobile .hero-cta-group {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
}
html.is-mobile .hero-cta-group .btn {
    width: 90% !important;
    font-size: 1rem !important;
}
html.is-mobile .section-title {
    font-size: 1.5rem !important;
}
html.is-mobile .container,
html.is-mobile .section-content {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}