/* styles/header/mywheels-dropdown.css
   MUST match your HTML:
   .mywheels, .mywheels__btn, .mywheels__menu
*/

.mywheels{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.mywheels__menu{
  padding: 10px;
  border-radius: 14px;

  /* SOLID (no transparency) */
  background: #070c18;                  /* dark solid */
  border: 1px solid rgba(148,163,184,0.12);
  box-shadow: 0 26px 80px rgba(0,0,0,0.60);

  /* remove glass effect */
  backdrop-filter: none;
}

html[data-theme="light"] .mywheels__menu{
  background: #ffffff;                  /* light solid */
  border-color: rgba(15,23,42,0.12);
  box-shadow: 0 22px 70px rgba(0,0,0,0.18);
}


/* IMPORTANT: hover "bridge" so the 10px gap doesn't make it instantly close */
.mywheels__menu::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}



/* JS open state (your mywheels.js toggles this) */
.mywheels.is-open .mywheels__menu{
  display: block;
}

/* NO-JS fallback: click gives focus => opens */
.mywheels:focus-within .mywheels__menu{
  display: block;
}

/* Hover-open on desktop (no JS required) */
@media (hover:hover) and (pointer:fine){
  .mywheels:hover .mywheels__menu{
    display: block;
  }
}

/* -------------------------------------------------------
   Optional: keep your inner list styles you already had
   (these match your mywheels.js render HTML)
-------------------------------------------------------- */

.mywheels__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid rgba(148,163,184,0.10);
  margin-bottom: 10px;
}

html[data-theme="light"] .mywheels__top{
  border-bottom-color: rgba(15,23,42,0.10);
}

.mywheels__title{
  font-weight: 850;
  color: #f8fafc;
  letter-spacing: .01em;
  font-size: .92rem;
}

html[data-theme="light"] .mywheels__title{
  color: #0b1220;
}

.mywheels__mini{
  appearance: none;
  background: transparent;
  border: 1px solid rgba(148,163,184,0.14);
  color: inherit;
  border-radius: 10px;
  height: 30px;
  padding: 0 10px;
  font-weight: 800;
  cursor: pointer;
}

html[data-theme="light"] .mywheels__mini{
  border-color: rgba(15,23,42,0.12);
}

.mywheels__list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
  padding-right: 2px;
}

.mywheels__item{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;

  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.10);
  background: rgba(15,23,42,0.55);
}
.mywheels__thumb{
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;

  border: 1px solid rgba(148,163,184,0.14);
  background: rgba(255,255,255,0.06);
}

.mywheels__thumb--empty{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12), transparent 60%),
    rgba(255,255,255,0.05);
}

html[data-theme="light"] .mywheels__item{
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.10);
}

.mywheels__name{
  font-weight: 850;
  color: #f1f5f9;
  font-size: .88rem;
  line-height: 1.15;
  word-break: break-word;
}

html[data-theme="light"] .mywheels__name{
  color: #0f172a;
}

.mywheels__meta{
  margin-top: 2px;
  font-size: .78rem;
  color: rgba(148,163,184,0.85);
}

html[data-theme="light"] .mywheels__meta{
  color: rgba(15,23,42,0.60);
}

.mywheels__actions{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mywheels__act{
  appearance: none;
  border: 1px solid rgba(148,163,184,0.14);
  background: transparent;
  color: inherit;
  border-radius: 10px;
  height: 30px;
  padding: 0 10px;
  cursor: pointer;
  font-weight: 800;
  font-size: .80rem;
}

.mywheels__act:hover{ opacity: .92; }

.mywheels__empty{
  padding: 10px 6px;
  color: rgba(148,163,184,0.90);
  font-size: .86rem;
}

html[data-theme="light"] .mywheels__empty{
  color: rgba(15,23,42,0.60);
}
html[data-theme="light"] .mywheels__thumb{
  border-color: rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.04);
}
/* =========================
   Premium + compact MyWheels
   ========================= */

.mywheels__menu{
  padding: 10px;
  border-radius: 14px;

  /* more “premium” glass */
  background: rgba(2, 6, 23, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(148,163,184,0.10);
  box-shadow: 0 26px 80px rgba(0,0,0,0.55);
}

html[data-theme="light"] .mywheels__menu{
  background: rgba(255,255,255,0.92);
  border-color: rgba(15,23,42,0.10);
  box-shadow: 0 22px 70px rgba(0,0,0,0.16);
}

.mywheels__list{
  gap: 8px;
  max-height: 330px;
  overflow: auto;
  padding-right: 2px;
}

.mywheels__menu{
  padding: 10px;
  border-radius: 14px;

  /* SOLID (no transparency) */
  background: #070c18;                  /* dark solid */
  border: 1px solid rgba(148,163,184,0.12);
  box-shadow: 0 26px 80px rgba(0,0,0,0.60);

  /* remove glass effect */
  backdrop-filter: none;
}

html[data-theme="light"] .mywheels__menu{
  background: #ffffff;                  /* light solid */
  border-color: rgba(15,23,42,0.12);
  box-shadow: 0 22px 70px rgba(0,0,0,0.18);
}

.mywheels__item:hover{
  background: rgba(15,23,42,0.55);
  border-color: rgba(148,163,184,0.18);
  transform: translateY(-1px);
}


html[data-theme="light"] .mywheels__item:hover{
  background: rgba(15,23,42,0.05);
  border-color: rgba(15,23,42,0.14);
}

/* THUMB: no border, just the image */
.mywheels__thumb{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;

  border: 0 !important;
  background: transparent;

  /* subtle depth without “border” */
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

html[data-theme="light"] .mywheels__thumb{
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

.mywheels__thumb--empty{
  box-shadow: none;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), transparent 60%),
    rgba(255,255,255,0.06);
}

/* RIGHT COLUMN */
.mywheels__right{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px; /* space between info and buttons */
}

.mywheels__info{
  min-width: 0;
}

.mywheels__name{
  font-weight: 900;
  font-size: 0.86rem;
  line-height: 1.15;
  letter-spacing: 0.01em;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mywheels__meta{
  margin-top: 3px;
  font-size: 0.74rem;
  line-height: 1.2;
  color: rgba(148,163,184,0.86);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-theme="light"] .mywheels__meta{
  color: rgba(15,23,42,0.60);
}

/* BUTTONS: stay on right column under info */
.mywheels__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Compact, premium pills */
.mywheels__act{
  appearance: none;
  border: 1px solid rgba(148,163,184,0.14);
  background: rgba(255,255,255,0.02);
  color: inherit;

  border-radius: 10px;
  height: 26px;
  padding: 0 9px;

  cursor: pointer;
  font-weight: 850;
  font-size: 0.78rem;
  letter-spacing: 0.01em;

  transition: transform 0.08s ease, opacity 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.mywheels__act:hover{
  opacity: 0.95;
  background: rgba(255,255,255,0.05);
  border-color: rgba(148,163,184,0.22);
  transform: translateY(-1px);
}

.mywheels__act:active{
  transform: translateY(0);
}

/* Make Delete feel dangerous but still premium */
.mywheels__act--danger{
  border-color: rgba(239,68,68,0.22);
}
.mywheels__act--danger:hover{
  border-color: rgba(239,68,68,0.40);
  background: rgba(239,68,68,0.06);
}
.mywheels__thumb { border: 0 !important; box-shadow: none !important; }
.swm__thumb { border: 0 !important; box-shadow: none !important; }
#swmPreviewCanvas { border: 0 !important; box-shadow: none !important; }
.mywheels__act--icon{
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.mywheels__actions{
  display:flex;
  align-items:center;
  gap:8px;

  /* ✅ never wrap to next line */
  flex-wrap:nowrap;
  white-space:nowrap;

  /* ✅ if tight space, scroll instead of wrapping */
 
  overflow-y:hidden;
  
}

.mywheels__act{
  flex:0 0 auto;        /* ✅ prevents shrinking + wrapping */
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.mywheels__act--icon{
  padding:6px 8px;
  line-height:0;
}
/* ================================
   FINAL OVERRIDES (NO SCROLL)
   ================================ */

/* Make the dropdown wider so ALL buttons fit */

/* Each row layout: thumb + right side should have real space */
.mywheels__item{
  grid-template-columns: 52px 1fr; /* ✅ correct columns: thumb + content */
}

/* Buttons ALWAYS in one line, no scroll */
.mywheels__actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;     /* ✅ never go underneath */
}

/* Slightly tighter buttons so they fit nicer */
.mywheels__act{
  flex: 0 0 auto;
  white-space: nowrap;
  height: 26px;
  padding: 0 9px;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Icon button sizing */
.mywheels__act--icon{
  width: 34px;
  padding: 0;
  line-height: 0;
}
/* ================================
   FINAL OVERRIDES (COMPACT, NO DEAD SPACE)
   ================================ */

/* ✅ auto-fit the dropdown to its content (no forced wide panel) */
.mywheels__menu{
  width: max-content;
  max-width: calc(100vw - 24px);
  min-width: 360px;              /* tweak: 320/360/400 */
}



/* ✅ correct row columns: thumb + flexible content */
.mywheels__item{
  grid-template-columns: 46px 1fr;
}

/* ✅ make right side not reserve extra space */
.mywheels__right{
  min-width: 0;
}

/* ✅ keep buttons on one line WITHOUT scrollbars */
.mywheels__actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;

  overflow: visible;             /* IMPORTANT: kills the scrollbar */
}

/* ✅ make the text area not force extra width */
.mywheels__info{
  min-width: 0;
}

/* ✅ keep name/meta compact */
.mywheels__name,
.mywheels__meta{
  max-width: 260px;              /* tweak: 220/260/300 */
}

/* ✅ icon button tighter */
.mywheels__act--icon{
  width: 32px;
  padding: 0;
  line-height: 0;
}
/* ================================
   FINAL OVERRIDES (VERTICAL SCROLL BACK)
   ================================ */

/* keep it compact, but not huge */
.mywheels__menu{
  width: fit-content;
  min-width: 360px;
  max-width: calc(100vw - 24px);
}

/* ✅ bring back vertical scrollbar when many wheels */
.mywheels__list{
  max-height: 360px;          /* adjust: 320 / 360 / 420 */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;         /* room for scrollbar */
  scrollbar-gutter: stable;   /* prevents layout shift when bar appears */
}

/* ✅ buttons stay on ONE line (no wrapping) */
.mywheels__actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;

  overflow: visible;          /* IMPORTANT: no horizontal scrollbars */
}

/* compact row columns */
.mywheels__item{
  grid-template-columns: 46px 1fr;
}