/* My Account area (dashboard, addresses, and the shared sidebar used by every user/* page).
   Palette matches includes/auth-panel.blade.php (assets/front/css/auth.css .auth-card vars)
   so the sign-in flow and the account area feel like one design. */
/* declared at :root, not scoped to .acct-page, because the sidebar these variables style
   (.acct-side/.acct-nav below) is included on every user/* account page - most of which
   (orders, wishlist, profile, tickets...) don't use the .acct-page wrapper themselves */
:root {
  --acct-accent: #07a8a9;
  --acct-ink: #1d2340;
  --acct-muted: #6b7191;
  --acct-line: #dcdff0;
  --acct-bg-soft: #f4f6fb;
  --acct-danger: #c62f3e;
}
.acct-page {
  padding: 34px 0 60px;
  color: var(--acct-ink);
}
.acct-page *, .acct-page *::before, .acct-page *::after { box-sizing: border-box; }

/* ---------- sidebar ---------- */
.acct-side {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(29, 35, 64, .08);
  padding: 26px 22px;
  margin-bottom: 24px;
}
.acct-side-user { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; margin-bottom: 10px; border-bottom: 1px solid var(--acct-line); }
.acct-avatar {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(160deg, #0f2a4a 0%, var(--acct-accent) 130%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; text-transform: uppercase;
}
.acct-side-user strong { display: block; font-size: 15px; color: var(--acct-ink); }
.acct-side-user span { display: block; font-size: 13px; color: var(--acct-muted); word-break: break-all; }

.acct-nav { list-style: none; margin: 0; padding: 0; }
.acct-nav li { margin: 2px 0; }
.acct-nav li a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px;
  color: var(--acct-ink); font-size: 14.5px; font-weight: 500;
  text-decoration: none; transition: background .15s ease, color .15s ease;
}
.acct-nav li a i { width: 18px; text-align: center; color: var(--acct-muted); font-size: 15px; transition: color .15s ease; }
.acct-nav li a:hover { background: var(--acct-bg-soft); }
.acct-nav li.active a { background: var(--acct-bg-soft); color: var(--acct-accent); }
.acct-nav li.active a i { color: var(--acct-accent); }
.acct-nav-divider { border: none; border-top: 1px solid var(--acct-line); margin: 12px 6px; }
.acct-nav-logout a { color: var(--acct-danger); }
.acct-nav-logout a i { color: var(--acct-danger); }

.acct-vendor-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 16px; padding: 12px; border-radius: 999px;
  background: var(--acct-accent); color: #fff; font-weight: 600; font-size: 14px;
  text-decoration: none;
}
.acct-vendor-cta:hover { opacity: .92; color: #fff; }

/* ---------- sidebar: mobile ----------
   Below 768px there's no room for the full profile card + link list above every account page's
   content. On the dashboard ("My Account") page itself, the profile row stays but flattens (no
   shadow) and gets a chevron that expands the same .acct-nav list inline, in normal document
   flow - no overlay, no backdrop, no slide animation. On every OTHER account page the profile
   row is swapped for a plain "My Account" back link instead (.is-acct-sub, set server-side).
   Desktop (.acct-side as a static card with the full list always visible) is untouched. */
.acct-mobile-back { display: none; }
.acct-menu-chevron { display: none; }
@media (max-width: 767px) {
  .acct-side { padding: 16px 18px; margin-bottom: 16px; box-shadow: none; border: 1px solid var(--acct-line); }
  .acct-side-user { position: relative; padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
  .acct-menu-chevron {
    display: flex; align-items: center; justify-content: center;
    margin-left: auto; width: 32px; height: 32px; flex: 0 0 32px;
    border: none; border-radius: 50%; background: var(--acct-bg-soft); color: var(--acct-ink);
    transition: transform .2s ease;
  }
  .acct-side.is-nav-open .acct-menu-chevron { transform: rotate(90deg); }
  .acct-nav { display: none; margin: 16px 0 0; }
  .acct-side.is-nav-open .acct-nav { display: block; }

  .acct-side.is-acct-sub { padding: 0; border: none; box-shadow: none; background: none; margin-bottom: 12px; }
  .acct-side.is-acct-sub .acct-side-user,
  .acct-side.is-acct-sub .acct-nav { display: none; }
  .acct-side.is-acct-sub .acct-mobile-back {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: var(--acct-ink); text-decoration: none;
  }
}

/* ---------- hero / greeting ---------- */
.acct-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.acct-hero h2 { margin: 0 0 6px; font-size: 26px; font-weight: 700; color: var(--acct-ink); text-transform: none; }
.acct-hero p { margin: 0; color: var(--acct-muted); font-size: 14.5px; }
.acct-hero-stats { display: flex; gap: 10px; margin-top: 14px; }
.acct-stat-chip {
  background: #fff; border: 1px solid var(--acct-line); border-radius: 999px;
  padding: 7px 16px; font-size: 13px; color: var(--acct-muted);
}
.acct-stat-chip strong { color: var(--acct-ink); font-size: 14px; }
@media (max-width: 767px) {
  .acct-hero { margin-bottom: 16px; }
  .acct-hero h2 { font-size: 21px; }
  .acct-hero p { font-size: 13.5px; }
  /* "Edit Profile" is redundant with Settings, already one tap away in the expanded nav list -
     dropping it here keeps the dashboard from repeating the same destination twice on mobile. */
  .acct-hero > a.acct-btn-outline { display: none; }
  .acct-hero-stats { width: 100%; }
}

.acct-btn, .acct-btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px; font-size: 14px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; white-space: nowrap; cursor: pointer;
}
.acct-btn { background: var(--acct-accent); color: #fff; }
.acct-btn:hover { opacity: .92; color: #fff; }
.acct-btn-outline { background: #fff; color: var(--acct-ink); border-color: var(--acct-line); }
.acct-btn-outline:hover { border-color: var(--acct-accent); color: var(--acct-accent); }
.acct-btn-outline.sm, .acct-btn.sm { padding: 8px 16px; font-size: 13px; }

/* ---------- cards ---------- */
.acct-card {
  background: #fff; border-radius: 20px; box-shadow: 0 14px 40px rgba(29, 35, 64, .08);
  padding: 24px; margin-bottom: 22px;
}
.acct-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.acct-card-head h4 { margin: 0; font-size: 18px; font-weight: 700; color: var(--acct-ink); text-transform: none; }
.acct-card-head a { color: var(--acct-accent); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.acct-card-head a:hover { text-decoration: underline; }

/* ---------- recent orders ---------- */
.acct-order-row {
  display: grid; grid-template-columns: 54px 1fr auto auto auto auto;
  align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--acct-line);
}
.acct-order-row:first-of-type { border-top: none; }
/* display:contents keeps date/status/price as direct grid items on desktop (unchanged 6-column
   layout) while letting the wrapper be repositioned as a single flex group on mobile below. */
.acct-order-meta { display: contents; }
.acct-order-thumb { width: 54px; height: 54px; border-radius: 12px; object-fit: contain; background: var(--acct-bg-soft); padding: 6px; }
.acct-order-info strong { display: block; font-size: 14.5px; color: var(--acct-ink); }
.acct-order-info span { display: block; font-size: 12.5px; color: var(--acct-muted); margin-top: 2px; }
.acct-order-date { font-size: 13px; color: var(--acct-muted); white-space: nowrap; }
.acct-order-price { font-size: 14.5px; font-weight: 700; color: var(--acct-ink); white-space: nowrap; }
.acct-order-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.acct-order-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.acct-order-status.completed { background: #e6f7ee; color: #17784a; }
.acct-order-status.pending { background: #fdf1e0; color: #b5710c; }
.acct-order-status.processing { background: #eaf1fb; color: #24518f; }
.acct-order-status.declined { background: #fbeaea; color: var(--acct-danger); }
.acct-empty { color: var(--acct-muted); font-size: 14px; padding: 10px 0; }
@media (max-width: 767px) {
  .acct-order-row { grid-template-columns: 46px 1fr; grid-template-areas: "thumb info" "thumb meta" "thumb action"; row-gap: 8px; }
  .acct-order-thumb { grid-area: thumb; width: 46px; height: 46px; }
  .acct-order-info { grid-area: info; }
  .acct-order-meta { grid-area: meta; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  .acct-order-row a.acct-btn-outline { grid-area: action; justify-self: start; margin-top: 4px; }
}

/* ---------- quick links ---------- */
.acct-quicklinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
@media (max-width: 767px) {
  .acct-quicklinks { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
.acct-quicklink {
  background: #fff; border-radius: 18px; box-shadow: 0 14px 40px rgba(29, 35, 64, .08);
  padding: 26px 14px; text-align: center; text-decoration: none; color: var(--acct-ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
@media (max-width: 767px) {
  .acct-quicklink { padding: 16px 6px; border-radius: 16px; }
  .acct-quicklink-ico { width: 42px; height: 42px; font-size: 16px; margin-bottom: 8px; }
  .acct-quicklink strong { font-size: 12.5px; }
  .acct-quicklink small { display: none; }
}
.acct-quicklink:hover { transform: translateY(-3px); box-shadow: 0 18px 46px rgba(29, 35, 64, .14); color: var(--acct-ink); }
.acct-quicklink-ico {
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--acct-bg-soft); color: var(--acct-accent);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.acct-quicklink strong { display: block; font-size: 14.5px; font-weight: 600; }
.acct-quicklink small { display: block; font-size: 12px; color: var(--acct-muted); margin-top: 3px; }

/* ---------- help banner ---------- */
.acct-banner {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--acct-bg-soft); border-radius: 20px; padding: 22px 26px;
}
.acct-banner-ico {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--acct-accent); display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.acct-banner-copy { flex: 1 1 260px; }
.acct-banner-copy h4 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--acct-ink); text-transform: none; }
.acct-banner-copy p { margin: 0; font-size: 13.5px; color: var(--acct-muted); }

/* ---------- orders list (search + infinite scroll) ---------- */
.acct-search { position: relative; margin-bottom: 18px; }
.acct-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--acct-muted); font-size: 13px; }
.acct-search input {
  width: 100%; padding: 11px 14px 11px 40px; border: 1px solid var(--acct-line); border-radius: 999px;
  font-size: 14px; color: var(--acct-ink); background: #fff;
}
.acct-search input:focus { outline: none; border-color: var(--acct-accent); }
.acct-infinite-loader { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px 0 4px; font-size: 13.5px; color: var(--acct-muted); }
.acct-spinner { display: inline-block; width: 18px; height: 18px; border: 2.5px solid var(--acct-line); border-top-color: var(--acct-accent); border-radius: 50%; animation: acctSpin .7s linear infinite; }
@keyframes acctSpin { to { transform: rotate(360deg); } }
.acct-infinite-end { margin: 20px 0 4px; text-align: center; font-size: 13.5px; color: var(--acct-muted); }
@media (prefers-reduced-motion: reduce) { .acct-spinner { animation-duration: 1.4s; } }

/* ---------- simple list pages (Favorites, Messages, Tickets, Disputes, Withdraw) ---------- */
.acct-card .acct-table { width: 100%; border-collapse: collapse; }
.acct-card .acct-table thead th {
  text-align: left; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--acct-muted); padding: 0 0 12px; border-bottom: 1px solid var(--acct-line);
}
.acct-card .acct-table tbody td { padding: 14px 0; border-top: 1px solid var(--acct-line); font-size: 14px; color: var(--acct-ink); vertical-align: middle; }
.acct-card .acct-table tbody tr:first-child td { border-top: none; }
.acct-card .acct-table .acct-table-actions { display: flex; gap: 14px; }
.acct-card .acct-table .acct-table-actions a, .acct-card .acct-table .acct-table-actions button {
  background: none; border: none; padding: 0; font-size: 13px; font-weight: 600; color: var(--acct-accent);
  text-decoration: none; cursor: pointer;
}
.acct-card .acct-table .acct-table-actions .danger { color: var(--acct-danger); }
@media (max-width: 575px) {
  /* Stack each row into a labelled mini-card instead of a cramped 4-column table. */
  .acct-card .acct-table thead { display: none; }
  .acct-card .acct-table, .acct-card .acct-table tbody, .acct-card .acct-table tr, .acct-card .acct-table td { display: block; width: 100%; }
  .acct-card .acct-table tr { padding: 12px 0; border-top: 1px solid var(--acct-line); }
  .acct-card .acct-table tr:first-child { border-top: none; }
  .acct-card .acct-table td {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 4px 0; border-top: none; text-align: right;
  }
  .acct-card .acct-table td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--acct-muted);
  }
  .acct-card .acct-table td[data-label]:empty::before { content: none; }
}
/* DataTables' bolted-on search/length/pagination controls, restyled to match. This install uses
   DataTables' Bootstrap integration, where every pagination button is a <li class="paginate_button
   page-item"><a class="page-link">: the visible pill (border/radius/padding) belongs on .page-link
   only (further down) - .paginate_button here is reset to a plain wrapper so the two classes don't
   each draw their own border on top of each other. */
.acct-card .dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--acct-line); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; margin-left: 6px;
}
.acct-card .dataTables_wrapper .dataTables_filter { margin-bottom: 14px; }
.acct-card .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--acct-line); border-radius: 999px; padding: 6px 32px 6px 14px; font-size: 13.5px;
  margin: 0 6px; color: var(--acct-ink); background-color: #fff;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7191' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 7px;
}
.acct-card .dataTables_wrapper .dataTables_length select:focus { outline: none; border-color: var(--acct-accent); }
.acct-card .dataTables_wrapper .dataTables_paginate .paginate_button {
  border: none !important; background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important;
}

/* Legacy icon-font wishlist hearts (vendor store, tag, quick-view, and other pre-redesign
   product cards) - same .add-to-wish click hook as the newer SVG hearts, just a plain
   color change since icofont glyphs don't have a fill/stroke to toggle. */
.add-to-wish.is-wishlisted .icofont-heart-alt { color: #e0245e; }

/* ---------- wishlist ---------- */
.acct-wish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 991px) { .acct-wish-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .acct-wish-grid { grid-template-columns: 1fr; } }
.acct-wish-card { position: relative; border: 1px solid var(--acct-line); border-radius: 16px; padding: 16px; text-align: center; }
.acct-wish-remove {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 1px solid var(--acct-line); color: var(--acct-muted);
  display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; z-index: 2;
}
.acct-wish-remove:hover { color: var(--acct-danger); border-color: var(--acct-danger); }
.acct-wish-img { display: block; height: 140px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.acct-wish-img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.acct-wish-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; color: var(--acct-ink); text-decoration: none; min-height: 38px; }
.acct-wish-name:hover { color: var(--acct-accent); }
.acct-wish-rating { margin: 6px 0; display: flex; justify-content: center; }
.acct-wish-price { font-size: 14.5px; font-weight: 700; color: var(--acct-ink); }
.acct-wish-price del { font-weight: 400; color: var(--acct-muted); font-size: 12.5px; margin-left: 6px; }
.acct-wish-stock-badge {
  position: absolute; left: 12px; top: 12px; z-index: 2; padding: 4px 10px; border-radius: 999px;
  background: #6b7191; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.acct-wish-card.is-out-of-stock .acct-wish-img img { opacity: .45; filter: grayscale(.3); }
.acct-wish-card.is-out-of-stock .acct-wish-name { color: var(--acct-muted); }
@media (max-width: 575px) {
  .acct-wish-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; }
  .acct-wish-img { flex: 0 0 68px; height: 68px; margin-bottom: 0; background: var(--acct-bg-soft); border-radius: 10px; }
  .acct-wish-name { min-height: 0; -webkit-line-clamp: 1; }
  .acct-wish-rating { justify-content: flex-start; }
  .acct-wish-remove { top: 10px; right: 10px; }
}
.acct-card .pagination { justify-content: center; margin: 22px 0 0; }
.acct-card .pagination .page-link {
  border-radius: 999px !important; border: 1px solid var(--acct-line) !important; margin: 0 3px; padding: 6px 14px;
  color: var(--acct-ink); background: #fff; box-shadow: none !important;
}
.acct-card .pagination .page-link:hover { border-color: var(--acct-accent); color: var(--acct-accent); }
.acct-card .pagination .page-link:focus { box-shadow: none !important; outline: none; }
.acct-card .pagination .page-item.active .page-link { background: var(--acct-accent) !important; border-color: var(--acct-accent) !important; color: #fff !important; }
.acct-card .pagination .page-item.disabled .page-link { color: var(--acct-muted); background: var(--acct-bg-soft); opacity: .7; }

/* ---------- addresses page ---------- */
.acct-address-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 767px) { .acct-address-grid { grid-template-columns: 1fr; } }
.acct-address-card { border: 1px solid var(--acct-line); border-radius: 16px; padding: 18px; position: relative; }
.acct-address-card.is-default { border-color: var(--acct-accent); }
.acct-address-badge {
  position: absolute; top: 14px; right: 14px; background: var(--acct-accent); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}
.acct-address-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--acct-accent); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px;
}
.acct-address-label-ico { flex: 0 0 auto; }
.acct-address-card strong { display: block; font-size: 15px; color: var(--acct-ink); margin-bottom: 4px; }
.acct-address-card p { margin: 0; font-size: 13.5px; color: var(--acct-muted); line-height: 1.5; }
.acct-address-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.acct-address-actions a, .acct-address-actions button {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0; font-size: 13px; font-weight: 600; color: var(--acct-accent);
  text-decoration: none; cursor: pointer;
}
.acct-address-actions .danger { color: var(--acct-danger); }
.acct-address-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px dashed var(--acct-line); border-radius: 16px; padding: 26px; cursor: pointer;
  color: var(--acct-muted); font-weight: 600; font-size: 14.5px; background: none; width: 100%;
}
.acct-address-add:hover { border-color: var(--acct-accent); color: var(--acct-accent); }

/* ---------- settings / profile information ---------- */
.acct-card-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--acct-muted); font-weight: 400; }
.acct-profile-row {
  display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--acct-line);
}
.acct-profile-row:first-of-type { border-top: none; }
.acct-profile-ico {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.acct-ico-blue { background: #eaf1fb; color: #24518f; }
.acct-ico-pink { background: #fbeaf5; color: #c23f9a; }
.acct-ico-green { background: #e6f7ee; color: #17784a; }
.acct-ico-orange { background: #fdf1e0; color: #b5710c; }
.acct-ico-purple { background: #f1ecfb; color: #6a3fc2; }
.acct-ico-teal { background: #e3f6f6; color: #0a8888; }
.acct-profile-body { flex: 1; min-width: 0; }
.acct-profile-body strong { display: block; font-size: 15px; font-weight: 700; color: var(--acct-ink); }
.acct-profile-body span.acct-profile-view,
.acct-profile-body > span { display: block; font-size: 13.5px; color: var(--acct-muted); margin-top: 2px; }
.acct-profile-input {
  margin-top: 4px; padding: 8px 12px; border: 1px solid var(--acct-accent); border-radius: 10px;
  font-size: 14px; color: var(--acct-ink); background: #fff; max-width: 260px;
}
.acct-profile-edit {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  padding: 0; color: var(--acct-muted); cursor: pointer; text-decoration: none;
}
@media (max-width: 575px) {
  .acct-profile-row { gap: 10px; padding: 14px 0; }
  .acct-profile-ico { flex-basis: 38px; width: 38px; height: 38px; font-size: 14px; }
  .acct-profile-body strong { font-size: 13.5px; }
  .acct-profile-body span.acct-profile-view, .acct-profile-body > span { font-size: 12.5px; }
  .acct-profile-edit span { display: none; }
}
/* Inline SVG instead of the Font Awesome glyph - "Font Awesome 5 Free" only has two real
   @font-face weights (400 regular/outline, 900 solid) under one family name, so any other
   font-weight value just gets matched to whichever is numerically closer and silently swaps
   glyphs; an SVG stroke has no such ambiguity and follows stroke-width exactly. Sized to match
   the "Edit" text next to it. */
.acct-edit-ico { width: 11.5px; height: 11.5px; flex: 0 0 auto; }
.acct-profile-edit span { font-size: 11.5px; font-weight: 500; }
.acct-profile-edit:hover { color: var(--acct-accent); text-decoration: underline; }

/* Male/Female pill toggle (replaces a native <select> - only two real choices, and this
   renders consistently across browsers instead of relying on OS dropdown chrome). Keeps the
   .acct-profile-input class (for the JS show/hide + value lookup) but resets that class's
   own box styling, since each pill already draws its own border/background. */
.acct-gender-radios.acct-profile-input { border: none; padding: 0; background: none; max-width: none; }
.acct-gender-radios { display: flex; gap: 8px; margin-top: 4px; }
.acct-gender-opt {
  position: relative; margin: 0; padding: 8px 18px; border: 1px solid var(--acct-line); border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--acct-muted); background: #fff; cursor: pointer; transition: all .15s ease;
}
.acct-gender-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.acct-gender-opt.is-selected { border-color: var(--acct-accent); color: var(--acct-accent); background: var(--acct-bg-soft); }
.acct-gender-opt input:focus-visible { outline: 2px solid var(--acct-accent); outline-offset: 2px; }
.acct-badge-verified, .acct-badge-unverified {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
}
.acct-badge-verified { background: #e6f7ee; color: #17784a; }
.acct-badge-verified i {
  display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
  border-radius: 50%; background: #17784a; color: #fff; font-size: 8.5px;
}
.acct-badge-unverified { background: #fdf1e0; color: #b5710c; }
@media (max-width: 575px) {
  .acct-profile-row { flex-wrap: wrap; }
  .acct-profile-edit { margin-left: 62px; }
}

/* address add/edit modal form */
.acct-field { margin: 0 0 14px; }
.acct-field label { display: block; font-size: 13px; font-weight: 600; color: var(--acct-ink); margin-bottom: 6px; }
.acct-field input, .acct-field select, .acct-field textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--acct-line); border-radius: 12px;
  font-size: 14px; color: var(--acct-ink); background: #fff; font-family: inherit;
}
.acct-field textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.acct-field input:focus, .acct-field select:focus, .acct-field textarea:focus { outline: none; border-color: var(--acct-accent); }
.acct-field-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--acct-muted); }

/* ---------- raise-a-ticket inline panel (no popup - opens in place on the Support & Tickets page) ---------- */
.acct-ticket-panel { padding: 24px; }
/* One canonical circular close/remove button, reused everywhere a small "x" appears in this
   design system (this ticket panel, the applied-coupon chip in checkout, etc). */
.acct-icon-close {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: none; border-radius: 50%; background: var(--acct-bg-soft); color: var(--acct-muted);
  font-size: 13px; cursor: pointer; flex: 0 0 auto; padding: 0;
}
.acct-icon-close:hover { background: var(--acct-line); color: var(--acct-ink); }
.acct-ticket-section { margin-bottom: 20px; }
.acct-ticket-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acct-ticket-section-head label { margin: 0; font-size: 14px; font-weight: 700; color: var(--acct-ink); }
.acct-ticket-section-head a { font-size: 13px; font-weight: 600; color: var(--acct-accent); text-decoration: none; }
.acct-ticket-section-head a:hover { text-decoration: underline; }
.acct-optional { font-weight: 400; color: var(--acct-muted); }
.acct-ticket-section-sub { margin: 2px 0 10px; font-size: 13px; color: var(--acct-muted); }
/* Custom dropdown ("Select an order") - a styled button + our own option list, so it looks
   consistent everywhere instead of falling back to the browser's native open-select styling. */
.acct-dropdown { position: relative; }
.acct-dropdown-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--acct-line); border-radius: 12px;
  font-size: 14px; color: var(--acct-ink); background: #fff; cursor: pointer; text-align: left;
}
.acct-dropdown-toggle:hover, .acct-dropdown-toggle:focus { outline: none; border-color: var(--acct-accent); }
.acct-dropdown-toggle svg { flex: 0 0 auto; color: var(--acct-muted); }
.acct-dropdown-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid var(--acct-line); border-radius: 14px; box-shadow: 0 14px 34px rgba(29, 35, 64, .14);
  padding: 6px;
}
.acct-dropdown-item {
  padding: 10px 12px; border-radius: 9px; font-size: 13.5px; color: var(--acct-ink); cursor: pointer;
  transition: background .12s ease;
}
.acct-dropdown-item:hover { background: var(--acct-bg-soft); }
.acct-dropdown-item.is-selected { background: var(--acct-bg-soft); color: var(--acct-accent); font-weight: 600; }
.acct-ticket-order-preview {
  display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px; border: 1px solid var(--acct-accent);
  background: var(--acct-bg-soft); border-radius: 14px;
}
.acct-ticket-order-preview img { width: 52px; height: 52px; border-radius: 10px; object-fit: contain; background: #fff; padding: 4px; flex: 0 0 auto; }
.acct-ticket-order-info { flex: 1; min-width: 0; }
.acct-ticket-order-info strong { display: block; font-size: 14.5px; color: var(--acct-ink); }
.acct-ticket-order-info span { display: block; font-size: 12.5px; color: var(--acct-muted); margin-top: 2px; }
.acct-ticket-order-price { font-weight: 700; color: var(--acct-ink) !important; }
.acct-ticket-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 767px) { .acct-ticket-categories { grid-template-columns: repeat(2, 1fr); } }
.acct-ticket-cat {
  display: block; padding: 16px 12px; border: 1px solid var(--acct-line); border-radius: 14px;
  text-align: center; cursor: pointer; margin: 0; transition: border-color .15s ease, background .15s ease;
}
.acct-ticket-cat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.acct-ticket-cat.is-selected { border-color: var(--acct-accent); background: var(--acct-bg-soft); }
.acct-ticket-cat-ico {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 auto 10px;
  border-radius: 10px; background: var(--acct-bg-soft); color: var(--acct-accent); font-size: 15px;
}
.acct-ticket-cat.is-selected .acct-ticket-cat-ico { background: #fff; }
.acct-ticket-cat strong { display: block; font-size: 13.5px; color: var(--acct-ink); }
.acct-ticket-cat small { display: block; font-size: 11.5px; color: var(--acct-muted); margin-top: 3px; }
.acct-ticket-eligibility {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 4px 0 20px;
  background: #eaf1fb; border-radius: 12px; font-size: 13px; color: var(--acct-ink);
}
.acct-ticket-eligibility i { color: #24518f; margin-top: 2px; }
.acct-ticket-eligibility p { margin: 0; }
.acct-ticket-eligibility strong { color: #24518f; }
.acct-ticket-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- order details page ---------- */
.acct-back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13.5px; font-weight: 600; color: var(--acct-muted); text-decoration: none; }
.acct-back-link:hover { color: var(--acct-accent); }
.acct-od-placed { margin: 2px 0 0; font-size: 13px; color: var(--acct-muted); }
.acct-hero .acct-order-status { margin-left: 10px; vertical-align: middle; }

.acct-od-tracker { padding: 30px 24px 24px; }
.acct-od-steps { display: flex; align-items: flex-start; }
.acct-od-step { flex: 1; text-align: center; position: relative; padding: 0 6px; }
.acct-od-step::before {
  content: ''; position: absolute; top: 18px; left: -50%; width: 100%; height: 2px; background: var(--acct-line); z-index: 0;
}
.acct-od-step:first-child::before { display: none; }
.acct-od-step.is-done::before { background: var(--acct-accent); }
.acct-od-step-dot {
  position: relative; z-index: 1; width: 36px; height: 36px; margin: 0 auto 10px; border-radius: 50%;
  background: #fff; border: 2px solid var(--acct-line); color: var(--acct-muted);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.acct-od-step.is-done .acct-od-step-dot, .acct-od-step.is-current .acct-od-step-dot {
  background: var(--acct-accent); border-color: var(--acct-accent); color: #fff;
}
.acct-od-step strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--acct-muted); }
.acct-od-step.is-done strong, .acct-od-step.is-current strong { color: var(--acct-ink); }
.acct-od-step span { display: block; font-size: 11px; color: var(--acct-muted); margin-top: 4px; min-height: 14px; }
@media (max-width: 575px) { .acct-od-step strong { font-size: 11.5px; } .acct-od-step span { display: none; } }

.acct-od-products { padding: 22px 24px; }
.acct-od-product { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--acct-line); }
.acct-od-product:first-of-type { border-top: none; padding-top: 0; }
.acct-od-product-img { width: 64px; height: 64px; border-radius: 12px; object-fit: contain; background: var(--acct-bg-soft); padding: 6px; flex: 0 0 auto; }
.acct-od-product-info { flex: 1; min-width: 0; }
.acct-od-product-info a { display: block; font-size: 15px; font-weight: 700; color: var(--acct-ink); text-decoration: none; }
.acct-od-product-info a:hover { color: var(--acct-accent); }
.acct-od-product-meta { display: block; font-size: 12.5px; color: var(--acct-muted); margin-top: 2px; }
.acct-od-product-price { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--acct-ink); }
.acct-od-product-price em { font-style: normal; padding: 2px 10px; border-radius: 999px; background: var(--acct-bg-soft); color: var(--acct-muted); font-size: 11px; font-weight: 600; }
.acct-od-product-qty { flex: 0 0 auto; font-size: 13px; color: var(--acct-muted); padding: 0 24px; }
.acct-od-product-qty strong { color: var(--acct-ink); }
.acct-od-product-total { flex: 0 0 auto; text-align: right; }
.acct-od-product-total span { display: block; font-size: 12px; color: var(--acct-muted); }
.acct-od-product-total strong { font-size: 17px; color: var(--acct-ink); }
@media (max-width: 575px) {
  .acct-od-product { flex-wrap: wrap; }
  .acct-od-product-info { flex-basis: 0; min-width: 140px; }
  .acct-od-product-qty { flex: 1 0 100%; padding: 8px 0 0 80px; }
  .acct-od-product-total { margin-left: auto; }
}

.acct-od-product-details {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 12px 16px; margin: -6px 0 8px; background: var(--acct-bg-soft); border-radius: 12px;
  font-size: 12.5px; color: var(--acct-muted);
}
.acct-od-product-attrs { display: flex; flex-wrap: wrap; gap: 6px 16px; flex: 1; }
.acct-od-product-attrs b { color: var(--acct-ink); font-weight: 600; }
.acct-od-color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--acct-line); vertical-align: middle; }
.acct-od-product-links { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.acct-od-product-links a { font-size: 12.5px; font-weight: 600; color: var(--acct-accent); text-decoration: none; white-space: nowrap; }
.acct-od-product-links a:hover { text-decoration: underline; }

.acct-od-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
@media (max-width: 991px) { .acct-od-grid { grid-template-columns: 1fr; } }
.acct-od-info-card { padding: 20px; margin-bottom: 0; }
.acct-od-info-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.acct-od-info-head h4 { flex: 1; margin: 0; font-size: 15px; font-weight: 700; color: var(--acct-ink); text-transform: none; }
.acct-od-edit { font-size: 12.5px; font-weight: 600; color: var(--acct-accent); text-decoration: none; padding: 5px 12px; border: 1px solid var(--acct-line); border-radius: 999px; }
.acct-od-edit:hover { border-color: var(--acct-accent); }
.acct-od-info-card p { margin: 0; font-size: 13.5px; color: var(--acct-muted); line-height: 1.7; }
.acct-od-kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13px; color: var(--acct-muted); border-top: 1px solid var(--acct-line); }
.acct-od-kv:first-of-type { border-top: none; padding-top: 0; }
.acct-od-kv strong { color: var(--acct-ink); font-weight: 600; }
.acct-od-kv-total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--acct-line); font-size: 14px; color: var(--acct-ink); font-weight: 700; }
.acct-od-kv-total strong { font-size: 16px; }
.acct-od-kv-total small { font-weight: 400; color: var(--acct-muted); }
.acct-od-tform { display: flex; gap: 8px; margin-top: 8px; }
.acct-od-tform input { flex: 1; padding: 7px 12px; border: 1px solid var(--acct-line); border-radius: 8px; font-size: 13px; }

.acct-od-help-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.acct-od-help-head h4 { margin: 0 0 2px; font-size: 16px; font-weight: 700; color: var(--acct-ink); text-transform: none; }
.acct-od-help-head p { margin: 0; font-size: 13px; color: var(--acct-muted); }
.acct-od-help-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 767px) { .acct-od-help-tiles { grid-template-columns: 1fr; } }
.acct-od-help-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--acct-line); border-radius: 14px; text-decoration: none; color: var(--acct-ink); }
.acct-od-help-tile:hover { border-color: var(--acct-accent); color: var(--acct-ink); }
.acct-od-help-tile > div:nth-child(2) { flex: 1; }
.acct-od-help-tile strong { display: block; font-size: 13.5px; }
.acct-od-help-tile span { display: block; font-size: 11.5px; color: var(--acct-muted); margin-top: 2px; }
.acct-od-help-tile > i { color: var(--acct-muted); font-size: 12px; }
.acct-od-return-banner { align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 0; }
.acct-od-return-banner p { flex: 1; min-width: 220px; }