/* ==========================================================================
   Gate 5 — Account / Orders / Verified-Purchase Review flow
   Reuses the theme design tokens defined in main.css.
   ========================================================================== */

.diy-account-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--color-text);
}

/* Account shell: WooCommerce remains the authority; this is presentation only. */
.woocommerce-account .diy-account-shell { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.diy-account-heading { margin-bottom: 1.75rem; }
.diy-account-heading h1 { margin: .15rem 0 .35rem; font-size: clamp(2rem, 4vw, 3rem); }
.diy-account-heading p:last-child { margin: 0; color: var(--color-text-secondary); }
.diy-account-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2rem; align-items: start; }
.diy-account-nav { display: grid; gap: .35rem; padding: .75rem; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); box-shadow: var(--shadow-soft); }
.diy-account-nav-link { display: flex; align-items: center; gap: .7rem; min-height: 46px; padding: .65rem .75rem; border-radius: 10px; color: var(--color-text); text-decoration: none; font-weight: 650; }
.diy-account-nav-link:hover, .diy-account-nav-link:focus-visible { background: var(--color-brand-soft); color: var(--color-brand-primary); }
.diy-account-nav-link.is-active { background: var(--color-brand-soft); color: var(--color-brand-primary); box-shadow: inset 3px 0 0 var(--color-brand-primary); }
.diy-account-nav-link.is-logout { margin-top: .5rem; color: var(--color-danger); border-top: 1px solid var(--color-border); border-radius: 0 0 10px 10px; }
.diy-account-nav-icon, .diy-dash-icon { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; flex: 0 0 22px; }
.diy-account-nav-icon svg, .diy-dash-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.diy-account-main { min-width: 0; }
.diy-dashboard-greeting { margin-top: 0; }
.diy-dash-card { min-height: 178px; }
.diy-dash-card small { display: block; margin-top: .35rem; color: var(--color-text-secondary); font-size: .82rem; font-weight: 400; }

@media (max-width: 760px) {
  .woocommerce-account .diy-account-shell { padding: 1.5rem 1rem 3rem; }
  .diy-account-layout { grid-template-columns: 1fr; gap: 1.25rem; }
  .diy-account-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .5rem; }
  .diy-account-nav-link { min-height: 48px; }
  .diy-account-nav-link.is-logout { margin-top: 0; border-top: 0; }
}

/* ---- Dashboard ---- */
.diy-dashboard-greeting {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--color-text);
}
.diy-dashboard-sub {
  margin: 0 0 1.5rem;
  color: var(--color-text-secondary);
}
.diy-dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.diy-dash-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.diy-dash-card:hover {
  border-color: var(--color-brand-primary);
  transform: translateY(-2px);
}
.diy-dash-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}
.diy-dash-value {
  font-size: 1.05rem;
  font-weight: 600;
}
.diy-dash-email {
  font-size: 0.95rem;
  word-break: break-all;
}

/* ---- Orders list (cards) ---- */
.diy-order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.diy-order-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.diy-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.diy-order-id {
  display: flex;
  flex-direction: column;
}
.diy-order-number {
  font-weight: 700;
  font-size: 1.05rem;
}
.diy-order-date {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.diy-order-status {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--color-brand-soft);
  color: var(--color-brand-primary);
  white-space: nowrap;
}
.diy-order-status--completed { background: #e6f6ee; color: var(--color-success); }
.diy-order-status--processing { background: #eaf2fb; color: #1f6fb2; }
.diy-order-status--pending { background: #fdf3e2; color: var(--color-warning); }
.diy-order-status--cancelled,
.diy-order-status--refunded,
.diy-order-status--failed { background: #fdecea; color: var(--color-danger); }

.diy-order-body {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.diy-order-thumbs {
  display: flex;
  gap: 0.4rem;
}
.diy-order-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.diy-order-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.diy-order-items {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}
.diy-order-total {
  font-weight: 700;
}
.diy-order-foot {
  display: flex;
  justify-content: flex-end;
}
.diy-order-view {
  text-decoration: none;
}

.diy-order-pagination {
  display: flex;
  gap: 0.4rem;
  margin-top: 1rem;
}
.diy-order-pagination a,
.diy-order-pagination .current {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-text);
}
.diy-order-pagination .current {
  background: var(--color-brand-primary);
  color: var(--color-on-brand-primary);
  border-color: var(--color-brand-primary);
}

.diy-empty-state {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: 14px;
}
.diy-empty-state p {
  margin: 0 0 1rem;
  color: var(--color-text-secondary);
}

/* ---- Review action in order items ---- */
.diy-review-action {
  margin-top: 0.6rem;
}
.diy-review-cta {
  display: inline-block;
  font-size: 0.9rem;
  text-decoration: none;
}
.diy-review-done {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-success);
}

/* ---- Write review form ---- */
.diy-write-review {
  max-width: 640px;
}
.diy-back {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--color-brand-primary);
  text-decoration: none;
  font-weight: 600;
}
.diy-review-product {
  margin: 0 0 0.4rem;
  font-size: 1.3rem;
}
.diy-review-variation {
  margin: 0 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.diy-review-attr {
  font-size: 0.85rem;
  background: var(--color-brand-soft);
  color: var(--color-brand-primary);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.diy-review-ineligible {
  color: var(--color-text-secondary);
}

.diy-rating {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.diy-rating legend {
  padding: 0;
  margin-bottom: 0.4rem;
  font-weight: 600;
  width: 100%;
}
.diy-rating input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.diy-rating label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
}
.diy-rating input:focus + label {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.diy-rating input:checked + label {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-on-brand-primary);
}

.diy-review-comment-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.diy-review-form textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.75rem;
  font: inherit;
  resize: vertical;
}
.diy-review-form textarea:focus {
  outline: 2px solid var(--color-focus);
  border-color: var(--color-brand-primary);
}
.diy-review-form .button {
  margin-top: 1rem;
}

/* ---- Order detail: keep meta legible on mobile (no horizontal scroll) ---- */
.woocommerce-table--order-details .wc-item-meta {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
}
.woocommerce-table--order-details .wc-item-meta li {
  display: flex;
  gap: 0.4rem;
}

/* ==========================================================================
   Store Completion Sprint 01.1 — ONE account gateway: Sign In | Create Account

   Presentation only. WooCommerce owns authentication, validation, customer
   creation, and lost-password; these rules dress the native #customer_login
   markup (u-column1 = login form, u-column2 = registration form) as a single
   centered card with two tabs. No template is overridden and no
   authentication logic is duplicated, so WooCommerce template updates keep
   applying. Without JavaScript the two native forms simply stack, which is
   the pre-existing behaviour.
   ========================================================================== */

.woocommerce-account .woocommerce > h2 {
  font-size: 1.35rem;
  margin: 0 0 1.25rem;
}

/* The whole gateway is one card. WooCommerce's float-based col2-set is
   neutralised; the tabs and panels live inside the card. */
.woocommerce-account #customer_login {
  max-width: 480px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
  float: none;
  width: auto;
}

/* Tab strip. Injected by assets/js/account-tabs.js; absent without JS. */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background);
}
.auth-tab {
  padding: 13px 8px;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: 800;
  font-size: 0.95rem;
  text-align: center;
  cursor: pointer;
}
.auth-tab.is-active {
  background: var(--color-surface);
  color: var(--color-brand-primary);
  box-shadow: inset 0 -2px 0 var(--color-brand-primary);
}
.auth-tab:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

/* With tabs present, exactly one panel shows at a time; switching is
   instant (a class flip on the wrapper). */
#customer_login.diy-has-tabs .u-column2 { display: none; }
#customer_login.diy-has-tabs.is-register .u-column1 { display: none; }
#customer_login.diy-has-tabs.is-register .u-column2 { display: block; }

/* The native forms lose their individual card styling — the gateway card
   is the container now. */
.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 1.5rem 1.6rem 1.7rem;
  margin: 0;
}
.woocommerce-account #customer_login form.login > h2,
.woocommerce-account #customer_login form.register > h2,
.woocommerce-account #customer_login .u-column1 h2,
.woocommerce-account #customer_login .u-column2 h2 {
  display: none; /* the tabs name the panels; a second heading is noise */
}

.woocommerce-account form .form-row {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 0.9rem;
  padding: 0;
}
.woocommerce-account form label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
}
.woocommerce-account form .input-text,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"] {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
.woocommerce-account form .input-text:focus,
.woocommerce-account form input:focus {
  outline: 2px solid var(--color-focus);
  border-color: var(--color-brand-primary);
}
.woocommerce-account form .required {
  color: var(--color-danger);
}
.woocommerce-account form .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.woocommerce-account form .woocommerce-form__label-for-checkbox input {
  width: 16px;
  height: 16px;
  min-height: 0;
}

/* Submit buttons wear the approved primary CTA treatment. */
.woocommerce-account form.login button[type="submit"],
.woocommerce-account form.register button[type="submit"],
.woocommerce-account form.lost_reset_password button[type="submit"] {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 10px;
  background: var(--color-brand-primary);
  color: var(--color-on-brand-primary);
  font-weight: 900;
  font-size: 0.95rem;
  cursor: pointer;
}
.woocommerce-account form.login button[type="submit"]:hover,
.woocommerce-account form.register button[type="submit"]:hover,
.woocommerce-account form.lost_reset_password button[type="submit"]:hover {
  background: var(--color-brand-primary-hover);
}

.woocommerce-account form.login .lost_password,
.woocommerce-account form.register .lost_password {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
}
.woocommerce-account form.login .lost_password a,
.woocommerce-account form.register .lost_password a {
  color: var(--color-brand-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce-account .woocommerce-LostPassword,
.woocommerce-account .woocommerce-form-login__rememberme {
  margin: 0 0 0.75rem;
}

.woocommerce-account .woocommerce-notices-wrapper {
  max-width: 520px;
  margin: 0 auto 1.25rem;
}

/* Lost / reset password standalone form keeps its own card. */
.woocommerce-account form.lost_reset_password {
  max-width: 520px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  padding: 1.4rem 1.5rem 1.5rem;
}

@media (max-width: 720px) {
  .woocommerce-account #customer_login {
    max-width: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

@media (max-width: 600px) {
  .diy-order-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .diy-dash-email {
    word-break: break-all;
  }
}