/* ════════════════════════════════════════════════════════════
   My Account (WooCommerce) — Machaussure
   Fashion-Nova layout applied to WooCommerce default markup.
   Loaded only on is_account_page(). FR / MAD.
   ════════════════════════════════════════════════════════════ */

/* The WC shortcode wraps nav + content in .woocommerce; we lay it out
   as a two-column shell via my-account.php utility classes. */
.mc-account { box-sizing: border-box; }
.mc-account * { box-sizing: border-box; }

/* ---- Sidebar nav (woocommerce-MyAccount-navigation, restyled) ---- */
.mc-acct-nav { width: 224px; flex-shrink: 0; }
.mc-acct-nav ul { list-style: none; margin: 0; padding: 0; }
.mc-acct-nav li { margin: 0; }

.mc-acct-nav a,
.mc-acct-logout a {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--neutral-900, #1c1c1c);
  text-decoration: none;
  transition: background-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.mc-acct-nav a:hover,
.mc-acct-logout a:hover { background-color: var(--neutral-300, #e3e3e3); }

.mc-acct-nav .is-active > a,
.mc-acct-nav li.is-active > a {
  background-color: #f5f5f5;
  font-weight: 600;
}

.mc-acct-nav a svg,
.mc-acct-logout a svg { flex-shrink: 0; width: 24px; height: 24px; }

.mc-acct-logout { padding-top: 48px; }
.mc-acct-logout a { color: var(--red-600, #9d2226); }

/* Logout sits in the menu list — push it down + colour it red. */
.mc-acct-nav .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 28px; }
.mc-acct-nav .woocommerce-MyAccount-navigation-link--customer-logout a,
.mc-acct-mobile-nav .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--red-600, #9d2226); }

/* ---- Mobile horizontal nav ---- */
.mc-acct-mobile-nav { margin: 0 -24px 32px; border-bottom: 1px solid var(--neutral-300, #e3e3e3); padding-bottom: 8px; }
.mc-acct-mobile-nav ul { display: flex; flex-wrap: wrap; row-gap: 8px; list-style: none; margin: 0 24px; padding: 0; }
.mc-acct-mobile-nav li { flex: 0 0 25%; min-width: 68px; }
.mc-acct-mobile-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 4px;
  text-align: center;
  font-size: 11px;
  line-height: 1.3;
  color: var(--neutral-900, #1c1c1c);
  text-decoration: none;
}
.mc-acct-mobile-nav .is-active > a { font-weight: 700; }
.mc-acct-mobile-nav a svg { width: 22px; height: 22px; }

@media (min-width: 768px) {
  .mc-acct-mobile-nav { display: none; }
}
@media (max-width: 767px) {
  .mc-acct-nav, .mc-acct-logout { display: none; }
}

/* ---- Content column ---- */
.mc-account-content { min-width: 0; }
.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > h1,
.woocommerce-MyAccount-content > h2 { font-size: 24px; font-weight: 700; margin: 0 0 20px; }
.woocommerce-MyAccount-content p { line-height: 1.6; }
.woocommerce-MyAccount-content a { color: var(--neutral-900, #1c1c1c); }

/* ---- Dashboard: greeting + wishlist preview + reco ---- */
.mc-dash-hi { font-size: 28px; font-weight: 800; margin: 0 0 28px; }
@media (min-width: 768px) { .mc-dash-hi { font-size: 34px; } }

.mc-dash-block { max-width: 520px; }
.mc-dash-block__title { font-size: 19px; font-weight: 700; text-transform: uppercase; margin: 8px 0 12px; }

.mc-wishlist-preview {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: repeat(3, 59px);
  gap: 4px;
  grid-template-areas: "main side1" "main side2" "main side3";
  margin-bottom: 12px;
}
@media (min-width: 768px) { .mc-wishlist-preview { grid-template-rows: repeat(3, 93.333px); gap: 6px; } }
.mc-wishlist-preview a, .mc-wishlist-preview .ph { display: block; height: 100%; overflow: hidden; }
.mc-wishlist-preview img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mc-wishlist-preview .ph { background: var(--neutral-400, #d6d6d6); }
.mc-wishlist-preview .a-main { grid-area: main; border-radius: 8px 0 0 8px; }
.mc-wishlist-preview .a-s1 { grid-area: side1; border-top-right-radius: 8px; }
.mc-wishlist-preview .a-s2 { grid-area: side2; }
.mc-wishlist-preview .a-s3 { grid-area: side3; border-bottom-right-radius: 8px; }

.mc-dash-viewall {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 48px; border: 1px solid var(--neutral-900, #1c1c1c);
  border-radius: 9999px; background: #fff; color: var(--neutral-900, #1c1c1c);
  font-weight: 600; font-size: 14px; text-decoration: none; transition: background-color 150ms ease;
}
.mc-dash-viewall:hover { background: var(--neutral-300, #e3e3e3); }

.mc-dash-reco { margin-top: 40px; }
.mc-dash-reco__title { font-size: 20px; font-weight: 800; text-transform: uppercase; margin: 0 0 12px; }

/* ════════════════════════════════════════════════
   WooCommerce default markup — Orders / Address / Edit / View-order
   ════════════════════════════════════════════════ */

.woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-MyAccount-content .shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 20px;
}
.woocommerce-MyAccount-content .shop_table th,
.woocommerce-MyAccount-content .shop_table td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--neutral-300, #e3e3e3);
  vertical-align: top;
}
.woocommerce-MyAccount-content .shop_table thead th { font-weight: 700; white-space: nowrap; }
.woocommerce-MyAccount-content .shop_table .woocommerce-orders-table__cell-order-actions { text-align: right; white-space: nowrap; }

/* Order/table action buttons -> pill */
.woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-MyAccount-content .button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px; border: 1px solid var(--neutral-900, #1c1c1c);
  border-radius: 9999px; background: #fff; color: var(--neutral-900, #1c1c1c);
  font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color 150ms ease;
}
.woocommerce-MyAccount-content .woocommerce-button:hover,
.woocommerce-MyAccount-content .button:hover { background: var(--neutral-300, #e3e3e3); }

/* order totals (view-order) */
.woocommerce-MyAccount-content tfoot th { font-weight: 400; color: var(--neutral-600, #707070); }
.woocommerce-MyAccount-content tfoot td { font-weight: 600; text-align: right; }

/* responsive stacking (WC adds shop_table_responsive) */
@media (max-width: 639px) {
  .woocommerce-MyAccount-content .shop_table_responsive thead { display: none; }
  .woocommerce-MyAccount-content .shop_table_responsive tr {
    display: block; border: 1px solid var(--neutral-300, #e3e3e3);
    border-radius: 8px; padding: 6px 12px; margin-bottom: 12px;
  }
  .woocommerce-MyAccount-content .shop_table_responsive tbody td {
    display: flex; justify-content: space-between; gap: 16px;
    border: none; padding: 7px 0; text-align: right;
  }
  .woocommerce-MyAccount-content .shop_table_responsive tbody td::before {
    content: attr(data-title); font-weight: 600; color: var(--neutral-600, #707070); text-align: left;
  }
}

/* Address blocks */
.woocommerce-MyAccount-content .woocommerce-Address {
  border: 1px solid var(--neutral-300, #e3e3e3); border-radius: 8px;
  padding: 20px; max-width: 420px; margin-bottom: 16px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 { font-size: 15px; font-weight: 700; margin: 0; }
.woocommerce-MyAccount-content .woocommerce-Address-title .edit { font-size: 13px; text-decoration: underline; }
.woocommerce-MyAccount-content address { font-style: normal; color: #404040; line-height: 1.6; }

.woocommerce-MyAccount-content .woocommerce-customer-details { margin-top: 24px; }
.woocommerce-MyAccount-content .woocommerce-column__title { font-size: 16px; font-weight: 700; margin: 0 0 8px; }

/* ════════════════════════════════════════════════
   Forms (edit-account, edit-address) — field styling
   ════════════════════════════════════════════════ */

.woocommerce-MyAccount-content .woocommerce-form-row,
.woocommerce-MyAccount-content .form-row { margin: 0 0 14px; display: block; }
.woocommerce-MyAccount-content form .clear { clear: both; }

.woocommerce-MyAccount-content label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--neutral-900, #1c1c1c); }
.woocommerce-MyAccount-content .woocommerce-form-row .required { color: var(--neutral-900, #1c1c1c); text-decoration: none; border: none; }

.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
  display: block; width: 100%; height: 48px; padding: 12px 14px;
  border: 1px solid #dedede; border-radius: 8px; background: #fff;
  font-family: inherit; font-size: 14px; color: var(--neutral-900, #1c1c1c);
  outline: none; transition: border-color 150ms ease, box-shadow 150ms ease;
  -webkit-appearance: none; appearance: none;
}
.woocommerce-MyAccount-content textarea { height: auto; min-height: 90px; }
.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus { border-color: var(--neutral-900, #1c1c1c); box-shadow: 0 0 0 1px var(--neutral-900, #1c1c1c); }

.woocommerce-MyAccount-content .woocommerce-form-row__label-for-checkbox,
.woocommerce-MyAccount-content em { font-size: 12px; color: var(--neutral-600, #707070); font-style: italic; }

@media (min-width: 640px) {
  .woocommerce-MyAccount-content .form-row-first { float: left; width: 48.5%; clear: left; }
  .woocommerce-MyAccount-content .form-row-last { float: right; width: 48.5%; clear: right; }
  .woocommerce-MyAccount-content .form-row-wide { clear: both; width: 100%; }
}

.woocommerce-MyAccount-content fieldset {
  border: 1px solid var(--neutral-300, #e3e3e3); border-radius: 8px;
  padding: 16px; margin: 6px 0 18px;
}
.woocommerce-MyAccount-content legend { font-size: 14px; font-weight: 700; padding: 0 6px; }

.woocommerce-MyAccount-content .password-input { position: relative; display: block; }
.woocommerce-MyAccount-content .password-input .show-password-input {
  position: absolute; right: 14px; top: 14px; width: 20px; height: 20px;
  border: none; background: transparent; cursor: pointer;
}

/* Save button -> pill */
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content .woocommerce-Button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 24px; border: none; border-radius: 9999px;
  background: var(--neutral-900, #1c1c1c); color: #fff; font-family: inherit;
  font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color 150ms ease;
}
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover { background: #333; }

/* ════════════════════════════════════════════════
   Change confirmation phone number panel
   ════════════════════════════════════════════════ */

.mc-phone-section {
  border: 1px solid var(--neutral-300, #e3e3e3); border-radius: 8px;
  padding: 16px; margin: 6px 0 18px;
}
.mc-phone-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mc-phone-section__label { font-size: 13px; color: var(--neutral-600, #707070); margin-bottom: 2px; }
.mc-phone-section__value { font-size: 15px; font-weight: 600; }
.mc-phone-edit-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--neutral-900, #1c1c1c); text-decoration: underline;
  height: auto;
}
.mc-phone-change { margin-top: 16px; }
.mc-phone-change[hidden] { display: none; }
.mc-phone-change__row { display: flex; gap: 8px; align-items: flex-end; }
.mc-phone-change__row .mc-phone-field { flex: 1; margin-bottom: 0; }
.mc-phone-change .mc-acct-otp { margin-top: 14px; }
.mc-phone-change .mc-acct-otp[hidden] { display: none; }
.mc-phone-msg { margin-top: 8px; font-size: 13px; line-height: 1.5; min-height: 18px; }
.mc-phone-msg.is-error { color: var(--red-600, #d11); }
.mc-phone-msg.is-success { color: #2e7d32; }
.mc-phone-send-btn,
.mc-phone-verify-btn {
  flex: 0 0 auto; height: 48px; padding: 0 18px; border: none; border-radius: 8px;
  background: var(--neutral-900, #1c1c1c); color: #fff; font-weight: 600; font-size: 14px;
  cursor: pointer; white-space: nowrap;
}
.mc-phone-send-btn:disabled,
.mc-phone-verify-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mc-phone-resend { background: none; border: none; padding: 0; margin-top: 10px; font-size: 13px; text-decoration: underline; color: var(--neutral-600,#707070); cursor: pointer; }
.mc-phone-resend:disabled { opacity: 0.5; cursor: default; text-decoration: none; }