/* ==========================================================================
   LuxDesign — Modern My Account (sidebar + content)
   ========================================================================== */
:root {
  --acc-gold: #b8860b;
  --acc-dark: #1a1a1a;
  --acc-muted: #8a8a8a;
  --acc-line: #ececec;
  --acc-bg: #f4f2ee;
  --acc-card: #fff;
  --acc-radius: 16px;
  --acc-shadow: 0 6px 28px rgba(20, 18, 14, .06);
}

/* Kill the legacy account layout inside our wrapper */
.lux-acc .woocommerce-MyAccount-content { width: 100%; float: none; margin: 0; }

/* Remove list bullets from the menu + all link underlines in the account area */
.lux-acc__nav ul,
.lux-acc__nav li,
.lux-acc__list,
.lux-acc__list li { list-style: none !important; margin-left: 0; padding-left: 0; }
.lux-acc a,
.lux-acc a:hover,
.lux-acc a:focus { text-decoration: none !important; }

/* ---- Layout ---- */
.lux-acc {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin: 8px 0 40px;
}
.lux-acc__bar { display: none; }

/* ---- Sidebar ---- */
.lux-acc__side { position: sticky; top: 24px; }
.lux-acc__nav {
  background: var(--acc-card);
  border: 1px solid var(--acc-line);
  border-radius: var(--acc-radius);
  box-shadow: var(--acc-shadow);
  padding: 20px 16px;
}

/* User card */
.lux-acc__card { display: flex; align-items: center; gap: 12px; padding: 6px 8px 18px; border-bottom: 1px solid var(--acc-line); margin-bottom: 14px; }
.lux-acc__avatar {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 1.15rem; color: #fff;
  background: linear-gradient(135deg, #caa53c, var(--acc-gold));
  box-shadow: 0 4px 12px rgba(184, 134, 11, .35);
}
.lux-acc__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lux-acc__name { font-size: .98rem; color: var(--acc-dark); line-height: 1.2; }
.lux-acc__company { font-size: .78rem; color: var(--acc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lux-acc__badge { margin-top: 4px; align-self: flex-start; font-size: .68rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; letter-spacing: .02em; }
.lux-acc__badge.is-approved { background: #eaf7ec; color: #1e6e2e; }
.lux-acc__badge.is-pending { background: #fff3d6; color: #a06a00; }

/* Group labels */
.lux-acc__group-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--acc-muted); font-weight: 700; padding: 14px 10px 6px; }

/* Menu items */
.lux-acc__list { list-style: none; margin: 0; padding: 0; }
.lux-acc__list--foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--acc-line); }
.lux-acc__item { margin: 2px 0; }
.lux-acc__item a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 11px;
  color: #3a3a3a; text-decoration: none; font-size: .92rem; font-weight: 500;
  transition: background .15s, color .15s;
  position: relative;
}
.lux-acc__ic { width: 20px; height: 20px; flex: 0 0 auto; color: var(--acc-muted); transition: color .15s; }
.lux-acc__item a:hover { background: #f6f4ef; color: var(--acc-dark); }
.lux-acc__item a:hover .lux-acc__ic { color: var(--acc-gold); }
.lux-acc__item.is-active a { background: linear-gradient(90deg, rgba(184,134,11,.12), rgba(184,134,11,.04)); color: var(--acc-dark); font-weight: 700; }
.lux-acc__item.is-active a::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acc-gold); }
.lux-acc__item.is-active .lux-acc__ic { color: var(--acc-gold); }
.lux-acc__item--logout a { color: #b23b32; }
.lux-acc__item--logout a:hover { background: #fdecea; color: #a12a1e; }
.lux-acc__item--logout a:hover .lux-acc__ic { color: #a12a1e; }

/* ---- Content panel ---- */
.lux-acc__main { min-width: 0; }
.lux-acc__content {
  background: var(--acc-card);
  border: 1px solid var(--acc-line);
  border-radius: var(--acc-radius);
  box-shadow: var(--acc-shadow);
  padding: 30px 32px;
}
.lux-acc__content > h2:first-child,
.lux-acc__content > h3:first-child { margin-top: 0; }

/* ---- Dashboard ---- */
.lux-dash__hero h2 { margin: 0 0 6px; font-size: 1.5rem; color: var(--acc-dark); }
.lux-dash__hero p { margin: 0 0 8px; color: var(--acc-muted); }
.lux-dash__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 22px 0; }
.lux-dash__stat { border: 1px solid var(--acc-line); border-radius: 14px; padding: 16px 18px; background: #fafaf8; display: flex; flex-direction: column; gap: 6px; }
.lux-dash__stat-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--acc-muted); }
.lux-dash__stat-v { font-size: 1.35rem; font-weight: 700; color: var(--acc-dark); }
.lux-dash__title { margin: 26px 0 12px; font-size: 1.05rem; }
.lux-dash__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.lux-dash__card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px; border: 1px solid var(--acc-line); border-radius: 14px;
  text-decoration: none; color: var(--acc-dark); background: var(--acc-card);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.lux-dash__card .lux-acc__ic { width: 26px; height: 26px; color: var(--acc-gold); margin-bottom: 4px; }
.lux-dash__card:hover { border-color: var(--acc-gold); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(184,134,11,.12); }
.lux-dash__card-n { font-weight: 700; }
.lux-dash__card-s { font-size: .8rem; color: var(--acc-muted); }
.lux-dash__cta { margin-top: 26px; padding: 22px; border-radius: 14px; background: #faf7ef; border: 1px solid #efe6cf; text-align: center; }
.lux-dash__cta p { margin: 0 0 12px; font-weight: 600; }

/* ---- Modernize default WooCommerce content elements ---- */
.lux-acc__content .woocommerce-message,
.lux-acc__content .woocommerce-info,
.lux-acc__content .woocommerce-error { border-radius: 12px; border-left-width: 3px; }
.lux-acc__content table.shop_table,
.lux-acc__content .woocommerce-orders-table {
  border: 1px solid var(--acc-line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.lux-acc__content table.shop_table th { background: #faf9f6; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--acc-muted); }
.lux-acc__content table.shop_table th,
.lux-acc__content table.shop_table td { padding: 12px 14px; border-top: 1px solid var(--acc-line); }
.lux-acc__content .woocommerce-Address { border: 1px solid var(--acc-line); border-radius: 12px; padding: 18px; }
.lux-acc__content form .woocommerce-input-wrapper input.input-text,
.lux-acc__content input.input-text,
.lux-acc__content select,
.lux-acc__content textarea {
  border: 1px solid #d8d3c9; border-radius: 9px; padding: 10px 12px;
}
.lux-acc__content .button,
.lux-acc__content button[type="submit"] {
  background: var(--acc-dark); color: #fff; border: 0; border-radius: 9px;
  padding: 11px 24px; font-weight: 600; transition: background .15s;
}
.lux-acc__content .button:hover,
.lux-acc__content button[type="submit"]:hover { background: var(--acc-gold); }

/* ---- Mobile drawer ---- */
.lux-acc__scrim { display: none; }
@media (max-width: 900px) {
  .lux-acc { grid-template-columns: 1fr; gap: 0; }
  .lux-acc__bar { display: flex; margin-bottom: 16px; }
  .lux-acc__hamburger {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    background: var(--acc-card); border: 1px solid var(--acc-line); border-radius: 12px;
    padding: 11px 16px; font-weight: 600; color: var(--acc-dark); box-shadow: var(--acc-shadow);
  }
  .lux-acc__hamburger span { width: 18px; height: 2px; background: var(--acc-dark); display: block; position: relative; }
  .lux-acc__hamburger span + span { margin-top: -1px; }
  .lux-acc__hamburger span:nth-child(2) { margin: 4px 0; }
  .lux-acc__hamburger em { font-style: normal; }

  .lux-acc__side {
    position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 86vw; z-index: 1000;
    transform: translateX(-105%); transition: transform .25s ease; padding: 16px; overflow-y: auto;
    background: var(--acc-bg);
  }
  .lux-acc__toggle-input:checked ~ .lux-acc__side { transform: translateX(0); }
  .lux-acc__toggle-input:checked ~ .lux-acc__main .lux-acc__scrim {
    display: block; position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.4);
  }
  .lux-acc__content { padding: 22px 18px; }
}