/**************************************************************
   responsive.css — breakpoints & mobile behaviors
   Brand colors are defined in style.css (vars)
   Comments in EN only
   Version 1.6
   What changed in 1.6:
   - Kept main-nav dropdowns stacked on mobile but excluded
     .notif-dropdown/.notif-action-menu from that dark style.
   - Notification dropdown stays centered on mobile; inner menus
     keep proper stacking and rounded-corner clipping.
   - Minor RTL and container refinements.
***************************************************************/

/* ========== Responsive Layouts ========== */
/* Desktops below XL (≤ 1199.98px) */
@media (max-width: 1199.98px) {
  .container { padding-inline: 20px; }
  .navbar-brand img { height: 45px; }
}

/* Tablets and small laptops (≤ 991.98px) */
@media (max-width: 991.98px) {
  /* Navbar stacking */
  .navbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  [dir="rtl"] .navbar { align-items: flex-end; }
  .navbar-toggler { margin-inline-start: auto; }
  .navbar-collapse { width: 100%; }
  .navbar-nav {
    width: 100%;
    padding: 0.5rem 1rem;
  }
  .navbar-nav .nav-item,
  .navbar-nav .nav-link { width: 100%; }
  .navbar-nav .nav-link {
    display: block;
    padding: 0.5rem 1rem;
    text-align: start;
    min-height: 44px; /* touch target */
  }
  [dir="rtl"] .navbar-nav .nav-link { text-align: end; }

  /* Dropdowns: stacked for MAIN NAV ONLY (notif menus excluded) */
  #mainNavbar .dropdown-menu:not(.notif-dropdown):not(.notif-action-menu) {
    position: static !important;
    float: none;
    background-color: var(--color-primary);
    box-shadow: none;
    margin: 0;
    border-radius: 0;
    width: 100%;
    display: none; /* hidden by default */
    transition: max-height 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
  }
  #mainNavbar .dropdown-menu:not(.notif-dropdown):not(.notif-action-menu).show {
    display: block !important; /* visible when .show */
    max-height: 100vh;
  }

  /* Nested submenus */
  #mainNavbar .dropdown-submenu > .dropdown-menu:not(.notif-dropdown):not(.notif-action-menu) {
    position: static !important;
    display: none;
    width: 100%;
    background-color: var(--color-primary);
    margin: 0;
    border-radius: 0;
    transition: max-height 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
  }
  #mainNavbar .dropdown-submenu.show > .dropdown-menu:not(.notif-dropdown):not(.notif-action-menu) {
    display: block;
    max-height: 100vh;
  }

  /* Disable hover reveal on mobile — SCOPE TO #mainNavbar ONLY */
  #mainNavbar .dropdown:hover > .dropdown-menu:not(.show):not(.notif-dropdown):not(.notif-action-menu),
  #mainNavbar .dropdown-submenu:hover > .dropdown-menu:not(.show):not(.notif-dropdown):not(.notif-action-menu) {
    display: none !important;
  }

  /* Notifications dropdown: ensure it opens & centers on mobile */
  .navbar .dropdown.show > .notif-dropdown {
    display: block !important;
    position: absolute;
    top: calc(100% + .125rem);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 95vw;
    max-width: 380px;
    overflow: visible !important; /* so kebab menus can escape if needed */
  }
  [dir="rtl"] .navbar .dropdown.show > .notif-dropdown {
    left: auto;
    right: 50%;
    transform: translateX(50%);
  }

  /* Ensure notification inner scroll is comfortable */
  .notif-scroll {
    overflow: auto;
    max-height: 60vh;
  }

  /* Cards and buttons */
  .card { margin-bottom: 1.5rem; }

  /* Do not force all buttons full-width; opt-in only */
  .btn { width: auto; } /* reset */
  .btn-block,
  .btn.responsive-block { width: 100%; }

  .navbar-brand img { height: 40px; }
}

/* Mobile landscape (≤ 767.98px) */
@media (max-width: 767.98px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  .card { padding: 15px; }
  input, textarea, select {
    font-size: 16px; /* avoid iOS zoom; keep 16px+ */
    text-align: start;
  }
  [dir="rtl"] input,
  [dir="rtl"] textarea,
  [dir="rtl"] select { text-align: end; }
  .navbar-brand img { height: 35px; }

  .swiper-slide .slider-title { font-size: 1.5rem; }
  .swiper-slide .slider-subtitle { font-size: 1rem; }
  .highlight-brand { font-size: 1.1rem; }

  .material-symbols-outlined,
  .fas { font-size: 1.25rem; }

  .contact-form .form-control,
  .contact-form .form-select,
  .contact-form textarea {
    font-size: 16px;
    min-height: 42px;
  }
  .contact-form textarea.form-control { min-height: 100px; }

  #backToTop {
    width: 60px;
    height: 100px;
    bottom: 20px;
    right: 20px;
  }
  #batteryIcon { width: 100%; height: 100%; }

  .btn,
  button.btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.95rem;
    border-radius: 6px;
  }
  .btn-lg { padding: 0.7rem 1.1rem; font-size: 1rem; }
  .btn-sm { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
  .btn-icon { width: 2.25rem; height: 2.25rem; }
}

/* Mobile portrait (≤ 575.98px) */
@media (max-width: 575.98px) {
  .container { padding-inline: 10px; }

  .table-stack,
  .table-stack thead,
  .table-stack tbody,
  .table-stack th,
  .table-stack td,
  .table-stack tr { display: block; }
  .table-stack th {
    position: absolute;
    top: -9999px;
    inset-inline-start: -9999px;
  }
  .table-stack td {
    position: relative;
    padding-inline-start: 50%;
    border: none;
    border-bottom: 1px solid #ddd;
    text-align: start;
  }
  [dir="rtl"] .table-stack td {
    text-align: end;
    padding-inline-start: 0;
    padding-inline-end: 50%;
  }
  .table-stack td::before {
    position: absolute;
    top: 0;
    inset-inline-start: 10px;
    width: 45%;
    padding-inline-end: 10px;
    white-space: nowrap;
    font-weight: bold;
    color: #666;
    content: attr(data-label);
    text-align: start;
  }
  [dir="rtl"] .table-stack td::before {
    text-align: end;
    inset-inline-start: auto;
    inset-inline-end: 10px;
    padding-inline-end: 0;
    padding-inline-start: 10px;
  }

  .navbar-brand img { height: 30px; }

  .swiper-button-prev,
  .swiper-button-next { width: 32px; height: 32px; }

  .banner-content h2,
  .banner-content h3 { font-size: 1rem; }
  .banner-content { padding: 1rem; }

  .btn,
  button.btn {
    padding: 0.45rem 0.8rem;
    font-size: 0.9rem;
    border-radius: 6px;
  }
  .btn-lg { padding: 0.6rem 1rem; font-size: 0.95rem; }
  .btn-sm { padding: 0.28rem 0.55rem; font-size: 0.84rem; }
  .btn-icon { width: 2rem; height: 2rem; }
}

/* Utility alignments */
.text-center { text-align: center; }
.text-start { text-align: start; }
.text-end   { text-align: end;   }
[dir="rtl"] .text-start { text-align: right; }
[dir="rtl"] .text-end   { text-align: left;  }

/* Prevent dropdown-on-hover below lg — scoped to #mainNavbar */
@media (max-width: 991.98px) {
  #mainNavbar .dropdown-menu:not(.notif-dropdown):not(.notif-action-menu) { display: none; }
  #mainNavbar .dropdown-menu:not(.notif-dropdown):not(.notif-action-menu).show { display: block !important; }
}

/* ========== RTL fill-screen and centering fixes (site-wide) ========== */
[dir="rtl"] html,
[dir="rtl"] body {
  margin: 0 !important;
  overflow-x: hidden;
  transform: none !important;
  zoom: 1 !important;
}

[dir="rtl"] .container,
[dir="rtl"] .container-sm,
[dir="rtl"] .container-md,
[dir="rtl"] .container-lg,
[dir="rtl"] .container-xl,
[dir="rtl"] .container-xxl,
[dir="rtl"] .container-fluid {
  max-width: 100% !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 16px;
}

[dir="rtl"] .row {
  --bs-gutter-x: var(--bs-gutter-x, 1.5rem);
  margin-inline: calc(-.5 * var(--bs-gutter-x)) !important;
}
[dir="rtl"] .row > * {
  padding-inline: calc(var(--bs-gutter-x) * .5) !important;
}

[dir="rtl"] .section .container:not(.text-center):not([class*="text-"]) {
  text-align: start !important;
}

[dir="rtl"] .navbar .container,
[dir="rtl"] .navbar .container-fluid {
  max-width: 100% !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 16px;
}

[dir="rtl"] .swiper,
[dir="rtl"] .swiper-container { direction: rtl; }
[dir="rtl"] .banner,
[dir="rtl"] .banner-content,
[dir="rtl"] .swiper,
[dir="rtl"] .swiper-container {
  transform: none !important;
}

[dir="rtl"] table { text-align: start; }

/* Reduced motion for nav dropdown transitions */
@media (prefers-reduced-motion: reduce) {
  #mainNavbar .dropdown-menu,
  #mainNavbar .dropdown-submenu > .dropdown-menu {
    transition: none;
  }
}