/**
 * RDW Store Suite — customer My Account area.
 *
 * Implements rdw-account-mockups/account-*.html verbatim on WooCommerce's own
 * My Account markup (via template overrides). Everything is scoped under
 * .rdw-account so it never leaks into, or is overridden by, the theme.
 *
 * One shell, five bodies: pagehead + .acct grid (nav scroller -> 262px sidebar
 * at 1200) + content. Mobile-first — the base rules are the phone layout; the
 * two @media blocks only ADD to it.
 *
 * Tokens, sizes, radii, colours and breakpoints are copied from the storefront
 * kit (PROMPT-account-customer.md appendix + account-kit.mjs). Do not round them.
 *
 * @package RDW_Store_Suite
 * @since   1.27.0
 */

.rdw-account {
    --navy:   #0D3577;
    --navy-d: #0A2757;
    --navy-l: #436EAB;
    --yellow: #FFCA00;
    --orange: #E96E20;
    --ink:    #34353C;
    --muted:  #5C6880;
    --line:   #E4E8F0;
    --soft:   #F5F7FB;
    --radius: 20px;

    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.5;
}
.rdw-account *, .rdw-account *::before, .rdw-account *::after { box-sizing: border-box; }
.rdw-account a { text-decoration: none; }

/* container */
.rdw-account .wrap { max-width: 1600px; margin: 0 auto; padding: 0 16px; }

/* type helpers */
.rdw-account .h-md  { font-size: 20px; line-height: 1.25; font-weight: 700; margin: 0; }
.rdw-account .body  { font-size: 15px; line-height: 1.65; }
.rdw-account .small { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* buttons */
.rdw-account .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 700;
    font-size: 15px; border: 2px solid transparent; cursor: pointer; text-align: center;
    line-height: 1.2; text-decoration: none; font-family: inherit;
}
.rdw-account .btn--y { background: var(--yellow); color: var(--navy-d); }
.rdw-account .btn--n { background: var(--navy); color: #fff; }
.rdw-account .btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.rdw-account .btn--full { display: flex; width: 100%; }

/* card */
.rdw-account .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

/* grid */
.rdw-account .grid { display: grid; gap: 16px; }
.rdw-account .g2 { grid-template-columns: minmax(0, 1fr); }

/* forms — real inputs (the mockup faked them with spans) */
.rdw-account .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rdw-account .field > span { font-size: 13px; font-weight: 600; color: #3A445C; }
.rdw-account .input,
.rdw-account input.input,
.rdw-account .field input,
.rdw-account .field select {
    display: flex; align-items: center; width: 100%;
    min-height: 52px; padding: 0 16px; border-radius: 10px;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    font-size: 15px; font-family: inherit;
}
.rdw-account .field input::placeholder { color: #6B7280; opacity: 1; }
.rdw-account .field input:focus, .rdw-account .field select:focus {
    outline: 0; border-color: var(--navy-l); box-shadow: 0 0 0 3px rgba(67,110,171,.16);
}
.rdw-account .fieldrow { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }

/* ---------- page shell ---------- */
.rdw-account .pagehead { background: var(--soft); border-bottom: 1px solid var(--line); padding: 22px 0; }
.rdw-account .pagehead h1 { font-size: 26px; line-height: 1.2; color: var(--navy); margin: 0; }
.rdw-account .pagehead .crumb { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.rdw-account .pagehead__row { display: flex; flex-direction: column; gap: 14px; }

.rdw-account .acct { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); padding: 22px 0 36px; align-items: start; }

/* nav — scroller on phones, sidebar from 1200 */
.rdw-account .anav {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
    margin: 0 -16px; padding-left: 16px; padding-right: 16px; list-style: none;
}
.rdw-account .anav li { flex: 0 0 auto; margin: 0; padding: 0; }
.rdw-account .anav a {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
    color: var(--navy); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.rdw-account .anav a.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.rdw-account .anav a.is-out { color: var(--muted); }

/* ---------- status pills ---------- */
.rdw-account .pill-s {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
    border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.rdw-account .pill-s::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rdw-account .s-proc { background: #FFF3D6; color: #8A6200; }
.rdw-account .s-done { background: #E2F3E8; color: #1E7A46; }
.rdw-account .s-hold { background: #FDE7E2; color: #B23A1B; }
.rdw-account .s-book { background: #E4ECFA; color: #1B4491; }
.rdw-account .s-new  { background: #EDE7FB; color: #4B2FA8; }

/* ---------- record list: cards on phones, table from 768 ---------- */
.rdw-account .rec { display: grid; gap: 12px; }
.rdw-account .rec__head { display: none; }
.rdw-account .rec__row { display: grid; gap: 10px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.rdw-account .rec__k { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.rdw-account .rec__cell { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.rdw-account .rec__cell > span:last-child { text-align: right; }
.rdw-account .rec__id { font-size: 16px; font-weight: 700; color: var(--navy); }
.rdw-account .rec__act { margin-top: 2px; }

/* ---------- stat tiles ---------- */
.rdw-account .tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rdw-account .tile { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.rdw-account .tile__k { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.rdw-account .tile__v { font-size: 26px; font-weight: 800; line-height: 1; color: var(--navy); }
.rdw-account .tile__n { font-size: 12px; color: var(--muted); margin-top: 6px; }
.rdw-account .tile--alert { border-color: #F0C8B8; background: #FFF7F4; }
.rdw-account .tile--alert .tile__v { color: #B23A1B; }

/* ---------- timeline ---------- */
.rdw-account .tl { display: grid; gap: 0; margin: 4px 0 0; }
.rdw-account .tl__i { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; padding-bottom: 20px; position: relative; }
.rdw-account .tl__i:last-child { padding-bottom: 0; }
.rdw-account .tl__i::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; background: var(--line); }
.rdw-account .tl__i:last-child::before { display: none; }
.rdw-account .tl__dot { width: 26px; height: 26px; border-radius: 50%; background: var(--line); display: flex; align-items: center; justify-content: center; z-index: 1; }
.rdw-account .tl__i.is-done .tl__dot { background: var(--navy); }
.rdw-account .tl__i.is-done::before { background: var(--navy); }
.rdw-account .tl__t { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; display: block; }
.rdw-account .tl__d { font-size: 12.5px; color: var(--muted); margin-top: 3px; display: block; }

/* ---------- address / detail cards ---------- */
.rdw-account .addr { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; }
.rdw-account .addr h3 { font-size: 16px; color: var(--navy); margin: 0 0 10px; }
.rdw-account .addr p { font-size: 14px; line-height: 1.7; color: var(--ink); margin: 0 0 14px; }
.rdw-account .addr .btn { margin-top: auto; }

/* ---------- empty state ---------- */
.rdw-account .empty { text-align: center; padding: 34px 20px; background: #fff; border: 1px dashed #CBD5E6; border-radius: 16px; }
.rdw-account .empty h3 { font-size: 17px; color: var(--navy); margin: 0 0 6px; }

/* ---------- order-detail line items ---------- */
.rdw-account .oitem { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rdw-account .oitem__p { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rdw-account .oitem h3 { font-size: 16px; line-height: 1.35; color: var(--navy); margin: 0; }
.rdw-account .oitem .thumb { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--soft); }
.rdw-account .oitem .thumb img { width: 64px; height: 64px; object-fit: cover; display: block; }
.rdw-account .oitem .citem__var { display: block; margin: 5px 0 0; font-size: 15px; line-height: 1.45; color: #6C7686; }
.rdw-account .oitem .meta { display: block; margin: 6px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.rdw-account .trow { display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; padding: 8px 0; }

/* ---------- WooCommerce's own edit-address / edit-account form fields ---------- */
.rdw-account .woocommerce-address-fields .form-row,
.rdw-account .woocommerce-EditAccountForm .form-row,
.rdw-account form.edit-account .form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 0; float: none; width: 100%; }
.rdw-account .form-row > label { font-size: 13px; font-weight: 600; color: #3A445C; }
.rdw-account .woocommerce-input-wrapper { display: block; width: 100%; }
.rdw-account .input-text,
.rdw-account .woocommerce-address-fields select,
.rdw-account .woocommerce-EditAccountForm select,
.rdw-account select.country_select,
.rdw-account select.state_select,
.rdw-account .select2-container .select2-selection--single {
    width: 100%; min-height: 52px; padding: 0 16px; border-radius: 10px;
    border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 15px;
}
.rdw-account textarea.input-text { min-height: 96px; padding: 12px 16px; }
.rdw-account .input-text::placeholder { color: #6B7280; opacity: 1; }
.rdw-account .input-text:focus, .rdw-account select:focus { outline: 0; border-color: var(--navy-l); box-shadow: 0 0 0 3px rgba(67,110,171,.16); }
.rdw-account .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 50px; padding: 0; color: var(--ink); }
.rdw-account .select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px; }
.rdw-account form .required { color: var(--orange); border: 0; }
.rdw-account form .woocommerce-password-strength { font-size: 12.5px; margin-top: 6px; }
@media (min-width: 768px) {
    .rdw-account .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
    .rdw-account .woocommerce-address-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
}

/* WooCommerce notices, inside the account scope */
.rdw-account .woocommerce-message,
.rdw-account .woocommerce-error,
.rdw-account .woocommerce-info {
    list-style: none; margin: 0 0 16px; padding: 13px 16px; border-radius: 12px;
    font-size: 13.5px; line-height: 1.6; border: 1px solid var(--line); background: #fff;
}
.rdw-account .woocommerce-message { background: #E2F3E8; border-color: #BEE3CB; color: #1E7A46; }
.rdw-account .woocommerce-error { background: #FDECEC; border-color: #F3C9C9; color: #B02A22; }
.rdw-account .woocommerce-info { background: #EDF3FD; border-color: #C6DAF6; color: #1B4491; }
.rdw-account .woocommerce-message a, .rdw-account .woocommerce-error a, .rdw-account .woocommerce-info a { color: inherit; text-decoration: underline; }

/* ================= TABLET  ≥768 ================= */
@media (min-width: 768px) {
    .rdw-account .wrap { padding: 0 32px; }
    .rdw-account .pagehead__row { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    .rdw-account .pagehead h1 { font-size: 32px; }
    .rdw-account .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .rdw-account .anav { margin: 0; padding-left: 0; padding-right: 0; }
    .rdw-account .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rdw-account .grid { gap: 20px; }
    .rdw-account .fieldrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .rdw-account .rec { gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
    .rdw-account .rec__head, .rdw-account .rec__row { display: grid; grid-template-columns: var(--cols); gap: 16px; align-items: center; padding: 14px 18px; border: 0; border-radius: 0; }
    .rdw-account .rec__head { background: var(--soft); border-bottom: 1px solid var(--line); }
    .rdw-account .rec__head span { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
    .rdw-account .rec__row + .rec__row { border-top: 1px solid var(--line); }
    .rdw-account .rec__k { display: none; }
    .rdw-account .rec__cell { display: block; }
    .rdw-account .rec__cell > span:last-child { text-align: left; }
    .rdw-account .rec__act { margin-top: 0; text-align: right; }

    .rdw-account .oitem { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; }
    .rdw-account .oitem__p { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 4px; }
}

/* ================= DESKTOP  ≥1200 ================= */
@media (min-width: 1200px) {
    .rdw-account .wrap { padding: 0 40px; }
    .rdw-account .acct { grid-template-columns: 262px minmax(0, 1fr); gap: 36px; padding: 32px 0 56px; }
    .rdw-account .anav { flex-direction: column; gap: 4px; overflow: visible; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 8px; }
    .rdw-account .anav li { width: 100%; }
    .rdw-account .anav a { width: 100%; min-height: 48px; border: 0; border-radius: 10px; background: transparent; }
    .rdw-account .anav a.is-on { background: var(--navy); }
    .rdw-account .tile__v { font-size: 30px; }
    .rdw-account .grid { gap: 24px; }
}

/* ---------------------------------------------------------------------------
   AJAX navigation (account.js) — panel swap feedback.
   A brief dim while the next endpoint loads; pointer events are suppressed so
   a second click can't queue a competing request. Heading focus ring removed
   because we move focus there programmatically for screen readers.
   --------------------------------------------------------------------------- */
.rdw-account.is-loading { opacity: .55; transition: opacity .15s ease; pointer-events: none; }
.rdw-account h1[tabindex] { outline: none; }

/* ---------------------------------------------------------------------------
   Audit fixes (v1.28.2).
   1) WooCommerce's own buttons that surface inside the account content — e.g.
      the "Confirm email address" order-matching prompt (button.wc-forward) —
      were the theme's default height (~30px), under the 44px tap floor and
      off-brand. Bring them onto the brand pill at 44px. (Our own controls use
      .btn / .anav a and are untouched.)
   2) Real form inputs were resolving to ~55px because the active theme adds
      vertical padding; pin them to the 52px spec height.
   --------------------------------------------------------------------------- */
.rdw-account .woocommerce-Button,
.rdw-account button.wc-forward,
.rdw-account a.wc-forward,
.rdw-account .woocommerce-MyAccount-content .button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px; border-radius: 999px;
    background: var(--navy); color: #fff; border: 2px solid var(--navy);
    font-weight: 700; font-size: 14px; line-height: 1.2; text-decoration: none;
    cursor: pointer;
}
.rdw-account input.input-text,
.rdw-account .field input:not([type="checkbox"]):not([type="radio"]) {
    height: 52px !important;
    min-height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
   Audit fix (v1.28.3).
   WooCommerce's woocommerce.css floats the two account columns —
   .woocommerce-MyAccount-navigation{float:left;width:30%} and
   .woocommerce-MyAccount-content{float:right;width:68%}. Inside our .acct grid
   that left the nav at 30% of the 262px track (~79px, clipping the pill labels
   to "Dashb…") and the content at 68% (~685px, ~320px dead space to its right).
   Nothing overrode it above 768 — woocommerce-smallscreen.css only resets both
   to width:100% below 768, which is why the break showed at 1440 but not 390.
   Hand the layout back to the grid.
   --------------------------------------------------------------------------- */
.rdw-account .acct > .woocommerce-MyAccount-navigation,
.rdw-account .acct > .woocommerce-MyAccount-content {
    float: none;
    width: auto;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   Audit fix (v1.28.4) — WooCommerce notices inside the account scope.
   Woo's icon-font ::before glyph is absolutely positioned ~20px from the left,
   but our restyled box only has 16px of left padding, so the glyph landed on
   top of the first word ("Your account is using a temporary password"). Remove
   it, and lay the notice out as a wrapping flex row so its action button (e.g.
   the temporary-password "Resend") sits inline on wide screens and drops onto
   its own line on phones instead of being squeezed into a ~100px column.
   --------------------------------------------------------------------------- */
.rdw-account .woocommerce-info::before,
.rdw-account .woocommerce-message::before,
.rdw-account .woocommerce-error::before { content: none; display: none; }
.rdw-account .woocommerce-info,
.rdw-account .woocommerce-message,
.rdw-account .woocommerce-error {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}
.rdw-account .woocommerce-info > .button,
.rdw-account .woocommerce-message > .button,
.rdw-account .woocommerce-error > .button { margin-left: auto; }