/*
  Deutsch Go Premium Mobile Menu — Scoped Fix
  Applies only to the EasyOrders mobile navigation drawer.
  Does not affect cart, add-to-cart, search, or other Headless UI dialogs.
*/

/* =========================================
   DEUTSCH GO — PREMIUM MOBILE MENU
========================================= */

@media (max-width:1023px){
/* Dialog */
  #headlessui-portal-root [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col){
    z-index:999999 !important;
    align-items:stretch !important;
    direction:rtl;
  }

  /* Background overlay */
  #headlessui-portal-root [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col) > div:first-child{
    background:
      radial-gradient(
        circle at 82% 12%,
        rgba(244,197,66,.13),
        transparent 27%
      ),
      rgba(3,17,24,.76) !important;

    opacity:1 !important;
    backdrop-filter:blur(9px) saturate(115%);
    -webkit-backdrop-filter:blur(9px) saturate(115%);
  }

  /* Main drawer */
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  > div.relative{
    position:relative !important;

    width:min(88vw,390px) !important;
    max-width:none !important;
    height:100svh !important;
    min-height:100vh;

    margin-right:0 !important;
    margin-left:auto !important;
    padding:0 18px 34px !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    border-left:1px solid rgba(244,197,66,.23);
    border-radius:28px 0 0 28px;

    background:
      radial-gradient(
        circle at 88% 3%,
        rgba(244,197,66,.16),
        transparent 24%
      ),
      radial-gradient(
        circle at 15% 78%,
        rgba(28,93,112,.22),
        transparent 34%
      ),
      linear-gradient(
        165deg,
        #123b4a 0%,
        #081f28 48%,
        #061820 100%
      ) !important;

    color:#f7f5ef !important;

    box-shadow:
      -24px 0 70px rgba(0,0,0,.38),
      inset 1px 0 rgba(255,255,255,.05) !important;

    scrollbar-width:thin;
    scrollbar-color:#f4c542 transparent;

    isolation:isolate;
  }

  /* Brand wordmark */
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  > div.relative::before{
    content:"Deutsch Go";
    display:flex;
    align-items:center;

    position:relative;
    z-index:2;

    width:max-content;
    max-width:calc(100% - 62px);
    height:92px;
    padding:20px 6px 12px 40px;

    font-family:inherit;
    font-size:24px;
    font-weight:900;
    line-height:1;
    letter-spacing:-.04em;
    direction:ltr;
    text-align:left;
    white-space:nowrap;

    border-bottom:1px solid rgba(255,255,255,.09);

    background:linear-gradient(
      90deg,
      #f7f5ef 0 72%,
      #f4c542 72% 100%
    );
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }

  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  > div.relative::after{
    content:"";

    position:absolute;
    z-index:-1;
    top:-90px;
    right:-90px;

    width:220px;
    height:220px;
    border-radius:50%;

    background:rgba(244,197,66,.12);
    filter:blur(52px);
    pointer-events:none;
  }

  /* Close button container */
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  > div.relative
  > div:first-child{
    position:absolute !important;
    z-index:10;
    top:19px;
    left:18px;

    display:block !important;
    padding:0 !important;
  }

  /* Close button */
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  > div.relative
  > div:first-child
  > button{
    width:48px !important;
    height:48px !important;
    padding:0 !important;

    display:flex !important;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(244,197,66,.28) !important;
    border-radius:16px !important;

    background:rgba(255,255,255,.07) !important;
    color:#f7f5ef !important;

    box-shadow:
      0 10px 28px rgba(0,0,0,.18),
      inset 0 1px rgba(255,255,255,.08);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    transition:
      transform .25s ease,
      background-color .25s ease,
      border-color .25s ease;
  }

  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  > div.relative
  > div:first-child
  > button:active{
    transform:scale(.94);
    background:rgba(244,197,66,.16) !important;
  }

  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  > div.relative
  > div:first-child
  > button svg{
    width:22px !important;
    height:22px !important;
    stroke-width:1.8;
  }

  /* Remove original separators */
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  .divide-y{
    border:0 !important;
  }

  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  .divide-y > :not([hidden]) ~ :not([hidden]){
    border:0 !important;
  }

  /* Menu sections */
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  > div.relative
  > .divide-y{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    gap:9px;

    padding:22px 0 12px !important;
  }

  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  > div.relative
  > .divide-y + .divide-y{
    margin-top:10px;
    padding-top:22px !important;

    border-top:1px solid rgba(255,255,255,.09) !important;
  }

  /* Titles */
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  .divide-y > p{
    margin:0 0 8px !important;
    padding:0 5px 9px !important;

    color:rgba(247,245,239,.62) !important;
    font-size:11px !important;
    font-weight:800 !important;
    line-height:1.4;
    letter-spacing:.16em;
    text-transform:uppercase;
  }

  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  .divide-y > p::after{
    content:"";

    display:block;
    width:34px;
    height:3px;
    margin-top:8px;

    border-radius:999px;
    background:#f4c542;
    box-shadow:0 0 16px rgba(244,197,66,.28);
  }

  /* Every link wrapper */
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  .divide-y > div{
    padding:0 !important;
    color:inherit !important;
  }

  /* Links */
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  .divide-y a{
    position:relative;

    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    width:100%;
    min-height:56px;
    padding:13px 15px !important;

    border:1px solid rgba(255,255,255,.075);
    border-radius:17px;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,.075),
        rgba(255,255,255,.025)
      );

    color:#f7f5ef !important;
    font-size:14px;
    font-weight:700 !important;
    line-height:1.35;
    text-decoration:none !important;
    text-align:left;
    direction:ltr;

    box-shadow:
      0 9px 24px rgba(0,0,0,.08),
      inset 0 1px rgba(255,255,255,.04);

    transition:
      transform .24s cubic-bezier(.2,.8,.2,1),
      border-color .24s ease,
      background-color .24s ease,
      box-shadow .24s ease;
  }

  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  .divide-y a::after{
    content:"→";

    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;

    width:30px;
    height:30px;

    border-radius:10px;
    background:rgba(244,197,66,.13);

    color:#f4c542;
    font-size:15px;
    font-weight:900;

    transition:
      transform .24s ease,
      background-color .24s ease;
  }

  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  .divide-y a:active{
    transform:scale(.98);
    border-color:rgba(244,197,66,.35);

    background:
      linear-gradient(
        135deg,
        rgba(244,197,66,.13),
        rgba(255,255,255,.04)
      );
  }

  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  .divide-y a:active::after{
    transform:translateX(3px);
    background:rgba(244,197,66,.22);
  }

  /* Keyboard accessibility */
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  button:focus-visible,
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  a:focus-visible{
    outline:3px solid rgba(244,197,66,.75) !important;
    outline-offset:3px !important;
  }

  /* Bottom visual signature */
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  > div.relative
  > .divide-y:last-child::after{
    content:"GERMAN BOOKS • CLEAR PROGRESS";

    display:block;
    margin-top:24px;
    padding:16px 13px;

    border:1px solid rgba(244,197,66,.16);
    border-radius:16px;

    background:rgba(244,197,66,.055);

    color:rgba(247,245,239,.48);
    font-size:9px;
    font-weight:800;
    letter-spacing:.12em;
    text-align:center;
    direction:ltr;
  }

  /* Scrollbar */
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  > div.relative::-webkit-scrollbar{
    width:5px;
  }

  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  > div.relative::-webkit-scrollbar-track{
    background:transparent;
  }

  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  > div.relative::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:rgba(244,197,66,.45);
  }
}

/* Small phones */
@media (max-width:380px){
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  > div.relative{
    width:91vw !important;
    padding-right:14px !important;
    padding-left:14px !important;
    border-radius:23px 0 0 23px;
  }

  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  .divide-y a{
    min-height:52px;
    padding:11px 13px !important;
    font-size:13px;
  }
}

@media (prefers-reduced-motion:reduce){
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col) *,
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col) *::before,
  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col) *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}

/* =========================================
   MOBILE MENU SCROLL CHAINING FIX
   Keeps scroll inside the menu drawer
========================================= */
@media (max-width:1023px){

  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  > div.relative.max-w-xs.flex-col{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior-y:contain !important;
    overscroll-behavior-x:none !important;
    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch;
  }

  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col){
    overscroll-behavior:contain !important;
  }

  #headlessui-portal-root
  [role="dialog"][aria-modal="true"]:has(> div.relative.max-w-xs.flex-col)
  > div:first-child{
    touch-action:none !important;
  }
}