/* Drawer desktop hide fix */

/* Default: hidden everywhere unless mobile breakpoint enables it */
.mobile-menu-toggle,
.mobile-drawer,
.mobile-drawer-backdrop {
  display: none !important;
}

@media (max-width: 980px) {
  .mobile-menu-toggle {
    display: inline-flex !important;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid var(--line, #ddd);
    border-radius: 12px;
    background: var(--card, #fff);
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    cursor: pointer;
  }

  .mobile-menu-toggle-lines,
  .mobile-menu-toggle-lines::before,
  .mobile-menu-toggle-lines::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--text, #111);
    position: relative;
    content: "";
  }

  .mobile-menu-toggle-lines::before {
    position: absolute;
    top: -6px;
    left: 0;
  }

  .mobile-menu-toggle-lines::after {
    position: absolute;
    top: 6px;
    left: 0;
  }

  .mobile-drawer-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1190;
  }

  .mobile-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-drawer {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(88vw, 650px);
        background: var(--card, #fff);
        border-right: 1px solid var(--line, #ddd);
        box-shadow: 12px 0 32px rgba(0, 0, 0, .18);
        transform: translateX(-102%);
        transition: transform .22s ease;
        z-index: 1200;
        flex-direction: column;
        max-width: 100%;
  }

  .mobile-drawer.is-open {
    transform: translateX(0);
  }

  .mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: max(14px, env(safe-area-inset-top)) 14px 14px 14px;
    border-bottom: 1px solid var(--line, #ddd);
  }

  .mobile-drawer-title {
    font-size: 18px;
    font-weight: 800;
  }

  .mobile-drawer-close {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border: 1px solid var(--line, #ddd);
    background: var(--bg, #f5f5f5);
    border-radius: 10px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-drawer-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .mobile-drawer-block {
    border: 1px solid var(--line, #ddd);
    border-radius: 16px;
    background: var(--bg, #f8f8f8);
    overflow: hidden;
  }

  .mobile-drawer-block-title {
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 800;
    border-bottom: 1px solid var(--line, #ddd);
    background: rgba(0,0,0,.02);
  }

  .mobile-drawer-block-content {
    padding: 12px 14px;
        /* display: flex;*/
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    line-height: 1.35;
  }

  .mobile-drawer-link {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text, #111);
    background: var(--card, #fff);
    border: 1px solid var(--line, #ddd);
    font-weight: 700;
  }

  body.mobile-drawer-open {
    overflow: hidden;
  }
}

/* Prettier mobile navigation drawer */
@media (max-width: 980px) {
  .mobile-drawer-backdrop {
    background: radial-gradient(circle at 20% 20%, rgba(59,130,246,.25), transparent 35%), rgba(2,6,23,.62) !important;
    backdrop-filter: blur(6px);
  }
  .mobile-drawer {
    width: min(92vw, 430px) !important;
    border-right: 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 44%, #eef4ff 100%) !important;
    box-shadow: 24px 0 70px rgba(15,23,42,.32) !important;
    border-radius: 0 26px 26px 0;
    overflow: hidden;
  }
  .mobile-drawer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 150px;
    background: linear-gradient(135deg, rgba(37,99,235,.20), rgba(168,85,247,.16), rgba(14,165,233,.12));
    pointer-events: none;
  }
  .mobile-drawer-header {
    position: relative;
    padding: calc(18px + env(safe-area-inset-top)) 18px 18px !important;
    border-bottom: 1px solid rgba(15,23,42,.08) !important;
    background: transparent !important;
  }
  .mobile-drawer-title {
    font-size: 23px !important;
    font-weight: 1000 !important;
    letter-spacing: -.03em;
    color: #0f172a;
  }
  .mobile-drawer-close {
    background: #0f172a !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.22);
  }
  .mobile-drawer-scroll {
    position: relative;
    padding: 16px !important;
    gap: 16px !important;
  }
  .mobile-drawer-block {
    border: 1px solid rgba(15,23,42,.09) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.86) !important;
    box-shadow: 0 16px 38px rgba(15,23,42,.10) !important;
    backdrop-filter: blur(10px);
  }
  .mobile-drawer-block-title {
    padding: 14px 16px !important;
    font-size: 13px !important;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(255,255,255,.45)) !important;
    border-bottom: 1px solid rgba(15,23,42,.07) !important;
  }
  .mobile-drawer-block-content { padding: 12px !important; gap: 10px !important; }
  .mobile-drawer-link {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    color: #0f172a !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.06);
    font-size: 15px;
    font-weight: 900 !important;
  }
  .mobile-drawer-link:hover,
  .mobile-drawer-link:focus {
    transform: translateX(3px);
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    color: #fff !important;
  }
  .mobile-menu-toggle {
    background: linear-gradient(135deg, #111827, #2563eb) !important;
    border: 0 !important;
    box-shadow: 0 10px 24px rgba(37,99,235,.22);
  }
  .mobile-menu-toggle-lines,
  .mobile-menu-toggle-lines::before,
  .mobile-menu-toggle-lines::after { background: #fff !important; }
}


/* polished mobile drawer */
@media (max-width: 980px) {
  .mobile-drawer-backdrop { backdrop-filter: blur(7px); background: rgba(15,23,42,.46); }
  .mobile-drawer { width: min(88vw, 390px); border-radius: 0 28px 28px 0; background: linear-gradient(160deg, #0f172a 0%, #111827 45%, #1d4ed8 135%); color: #fff; box-shadow: 18px 0 60px rgba(2,6,23,.45); border-right: 1px solid rgba(255,255,255,.16); overflow: hidden; }
  .mobile-drawer-header { padding: 18px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.13); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02)); }
  .mobile-drawer-title { font-size: 20px; font-weight: 1000; letter-spacing: -.02em; }
  .mobile-drawer-close { width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.18); font-size: 25px; }
  .mobile-drawer-scroll { padding: 14px; gap: 14px; }
  .mobile-drawer-block { border: 1px solid rgba(255,255,255,.13); border-radius: 22px; background: rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 28px rgba(0,0,0,.18);         overflow: clip; }
  .mobile-drawer-block-title { padding: 12px 14px; font-size: 12px; font-weight: 1000; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.72); border-bottom: 1px solid rgba(255,255,255,.11); }
  .mobile-drawer-block-content { padding: 10px; color: rgba(255,255,255,.82); }
  .mobile-drawer-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; margin: 4px 0; border-radius: 16px;         color: #000000 !important; text-decoration: none; font-weight: 900; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
  .mobile-drawer-link:hover { background: rgba(255,255,255,.18); transform: translateX(2px); }
  .mobile-drawer-link::before { content: '●'; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); color: #93c5fd; font-size: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
}

/* === Mobile drawer scroll repair built from includes (11).zip === */
@media (max-width: 980px) {
  .mobile-drawer {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .mobile-drawer-header { flex: 0 0 auto !important; }
  .mobile-drawer-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }
  .mobile-drawer-block:last-child { margin-bottom: 28px; }
  body.mobile-drawer-open { overflow: hidden !important; }
}


/* === Robust mobile drawer scrolling + safe-area repair === */
@media (max-width: 980px) {
  html.mobile-drawer-open,
  body.mobile-drawer-open {
    overflow: hidden !important;
    height: 100% !important;
  }

  .mobile-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: auto !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  .mobile-drawer-header {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 3 !important;
  }

  .mobile-drawer-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important;
    scrollbar-gutter: stable both-edges;
  }

  .mobile-drawer-scroll::after {
    content: '';
    display: block;
    min-height: 44px;
    flex: 0 0 44px;
  }

  .mobile-drawer-block:last-child {
    margin-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
  }
}

/* Edge-to-edge scrollable mobile drawer repair */
@media (max-width: 980px) {
  html.mobile-drawer-open,
  body.mobile-drawer-open { overflow: hidden !important; height: 100dvh; }
  .mobile-drawer {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(100vw, 440px) !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  .mobile-drawer.is-open { transform: translateX(0) !important; }
  .mobile-drawer-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mobile-drawer-custom-block {
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
  }
  .mobile-drawer-announcement { line-height: 1.4; color: rgba(255,255,255,.82); }
}

/* Final drawer overflow repair: full-width, edge-to-edge, vertically scrollable */
@media (max-width: 980px) {
  html.mobile-drawer-open,
  body.mobile-drawer-open { overflow: hidden !important; width: 100% !important; height: 100dvh !important; position: fixed !important; inset: 0 !important; }
  .mobile-drawer-backdrop.is-open { display: block !important; opacity: 1 !important; pointer-events: auto !important; }
  .mobile-drawer { display: flex !important; position: fixed !important; inset: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; transform: translateX(-102%) !important; flex-direction: column !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; }
  .mobile-drawer.is-open { transform: translateX(0) !important; }
  .mobile-drawer-header { flex: 0 0 auto !important; padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important; }
  .mobile-drawer-scroll { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: contain !important; padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box !important; }
  .mobile-drawer-scroll > * { max-width: 100% !important; }
}