/* Donuts Master - Shared Mobile Navigation */

.dm-mobile-nav,
.dm-mobile-more,
.dm-mobile-overlay {
  display: none;
}

@media (max-width: 600px) {

  /* Hide existing desktop navigation */
  .home-header,
  .header {
    display: none !important;
  }

  body {
    padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
  }

  .dm-mobile-nav {
    position: fixed;
    z-index: 9999;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    left: 8px;
    right: 8px;
    bottom: calc(6px + env(safe-area-inset-bottom));
    padding: 5px;
    background: rgba(255,255,255,.98);
    border: 1px solid #dce9f2;
    border-radius: 17px;
    box-shadow: 0 4px 18px rgba(14,107,168,.15);
    direction: rtl;
    transition: transform .25s ease, opacity .25s ease;
  }

  .dm-mobile-nav a,
  .dm-mobile-nav button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    min-width: 0;
    min-height: 49px;
    margin: 0;
    padding: 5px 2px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #64748b;
    font-family: 'Tajawal', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
  }

  .dm-mobile-nav svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  .dm-mobile-nav .active {
    background: #e5f5ff;
    color: #0e6ba8;
  }

  .dm-mobile-nav.dm-nav-hidden {
    transform: translateY(calc(100% + 25px + env(safe-area-inset-bottom)));
    opacity: 0;
    pointer-events: none;
  }

  .dm-mobile-more:not([hidden]) {
    position: fixed;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    left: 8px;
    right: 8px;
    bottom: calc(74px + env(safe-area-inset-bottom));
    padding: 9px;
    background: #fff;
    border: 1px solid #dce9f2;
    border-radius: 15px;
    box-shadow: 0 7px 25px rgba(14,107,168,.17);
  }

  .dm-mobile-more a {
    padding: 12px 14px;
    color: #0e6ba8;
    font-family: 'Tajawal', Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid #edf3f8;
  }

  .dm-mobile-more a:last-child {
    border-bottom: 0;
  }

  .dm-mobile-more a.active {
    background: #e5f5ff;
    border-radius: 9px;
  }

  .dm-mobile-overlay:not([hidden]) {
    position: fixed;
    display: block;
    inset: 0;
    z-index: 9997;
    background: rgba(15,35,55,.15);
  }

  .dm-mobile-nav a:focus-visible,
  .dm-mobile-nav button:focus-visible,
  .dm-mobile-more a:focus-visible {
    outline: 2px solid #23a6f0;
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm-mobile-nav {
    transition: none !important;
  }
}

/* Red Offers Icon - Donuts Master */

@media (max-width: 600px) {

  .dm-mobile-nav a[href="/offers.html"] svg {
    stroke: #E53935 !important;
  }

  /* Keep the icon red when Offers is active */
  .dm-mobile-nav a[href="/offers.html"].active svg {
    stroke: #E53935 !important;
  }

}

/* Donuts Master - Hide Top Menu on Mobile */

@media screen and (max-width: 767px) {

  /* Hide desktop header and navigation */
  body .home-header,
  body .header,
  body header.header,
  body .home-main-nav,
  body .header .nav,
  body .desktop-nav,
  body .top-navigation,
  body .main-navigation,
  body .desktop-menu {
    display: none !important;
  }

  /* Keep floating bottom navigation */
  body .dm-mobile-nav {
    display: grid !important;
  }

  /* Ensure additional links appear only when opened */
  body .dm-mobile-more[hidden],
  body .dm-mobile-overlay[hidden] {
    display: none !important;
  }
}

/* ==========================================
   DONUTS MASTER - COLORS UPDATE
   ========================================== */

/* Menu icon - Brand Blue */
.dm-mobile-nav a[href$="menu.html"] svg,
.dm-mobile-nav a[href$="menu.html"] i {
  color: #23A6F0 !important;
  stroke: #23A6F0 !important;
}

/* Menu SVG icon lines */
.dm-mobile-nav a[href$="menu.html"] svg * {
  stroke: #23A6F0 !important;
}

/* Product Prices + SAR Currency - Red */
.item .price,
.item .price small,
.item .price span,
.menu-row-price,
.menu-row-price small,
.menu-row-price span {
  color: #E53935 !important;
}

/* ==========================================
   DONUTS MASTER
   ALWAYS BLUE MENU ICON
========================================== */

@media screen and (max-width: 600px) {

  /* Menu icon always blue */
  html body .dm-mobile-nav a[href="/menu.html"] svg,
  html body .dm-mobile-nav a[data-page="/menu.html"] svg {
    color: #55C4E8 !important;
    stroke: #55C4E8 !important;
  }

  /* Keep all SVG lines permanently blue */
  html body .dm-mobile-nav a[href="/menu.html"] svg *,
  html body .dm-mobile-nav a[data-page="/menu.html"] svg * {
    stroke: #55C4E8 !important;
  }
}