/* ==========================================================================
   WEAR WING — Maison page layer · CUSTOMER & AUTH
   Scope: .authentication-area (login / signup / forget / reset)
          .user-dashboard     (dashboard, orders, wishlist, profile, billing…)
   Loads after luxe.css, before site-fixes.css. No new colors, hairlines
   over shadows, squared corners (2px max). !important is used only to beat
   base utilities that are themselves !important (.radius-*, .bg-*).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Auth pages — the boutique entrance
   -------------------------------------------------------------------------- */
.authentication-area {
  margin-top: 0;
  background: var(--ww-ivory);
  border-bottom: 1px solid var(--ww-hairline);
}

.authentication-area .auth-form {
  max-width: 460px;
  margin-inline: auto;
  background: var(--ww-paper);
  border-color: var(--ww-hairline) !important;
  border-radius: 0 !important;
  padding: clamp(34px, 5vw, 54px) clamp(24px, 4vw, 46px);
  box-shadow: 0 30px 70px -46px rgba(30, 29, 35, 0.28);
}

.authentication-area .title {
  text-align: center;
}

.ww-auth-overline {
  display: block;
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ww-auth-overline {
    color: color-mix(in srgb, var(--color-primary) 70%, var(--ww-ink));
  }
}

.authentication-area .title h3 {
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  color: var(--ww-ink);
  margin-bottom: 0;
}

/* Hairline signature under the heading */
.authentication-area .title::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(var(--color-primary-rgb), 0.7);
  margin: 20px auto 34px;
}

.authentication-area .form-control {
  min-height: 52px;
  padding: 13px 18px;
  font-size: 14px;
  background-color: #fff;
}

.authentication-area textarea.form-control {
  min-height: 110px;
}

.authentication-area .form-group.mb-30 {
  margin-bottom: 18px;
}

/* Secondary links: quiet ink, underline that warms on hover */
.authentication-area .link {
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-gray-2);
  margin-bottom: 8px;
}

.authentication-area .link a {
  color: var(--ww-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--ww-hairline);
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.authentication-area .link a:hover {
  color: var(--ww-ink);
  text-decoration-color: currentColor;
}

.authentication-area .row.align-items-center.mb-20 {
  margin-top: 6px;
  margin-bottom: 22px;
}

/* Submit: global ink .btn-primary; just settle its rhythm */
.authentication-area .btn-primary.w-100 {
  padding-top: 17px;
  padding-bottom: 17px;
}

/* “or” divider between ink CTA and Google */
.authentication-area .login_or {
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gray-2);
  margin-top: 18px;
}

.authentication-area .login_or::before,
.authentication-area .login_or::after {
  height: 1px;
  width: 42%;
  background: var(--ww-hairline);
}

.authentication-area .login_google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--ww-hairline);
  border-radius: 2px !important;
  color: var(--ww-ink);
  font-size: 13px;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.authentication-area .login_google:hover {
  border-color: var(--ww-ink);
  background: var(--ww-paper);
}

/* Guest-checkout invitation above the card (login?redirected=checkout):
   a quiet paper ghost, mirrored on the card width */
.authentication-area .checkout-guest {
  display: block;
  max-width: 460px;
  margin-inline: auto;
  padding: 16px 30px;
  background: var(--ww-paper);
  border: 1px solid var(--ww-ink);
  border-radius: 2px;
  font-family: var(--font-family-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ww-ink);
}

.authentication-area .checkout-guest:hover {
  background: var(--ww-ink);
  border-color: var(--ww-ink);
  color: #fff;
}

/* the “OR,” between guest checkout and the card */
.authentication-area .checkout-or {
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gray-2);
}

.authentication-area .alert {
  border-radius: 2px;
  font-size: 13px;
}

@media (max-width: 767px) {
  .authentication-area.ptb-100 {
    padding-top: 56px;
    padding-bottom: 64px;
  }
}

/* --------------------------------------------------------------------------
   2 · Account shell — side navbar as a caps hairline menu
   -------------------------------------------------------------------------- */
.user-dashboard .sidebar-widget-area {
  background: transparent;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0;
}

.ww-side-label {
  display: block;
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ww-ink);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ww-side-label {
    color: color-mix(in srgb, var(--color-primary) 70%, var(--ww-ink));
  }
}

.user-dashboard .sidebar-widget-area .links li {
  border-bottom: 1px solid var(--ww-hairline);
}

.user-dashboard .sidebar-widget-area .links li a {
  font-family: var(--font-family-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gray-2);
  padding: 16px 0;
  transition: color 0.3s ease;
}

.user-dashboard .sidebar-widget-area .links li a i {
  display: none;
}

/* Bronze tick that draws in front of the active entry */
.user-dashboard .sidebar-widget-area .links li a::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 1px;
  background: var(--color-primary);
  margin-inline-end: 0;
  transition: width 0.35s var(--ww-ease), margin 0.35s var(--ww-ease);
}

.user-dashboard .sidebar-widget-area .links li a.active {
  color: var(--ww-ink);
}

.user-dashboard .sidebar-widget-area .links li a.active::before {
  width: 22px;
  margin-inline-end: 10px;
}

.user-dashboard .sidebar-widget-area .links li:hover > a {
  color: var(--ww-ink);
}

.user-dashboard .sidebar-widget-area .links li:last-child a {
  padding-bottom: 16px;
}

@media (max-width: 991px) {
  .user-dashboard .sidebar-widget-area {
    margin-bottom: 44px;
  }
}

/* --------------------------------------------------------------------------
   3 · Content panels — paper cards, hairline framing
   -------------------------------------------------------------------------- */
.user-dashboard .account-info,
.user-dashboard .order-details {
  background: var(--ww-paper);
  border: 1px solid var(--ww-hairline);
  border-radius: 0 !important;
  padding: clamp(24px, 3.4vw, 40px);
}

.user-dashboard .account-info {
  padding-bottom: clamp(18px, 2.6vw, 30px);
}

.user-dashboard .title {
  border-bottom: 1px solid var(--ww-hairline);
  padding-bottom: 16px;
  margin-bottom: 26px;
}

.user-dashboard .title h3 {
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  color: var(--ww-ink);
  margin-bottom: 0;
}

/* Account information: flexed chips become a quiet spec sheet */
.user-dashboard .main-info ul.list li {
  width: 100%;
  padding: 13px 0;
  margin: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid var(--ww-hairline);
  display: flex;
  align-items: baseline;
}

.user-dashboard .main-info ul.list li:not(:last-child) {
  margin-inline-end: 0;
}

.user-profile-details ul.list li {
  margin-bottom: 0;
}

.user-dashboard .main-info ul.list li:last-child {
  border-bottom: 0;
}

.user-dashboard .main-info ul.list li span:first-child {
  flex: 0 0 clamp(110px, 16vw, 170px);
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gray-2);
}

.user-dashboard .main-info ul.list li span + span {
  color: var(--ww-ink);
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   4 · Stat tiles — ivory mats, serif numerals, no confetti
   -------------------------------------------------------------------------- */
.user-dashboard .card-box {
  background: var(--ww-ivory);
  border: 1px solid var(--ww-hairline);
  border-radius: 0 !important;
  box-shadow: none;
  padding: 24px 26px;
  gap: 18px;
  align-items: center;
}

.user-dashboard .card-box .card-icon,
.user-dashboard .card-box.color-1 .card-icon,
.user-dashboard .card-box.color-2 .card-icon,
.user-dashboard .card-box.color-3 .card-icon {
  background: var(--ww-paper);
  border: 1px solid var(--ww-hairline);
  border-radius: 2px;
  color: var(--ww-ink);
  font-size: 17px;
}

.user-dashboard .card-box .card-info h4 {
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gray-2);
  margin-bottom: 6px;
}

.user-dashboard .card-box .card-info p {
  font-family: var(--font-family-base);
  font-size: 30px;
  line-height: 1;
  color: var(--ww-ink);
}

/* --------------------------------------------------------------------------
   5 · Order tables — editorial rows
   -------------------------------------------------------------------------- */
.user-dashboard .main-table th,
.user-dashboard .main-table .dataTables_wrapper th {
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gray-2);
  background: transparent;
  box-shadow: none;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ww-ink);
  text-align: start;
}

.user-dashboard .main-table td,
.user-dashboard .main-table .dataTables_wrapper td {
  padding: 16px 14px;
  font-size: 14px;
  color: var(--ww-ink);
  border-bottom: 1px solid var(--ww-hairline);
  vertical-align: middle;
}

.user-dashboard .main-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Keep table columns composed on small screens; the wrapper
   (.overflow-x-scroll-mobile) provides horizontal scrolling */
@media (max-width: 991px) {
  .user-dashboard .main-table table {
    min-width: 560px;
  }
}

.user-dashboard .main-table .dataTables_wrapper tr.even td,
.user-dashboard .main-table .dataTables_wrapper tr.odd td {
  box-shadow: none;
}

/* Status: colored dot + small caps, ink-deepened for contrast */
.user-dashboard .pending,
.user-dashboard .processing,
.user-dashboard .completed,
.user-dashboard .rejected,
.authentication-area .rejected {
  display: inline-block;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
}

.user-dashboard .pending::before,
.user-dashboard .processing::before,
.user-dashboard .completed::before,
.user-dashboard .rejected::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin-inline-end: 7px;
  vertical-align: 2px;
}

.user-dashboard .pending { color: var(--color-orange); }
.user-dashboard .processing { color: var(--color-yellow); }
.user-dashboard .completed { color: var(--color-green); }
.user-dashboard .rejected,
.authentication-area .rejected { color: var(--color-red); }

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .user-dashboard .pending {
    color: color-mix(in srgb, var(--color-orange) 55%, var(--ww-ink));
  }
  .user-dashboard .processing {
    color: color-mix(in srgb, var(--color-yellow) 45%, var(--ww-ink));
  }
  .user-dashboard .completed {
    color: color-mix(in srgb, var(--color-green) 60%, var(--ww-ink));
  }
  .user-dashboard .rejected {
    color: color-mix(in srgb, var(--color-red) 65%, var(--ww-ink));
  }
}

/* “Details” — quiet ink ghost that fills */
.user-dashboard .main-table td a.btn,
.user-dashboard .main-table .dataTables_wrapper td a.btn {
  background: transparent;
  border: 1px solid var(--ww-ink);
  border-radius: 2px;
  color: var(--ww-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  padding: 10px 18px;
  transition: background 0.3s ease, color 0.3s ease;
}

.user-dashboard .main-table td a.btn:hover,
.user-dashboard .main-table .dataTables_wrapper td a.btn:hover {
  background: var(--ww-ink);
  color: #fff;
}

/* --------------------------------------------------------------------------
   6 · Buttons inside the account area — ink-first, squared
   -------------------------------------------------------------------------- */
.user-dashboard .btn {
  border-radius: 2px !important;
}

.user-dashboard .btn:not(.btn-icon):not([class*="btn-outline"]):not(.ww-btn-danger):not(.base-bg) {
  background: var(--ww-ink);
  border-color: var(--ww-ink);
  color: #fff;
}

.user-dashboard .btn:not(.btn-icon):not([class*="btn-outline"]):not(.ww-btn-danger):not(.base-bg):hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.user-dashboard .btn.btn-md {
  padding: 13px 30px;
}

/* Icon ghosts (wishlist add-to-cart) — mirrors product-tile quick actions */
.user-dashboard .btn.btn-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ww-paper);
  border: 1px solid var(--ww-hairline);
  color: var(--ww-ink);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.user-dashboard .btn.btn-icon:hover {
  background: var(--ww-ink);
  border-color: var(--ww-ink);
  color: #fff;
}

.user-dashboard .btn.btn-icon.btn-remove {
  background: transparent;
  border: 1px solid var(--ww-hairline);
  color: var(--color-red);
}

.user-dashboard .btn.btn-icon.btn-remove:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
}

/* Cancel / return micro-forms + delete-account: hairline caution, no shouting */
.user-dashboard .btn-outline-danger,
.user-dashboard .ww-btn-danger {
  background: transparent;
  border: 1px solid rgba(var(--color-red-rgb), 0.45);
  color: var(--color-red);
}

.user-dashboard .btn-outline-warning {
  background: transparent;
  border: 1px solid rgba(var(--color-orange-rgb), 0.55);
  color: var(--color-orange);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .user-dashboard .btn-outline-danger,
  .user-dashboard .ww-btn-danger {
    color: color-mix(in srgb, var(--color-red) 70%, var(--ww-ink));
  }
  .user-dashboard .btn-outline-warning {
    color: color-mix(in srgb, var(--color-orange) 55%, var(--ww-ink));
  }
}

.user-dashboard .btn-outline-danger:hover,
.user-dashboard .ww-btn-danger:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
}

.user-dashboard .btn-outline-warning:hover {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: #fff;
}

/* --------------------------------------------------------------------------
   7 · Order details — progress, info tables, ordered products
   -------------------------------------------------------------------------- */
.user-dashboard .progress-steps li .icon {
  background: var(--ww-paper);
  border: 1px solid var(--ww-hairline);
  border-radius: 2px;
  line-height: 28px;
  font-family: var(--font-family-base);
  font-weight: 400;
  color: var(--color-gray-2);
  z-index: 1;
}

.user-dashboard .progress-steps li::after {
  height: 1px;
  background: var(--ww-hairline);
  top: 15px;
}

.user-dashboard .progress-steps li .progress-title {
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gray-2);
}

.user-dashboard .progress-steps li.active .icon {
  background: var(--ww-ink);
  border-color: var(--ww-ink);
  color: #fff;
}

.user-dashboard .progress-steps li.active .progress-title {
  color: var(--ww-ink);
}

.user-dashboard .order-info-area {
  padding: 22px 0 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-top: 1px solid var(--ww-hairline);
}

.user-dashboard .order-info h4 {
  font-size: 1.35rem;
  color: var(--ww-ink);
  margin-bottom: 6px;
}

.user-dashboard .order-info p {
  color: var(--color-gray-2);
  font-size: 13px;
}

.user-dashboard .table_component table {
  border-color: var(--ww-hairline);
}

.user-dashboard .table_component th {
  background-color: var(--ww-ivory);
  border-color: var(--ww-hairline);
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ww-ink);
  padding: 12px 20px;
}

.user-dashboard .table_component td {
  background-color: var(--ww-paper);
  border-color: var(--ww-hairline);
  color: var(--ww-ink);
  font-size: 13.5px;
  padding: 11px 14px;
}

.user-dashboard .table_component td p {
  font-size: 13.5px;
}

.user-dashboard .product-list h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: var(--ww-ink);
  border-bottom: 1px solid var(--ww-hairline);
  padding-bottom: 14px;
  margin-bottom: 0;
}

.user-dashboard .product-list .table_ordered th {
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gray-2);
  background: transparent;
  border-color: var(--ww-hairline);
  padding: 14px;
}

.user-dashboard .product-list .table_ordered td {
  border-color: var(--ww-hairline);
  font-size: 14px;
  color: var(--ww-ink);
  vertical-align: middle;
}

.user-dashboard .product-list .table-image {
  background: var(--ww-ivory);
}

/* --------------------------------------------------------------------------
   8 · Wishlist — inherits the gallery language
   -------------------------------------------------------------------------- */
.user-dashboard .item-list {
  border-color: var(--ww-hairline) !important;
  border-radius: 0 !important;
  background: var(--ww-paper);
  padding: clamp(8px, 1.6vw, 20px) clamp(12px, 2vw, 24px);
  overflow-x: auto;
}

.user-dashboard .shopping-table {
  min-width: 640px;
}

.user-dashboard .shopping-table .table-heading {
  background: transparent;
}

.user-dashboard .shopping-table .table-heading th {
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gray-2);
  border-bottom: 1px solid var(--ww-ink);
  border-radius: 0;
}

.user-dashboard.shopping-area tbody tr:not(:first-child) {
  border-top-color: var(--ww-hairline) !important;
}

.user-dashboard.shopping-area tbody td {
  padding: 18px 10px;
}

.user-dashboard .shopping-table .lazy-container {
  border-radius: 0 !important;
  background: var(--ww-ivory);
}

.user-dashboard .shopping-table .product-title,
.user-dashboard .shopping-table .product-title a {
  font-family: var(--font-family-base);
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--ww-ink);
  transition: color 0.3s ease;
}

.user-dashboard .shopping-table .product-title a:hover {
  color: var(--color-primary);
}

.user-dashboard .shopping-table .product-price h4 {
  font-family: var(--font-family-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ww-ink);
}

/* Stock badges: strip the pill fill, keep the truth */
.user-dashboard .shopping-table .badge {
  background: transparent !important;
  padding: 0;
  border-radius: 0;
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.user-dashboard .shopping-table .badge i {
  font-size: 9px;
  margin-inline-end: 4px;
}

.user-dashboard .shopping-table .badge.bg-success {
  color: var(--color-green);
}

.user-dashboard .shopping-table .badge.bg-danger {
  color: var(--color-red);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .user-dashboard .shopping-table .badge.bg-success {
    color: color-mix(in srgb, var(--color-green) 60%, var(--ww-ink));
  }
  .user-dashboard .shopping-table .badge.bg-danger {
    color: color-mix(in srgb, var(--color-red) 65%, var(--ww-ink));
  }
}

/* Empty wishlist */
.user-dashboard .card .empty-cart-cls {
  padding: clamp(30px, 5vw, 60px) 0;
}

.user-dashboard .card .empty-cart-cls .empty-icon {
  color: var(--ww-hairline);
}

.user-dashboard .card .empty-cart-cls h3 {
  font-size: 1.4rem;
  color: var(--ww-ink);
}

.user-dashboard .card .empty-cart-cls h3 strong {
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   9 · Profile forms — avatar, privacy panel
   -------------------------------------------------------------------------- */
.user-dashboard .edit-info-area {
  margin-top: 0;
}

.user-dashboard .edit-info-area .upload-img .img-box {
  border: 1px solid var(--ww-hairline);
  background: var(--ww-ivory);
}

.user-dashboard .edit-info-area p {
  color: var(--color-gray-2);
  line-height: 1.8;
}

.user-dashboard .edit-info-area hr {
  border-top-color: var(--ww-hairline);
  opacity: 1;
  margin: 28px 0 22px;
}

.user-dashboard .edit-info-area h5 {
  font-size: 1.05rem;
}

.user-dashboard .form-control {
  min-height: 50px;
  font-size: 14px;
}

.user-dashboard textarea.form-control {
  min-height: 110px;
}

.user-dashboard .form-control-sm {
  min-height: 38px;
  font-size: 13px;
}

@media (max-width: 767px) {
  .user-dashboard.pt-100 {
    padding-top: 56px;
  }

  .user-dashboard.ptb-100 {
    padding-top: 56px;
    padding-bottom: 64px;
  }

  .user-dashboard .main-info ul.list li {
    flex-direction: column;
    gap: 3px;
  }

  .user-dashboard .main-info ul.list li span:first-child {
    flex: 0 0 auto;
  }
}