/* =========================================================
   ArbiCar — Mobile UI layer (<= 980px)
   - Keeps desktop intact
   - Drawer menu + bottom navigation
   ========================================================= */

:root{
  --ac-bar-h: 74px;
  --ac-blur: 14px;
  --ac-bg: rgba(8, 10, 22, .72);
  --ac-panel: rgba(255,255,255,.06);
  --ac-line: rgba(255,255,255,.10);
  --ac-text: rgba(255,255,255,.92);
  --ac-muted: rgba(255,255,255,.66);
}

/* Hide by default on desktop */
.ac-hamburger,
.ac-overlay,
.ac-drawer,
.ac-drawerHelp,
.ac-mobilebar{ display:none; }

.ac-ico{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Drawer & bar activate only on mobile */
@media (max-width: 980px){

  /* Avoid horizontal scrolling */
  html, body{ overflow-x: hidden; }

  /* Space for bottom bar */
  body{ padding-bottom: calc(var(--ac-bar-h) + env(safe-area-inset-bottom)); }

  /* iOS: prevent input zoom */
  input, select, textarea{ font-size: 16px; }

  /* Topbar: завжди зверху і на мобільному */
  .topbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: 10px;
  }
  body:has(.topbar) {
    padding-top: calc(56px + max(10px, env(safe-area-inset-top)));
  }
  .topbar__inner{
    border-radius: 18px;
    padding: 10px 10px;
    gap: 10px;
  }

  /* Hide desktop nav */
  .topbar .nav{ display:none !important; }

  /* Actions: keep Post + Menu */
  .actions{ gap: 10px; }
  .actions a.btn[href*="my-account"]{ display:none; } /* My account: access via drawer & bottom bar */

  /* Hamburger button */
  .ac-hamburger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--ac-line);
    background: var(--ac-panel);
    color: var(--ac-text);
    cursor: pointer;
  }

  /* Overlay */
  .ac-overlay{
    display:block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 80;
  }

  /* Drawer */
  .ac-drawer{
    display:flex;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(420px, 90vw);
    background: rgba(10,12,24,.92);
    backdrop-filter: blur(var(--ac-blur));
    -webkit-backdrop-filter: blur(var(--ac-blur));
    border-left: 1px solid var(--ac-line);
    transform: translateX(102%);
    transition: transform .22s ease;
    z-index: 90;
    flex-direction: column;
  }

  .ac-drawer__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 12px;
    border-bottom: 1px solid var(--ac-line);
  }
  .ac-drawer__brand{
    display:flex;
    align-items:center;
    gap: 10px;
  }
  .ac-drawer__mark{
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #fff;
    background: var(--brand-gradient, linear-gradient(120deg, #3b82f6, #ec4899));
  }
  .ac-drawer__title strong{ display:block; font-size: 14px; }
  .ac-drawer__title span{ display:block; font-size: 12px; color: var(--ac-muted); margin-top: 2px; }

  .ac-drawer__close{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    padding: 0;
    justify-content:center;
  }

  .ac-drawer__body{
    padding: 12px;
    display:grid;
    gap: 12px;
    overflow:auto;
  }

  .ac-drawer__quick{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ac-drawer__quick a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 8px;
    padding: 12px 10px;
    border-radius: 14px;
    border: 1px solid var(--ac-line);
    background: var(--ac-panel);
    color: var(--ac-text);
    text-decoration:none;
    font-weight: 650;
  }
  .ac-drawer__quick a.primary{
    background: var(--brand-gradient, linear-gradient(120deg, #3b82f6, #ec4899));
    border-color: rgba(255,255,255,.14);
    color: #fff;
  }

  .ac-drawer__links{
    display:grid;
    gap: 10px;
  }
  .ac-drawer__links a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--ac-line);
    background: var(--ac-panel);
    color: var(--ac-text);
    text-decoration:none;
  }
  .ac-drawer__links a.is-active{
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.12);
  }

  .ac-drawerHelp{
    display: block;
    margin-top: 10px;
    border: 1px solid var(--ac-line);
    border-radius: 14px;
    background: var(--ac-panel);
    overflow: hidden;
  }
  .ac-drawerHelp__trigger{
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border: none;
    background: transparent;
    color: var(--ac-text);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
  }
  .ac-drawerHelp__trigger svg{
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
  }
  .ac-drawerHelp.is-open .ac-drawerHelp__trigger svg{
    transform: rotate(180deg);
  }
  .ac-drawerHelp__menu{
    display: grid;
    gap: 8px;
    padding: 0 10px 10px;
  }
  .ac-drawerHelp__menu[hidden]{
    display: none;
  }
  .ac-drawerHelp__menu a{
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--ac-line);
    background: rgba(5, 11, 26, 0.45);
    color: var(--ac-text);
    text-decoration: none;
    font-size: 0.92rem;
  }

  /* Open state */
  body.ac-menu-open .ac-overlay{
    opacity: 1;
    pointer-events: auto;
  }
  body.ac-menu-open .ac-drawer{
    transform: translateX(0);
  }
  body.ac-menu-open{ overflow:hidden; touch-action:none; }

  /* Bottom bar */
  .ac-mobilebar{
    display:block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom));
    background: var(--ac-bg);
    backdrop-filter: blur(var(--ac-blur));
    -webkit-backdrop-filter: blur(var(--ac-blur));
    border-top: 1px solid var(--ac-line);
  }
  .ac-mobilebar{
    max-width: var(--max, 1180px);
    margin: 0 auto;
    border-radius: 16px 16px 0 0;
  }
  .ac-mobilebar{
    width: calc(100% - 0px);
  }
  .ac-mobilebar{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  .ac-bar-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 14px;
    border: 1px solid var(--ac-line);
    background: rgba(255,255,255,.04);
    color: var(--ac-text);
    text-decoration:none;
    -webkit-tap-highlight-color: transparent;
  }
  .ac-bar-btn span{ font-size: 11px; color: var(--ac-muted); line-height: 1; }
  .ac-bar-btn.is-active{
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.18);
  }


/* --- Arbi assistant: integrate into bottom bar --- */
  .arbiSticker{ display:none !important; } /* prevent overlap with bottom bar/menu */

  /*
   * /my-account & profile edit: restore the floating Arbi (users expect it in the
   * corner). Global rule above hides the sticker on all mobile pages; here we
   * show it above the bottom bar and drop the duplicate “Arbi” tab from the bar.
   */
  body[data-page="user-edit"] .arbiSticker{
    display: flex !important;
    align-items: center;
    justify-content: center;
    bottom: calc(var(--ac-bar-h) + 14px + env(safe-area-inset-bottom, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: 78px;
    height: 78px;
  }
  body[data-page="user-edit"] .ac-mobilebar{
    grid-template-columns: repeat(4, 1fr);
  }
  body[data-page="user-edit"] .ac-mobilebar .ac-bar-btn--arbi{
    display: none !important;
  }

  .ac-arbi-ico{
    width: 26px;
    height: 26px;
    border-radius: 10px;
    display: block;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 10px 26px rgba(0,0,0,.45));
  }
  .ac-bar-btn--arbi{
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.14);
  }

  /* Mobile: make the Arbi panel feel like a bottom sheet above the bar */
  .arbiPanel{
    left: 12px;
    right: 12px;
    width: auto;
    bottom: calc(var(--ac-bar-h) + 12px + env(safe-area-inset-bottom));
    max-width: none;
    height: min(560px, 72vh);
    max-height: calc(100vh - 140px);
  }
}