/* =========================================================
   MOBILE ONLY (≤768px) — keeps desktop clean
   ========================================================= */

/* Baseline: never show mobile UI unless media query enables it */
.mobile-bottom-menu { display: none; }
#mobileModal { display: none; }         /* extra guard; [hidden] also hides */

/* ---------------------------------------------------------
   Debug colors for your 4-block skeleton (optional)
   --------------------------------------------------------- */
@media (max-width: 768px) {
  body.mobile-debug .header         { background: rgba(60, 90, 210, .35); }  /* blue */
  body.mobile-debug .canvas         { background: rgba( 60,190,110, .35); }  /* green */
  body.mobile-debug .utility-footer { background: rgba(210,170, 60, .35); }  /* amber */
  body.mobile-debug .bottom-menu    { background: rgba(210, 80, 80, .35); }  /* red */
}

/* ---------------------------------------------------------
   Global mobile overrides
   --------------------------------------------------------- */
@media (max-width: 768px) {
  /* Hide logo/brand and any header tool groups on mobile */
  /* .brand { display: none !important; }*/
  /* header .header-group { display: none !important; } */
  .brand {
  display:block;
}
.brand-logo {
    width:200px;
}

  /* Hide the desktop sidebar entirely on mobile */
  .sidebar { display: none !important; }

  /* Show mobile bottom bar only on mobile (part of your 4-row layout) */
  .mobile-bottom-menu {
    display: flex;       /* was baseline: none */
    grid-row: 4;
    position: relative;
    z-index: 10;
    width: 100%;
    justify-content: space-around;
    align-items: center;
  }

  /* If the canvas ever overlaps the bottom bar visually, add padding:
     .canvas{ padding-bottom: 88px; }   // keep commented unless needed */

  /* Allow the modal element to exist (still hidden by [hidden]) */
  #mobileModal { display: block; }
  #mobileModal[hidden] { display: none !important; }
}

/* ---------------------------------------------------------
   Mobile Items Modal (title + search + list only)
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .mobile-modal {
    position: fixed; inset: 0; z-index: 1200;
  }
  .mobile-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.45);
  }
  .mobile-panel {
    position: absolute;
    left: 12px; right: 12px; top: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column;
    background: var(--sg-sidebar-bg, #1e1e1f);
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0,0,0,.5);
    overflow: hidden;
  }

  .mobile-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
  }
  .mobile-panel-header h2 {
    margin: 0; font-size: 18px; font-weight: 700;
  }
  .mobile-close {
    width: 36px; height: 36px; border: none; border-radius: 12px;
    /* background: rgba(255,255,255,.08); color: #fff;*/
    font-size: 22px; line-height: 1;
    color: white;
    background: none !important;
  }

  .mobile-panel-search { padding: 0 16px 10px; }
  .search-wrap { position: relative; }
  #mobileSearch {
    width: 100%; height: 42px; outline: none;
    border: none; border-radius: 12px;
    background: white; 
    color: #3a3640;
    padding: 0 40px 0 14px;
  }

  #mobileSearchClear {
  position: absolute;
  right: 10px;
  top: 0;
  transform: translateY(-50%);
  background: url("./images/icon_clear_search.svg") no-repeat center center;
  background-size: 20px 20px;
  background-color: red;
  width: 28px;
  height: 28px;
  color:black;
  display: none;
  cursor: pointer;

  /* FIX: stay ABOVE mobile search icon */
  z-index: 5;

  /* FIX: always visible on dark background */
  filter: grayscale(100%) brightness(80%);
}



  /* Hide logo/duplicate titles/inner bottom menu when the desktop list is moved here */
  #itemsContainerMobile #logoImg,
  #itemsContainerMobile #logoImgModal,
  #itemsContainerMobile #sidebar-title,
  #itemsContainerMobile .bottom-menu {
    display: none !important;
  }
}

/* ---------------------------------------------------------
   Desktop guard (≥769px): ensure mobile UI never shows
   --------------------------------------------------------- */
@media (min-width: 769px) {
  .mobile-bottom-menu { display: none !important; }
  #mobileModal { display: none !important; }
}


/* MOBILE ITEMS BAR: fixed to bottom */
@media (max-width: 768px){
  .mobile-bottom-menu{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    display: flex;              /* ensure visible on mobile */
    justify-content: space-around;
    align-items: center;
    height: 88px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }
}
/* Desktop guard */
@media (min-width: 769px){
  .mobile-bottom-menu{ display: none !important; }
}


/* --- Baseline guards: mobile UI hidden unless enabled --- */
.mobile-bottom-menu { display: none; }
#mobileModal { display: none; }

/* ---------- MOBILE (≤768px) ---------- */
@media (max-width: 768px){

  /* Items bar: fixed to bottom */
  .mobile-bottom-menu{
    display: flex;                 /* enable on mobile */
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 88px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: center;
    z-index: 1000;                 /* base layer */
  }

  /* Cable Mode row ABOVE the items bar */
  .utility-footer{
    position: fixed;
    left: 0; right: 0;
    bottom: calc(88px + env(safe-area-inset-bottom) + 8px);  /* sits above items bar */
    height: 56px;                                            /* adjust if your design differs */
    padding: 0 16px;
    display: flex;
    align-items: center;
    z-index: 1001;                  /* above items bar */
    background: transparent;        /* keeps your canvas visible */
    pointer-events: auto;
  }



  /* Modal may exist but stays hidden until JS removes [hidden] */
  #mobileModal{ display: block; }
  #mobileModal[hidden]{ display: none !important; }
}

@media (max-width: 768px){
  .mobile-panel-header h2{ color:#fff; }   /* title in white */
}


/* one place near the top of mobile.css */
:root{ --itemsbar-h: 88px; }           /* your bottom items menu height */

/* Items bar fixed to bottom (on top of modal) */
@media (max-width: 768px){
  .mobile-bottom-menu{
    position: fixed; left:0; right:0; bottom:0;
    height: var(--itemsbar-h);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    z-index: 1000;                      /* ABOVE the modal */
    display:flex; justify-content:space-around; align-items:center;
  }

  /* Modal sits UNDER the items bar so the bar stays clickable */
  .mobile-modal{ position:fixed; inset:0; z-index: 900; }           /* was 1200 */
  .mobile-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }

  /* Stop the panel above the items bar */
  .mobile-panel{
    position:absolute;
    left:12px; right:12px; top:12px; bottom:84px;
    bottom: calc(var(--itemsbar-h) + env(safe-area-inset-bottom) + 12px);
    display:flex; flex-direction:column;
    background: var(--sg-sidebar-bg, rgba(59,57,60,1));
    border-radius:18px; box-shadow:0 16px 48px rgba(0,0,0,.5);
    z-index: 5000;   /* ensure panel is above header/menu */
  }
}

/* Hide BOTH searches on mobile when Custom is active */
@media (max-width: 768px){
  body.is-custom .mobile-panel-search { display: none !important; }  /* modal search */
  body.is-custom .search-bar         { display: none !important; }  /* desktop search area (if present) */
  body.is-custom #search_item,
  body.is-custom #clear-search       { display: none !important; }
}

@media (max-width: 768px){
  body.is-custom .mobile-panel-search { display: none !important; }
}


/*
@media (max-width: 900px) {
  .mobile-panel-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}
  */



body.modal-open .utility-footer {
  display: none !important;
}


/* Hide Cable Mode row when modal is open (mobile only) */
@media (max-width: 768px){
  body.modal-open .utility-footer {
    display: none !important;
  }
}


/* Mobile: selected state for the bottom menu buttons */
/* Bottom menu: show selected state (match JS) */
@media (max-width: 768px){
  .mobile-bottom-menu .menu-btn.selected,
  .mobile-bottom-menu .menu-btn[aria-selected="true"]{
    opacity: 1;
    outline: 2px solid var(--sbx-accent, #7aa2ff);
    outline-offset: 4px;
    border-radius: 12px;
  }
}


@media (max-width: 768px) {
  #auth-user {
    display: none !important; /* hide desktop version */
  }

  .header-group {
  display: flex;
  gap: 0px;
}
}

/* Mobile: logo (left) + Login (right) on the SAME line */
@media (max-width: 768px) {
  /* hide desktop auth on mobile */
  #auth-user { display: none !important; }

  /* make the brand row a flex header */
  .brand {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .brand-logo {
    max-width: 200px;   /* keep your current size */
    height: auto;
    flex: 0 1 auto;
  }

  /* the mobile auth group inside .brand */
  #mobile-auth-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #mobile-auth-user #login-container { margin: 0; }
  #mobile-auth-user .header-btn { padding: 6px 14px; font-size: 14px; }
}

/* Mobile: make the avatar dropdown float above everything */
@media (max-width: 768px) {
  /* Create a stacking context for the mobile auth wrapper */
  #mobile-auth-user {
    position: relative;
    z-index: 1500; /* above header icons & tool buttons */
  }

  /* Position + elevate the dropdown menu */
  #mobile-auth-user .dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 2000;              /* above bottom bar (1000) and modals (900) */
  }
}


/* Mobile: show ALL header buttons (allow wrap to 2 lines) */
@media (max-width: 768px) {
  .header {
    height: auto !important;         /* allow it to grow */
    display: flex !important;
    flex-wrap: wrap;                  /* buttons can wrap */
    justify-content: flex-start;      /* start at the left */
    align-items: center;
    gap: 8px 10px;                    /* tight spacing */
    padding-left: 0;                  /* remove desktop left padding */
    margin-top: 6px;
  }

  .header-group {
    display: flex !important;
    gap: 8px;
    margin-right: 0 !important;       /* no huge desktop spacing */
  }

  /* slightly smaller buttons on mobile so all fit nicely */
  .header .header-btn {
    width: 32px !important;
    height: 32px !important;
  }
}




/* Mobile: shrink ALL header icons ~20% (ID-level to beat desktop rules) */
@media (max-width: 768px) {
  /* default for most */
  #btn-shoutboard,
  #zoomInBtn,
  #zoomOutBtn,
  #clearCanvasBtn,
  #exportBtn,
  #savePedalboardBtn,
  #btn-share {
    background-size: 48% !important;   /* from 60% → 48% */
  }

  /* ones that had larger desktop sizes */
  #btn-explore,
  #btn-tutorial {
    background-size: 56% !important;   /* from 70% → 56% */
  }
}


/* Mobile: make the 9-button header float over the canvas */
@media (max-width: 768px) {
  .content { position: relative; }

  /* tweak brand spacing */
  .brand { padding: 8px 12px; }

  /* overlay header grid under the brand, above the canvas */
  .header {
    position: absolute !important;
    left: 8px; right: 8px;
    top: 56px;                 /* offset under the logo row; adjust if needed */
    margin: 0 !important;
    z-index: 1400;             /* above canvas & other UI */
    background: transparent;
    pointer-events: auto;      /* header still clickable */
  }

  /* ensure canvas isn't pushed by header */
  .canvas { padding-top: 0 !important; margin-top: 0 !important; }
}

/* Mobile: header = single-row horizontal scroller (swipe) */
@media (max-width: 768px) {
  .content { position: relative; }

  /* keep logo row; place scroller under it, floating over canvas */
  .brand { padding: 8px 12px; }

  .header {
    position: absolute !important;
    left: 8px; right: 8px;
    top: 56px;                     /* adjust if your logo row is taller/shorter */
    z-index: 1300;
    background: transparent;

    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    padding: 0 4px;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;  /* iOS momentum */
    scrollbar-width: none;              /* Firefox hide bar */
  }
  .header::-webkit-scrollbar { display: none; } /* Chrome/Safari hide bar */

  /* flatten groups so buttons sit in a single row */
  .header-group { display: contents !important; }

  /* compact, finger-friendly buttons */
  .header .header-btn {
    flex: 0 0 48px;                /* fixed width for smooth scrolling */
    height: 48px !important;
    min-width: 48px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.06);
    scroll-snap-align: start;
  }

  /* optional snapping feel while scrolling */
  .header { scroll-snap-type: x proximity; }

  /* keep icons ~20% smaller, touch area unchanged */
  .header .header-btn { background-size: 48% !important; }
  #btn-explore, #btn-tutorial { background-size: 56% !important; }
}


@media (max-width: 768px) {
  body.modal-open .header {
    display: none !important;
  }
}

@media (max-width: 768px) {
  body.modal-open .header {
    display: none !important;
  }
}




  #login-button-mobile {
    background-color:white;
      border-radius: 100px;
      color: black;
      width: 70px;
      position: absolute;
      top:-30px;
      left:-90px;
  }


/* Mobile: unify modal margins */
@media (max-width: 768px) {
  .modal-content,
  .modal-box {
    margin: 16px !important;
    border-radius: 12px;
    max-width: calc(100% - 32px); /* keep side margins */
    width: auto !important;
  }
}

@media (max-width: 768px) {
  body.logged-in #login-container-mobile,
  body.logged-in #signup-container-mobile {
    display: none !important;
  }

}

@media (max-width: 768px) {
  /* Default (logged-out) */
  /* #mobile-auth-user #user-menu { display: none; }*/

  /* After login (toggled by mobile.js via body.logged-in) */
  body.logged-in #login-container-mobile,
  body.logged-in #signup-container-mobile { display: none !important; }
  
}

/* mobile.css (add/update inside @media (max-width:768px)) */
             /* default */



@media (max-width: 768px) {
  #mobile-auth-user { position: relative; z-index: 1600; }
  #dropdown-menu-mobile {
    position: absolute; right: 0; top: calc(100% + 8px);
    display: none; z-index: 1700;
  }
  /* show when wrapper has the toggle class */
  #mobile-auth-user.dropdown-open #dropdown-menu-mobile { display: block !important; }
}

@media (max-width: 768px) {
  #mobile-auth-user { position: relative; z-index: 1600; }
  #dropdown-menu-mobile {
    position: absolute; right: 0; top: calc(100% + 8px);
    display: none; z-index: 1700;
  }
  #mobile-auth-user.dropdown-open #dropdown-menu-mobile {
    display: block !important;
  }
}

@media (max-width: 768px){
  #mobile-auth-user{ position:relative; z-index:1600; }
  #mobile-auth-user .dropdown{
    position:absolute; right:0; top:calc(100% + 8px);
    display:none; z-index:1700;
  }
}

@media (max-width: 768px){
  #mobile-auth-user.is-open .dropdown,
  #mobile-auth-user.is-open #dropdown-menu-mobile { display: block !important; }
}

@media (max-width: 768px) {
  #mobile-auth-user.dropdown-open #dropdown-menu-mobile {
    display: block !important;
  }
}


@media (max-width: 768px) {
  /* hide nothing, just reposition the existing #auth-user */
  .brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
  }

  .brand-logo {
    max-width: 200px;
    height: auto;
    flex: 0 1 auto;
  }

  #auth-user {
    display: flex !important;     /* force visible on mobile */
    align-items: center;
    gap: 8px;
    margin-left: auto;  
  position: absolute;
  top:-0px;
  right:10px;          /* push to the right of logo */
  z-index:1000;

  }

  .header {
      /* overflow: visible;*/
  }
}

@media (max-width: 768px){
  #auth-user{
    position: fixed;   /* escape the overflow clip */
    top: 20px;
    right: 20px;
    z-index: 1600;     /* above header strip */
  }
  .brand{ padding-right: 72px; } /* keep it from overlapping the logo */
}




/* iOS: prevent auto-zoom on input focus inside the items modal */
@media (hover: none) and (pointer: coarse) {
  #itemsModal input[type="search"],
  #itemsModal input[type="text"],
  #itemsModal input[type="email"],
  #itemsModal input[type="number"],
  #itemsModal select,
  #itemsModal textarea {
    font-size: 16px !important;   /* key */
    line-height: 1.2;
    min-height: 44px;              /* nice for touch */
  }
}

/* Stop iOS text inflation (prevents random giant text) */
html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Only the search input needs 16px to prevent auto-zoom */
#itemsModal input[type="search"],
#itemsModal .search-input {
  font-size: 16px !important;   /* key to stop iOS zoom-on-focus */
  line-height: 1.2;
  min-height: 36px;              /* smaller than 44px so it doesn’t feel huge */
  /* keep your existing padding/border-radius if any */
}

/* Don’t upscale other inputs inside the modal */
#itemsModal input:not([type="search"]),
#itemsModal select,
#itemsModal textarea {
  font-size: inherit;            /* revert any previous 16px forcing */
  min-height: auto;
}

/* MOBILE: don't overlap the canvas — make header part of the flow */
@media (max-width: 768px){
  .content { position: static !important; }

  .header{
    position: static !important;     /* was absolute */
    left: auto !important;
    right: auto !important;
    /*top: auto !important;*/
    top:14px;
    z-index: auto !important;
    margin: 8px 8px 0 !important;

    /* keep your compact, scrollable row of buttons */
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    padding: 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }


}


/* MOBILE: reserve space so the canvas never sits under Cable Mode / Bottom menu */
@media (max-width: 768px){


  /* reserve space at the page level:
     - bottom items bar (var(--itemsbar-h) defaults to 88px)
     - Cable Mode bar (56px)
     - iPhone safe area + a small buffer */
  .content{
    padding-bottom: calc(var(--itemsbar-h, 88px) + 56px + env(safe-area-inset-bottom) + 12px) !important;
  }
}

/* MOBILE: keep canvas/content above Cable Mode + bottom menu */
@media (max-width: 768px){
  :root{
    --itemsbar-h: 88px;   /* bottom menu height */
    --cablebar-h: 56px;   /* Cable Mode bar height */
  }

  /* make sure both bars are fixed and stacked */
  .utility-footer{
    position: fixed !important;
    left: 0; right: 0;
    bottom: var(--itemsbar-h);
    height: var(--cablebar-h);
    z-index: 1100;
  }
  .mobile-bottom-menu{
    position: fixed !important;
    left: 0; right: 0;
    bottom: 0;
    height: var(--itemsbar-h);
    z-index: 1101;
  }

  /* reserve their combined height so canvas never sits underneath */
  .container > .content{
    padding-bottom: calc(var(--itemsbar-h) + var(--cablebar-h) + env(safe-area-inset-bottom)) !important;
  }

  /* iOS: prevent zoom-on-focus when user taps the search */
  #mobileModal #mobileSearch{
    font-size: 16px !important;
  }
}


/* ==== FINAL MOBILE OVERRIDES (place at end of mobile.css) ==== */
@media (max-width: 768px){

  /* If your page wrapper had side padding, neutralize it so the canvas can truly span */
  .content{
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* --- FIX: stop canvas overlapping footer bars --- */
@media (max-width: 768px) {
  .canvas {
    position: relative !important;
    z-index: 0 !important;      /* canvas stays behind */
    width: 100vw !important;
    margin: 0 !important;
    /* background-color: hotpink;*/
  }

  .utility-footer {
    position: fixed !important;
    bottom: 88px;               /* sit above bottom menu */
    left: 0; right: 0;
    z-index: 1001 !important;   /* above canvas */
  }

  .mobile-bottom-menu {
    position: fixed !important;
    bottom: 0;
    left: 0; right: 0;
    z-index: 1002 !important;   /* above utility-footer + canvas */
  }
}


/* --- MOBILE SAFARI: canvas behind bars + truly full-width --- */
@media (max-width: 768px) {
  html, body { margin: 0 !important; }

  /* Never clip fixed bars; kill any accidental transforms */
  .wrapper, .container, .content {
    overflow: visible !important;
    transform: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  /* Canvas wrapper full-bleed and behind everything */
  .canvas {
    position: relative !important;
    z-index: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;         /* remove any side gaps */
    padding: 0 !important;
    touch-action: none;
  }

  /* The <canvas> itself must stretch edge-to-edge */
  #myCanvas {
    display: block;
    width: 100vw !important;
    height: auto;                  /* keep aspect ratio */
  }

  /* Footers fixed and stacked above canvas (Safari-safe) */
  .utility-footer {
    position: fixed !important;
    left: 0; right: 0;
    bottom: 88px;                  /* height of bottom menu */
    z-index: 2147483646 !important;
  }
  .mobile-bottom-menu {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 2147483647 !important;
  }
}




/* Let us handle pinch ourselves on the canvas */
/* was: #canvas { touch-action: none; } */
#myCanvas { touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}  /* allow our JS to own gestures only on canvas */



@media (max-width: 768px) {
  #signup-container {
    display: none !important;
  }
}


/* Increase size of fixed anchors and their labels on phones */
@media (max-width: 768px) {
  .anchorBtn {
    width: 40px !important;    /* bump circle size */
    height: 40px !important;
    font-size: 14px !important; /* bump text inside circle */
    line-height: 40px !important;
  }

  .anchorBtn span,
  .anchorBtn-label {
    font-size: 14px !important; /* bump the label text */
  }
}

@media (max-width: 768px) {
  /* When the mobile drawer is open, hide avatar + dropdown */
  body.modal-open #auth-portal,
  body.modal-open #dropdown-menu,
  body.modal-open .dropdown { 
    display: none !important;
  }

  #btn-explore {
  background-size: 48% 48% !important;
  }
  #btn-tutorial {
  background-size: 47% 47% !important;
  }


}


/* === FINAL STACKING FIX (phones only) ========================= */
@media (max-width:768px){

  /* 0) kill accidental stacking contexts above the modal */
  .wrapper, .container, .content, .brand, .header {
    transform: none !important;
    z-index: auto !important;
    overflow: visible !important;
  }

  /* 1) baseline: bars sit below everything */
  .mobile-bottom-menu {            /* bottom tab bar */
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 1200 !important;
  }
  .utility-footer {                /* “Cable Mode” row */
    position: fixed !important;
    left: -20px; right: 0;
    bottom: 88px;                  /* height of bottom menu */
    z-index: 1300 !important;
  }

  /* 2) user menu sits above bars, but below modals */
  #auth-user,
  #auth-portal,
  #dropdown-menu,
  #dropdown-menu-mobile,
  #mobile-auth-user,
  #mobile-auth-user .dropdown {
    position: fixed !important;
    z-index: 5000 !important;      /* above bars (1200/1300), below modals (9000) */
  }

  /* 3) ALL desktop-style modals and their backdrops sit on top */
  .overlay,
  .modal,
  .modal-box,
  .modal-content,
  .video-modal,
  #itemsModal {                    
    position: fixed !important;
    z-index: 9000 !important;      /* above user menu & bars */
  }
  /* mobile overlay shouldn't cover bottom menu */
.overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 90px !important;              /* leave space for bottom bar */
  height: calc(100vh - 90px) !important;
  z-index: 8999 !important;
}


  /* 4) keep white modals nicely inset on phones (optional) */
  .modal-content,
  .modal-box {
    inset: 16px !important;
    max-width: calc(100% - 32px) !important;
    width: auto !important;
    border-radius: 16px !important;
  }

  .header-btn {width:100px;}
}

/* compact sizes on phones */
@media (max-width:768px){

  /* Header icons: small & consistent */
  .header .header-btn{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:20px 20px !important;  /* ↓ icon size */
    border-radius:10px;
  }
  .header .header-btn > svg,
  .header .header-btn > img,
  .header .header-btn > i{
    width:20px !important;
    height:20px !important;
  }

  /* Bottom menu buttons: slightly smaller */
  .menu-btn{
    width:56px !important;
    height:56px !important;
    gap:6px !important;
    padding-bottom:6px !important;
    font-size:10px !important;
  }
  .menu-btn::before{
    width:48px !important;
    height:48px !important;
    margin-top:4px !important;
    margin-bottom:-2px !important;
    background-size:contain !important;
  }
}

@media (max-width: 768px) {
 /* Remove zoom buttons as mobile uses pinch gestures */ 
 #zoomOutBtn {display:none !important;}
 #zoomInBtn {display:none !important;}
#btn-tutorial {display:none !important;}
  .avatar {position:absolute; top:10px; right:10px; z-index: 9000 !important;}
  #login-container {display:none;}
  #login-button{display:none;}
  #signup-container{display:none;}
}


@media (max-width: 768px) {
  #login-container-mobile {
    width: auto !important;       /* shrink to fit */
    margin-left: auto !important; /* push to right */
    background: transparent !important; /* no full bar color */
  }

  #login-button-mobile {
    background-color: white;
    border-radius: 100px;
    color: black;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 700;
    width:100px;
  }

}



/* FORCE the mobile Connect button to the far right of the brand row */
/* ===========================
   MOBILE AUTH (Connect button)
   =========================== */
@media (max-width: 768px) {
  .brand {
    position: relative !important;
  }

  #mobile-auth-user {
    position: absolute !important;
    right: 12px;                 /* push to far right */
    top: 50%;
    transform: translateY(-50%); /* vertical center */
    margin: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    z-index: 800 !important;     /* keep below modals (9000) */
  }

  #login-container-mobile {
    width: auto !important;
    background: transparent !important;  /* remove full bar */
  }

  #login-button-mobile {
    padding: 6px 16px;
    border-radius: 999px;
  }

  /* Ensure Explore / My Pedalboards modals scale properly */
  #exploreModal .modal-box,
  #my-pedalboards-modal .modal-box {
    max-width: 700px;
    width: 100%;
    max-height: 100vh;
  }
}

/* ===========================
   MOBILE CARD GRID (≤768px)
   =========================== */
@media (max-width: 768px) {
  .pedalboard-card {
    display: grid !important;
    grid-template-columns: 56px 1fr; /* smaller thumb column */
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: start;
    text-align: left !important;
  }

  .pedalboard-card .board-thumbnail-wrapper {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 56px;
    height: 56px;
    min-width: 56px;
    align-self: start;
    justify-self: start;
  }
  .pedalboard-card .board-thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .pedalboard-card .pb-info {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: start;
  }

  .pedalboard-card .pb-actions {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-content: flex-start;
    gap: 8px;
  }

  

  /* Delete button sizing on mobile */
 .pedalboard-card .delete-btn {
  background: url("./images/trashcan.svg") center center no-repeat;
  background-size: 18px 18px; /* adjust size if needed */
  border: none;
  cursor: pointer;
  padding: 0;
}
  /*
  .pedalboard-card .delete-btn {
    width: 40px !important;  
    height: 40px !important;
    border: 1.5px solid #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
        background: #fff url("./images/trashcan.svg") center center no-repeat !important;
    background-size: 22px 22px !important;
  }
    */
/*
  .pedalboard-card .delete-btn svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
  }
*/
    .utility-footer {
    /* background-color: salmon; */
  }
}

/* ===========================
   DESKTOP/TABLET (≥769px)
   =========================== */
@media (min-width: 769px) {
  .pedalboard-card {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .mobile-bottom-menu .menu-btn.selected,
  .mobile-bottom-menu .menu-btn[aria-selected="true"] {
    background-color: white !important;
    color: black !important;
    outline: none !important;   /* remove the blue stroke */
  }

  .mobile-bottom-menu .menu-btn.selected::before,
  .mobile-bottom-menu .menu-btn[aria-selected="true"]::before {
    filter: brightness(0); /* same as desktop: darken the icon */
  }
}


/* Prevent cut-off of bottom buttons in modals on phones */
/* Prevent last button in .form from being cut off on mobile */
@media (max-width: 768px) {
  .form > :last-child {
    margin-bottom: calc(var(--itemsbar-h, 88px) + env(safe-area-inset-bottom) + 16px) !important;
    margin-top: -10px !important;
  }


  .custom-cta-container {
    margin-top:-10px;
  }

   #submit-custom-item {height:34px;}
}




@media (max-width: 768px) {
  #mobileSearchClear {
    background: url("./images/icon_clear_search.svg") no-repeat center center;
    background-size: 28px 28px;
    background-color: transparent;
    border: none;
    width: 32px;
    height: 32px;
    filter: brightness(0) invert(1);  /* turn black SVG white */
    display: none; /* hidden by default */
  }
}


/* --- MOBILE: make header buttons grid respect screen padding --- */
@media (max-width: 768px) {
  .header {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    gap: 10px;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px;             /* ⬅ same side padding as logo row */
    box-sizing: border-box !important;
    margin: -10px 0 !important;
    /* background-color: aquamarine; */
  }

  .header-group {
    display: contents !important;
  }

  .header .header-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    flex: initial !important;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.06);
    background-size: 48% !important;
  }



}



/* === MOBILE: move anchor tooltips to top center === */
/* === MOBILE: move anchor tooltips to top center & enlarge === */
@media (max-width: 768px) {
  .anchor-tooltip {
    position: fixed !important;
    top: 140px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 99999 !important;

    /* 🔹 size and style */
    font-size: 14px !important;     /* bigger text */
    line-height: 1.2 !important;
    padding: 10px 18px !important;  /* larger touch-friendly padding */
    border-radius: 12px !important;

    background: rgba(0, 0, 0, 0.9) !important;
    color: #fff !important;
    font-weight: 600 !important;
    text-align: center !important;

    /* optional: max width to prevent overflow on small screens */
    max-width: 90vw !important;
  }
}


/* Fix: make the mobile search modal sit above the cable menu */
@media (max-width:768px){
  .mobile-modal { z-index: 10050 !important; }
}


/* === Items modal specific stacking fix === */
@media (max-width: 768px) {
  /* make the bottom menu appear above the items modal only */
  .bottom-menu.mobile-bottom-menu.items-modal-active {
    position: fixed;
    z-index: 12000 !important; /* higher than modal/backdrop */
  }

  /* push only the items modal below the menu */
  .mobile-modal.is-items-modal {
    z-index: 11000 !important; /* stays above backdrop, below menu */
  }
}



/* Canvas wrapper takes full space */
.canvas {
  width: 100vw !important;
  height: 100vh !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Actual <canvas> uses its internal resolution — DO NOT FORCE HEIGHT */
#myCanvas, canvas {
  width: 100vw !important;
  height: auto !important;
  display: block;
  touch-action: none;
}



/* MOBILE: canvas must fill the viewport with zero padding */
@media (max-width: 768px) {
  .canvas {
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .header {
    position: relative !important;
    z-index: 5000 !important;
    pointer-events: auto !important;
  }  
  
}





/* ======================================
   MOBILE ITEM CARD – FINAL WORKING VERSION
   ====================================== */
@media (max-width: 768px) {



  /* ----- CARD ----- */
  .mobile-card {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;

    padding: 12px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.07);

    background: transparent;
  }

  /* ----- IMAGE ----- */
  .mobile-card img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 14px;
  }

  /* ----- TEXT AREA ----- */
  .mobile-card .mobile-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
  }

  .mobile-card .mobile-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
    white-space: normal;
    line-height: 1.25;
  }

  .mobile-card .mobile-brand {
    font-size: 12px;
    opacity: 0.7;
    color: #fff;
    white-space: normal;
  }

  /* ----- ADD BUTTON ----- */
  .mobile-card .mobile-add {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 300;
    margin-left: 10px;
    flex-shrink: 0;
  }
}


/* ==== FIXED SCROLLING FOR MOBILE ITEMS ==== */
@media (max-width: 768px) {
  #itemsContainerMobile {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    display: block !important;
    height: auto !important;

    flex: 1 1 auto !important;
    min-height: 0 !important;

    padding: 0 12px !important;
  }
}


#itemsContainerMobile {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}


/* === FIX LOGO VISIBILITY ON MOBILE === */
@media (max-width: 768px) {

  /* Force logo row to be visible */
  .brand {
    display: flex !important;
    position: relative !important;
    padding: 20px 12px !important;
    z-index: 5001 !important;  /* above canvas, below modals */
  }

  .brand-logo {
    display: block !important;
    max-width: 200px;
    height: auto;
  }

  /* Prevent auth-user from pushing logo away */
  #auth-user {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    z-index: 5002 !important;
  }
}

/* Mobile: user menu under avatar, with side margin and smaller width */
@media (max-width: 768px) {
  #dropdown-menu {
    top: 76px !important;                 /* below avatar */
    right: 16px !important;               /* not touching screen edge */
    width: 220px !important;              /* smaller menu */
    max-width: calc(100vw - 32px);        /* keep 16px margin on tiny screens */
    border-radius: 18px;
  }
}

/* --- Mobile search icon in modal --- */
@media (max-width: 768px) {
  .mobile-panel-search .search-wrap {
    position: relative; /* anchor abs children/pseudo */
  }
  .mobile-panel-search .search-wrap::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url("./images/icon-search.svg") no-repeat center center;
    background-size: contain;
    opacity: 0.8;
    pointer-events: none;
  }
  /* make room for the icon */
  #mobileSearch {
    padding-left: 40px !important;  /* was 14px */
  }
}


/* === FINAL FIX: mobile clear-search icon color === */
#mobileSearchClear {
  filter: none !important;               /* remove white tint */
  background: url("./images/icon_clear_search.svg") no-repeat center center !important;
  background-size: 24px 24px !important;
  opacity: 0.85 !important;              /* match search icon opacity */
  top: 50%;
}


/* === FINAL FIX: prevent header from covering avatar === */
@media (max-width: 768px) {
  /* brand bar + avatar must be ABOVE header */
  .brand,
  #mobile-auth-user,
  #auth-user {
    position: relative !important;
    z-index: 5000 !important;
  }
}

@media (max-width: 768px) {
.custom-form{
  margin: 0 20px;
}
}

@media (max-width: 768px) {

#item-context-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--sg-sidebar-bg, #3B393C);
    padding: 20px;
    border-radius: 14px 14px 0 0;
    z-index: 999999;
    display: none;               /* DEFAULT CLOSED */
}

/* When JS adds .visible */
#item-context-panel.visible {
    display: block !important;   /* ← FIX: MUST BE BLOCK */
}

body.mobile-context-open canvas {
    pointer-events: none !important;
}

} /* end media query */


/* ----------------------------------------------------------
   MOBILE — INFO PANEL (mirror of desktop styles)
-----------------------------------------------------------*/
@media (max-width: 768px) {

    /* Main bottom panel */
    #item-context-panel.context-panel {
        background: var(--sg-sidebar-bg);
        padding: 20px;
        border-radius: 20px 20px 0 0;
        color: white;
        font-family: Outfit, sans-serif;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
    }

    /* INFO MODE */
    #item-context-panel .panel-info {
        display: none; /* toggled by JS */
    }

    /* Header */
    #item-context-panel .info-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 20px;
    }

    #item-context-panel .info-back {
        font-size: 22px;
        cursor: pointer;
        font-weight: 300;
        padding: 8px 12px 8px 0;
    }

    /* TITLE (Name + Brand) */
    #item-context-panel .info-title-name {
        font-family: 'Outfit', sans-serif;
        font-weight: 600;     /* SemiBold */
        font-size: 22px;
        margin-bottom: 4px;
    }

    #item-context-panel .info-title-brand {
        font-family: 'Outfit', sans-serif;
        font-weight: 400;     /* Regular */
        font-size: 18px;
        margin-bottom: 12px;
        opacity: 0.85;
    }

    /* TYPE TAG */
    #item-context-panel .info-type-tag {
        display: inline-block;
        background: #e58634;
        color: white;
        border-radius: 10px;
        padding: 6px 14px;
        font-size: 15px;
        font-weight: 500;     /* Medium */
        margin-bottom: 20px;
    }

    /* SPECS TABLE */
    #item-context-panel .info-table {
        border: 2px solid rgba(255,255,255,0.25);
        border-radius: 16px;
        overflow: hidden;
        margin-bottom: 10px;
    }

    #item-context-panel .info-row {
        padding: 14px;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        font-size: 17px;
        font-family: 'Outfit', sans-serif;
    }

    #item-context-panel .info-row:last-child {
        border-bottom: none;
    }

    #item-context-panel .info-row-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #item-context-panel .info-row-2col > div {
        padding: 14px;
        border-right: 1px solid rgba(255,255,255,0.2);
        font-size: 17px;
    }

    #item-context-panel .info-row-2col > div:last-child {
        border-right: none;
    }

    .panel-main div {
      padding: 10px 0;
    }

    .panel-info {
      padding:0;
      margin:0;
    }



}


.cm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    cursor: pointer;
    font-size: 16px;
    color: white;
    font-family: Outfit, sans-serif;
}

.cm-item:hover {
    background: var(--sg-menu-selected-bg, rgba(255,255,255,0.1));
}

.cm-icon {
    width: 20px;
    height: 20px;
    opacity: 0.9;
}

.cm-separator {
    height: 1px !important;
    background: rgba(255,255,255,0.15);
    margin: 12px 0;          /* adjust spacing above/below */
    padding: 0 !important;   /* force separator to be solid 1px */
    border: none !important;
    display: block;
}

@media (max-width: 768px) {
  .custom-image-upload {
    padding:20px;
  }
  .custom-image-confirm{
    padding:20px;
  }
  .custom-anchors{
    padding:20px;
  }
  #customFormContainerMobile {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 120px); /* adjust if needed */
  margin-bottom:20px;
}

}

@media (max-width:768px){
  #auth-user {display:none;}
}



@media (max-width: 768px) {
  /* When logged in (desktop user menu is shown),
     hide the mobile Connect button */
  body:has(#user-menu[style*="display: flex"]) #login-button-mobile {
    display: none !important;
  }
}


@media (max-width: 768px) {
  #user-menu {
    position: relative !important;   /* 🔑 anchor */
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translate(30px, -40px);
  }
}

@media (max-width: 768px) {
  #user-menu .dropdown {
    position: absolute;
    top: calc(100% + 8px);   /* directly below avatar */
    right: 0;
    z-index: 16000;

  }
}


@media (max-width: 768px) {
  #user-menu {
    position: relative;
  }
}

@media (max-width: 768px) {
  #dropdown-menu {
    position: fixed;
    top: calc(var(--avatar-top) + var(--avatar-height) + 8px);
    left: calc(var(--avatar-left) + var(--avatar-width) - var(--dropdown-width));
    z-index: 99999;
  }
}

@media (max-width: 768px) {




}



@media (max-width: 768px) {
  #auth-user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top:-150px;
    margin-left: calc(100vw - 110px);
  }

  #avatar {
    margin-top:-10px;
    margin-left: 0;
    margin-right:calc(100vw - 440px);
  }

    #user-menu {
    position: relative;
    flex-grow: 1;
  }

  #dropdown-menu{
    margin-top:-20px;
    margin-right:calc(100vw - 440px);
  }

  #login-button {
    height: 38px !important;
  }

  .mobile-backdrop {
    height:calc(100vh - 84px);
    display:none;
     
  }

  .mobile-modal {
    pointer-events: none;
  }

.mobile-modal .mobile-panel{
   pointer-events: auto;
}
}

@media (max-width: 768px) {

.list-thumbnail-wrapper {
  width:54px;
}

.pedalboard-card{
  gap: 4px;
}


}

/* FIX: Custom modal text color on mobile */
@media (max-width: 768px) {

  /* Entire Custom flow inside mobile modal */
  #customFormContainerMobile,
  #customFormContainerMobile * {
    color: #fff;
  }

  /* Dropzone specific text */
  #customFormContainerMobile .custom-dropzone,
  #customFormContainerMobile .dropzone-content,
  #customFormContainerMobile .dropzone-content strong,
  #customFormContainerMobile .dropzone-content span {
    color: #fff;
  }

  /* Headings */
  #customFormContainerMobile h1,
  #customFormContainerMobile h2,
  #customFormContainerMobile h3 {
    color: #fff;
  }


.custom-preview {
    /* max-width:100%; */
    max-height:160px; 
    border:1px solid #999;
  }
}