/* =============================================================================
   ACCOUNT PAGES — lrp-theme-shop/page-css/account.css
   Covers: My Account dashboard, orders, addresses, account details,
           login/register form.
   WooCommerce default stylesheets are removed in functions.php so this
   handles all account page styling.
   ============================================================================= */
.page-content{
    max-width:var(--max-width);
}
.page-main {
    padding: calc(var(--navbar-height) + var(--space-2)) 0;
}
/* ── Page wrapper ──────────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce {
  max-width: var(--max-width);
  margin: 0 auto;
  
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-10);
  align-items: start;
}

/* ── Sidebar navigation ────────────────────────────────────────────────────── */
.woocommerce-MyAccount-navigation {
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-6));
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

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

.woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid var(--clr-border);
}
.woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  color: var(--clr-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--clr-brand);
  background: var(--clr-surface-hover);
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a {
  color: var(--clr-brand);
  background: var(--clr-brand-dim);
  border-left: 3px solid var(--clr-brand);
  padding-left: calc(var(--space-5) - 3px);
}

/* ── Content area ──────────────────────────────────────────────────────────── */
.woocommerce-MyAccount-content {
  min-width: 0; /* prevent grid blowout */
}

.woocommerce-MyAccount-content p {
  color: var(--clr-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.woocommerce-MyAccount-content strong {
  color: var(--clr-text-strong);
}

.woocommerce-MyAccount-content a {
  color: var(--clr-brand);
  text-decoration: none;
}
.woocommerce-MyAccount-content a:hover {
  text-decoration: underline;
}

/* ── Dashboard welcome ─────────────────────────────────────────────────────── */
.woocommerce-MyAccount-content .woocommerce-info {
  background: var(--clr-brand-dim);
  border: 1px solid var(--clr-brand-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  color: var(--clr-text-soft);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-6);
}

/* ── Orders table ──────────────────────────────────────────────────────────── */
.woocommerce-orders-table,
.woocommerce-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-6);
}

.woocommerce-orders-table th,
.woocommerce-table th {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  color: var(--clr-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.woocommerce-orders-table td,
.woocommerce-table td {
  border: 1px solid var(--clr-border);
  padding: var(--space-3) var(--space-4);
  color: var(--clr-text-soft);
  vertical-align: middle;
}

.woocommerce-orders-table tr:hover td,
.woocommerce-table tr:hover td {
  background: var(--clr-surface-hover);
}

/* Order status badges */
.woocommerce-orders-table .order-status,
mark.order-status {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
}
mark.order-status.status-completed  { background: rgba(0,255,0,0.08);  border-color: var(--clr-brand-border); color: var(--clr-brand); }
mark.order-status.status-processing { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.3);   color: #60a5fa; }
mark.order-status.status-on-hold    { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3);   color: #fbbf24; }
mark.order-status.status-cancelled,
mark.order-status.status-failed     { background: var(--clr-error-bg);  border-color: var(--clr-error-border); color: #fca5a5; }
mark.order-status.status-refunded   { background: rgba(156,163,175,0.1); border-color: rgba(156,163,175,0.3);  color: #9ca3af; }

/* View order button in table */
.woocommerce-orders-table .button,
.woocommerce-table .button {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--clr-brand);
  color: var(--clr-bg);
  font-size: var(--font-size-xs);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition-fast);
  white-space: nowrap;
}
.woocommerce-orders-table .button:hover,
.woocommerce-table .button:hover {
  background: var(--clr-brand-hover);
  text-decoration: none;
}

/* ── Addresses ─────────────────────────────────────────────────────────────── */
.woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.woocommerce-Address {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
}

.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--clr-border);
}

.woocommerce-Address-title h3 {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--clr-text-strong);
}

.woocommerce-Address-title a {
  font-size: var(--font-size-xs);
  color: var(--clr-brand);
  text-decoration: none;
}
.woocommerce-Address-title a:hover { text-decoration: underline; }

address {
  font-style: normal;
  color: var(--clr-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.8;
}

/* ── Forms (login, register, account details, address edit) ────────────────── */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
  max-width: 100%;
}

/* Two-column layout for account details: profile left, password right */
.woocommerce-EditAccountForm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-10);
  align-items: start;
}

/* Profile fields (name, display name, email) span left column */
.woocommerce-EditAccountForm p.form-row {
  grid-column: 1;
}

/* Password fieldset spans right column */
.woocommerce-EditAccountForm fieldset {
  grid-column: 2;
  grid-row: 1 / span 10; /* tall enough to span all profile rows */
  margin-top: 0 !important;
  align-self: start;
}

/* Save button spans full width below both columns */
.woocommerce-EditAccountForm p.form-row:last-of-type,
.woocommerce-EditAccountForm .woocommerce-Button {
  grid-column: 1 / -1;
}

/* Fieldset heading style */
.woocommerce-EditAccountForm fieldset legend {
  font-size: var(--font-size-base) !important;
  font-weight: 700 !important;
  color: var(--clr-text-strong) !important;
  padding: 0 !important;
  margin-bottom: var(--space-5) !important;
  width: 100%;
  border-bottom: 1px solid var(--clr-border);
  padding-bottom: var(--space-3) !important;
}

@media (max-width: 768px) {
  .woocommerce-EditAccountForm {
    grid-template-columns: 1fr;
  }
  .woocommerce-EditAccountForm p.form-row,
  .woocommerce-EditAccountForm fieldset,
  .woocommerce-EditAccountForm p.form-row:last-of-type {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Field rows */
.woocommerce-form-row,
.form-row {
  margin-bottom: var(--space-5);
}

.woocommerce-form-row label,
.form-row label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--clr-brand);
  margin-bottom: var(--space-2);
}

.woocommerce-form-row .required,
.form-row .required {
  color: var(--clr-error);
}

.woocommerce-form__input,
.woocommerce-form__input-checkbox,
input[type="text"].input-text,
input[type="email"].input-text,
input[type="password"].input-text,
input[type="tel"].input-text,
textarea.input-text,
select {
  width: 100%;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  color: var(--clr-text-strong);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  padding: 0.65rem 0.875rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  appearance: none;
}

input[type="text"].input-text:focus,
input[type="email"].input-text:focus,
input[type="password"].input-text:focus,
input[type="tel"].input-text:focus,
textarea.input-text:focus,
select:focus {
  border-color: var(--clr-brand);
  box-shadow: 0 0 0 2px rgba(0,255,0,0.12);
}

/* Two-column address form */
.woocommerce-address-fields .form-row-first,
.woocommerce-address-fields .form-row-last {
  display: inline-block;
  width: calc(50% - var(--space-3));
}
.woocommerce-address-fields .form-row-first { margin-right: var(--space-3); }
.woocommerce-address-fields .form-row-wide  { width: 100%; }

/* Password strength meter */
.woocommerce-password-strength {
  font-size: var(--font-size-xs);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin-top: var(--space-2);
}
.woocommerce-password-strength.strong    { background: rgba(0,255,0,0.08);  color: var(--clr-brand); }
.woocommerce-password-strength.medium    { background: rgba(245,158,11,0.08); color: #fbbf24; }
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad       { background: var(--clr-error-bg); color: #fca5a5; }

.woocommerce-password-hint {
  font-size: var(--font-size-xs);
  color: var(--clr-text-muted);
  margin-top: var(--space-1);
}

/* Remember me checkbox */
.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--clr-text-soft);
}

/* Lost password link */
.woocommerce-LostPassword a,
.lost_password a {
  font-size: var(--font-size-sm);
  color: var(--clr-text-muted);
}
.woocommerce-LostPassword a:hover,
.lost_password a:hover { color: var(--clr-brand); }

/* Submit buttons */
.woocommerce-form-login .button,
.woocommerce-form-register .button,
.woocommerce-EditAccountForm .button,
.woocommerce-address-fields .button,
button[name="save_account_details"],
button[name="save_address"] {
  display: inline-block;
  padding: var(--space-4) var(--space-8);
  background: var(--clr-brand);
  color: var(--clr-bg);
  font-size: var(--font-size-base);
  font-weight: 700;
  font-family: var(--font-sans);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  width: 100%;
}
.woocommerce-form-login .button:hover,
.woocommerce-form-register .button:hover,
.woocommerce-EditAccountForm .button:hover,
.woocommerce-address-fields .button:hover,
button[name="save_account_details"]:hover,
button[name="save_address"]:hover {
  background: var(--clr-brand-hover);
  transform: scale(1.02);
}

/* ── Login / Register layout ───────────────────────────────────────────────── */
.woocommerce-account:not(.logged-in) .woocommerce {
  grid-template-columns: 1fr 1fr;
  max-width: 900px;
}

.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-navigation {
  display: none; /* hide nav on login page */
}

/* Section headings */
.woocommerce-MyAccount-content h2,
.woocommerce-column__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--clr-text-strong);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--clr-border);
}

/* ── Single order view ─────────────────────────────────────────────────────── */
.woocommerce-order-details,
.woocommerce-customer-details {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

/* ── Notices ───────────────────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-error,
.woocommerce-notice {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-6);
  list-style: none;
}
.woocommerce-message {
  background: var(--clr-brand-dim);
  border: 1px solid var(--clr-brand-border);
  color: var(--clr-brand);
}
.woocommerce-error {
  background: var(--clr-error-bg);
  border: 1px solid var(--clr-error-border);
  color: #fca5a5;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce,
  .woocommerce-account.logged-in .woocommerce {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
  }
  .woocommerce-MyAccount-navigation {
    position: static;
    order: -1; /* nav always on top */
  }
  .woocommerce-MyAccount-content {
    order: 1;
  }
  .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }
  .woocommerce-account:not(.logged-in) .woocommerce {
    grid-template-columns: 1fr;
  }
  .woocommerce-address-fields .form-row-first,
  .woocommerce-address-fields .form-row-last {
    width: 100%;
    margin-right: 0;
  }
  .woocommerce-orders-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Order details table on order-received page — same treatment so the
     scrollbar doesn't consume the card's right padding */
  .woocommerce-order-details .woocommerce-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Fixes from live review ─────────────────────────────────────────────────── */

/* Login page: fix large gap above form. WooCommerce wraps login in .u-column1/2 */
.woocommerce-account:not(.logged-in) .woocommerce {
  display: block; /* override grid — WC handles its own columns */
  padding-top: calc(var(--navbar-height) + var(--space-8));
}

.woocommerce-account .u-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  max-width: 900px;
  margin: 0 auto;
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
}

/* My Account page title */
.woocommerce-account h1.entry-title,
.woocommerce-account .entry-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--clr-text-strong);
  margin-bottom: var(--space-8);
}

/* Address title: fix overlap between heading and edit link */
.woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--clr-border);
}
.woocommerce-Address-title h3 {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--clr-text-strong);
  margin: 0;
  flex-shrink: 0;
}
.woocommerce-Address-title a {
  font-size: var(--font-size-xs);
  color: var(--clr-brand);
  text-decoration: none;
  white-space: nowrap;
}
.woocommerce-Address-title a:hover { text-decoration: underline; }

/* Fieldset in account details */
.woocommerce fieldset {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}
.woocommerce fieldset legend {
  color: var(--clr-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: 0 var(--space-2);
}

/* Logged-in layout: restore grid (desktop only — mobile override is in the @media block above) */
@media (min-width: 769px) {
  .woocommerce-account.logged-in .woocommerce {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-10);
  }
}

@media (max-width: 640px) {
  .woocommerce-account .u-columns {
    grid-template-columns: 1fr;
  }
}

/* ── Order received / single order — mobile padding fix ─────────────────── */
@media (max-width: 768px) {
  /* Reduce card inner padding on small screens */
  .woocommerce-order-details,
  .woocommerce-customer-details {
    padding: var(--space-4) !important;
  }

  /* Order overview list (bullet points on thank-you page) */
  .woocommerce-order-overview {
    padding-left: var(--space-2) !important;
  }
  .woocommerce-order-overview li {
    padding: var(--space-2) 0 !important;
  }

  /* Reduce page-level horizontal padding so cards don't feel cramped */
  .woocommerce-order-received .page-content,
  .woocommerce-order-received .entry-content {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }
}