/* WC Mobile Offcanvas Account - Styles (Updated Again)
 * Scope with .wcmoa-* to avoid collisions.
 * Mobile-first CSS. Desktop remains unchanged.
 */

.wcmoa-wrapper, .wcmoa-panel, .wcmoa-overlay { box-sizing: border-box; }
.wcmoa-list, .wcmoa-list li { list-style: none; margin: 0; padding: 0; }

/* Toggle button (mobile only; hidden on ≥ 768px) */
.wcmoa-toggle {
  position: fixed;
  top: 16px;        /* MOVED to the top */
  left: 16px;
  bottom: auto;     /* Unset bottom position */
  z-index: 100001;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(0,0,0,.08);
  background: #ffffff !important;   /* FORCED default background color */
  color: #000000 !important;        /* FORCED default text color */
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Ensure hover state does not change the button color */
.wcmoa-toggle:hover {
    background: #ffffff !important;
    color: #000000 !important;
}

.wcmoa-toggle:active { transform: scale(0.98); }
.wcmoa-toggle:focus { outline: 2px solid rgba(0,0,0,.2); outline-offset: 2px; }

.wcmoa-toggle-icon { display: inline-flex; flex-direction: column; gap: 3px; }
.wcmoa-toggle-icon span { width: 18px; height: 2px; background: currentColor; display: block; }

/* Off-canvas overlay */
.wcmoa-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.44);
  backdrop-filter: saturate(120%) blur(2px);
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}

/* Panel */
.wcmoa-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(88vw, 340px);
  background: #fff;
  z-index: 100001;
  box-shadow: 8px 0 30px rgba(0,0,0,.16);
  transform: translateX(-100%);
  transition: transform .28s ease;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(0,0,0,.06);
}

.wcmoa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.wcmoa-title { font-size: 16px; }

/* --- CHANGES FOR CLOSE BUTTON START --- */
.wcmoa-close {
  appearance: none;
  border: none;
  background: transparent;
  color: #666666; /* Default color: A medium grey */
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 8px;
  transition: color .2s ease; /* Smooth transition for color change */
}

.wcmoa-close:hover {
  color: #333333; /* Hover color: A darker grey */
}
/* --- CHANGES FOR CLOSE BUTTON END --- */


.wcmoa-nav { overflow: auto; padding: 10px 8px 24px; }

.wcmoa-item + .wcmoa-item { margin-top: 6px; }
.wcmoa-link {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  text-decoration: none;
  font-size: 15px;
  transition: background .18s ease, border-color .18s ease, transform .1s ease;
}
.wcmoa-link:active { transform: translateY(1px); }
.wcmoa-link:focus { outline: 2px solid rgba(0,0,0,.2); outline-offset: 2px; }

.wcmoa-link:hover {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.12);
}

.wcmoa-open .wcmoa-panel { transform: translateX(0); }
.wcmoa-open .wcmoa-overlay { opacity: 1; pointer-events: auto; }

@media (max-width: 767px) {
  .wcmoa-toggle { display: inline-flex; }
  .woocommerce-account .woocommerce-MyAccount-navigation { display: none !important; }
}

@media (min-width: 768px) {
  .wcmoa-toggle,
  .wcmoa-panel,
  .wcmoa-overlay { display: none !important; }
}