/* =============================================================
   TA-DA MY ACCOUNT — Design overlay
   Scoped to body.woocommerce-account and body.tada-affiliate
   ============================================================= */

/* Design tokens */
body.woocommerce-account,
body.tada-affiliate {
  --paper:        #FDF6EF;
  --ink:          #221A3A;
  --ink-soft:     #6A6285;
  --rose:         #EC4583;
  --rose-deep:    #C42DAB;
  --rose-soft:    #FCE6EF;
  --radius:       22px;
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Figtree', 'Segoe UI', system-ui, sans-serif;
  --shadow-soft:  0 18px 50px -18px rgba(34,26,58,.20);
}

/* Body reset */
body.woocommerce-account,
body.tada-affiliate {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
}

/* WooCommerce container */
body.woocommerce-account .woocommerce,
body.woocommerce-account .entry-content {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

/* Affiliate page container */
body.tada-affiliate .entry-content,
body.tada-affiliate .site-content {
  max-width: 1100px;
  margin-inline: auto;
  padding: 40px 24px;
  box-sizing: border-box;
}

/* Global link colour */
body.woocommerce-account a,
body.tada-affiliate a {
  color: var(--rose-deep);
}
body.woocommerce-account a:hover,
body.tada-affiliate a:hover {
  color: var(--rose);
}

/* General headings */
body.woocommerce-account h1,
body.woocommerce-account h2,
body.woocommerce-account h3,
body.tada-affiliate h1,
body.tada-affiliate h2,
body.tada-affiliate h3 {
  font-family: var(--font-display);
  color: var(--ink);
}

/* =============================================================
   LOGIN & REGISTER FORMS
   ============================================================= */

/* Two-column card layout */
body.woocommerce-account .u-columns.col2-set,
body.woocommerce-account #customer_login {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding-block: 48px;
}

body.woocommerce-account .u-column1,
body.woocommerce-account .u-column2 {
  flex: 1;
  min-width: 0;
}

/* Form cards */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 40px;
}

/* Form headings */
body.woocommerce-account .u-column1 > h2,
body.woocommerce-account .u-column2 > h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 24px;
}

/* Labels */
body.woocommerce-account .woocommerce-form-row label,
body.woocommerce-account .woocommerce-form__label {
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 6px;
}

/* All text/email/password/tel inputs */
body.woocommerce-account .woocommerce-Input,
body.woocommerce-account .woocommerce-form-row input[type="text"],
body.woocommerce-account .woocommerce-form-row input[type="email"],
body.woocommerce-account .woocommerce-form-row input[type="password"],
body.woocommerce-account .woocommerce-form-row input[type="tel"] {
  width: 100%;
  border: 1.5px solid rgba(34,26,58,.18);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
  box-sizing: border-box;
  outline: none;
}

body.woocommerce-account .woocommerce-Input:focus,
body.woocommerce-account .woocommerce-form-row input:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(236,69,131,.12);
}

/* Row spacing */
body.woocommerce-account .woocommerce-form-row {
  margin-bottom: 16px;
}

/* Checkbox */
body.woocommerce-account input[type="checkbox"] {
  accent-color: var(--rose);
  width: 16px;
  height: 16px;
  cursor: pointer;
  vertical-align: middle;
  margin-right: 6px;
}

/* Lost password / terms links */
body.woocommerce-account .woocommerce-LostPassword a,
body.woocommerce-account .woocommerce-privacy-policy-text a,
body.woocommerce-account .woocommerce-form__label a {
  color: var(--rose-deep);
  text-decoration: none;
  font-size: .88rem;
}
body.woocommerce-account .woocommerce-LostPassword a:hover {
  text-decoration: underline;
}

/* Primary buttons — Log In / Register */
body.woocommerce-account .woocommerce-form-login .woocommerce-button,
body.woocommerce-account .woocommerce-form-register .woocommerce-button,
body.woocommerce-account .woocommerce-form-login button[type="submit"],
body.woocommerce-account .woocommerce-form-register button[type="submit"] {
  width: 100%;
  background: var(--rose) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 13px 28px !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background .18s, transform .18s;
  letter-spacing: .01em;
  margin-top: 8px;
}
body.woocommerce-account .woocommerce-form-login button[type="submit"]:hover,
body.woocommerce-account .woocommerce-form-register button[type="submit"]:hover {
  background: var(--rose-deep) !important;
  transform: translateY(-1px);
}

/* Social login buttons */
body.woocommerce-account .woocommerce-social-login a,
body.woocommerce-account .social-login-button,
body.woocommerce-account a[class*="social-login"],
body.woocommerce-account a[class*="btn-social"] {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #fff !important;
  border: 1.5px solid rgba(34,26,58,.14) !important;
  border-radius: 12px !important;
  padding: 11px 16px !important;
  font-family: var(--font-body) !important;
  font-size: .9rem !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  margin-bottom: 10px;
  transition: background .18s;
  box-sizing: border-box;
  font-weight: 500;
}
body.woocommerce-account .woocommerce-social-login a:hover {
  background: var(--rose-soft) !important;
}

/* ---------- Hide vendor-specific registration fields ---------- */
/* Targets common marketplace plugin field wrappers.
   If fields still show: right-click the field → Inspect → copy the
   wrapper element's id or class and add it here. */
body.woocommerce-account .woocommerce-form-register .woocommerce-form-row:has([name*="shop"]),
body.woocommerce-account .woocommerce-form-register .woocommerce-form-row:has([id*="shop"]),
body.woocommerce-account .woocommerce-form-register [id*="shop_name"],
body.woocommerce-account .woocommerce-form-register [id*="shop_url"],
body.woocommerce-account .woocommerce-form-register [id*="shop-name"],
body.woocommerce-account .woocommerce-form-register [id*="shop-url"],
body.woocommerce-account .woocommerce-form-register .vendor-registration,
body.woocommerce-account .woocommerce-form-register .vendor-type-selection,
body.woocommerce-account .woocommerce-form-register .wcfm-reg-vendor,
body.woocommerce-account .woocommerce-form-register .wcfm_reg_user_type,
body.woocommerce-account .woocommerce-form-register .dokan-seller-registration,
body.woocommerce-account .woocommerce-form-register [class*="vendor-role"],
body.woocommerce-account .woocommerce-form-register [id*="role_select"],
body.woocommerce-account .woocommerce-form-register .user_role_select { display: none !important; }

/* =============================================================
   LOGGED-IN LAYOUT
   ============================================================= */

/* Two-column grid */
body.woocommerce-account.logged-in .woocommerce {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
  padding-block: 48px;
}

/* ---- Sidebar navigation ---- */
body.woocommerce-account .woocommerce-MyAccount-navigation {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 8px;
  position: sticky;
  top: 90px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 11px 18px;
  border-radius: 10px;
  border-left: 3px solid transparent;
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  transition: background .18s, color .18s;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--rose-soft);
  color: var(--rose);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation li.active a {
  background: var(--rose-soft);
  color: var(--rose);
  border-left-color: var(--rose);
  font-weight: 600;
}

/* Logout red tint */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
  color: #e53e3e !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: #fff5f5 !important;
  color: #c53030 !important;
}

/* ---- Content area ---- */
body.woocommerce-account .woocommerce-MyAccount-content {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 36px;
  min-width: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  margin-top: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: var(--font-display);
  color: var(--ink);
}

body.woocommerce-account .woocommerce-MyAccount-content p {
  color: var(--ink-soft);
  line-height: 1.65;
}

body.woocommerce-account .woocommerce-MyAccount-content strong {
  color: var(--ink);
}

/* =============================================================
   TABLES — ORDERS, SUBSCRIPTIONS
   ============================================================= */

body.woocommerce-account .woocommerce-MyAccount-content table,
body.woocommerce-account .woocommerce-orders-table,
body.woocommerce-account .woocommerce-subscriptions-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: .92rem;
}

/* Headers */
body.woocommerce-account .woocommerce-MyAccount-content table thead th {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-soft);
  padding: 10px 14px;
  border-bottom: 2px solid var(--rose-soft);
  text-align: left;
  white-space: nowrap;
}

/* Body rows */
body.woocommerce-account .woocommerce-MyAccount-content table tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(34,26,58,.06);
  color: var(--ink);
  vertical-align: middle;
}

body.woocommerce-account .woocommerce-MyAccount-content table tbody tr:hover {
  background: rgba(252,230,239,.35);
}

/* Status badges */
body.woocommerce-account mark.order-status,
body.woocommerce-account .woocommerce-order-status,
body.woocommerce-account .subscription-status {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--font-body);
  background: var(--rose-soft);
  color: var(--rose);
  white-space: nowrap;
  font-style: normal;
}

body.woocommerce-account mark.order-status.status-completed,
body.woocommerce-account mark.order-status.status-active {
  background: #e6f7ef;
  color: #1F8A5B;
}

body.woocommerce-account mark.order-status.status-pending,
body.woocommerce-account mark.order-status.status-on-hold,
body.woocommerce-account mark.order-status.status-pending-payment {
  background: #fff3e0;
  color: #c56000;
}

body.woocommerce-account mark.order-status.status-cancelled,
body.woocommerce-account mark.order-status.status-failed,
body.woocommerce-account mark.order-status.status-expired {
  background: #fef2f2;
  color: #c53030;
}

/* Table action buttons */
body.woocommerce-account .woocommerce-MyAccount-content table .button,
body.woocommerce-account .woocommerce-orders-table .button {
  width: auto !important;
  background: transparent !important;
  color: var(--rose) !important;
  border: 1.5px solid var(--rose) !important;
  border-radius: 50px !important;
  padding: 5px 16px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  transform: none !important;
  transition: background .18s, color .18s !important;
}

body.woocommerce-account .woocommerce-MyAccount-content table .button:hover,
body.woocommerce-account .woocommerce-orders-table .button:hover {
  background: var(--rose) !important;
  color: #fff !important;
}

/* =============================================================
   WALLET
   ============================================================= */

/* Wallet balance — targets common wallet plugin output */
body.woocommerce-account [class*="wallet-balance"],
body.woocommerce-account .woocommerce-wallet .balance,
body.woocommerce-account .woo-wallet-balance,
body.woocommerce-account .current-balance {
  font-family: var(--font-display) !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: var(--rose) !important;
  display: block;
  text-align: center;
  margin: 20px 0;
  line-height: 1.1;
}

/* Wallet transaction table inherits task 5 table styles automatically */

/* =============================================================
   AFFILIATE PAGE
   ============================================================= */

body.tada-affiliate .entry-content > *,
body.tada-affiliate .affwp-wrap,
body.tada-affiliate #affwp-affiliate-dashboard {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 36px;
  margin-bottom: 24px;
}

body.tada-affiliate .affwp-affiliate-dashboard-tab.active a,
body.tada-affiliate .affwp-tab.active a {
  color: var(--rose);
  border-bottom: 2px solid var(--rose);
}

body.tada-affiliate .affwp-tab a,
body.tada-affiliate .affwp-affiliate-dashboard-tab a {
  color: var(--ink-soft);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  padding-bottom: 6px;
  transition: color .18s;
}

body.tada-affiliate .affwp-tab a:hover {
  color: var(--rose);
}

/* Stat tiles */
body.tada-affiliate .affwp-stat,
body.tada-affiliate [class*="affiliate-stat"] {
  background: var(--rose-soft);
  border-radius: 14px;
  padding: 16px 20px;
  text-align: center;
}

body.tada-affiliate .affwp-stat-value,
body.tada-affiliate [class*="stat-value"] {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--rose);
}

/* =============================================================
   EDIT FORMS — Addresses, Account Details
   ============================================================= */

body.woocommerce-account .woocommerce-address-fields input,
body.woocommerce-account .woocommerce-address-fields select,
body.woocommerce-account .woocommerce-EditAccountForm input[type="text"],
body.woocommerce-account .woocommerce-EditAccountForm input[type="email"],
body.woocommerce-account .woocommerce-EditAccountForm input[type="password"],
body.woocommerce-account .woocommerce-EditAccountForm input[type="tel"] {
  width: 100%;
  border: 1.5px solid rgba(34,26,58,.18);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
  box-sizing: border-box;
  outline: none;
  margin-bottom: 4px;
}

body.woocommerce-account .woocommerce-address-fields input:focus,
body.woocommerce-account .woocommerce-EditAccountForm input:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(236,69,131,.12);
}

body.woocommerce-account .woocommerce-address-fields label,
body.woocommerce-account .woocommerce-EditAccountForm label {
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 6px;
}

body.woocommerce-account .woocommerce-address-fields .button,
body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"] {
  background: var(--rose) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 13px 40px !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background .18s, transform .18s;
  width: auto !important;
  margin-top: 8px;
}

body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover {
  background: var(--rose-deep) !important;
  transform: translateY(-1px);
}

/* =============================================================
   MOBILE — ≤768px
   ============================================================= */

@media (max-width: 768px) {

  /* Login/Register stack */
  body.woocommerce-account .u-columns.col2-set,
  body.woocommerce-account #customer_login {
    flex-direction: column;
    padding-block: 24px;
  }

  body.woocommerce-account .woocommerce-form-login,
  body.woocommerce-account .woocommerce-form-register {
    padding: 24px;
  }

  /* Logged-in: single column */
  body.woocommerce-account.logged-in .woocommerce {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-block: 24px;
  }

  /* Sidebar → horizontal scrolling tab row */
  body.woocommerce-account .woocommerce-MyAccount-navigation {
    position: static;
    padding: 6px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-radius: 14px;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar {
    display: none;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    gap: 4px;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation li {
    flex-shrink: 0;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation li a {
    border-left: none;
    border-radius: 50px;
    padding: 8px 16px;
    font-size: .82rem;
    white-space: nowrap;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
  body.woocommerce-account .woocommerce-MyAccount-navigation li.active a {
    background: var(--rose);
    color: #fff;
    border-left: none;
  }

  /* Content area padding */
  body.woocommerce-account .woocommerce-MyAccount-content {
    padding: 20px;
    overflow-x: auto;
  }

  /* Tables scroll horizontally on mobile */
  body.woocommerce-account .woocommerce-MyAccount-content table {
    min-width: 500px;
  }

  /* Full-width save buttons on mobile */
  body.woocommerce-account .woocommerce-address-fields .button,
  body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"] {
    width: 100% !important;
  }

  /* Affiliate page */
  body.tada-affiliate .entry-content > *,
  body.tada-affiliate .affwp-wrap {
    padding: 20px;
  }
}