/*
 * Sign in / Create account (woocommerce/myaccount/form-login.php override).
 *
 * The parent Motta theme's woocommerce.css already styles
 * `.woocommerce-account:not(.logged-in) .woocommerce-account__summary` etc.
 * for ITS OWN narrow single-column layout (fixed 40.352% width, a
 * 200%-wide two-form slider trick). Since this template now nests that
 * markup inside a two-panel split layout, those inherited percentages
 * resolve against a different container and collapse the form to a
 * sliver. Every selector below that touches one of those same classes is
 * prefixed with `.woocommerce-account:not(.logged-in)` to match (and
 * slightly exceed) the parent rule's specificity, so it reliably wins
 * regardless of stylesheet order.
 */

/* Faint repeating brand-mark watermark behind the otherwise-bare page
   canvas (logged-in dashboard especially — a couple of nav links and a few
   lines of text left a lot of empty background). Fixed + negative z-index
   so it tiles across the full viewport behind every card on the page
   without affecting their own (opaque) backgrounds or being clipped to
   `.pf-page__content`'s centered max-width. */
body.woocommerce-account {
    position: relative;
}

body.woocommerce-account::before {
    background-image: url('../images/logo.png');
    background-repeat: repeat;
    background-size: 90px 90px;
    content: "";
    inset: 0;
    opacity: 0.04;
    pointer-events: none;
    position: fixed;
    z-index: -1;
}

/* Logged-in welcome band (inc/my-account-hero.php) */
.pf-account-hero {
    background-color: var(--surface-dark);
    background-position: center;
    background-size: cover;
    margin-bottom: 22px;
    padding: 38px 0;
    position: relative;
}

.pf-account-hero__scrim {
    background: linear-gradient(155deg, rgba(43, 30, 120, 0.86) 0%, rgba(43, 30, 120, 0.55) 100%);
    inset: 0;
    position: absolute;
}

.pf-account-hero__content {
    margin-inline: auto;
    max-width: 640px;
    padding-inline: 20px;
    position: relative;
    text-align: center;
    z-index: 1;
}

.pf-account-hero__content h1 {
    color: #fff;
    font-size: clamp(26px, 4vw, 36px);
    line-height: 1.2;
    margin: 0 0 12px;
}

.pf-account-hero__content p:last-child {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 480px) {
    .pf-account-hero { padding: 28px 0; }
}

/* ============================================================
   Logged-out Sign in / Create account — rebuilt from scratch
   ============================================================
   This page (My Account, ID 8) is authored in Elementor as a Section >
   Column > Shortcode widget wrapping [woocommerce_my_account]. Elementor's
   own kit defaults (.elementor-widget:not(:last-child) margin-block-end,
   --widgets-spacing, widget-wrap padding) plus this theme's generic
   `.pf-page__content` padding stacked on top of each other and pushed the
   auth card ~200px down an otherwise-empty page — nothing was actually
   rendering in that gap. Stripped here, scoped to the logged-out state
   only, so the only vertical space on the page is the container's own
   40px top/bottom margin. */
.woocommerce-account:not(.logged-in) .pf-page {
    background: #FAF8FF;
    min-height: 0;
}

.woocommerce-account:not(.logged-in) .pf-page__content {
    max-width: none;
    padding: 0;
}

.woocommerce-account:not(.logged-in) .pf-page__content > * + * {
    margin-top: 0;
}

.woocommerce-account:not(.logged-in) .elementor-top-section,
.woocommerce-account:not(.logged-in) .elementor-container,
.woocommerce-account:not(.logged-in) .elementor-column > .elementor-widget-wrap,
.woocommerce-account:not(.logged-in) .elementor-widget-shortcode,
.woocommerce-account:not(.logged-in) .elementor-widget-container,
.woocommerce-account:not(.logged-in) .elementor-shortcode,
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper:empty {
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

/* The kit's `.elementor-section.elementor-section-boxed > .elementor-container
   {max-width:1140px}` rule (post-9221.css) is what was actually capping the
   split's width — killing its margin above (for centering) without also
   killing this cap just pinned a 1140px-wide box to the left edge instead
   of spanning full width, leaving dead space on the right. This is the
   piece that was still missing. */
.woocommerce-account:not(.logged-in) .elementor-container {
    max-width: none !important;
    width: 100% !important;
}

/* =============================================================================
   PREMIUM SIGN IN / CREATE ACCOUNT — brand-left, card-right split.

   Scoped local custom properties rather than the sitewide --primary/
   --primary-dark: this redesign asks for an exact three-stop purple
   (#6C47FF/#8B5CF6/#A78BFA) distinct from the theme's brand purple
   (#6D28D9) used everywhere else, so it's kept local to `.pf-account-auth`
   instead of overwriting variables.css for the whole site.
   ========================================================================= */
.pf-account-auth {
    --pf-auth-grad-1: #6C47FF;
    --pf-auth-grad-2: #8B5CF6;
    --pf-auth-grad-3: #A78BFA;
    --pf-auth-grad-1-rgb: 108, 71, 255;
    --pf-auth-grad-2-rgb: 139, 92, 246;
    --pf-auth-ink: #101828;
    --pf-auth-ink-muted: #667085;
    --pf-auth-border: #E4E7EC;
    --pf-auth-danger: #E11D48;
    --pf-auth-success: #12866F;
    --pf-auth-radius-lg: 24px;
    --pf-auth-radius-md: 14px;
    --pf-auth-ease: cubic-bezier(.4, 0, .2, 1);
    --pf-auth-ease-out: cubic-bezier(.16, 1, .3, 1);

    background: #fff;
    display: grid;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    max-width: none;
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* Same gradient as `.pf-account-auth__visual` below, painted on the outer
   grid too so it shows through once `.pf-account-auth__card` goes
   transparent at this width (see that rule for why). */
@media (min-width: 901px) {
    .pf-account-auth {
        background: linear-gradient(160deg, var(--pf-auth-grad-1) 0%, var(--pf-auth-grad-2) 55%, var(--pf-auth-grad-3) 100%);
    }
}

/* Repeating brand-mark watermark behind the whole auth layout, tilted on a
   slight diagonal so it reads as texture rather than a flat tile grid. */
.pf-account-auth::before {
    background-image: url('../images/logo.png');
    background-repeat: repeat;
    background-size: 90px 90px;
    content: "";
    height: 180%;
    left: -40%;
    opacity: 0.1;
    pointer-events: none;
    position: absolute;
    top: -40%;
    transform: rotate(-12deg);
    width: 180%;
    z-index: 0;
}

@keyframes pf-auth-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pf-auth-form-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Left: brand panel ---- */
.pf-account-auth__visual {
    align-items: flex-start;
    background: linear-gradient(160deg, var(--pf-auth-grad-1) 0%, var(--pf-auth-grad-2) 55%, var(--pf-auth-grad-3) 100%);
    display: flex;
    overflow: hidden;
    padding: 56px;
    position: relative;
    z-index: 1;
}

.pf-account-auth__visual::before,
.pf-account-auth__visual::after {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    content: "";
    position: absolute;
}

.pf-account-auth__visual::before {
    height: 420px;
    right: -140px;
    top: -120px;
    width: 420px;
}

.pf-account-auth__visual::after {
    background: rgba(255, 255, 255, 0.10);
    bottom: -160px;
    left: -120px;
    height: 360px;
    width: 360px;
}

.pf-account-auth__visual-inner {
    animation: pf-auth-fade-up 560ms var(--pf-auth-ease-out) both;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1;
}

.pf-account-auth__mark {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 22px;
    height: auto;
    margin-bottom: 36px;
    opacity: 1;
    padding: 16px;
    width: 108px;
}

.pf-account-auth__visual-copy { max-width: 420px; }

.pf-account-auth__kicker {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.pf-account-auth__visual-copy h1 {
    color: #fff;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.14;
    margin: 0 0 16px;
}

.pf-account-auth__visual-copy > p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 32px;
}

.pf-account-auth__features {
    display: grid;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pf-account-auth__features li {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 14.5px;
    font-weight: 600;
    gap: 12px;
}

.pf-account-auth__feature-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 10px;
    height: 24px;
    justify-content: center;
    width: 24px;
}

/* Trust strip, pinned to the panel's bottom edge via the flex column above. */
.pf-account-auth__trust {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    list-style: none;
    margin: 32px 0 0;
    margin-top: auto;
    padding: 24px 0 0;
}

.pf-account-auth__trust li {
    align-items: center;
    color: rgba(255, 255, 255, 0.78);
    display: flex;
    font-size: 12.5px;
    font-weight: 600;
    gap: 8px;
}

.pf-account-auth__trust i { color: rgba(255, 255, 255, 0.95); font-size: 13px; }

/* ---- Right: login/register panel ---- */
.pf-account-auth__card {
    align-items: center;
    background: rgba(250, 250, 252, 0.9);
    display: flex;
    justify-content: center;
    padding: 40px;
    position: relative;
    z-index: 1;
}

/* At wide desktop viewports the two 1fr columns both grow past their
   content's natural size — the brand panel's copy stays a fixed max-width
   and the card column's white panel caps at 460px, so both columns end up
   with dead flat space around their actual content instead of the split
   simply widening. Painting the same gradient on the outer grid too (see
   `.pf-account-auth` above) then letting this column go transparent turns
   that dead space into a continuation of the brand panel's background
   instead of a separate near-white block, so the whole layout reads as one
   canvas with a white card floating on it rather than two abutted boxes.
   Left at its own near-white background below 901px, where the layout
   stacks and the card section is comfortably full-width with no leftover
   space to fill. Must come after the rule above: same selector, same
   specificity — source order is what makes this win at ≥901px. */
@media (min-width: 901px) {
    .pf-account-auth__card {
        background: transparent;
    }
}

.pf-account-auth__panel {
    animation: pf-auth-fade-up 560ms 90ms var(--pf-auth-ease-out) both;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, 0.04);
    border-radius: var(--pf-auth-radius-lg);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 16px 40px -12px rgba(16, 24, 40, 0.14);
    max-width: 460px;
    padding: 48px 40px;
    transition: box-shadow 300ms var(--pf-auth-ease), transform 300ms var(--pf-auth-ease);
    width: 100%;
}

.pf-account-auth__panel:hover {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 20px 48px -12px rgba(16, 24, 40, 0.18);
    transform: translateY(-2px);
}

.woocommerce-account:not(.logged-in) .pf-account-auth .woocommerce-account__summary {
    margin: 0;
    max-width: none;
    width: 100%;
}

.woocommerce-account:not(.logged-in) .pf-account-auth .woocommerce-account__form {
    position: relative;
    width: 100%;
}

.woocommerce-account:not(.logged-in) .pf-account-auth .woocommerce-form {
    float: none;
    width: 100%;
}

.woocommerce-account:not(.logged-in) .pf-account-auth .woocommerce-form.active {
    animation: pf-auth-form-in 320ms var(--pf-auth-ease-out) both;
}

.woocommerce-account:not(.logged-in) .pf-account-auth form.login {
    background: none;
    border-radius: 0;
    padding: 0;
}

/* Tab row: one shared underline for the whole row, plus a JS-positioned
   sliding indicator (assets/js/my-account.js) that animates between tabs
   instead of two independently-drawn ::after bars. h2[data-tab] are given
   role="tab"/tabindex by that same script — Motta's own click-only binding
   (assets/js/scripts.js loginTabs()) has no keyboard equivalent otherwise,
   which would make "Create Account" unreachable without a mouse. */
.woocommerce-account:not(.logged-in) .pf-account-auth .woocommerce-account__heading {
    border-bottom: 1px solid var(--pf-auth-border);
    display: flex;
    gap: 32px;
    margin-bottom: 36px;
    position: relative;
}

.woocommerce-account:not(.logged-in) .pf-account-auth .woocommerce-account__heading h2 {
    border-bottom: 0;
    color: var(--pf-auth-ink-muted);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
    padding: 0 0 16px;
    position: relative;
    text-align: left;
    transition: color 220ms var(--pf-auth-ease);
}

.woocommerce-account:not(.logged-in) .pf-account-auth .woocommerce-account__heading h2:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--pf-auth-grad-2);
    outline-offset: 3px;
}

.woocommerce-account:not(.logged-in) .pf-account-auth .woocommerce-account__heading h2.active { color: var(--pf-auth-ink); }

.pf-account-auth__tab-indicator {
    background: linear-gradient(90deg, var(--pf-auth-grad-1), var(--pf-auth-grad-2));
    border-radius: 2px;
    bottom: -1px;
    height: 2px;
    left: 0;
    position: absolute;
    transition: transform 300ms var(--pf-auth-ease), width 300ms var(--pf-auth-ease);
    width: 0;
}

.pf-account-auth__form-intro h2 {
    color: var(--pf-auth-ink);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}

.pf-account-auth__form-intro p {
    color: var(--pf-auth-ink-muted);
    font-size: 14.5px;
    margin: 0 0 30px;
}

/* ---- Floating-label fields ----
   Every selector here is prefixed with `.woocommerce-account:not(.logged-in)
   .pf-account-auth` — not decorative, load-bearing: Motta's own
   `.woocommerce-account:not(.logged-in) form.woocommerce-form label` rule
   (woocommerce.css) sets font-size:14px at a specificity that beats an
   unprefixed `.pf-account-auth__field label`, so without matching that
   prefix here the label's font-size (though not its position — that
   property doesn't collide) would stay pinned at Motta's 14px regardless of
   focus state: it'd slide up but never shrink, overlapping the input's own
   text at the smaller floated position. (Also: this field wrapper is named
   `.pf-account-auth__field`, not the shorter `.pf-field` — that name is
   already a display:grid utility class used elsewhere in components.css;
   reusing it here collided both in class-name meaning and in layout.) */
.pf-account-auth__field {
    margin-bottom: 18px;
    position: relative;
}

.woocommerce-account:not(.logged-in) .pf-account-auth .woocommerce-Input {
    background: #fff;
    border: 1.5px solid var(--pf-auth-border);
    border-radius: var(--pf-auth-radius-md);
    color: var(--pf-auth-ink);
    font-family: inherit;
    font-size: 15px;
    height: 56px;
    padding: 22px 16px 6px;
    transition: border-color 220ms var(--pf-auth-ease), box-shadow 220ms var(--pf-auth-ease);
    width: 100%;
}

/* Fields not rebuilt as .pf-account-auth__field (do_action()-injected
   markup this template doesn't control, e.g. the CAPTCHA field) — plain
   label-above-input instead of floating, since their label precedes the
   input in the DOM and can't use the sibling-selector trick below. */
.woocommerce-account:not(.logged-in) .pf-account-auth .woocommerce-form-row:not(.pf-account-auth__field) label {
    color: var(--pf-auth-ink);
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px;
}

.woocommerce-account:not(.logged-in) .pf-account-auth .woocommerce-form-row:not(.pf-account-auth__field) .woocommerce-Input { padding: 0 16px; }

.woocommerce-account:not(.logged-in) .pf-account-auth .pf-account-auth__field label {
    color: var(--pf-auth-ink-muted);
    font-size: 15px;
    left: 17px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: left top;
    transition: all 200ms var(--pf-auth-ease);
}

.woocommerce-account:not(.logged-in) .pf-account-auth .woocommerce-Input:focus,
.woocommerce-account:not(.logged-in) .pf-account-auth .woocommerce-Input:not(:placeholder-shown) {
    border-color: var(--pf-auth-grad-2);
    box-shadow: 0 0 0 4px rgba(var(--pf-auth-grad-2-rgb), 0.14);
    outline: 0;
}

.woocommerce-account:not(.logged-in) .pf-account-auth .woocommerce-Input:focus + label,
.woocommerce-account:not(.logged-in) .pf-account-auth .woocommerce-Input:not(:placeholder-shown) + label {
    color: var(--pf-auth-grad-1);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    top: 11px;
    transform: translateY(0);
}

/* Field-level error state — WooCommerce's own validation JS adds
   .woocommerce-invalid to the closest .form-row, which .pf-account-auth__field also is. */
.woocommerce-account:not(.logged-in) .pf-account-auth .pf-account-auth__field.woocommerce-invalid .woocommerce-Input { border-color: var(--pf-auth-danger); }
.woocommerce-account:not(.logged-in) .pf-account-auth .pf-account-auth__field.woocommerce-invalid .woocommerce-Input:focus,
.woocommerce-account:not(.logged-in) .pf-account-auth .pf-account-auth__field.woocommerce-invalid .woocommerce-Input:not(:placeholder-shown) { box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.12); }
.woocommerce-account:not(.logged-in) .pf-account-auth .pf-account-auth__field.woocommerce-invalid label { color: var(--pf-auth-danger); }

.pf-account-auth .form-row-remember {
    align-items: center;
    display: flex;
    font-size: 13.5px;
    justify-content: space-between;
    margin: 4px 0 26px;
}

.pf-account-auth .woocommerce-form-login__rememberme {
    align-items: center;
    color: var(--pf-auth-ink-muted);
    display: flex;
    gap: 8px;
}

.pf-account-auth .lost_password {
    color: var(--pf-auth-grad-1);
    font-weight: 600;
    text-decoration: none;
    transition: color 200ms var(--pf-auth-ease);
}
.pf-account-auth .lost_password:hover { text-decoration: underline; }

/* ---- Primary button ---- */
.pf-account-auth__submit {
    background: linear-gradient(135deg, var(--pf-auth-grad-1), var(--pf-auth-grad-2));
    border: 0;
    border-radius: var(--pf-auth-radius-md);
    box-shadow: 0 10px 24px -8px rgba(var(--pf-auth-grad-1-rgb), 0.5);
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    height: 56px;
    letter-spacing: 0.01em;
    transition: transform 220ms var(--pf-auth-ease), box-shadow 220ms var(--pf-auth-ease), filter 220ms var(--pf-auth-ease);
    width: 100%;
}

.pf-account-auth__submit:hover {
    box-shadow: 0 14px 30px -8px rgba(var(--pf-auth-grad-1-rgb), 0.6);
    filter: brightness(1.04);
    transform: translateY(-2px);
}
.pf-account-auth__submit:active { transform: translateY(0); }
.pf-account-auth__submit:focus-visible { outline: 2px solid var(--pf-auth-grad-2); outline-offset: 3px; }

/* ---- Divider + social (visual placeholders — see
   template-parts/account-auth-social.php for why they're disabled) ---- */
.pf-account-auth__divider {
    align-items: center;
    color: var(--pf-auth-ink-muted);
    display: flex;
    font-size: 13px;
    gap: 14px;
    margin: 28px 0 20px;
}
.pf-account-auth__divider::before,
.pf-account-auth__divider::after {
    background: var(--pf-auth-border);
    content: "";
    flex: 1;
    height: 1px;
}

.pf-account-auth__social {
    display: grid;
    gap: 12px;
    margin-bottom: 4px;
}

.pf-social-btn {
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--pf-auth-border);
    border-radius: var(--pf-auth-radius-md);
    color: #374151;
    cursor: not-allowed;
    display: flex;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
    height: 52px;
    justify-content: center;
    opacity: 0.62;
    transition: background-color 200ms var(--pf-auth-ease);
}
.pf-social-btn:hover { background: #FAFAFB; }
.pf-social-btn__icon { flex-shrink: 0; font-size: 17px; height: 18px; width: 18px; }

/* Nextend Social Login's real Google button (installed 2026-08-08) is
   auto-injected by the plugin itself at `woocommerce_login_form_end` /
   `woocommerce_register_form_end` — those hooks fire just before this
   template's markup, so `.nsl-container` lands directly above the
   divider/Apple-placeholder row below, not inside `.pf-account-auth__social`.
   Motta's own SCSS gives it a 60px pill button (`_account.scss`); restyled
   here to match this card's 52px/rounded-md `.pf-social-btn` language
   instead so real Google and disabled Apple read as one consistent set. */
.pf-account-auth .nsl-container-block { margin: 28px 0 0; }
.pf-account-auth .nsl-container-buttons { gap: 12px; margin: 0 -12px; }
.pf-account-auth .nsl-container-buttons > * { padding: 0 12px; }
.pf-account-auth .nsl-button-default {
    border-radius: var(--pf-auth-radius-md) !important;
    height: 52px !important;
    min-height: 52px !important;
}
.pf-account-auth .nsl-button-label-container { line-height: 52px !important; }

.pf-account-auth__security {
    align-items: center;
    color: var(--pf-auth-ink-muted);
    display: flex;
    font-size: 12.5px;
    gap: 8px;
    justify-content: center;
    margin: 26px 0 0;
}
.pf-account-auth__security i { color: var(--pf-auth-grad-2); font-size: 12px; }

.pf-account-auth__notice {
    color: var(--pf-auth-ink-muted);
    font-size: 13.5px;
    margin: 0 0 20px;
}

.pf-account-auth .motta-create-account,
.pf-account-auth .motta-sign-in {
    font-size: 13.5px;
    margin-top: 22px;
    text-align: center;
}

.pf-account-auth .motta-create-account a,
.pf-account-auth .motta-sign-in a {
    color: var(--pf-auth-grad-1);
    font-weight: 600;
    text-decoration: none;
}
.pf-account-auth .motta-create-account a:hover,
.pf-account-auth .motta-sign-in a:hover { text-decoration: underline; }

.pf-account-auth .pf-captcha-field label { font-weight: 600; }

.pf-captcha-image {
    background: #fff;
    border: 1px solid var(--pf-auth-border);
    border-radius: 8px;
    display: block;
    margin: 8px 0 12px;
    user-select: none;
}

/* ---- Error / success notices (rendered above .pf-account-auth by
   WooCommerce's own wc_print_notices(), outside this template's markup) --- */
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-info {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--pf-auth-danger, #E11D48);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(16, 24, 40, 0.08);
    font-size: 14px;
    list-style: none;
    margin: 20px auto 0;
    max-width: 600px;
    padding: 16px 20px;
}
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-message { border-left-color: #12866F; }
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-info { border-left-color: #8B5CF6; }

/* Reduced motion: cut every animation/transition in this component down to
   effectively-instant rather than disabling them outright, so functional
   state changes (tab indicator moving, focus rings) still resolve without
   a hard visual jump. */
@media (prefers-reduced-motion: reduce) {
    .pf-account-auth,
    .pf-account-auth *,
    .pf-account-auth *::before,
    .pf-account-auth *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---- Tablet: branding panel narrower than the form column ---- */
@media (min-width: 901px) and (max-width: 1200px) {
    .pf-account-auth { grid-template-columns: 0.85fr 1.15fr; }
    .pf-account-auth__visual { padding: 44px; }
}

/* ---- Mobile: brand panel becomes a compact top banner, card scrolls
   below it. Touch targets (52-56px fields/buttons) are already large
   enough that nothing needs to grow further at this breakpoint. ---- */
@media (max-width: 900px) {
    .pf-account-auth {
        display: block;
        min-height: 0;
    }
    .pf-account-auth__visual {
        min-height: 200px;
        padding: 32px 28px;
    }
    .pf-account-auth__visual-inner { animation-duration: 460ms; }
    .pf-account-auth__mark { margin-bottom: 20px; padding: 12px; width: 84px; }
    .pf-account-auth__visual-copy h1 { font-size: clamp(24px, 6vw, 30px); margin-bottom: 0; }
    .pf-account-auth__visual-copy > p,
    .pf-account-auth__features { display: none; }
    .pf-account-auth__trust {
        border-top: 0;
        margin: 20px 0 0;
        padding: 0;
    }
    .pf-account-auth__card {
        padding: 28px 20px;
        padding-bottom: max(28px, env(safe-area-inset-bottom));
    }
    .pf-account-auth__panel { padding: 32px 24px; }
    .pf-account-auth__panel:hover { transform: none; }
}

@media (max-width: 480px) {
    .pf-account-auth__panel { padding: 28px 18px; }
    .woocommerce-account:not(.logged-in) .pf-account-auth .woocommerce-account__heading { gap: 22px; }
    .pf-account-auth__social { gap: 10px; }
}

/* =============================================================================
   LOGGED-IN DASHBOARD — Orders/Downloads/Addresses/Account details/nav.

   The Sign in/Create account rebuild above only ever touched the logged-out
   state (`:not(.logged-in)`). Everything below is scoped to
   `.woocommerce-account.logged-in` and re-skins Motta's existing dashboard
   markup/classes (sass/woocommerce/_account.scss) in the site's actual brand
   colors (variables.css) instead of Motta's generic gray/dark palette — no
   template overrides, same approach as the rest of this file. Motta's own
   icon masks (`.woocommerce-MyAccount-navigation li a::before`, baked-in
   black SVG data-URIs) and its 767px stacking/table-to-list breakpoint are
   left alone; only color, radius, spacing and hover/active states change.
   ========================================================================= */
.woocommerce-account.logged-in .pf-page { background: var(--background); }

.woocommerce-account.logged-in .motta-myaccount__wrapper,
.woocommerce-account.logged-in .woocommerce-MyAccount-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.woocommerce-account.logged-in .motta-myaccount__wrapper { padding: 24px 0 16px; }

.woocommerce-account.logged-in .motta-myaccount {
    border-bottom-color: var(--border);
}

.woocommerce-account.logged-in .motta-myaccount img {
    border: 2px solid var(--surface-tint);
}

.woocommerce-account.logged-in .motta-myaccount__user .text { color: var(--text); }
.woocommerce-account.logged-in .motta-myaccount__user .name { color: var(--text-light); font-weight: 400; }

/* Nav links: Motta's own left-border + color-swap on .is-active/:hover is
   kept (so its icon masks still line up against the same 54px left inset),
   just recolored to the brand purple and given a soft tinted pill behind
   the active/hovered row instead of a bare border. */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a {
    border-radius: 0 20px 20px 0;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a:hover {
    background: var(--surface-tint);
    border-color: var(--primary);
    color: var(--primary);
}

.woocommerce-account.logged-in .woocommerce-MyAccount-content {
    padding: 32px;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-content .greeting,
.woocommerce-account.logged-in .woocommerce-MyAccount-content h2,
.woocommerce-account.logged-in .woocommerce-MyAccount-content h3 {
    color: var(--text);
}

.woocommerce-account.logged-in .woocommerce-MyAccount-content p a,
.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-info a {
    color: var(--primary);
}

/* Buttons throughout the dashboard (order "View"/"Pay", download "Download
   file", edit-account/address "Save changes") — Motta gives these bespoke
   one-off colors (#1d2128 on orders/downloads, its own --mt-color__primary
   on addresses); unify all of them on the site's real primary instead. */
.woocommerce-account.logged-in .woocommerce-MyAccount-content a.button,
.woocommerce-account.logged-in .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-Button {
    background-color: var(--primary);
    border-radius: 8px;
    color: #fff;
    transition: background-color var(--transition);
}

.woocommerce-account.logged-in .woocommerce-MyAccount-content a.button:hover,
.woocommerce-account.logged-in .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-Button:hover {
    background-color: var(--primary-dark);
    color: #fff;
}

/* Orders/Downloads tables */
.woocommerce-account.logged-in .woocommerce-orders-table th,
.woocommerce-account.logged-in .woocommerce-table--order-downloads th {
    color: var(--text-light);
}

.woocommerce-account.logged-in .woocommerce-orders-table th:first-child,
.woocommerce-account.logged-in .woocommerce-table--order-downloads th:first-child,
.woocommerce-account.logged-in .woocommerce-orders-table td:first-child,
.woocommerce-account.logged-in .woocommerce-table--order-downloads td:first-child {
    color: var(--text);
}

.woocommerce-account.logged-in .woocommerce-orders-table tbody tr {
    transition: background-color var(--transition);
}

.woocommerce-account.logged-in .woocommerce-orders-table tbody tr:hover {
    background: var(--surface-tint);
}

.woocommerce-account.logged-in .woocommerce-orders-table mark.order-status {
    background: var(--surface-tint);
    border-radius: 20px;
    color: var(--primary);
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 12px;
}

/* Addresses */
.woocommerce-account.logged-in .woocommerce-Addresses .woocommerce-Address {
    background: var(--surface-tint);
    border-radius: 12px;
    padding: 20px 22px;
}

.woocommerce-account.logged-in .woocommerce-Addresses .woocommerce-Address-title {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.woocommerce-account.logged-in .woocommerce-Addresses address { color: var(--text); }

.woocommerce-account.logged-in .woocommerce-Addresses .woocommerce-Address-title a.edit {
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
}

/* Edit account / Add address forms — same solid-input language as the
   Sign in/Create account screen (border, radius, focus ring), scoped to
   .logged-in so it doesn't collide with that screen's own field rules. */
.woocommerce-account.logged-in .woocommerce-EditAccountForm input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-account.logged-in .woocommerce-address-fields input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-account.logged-in .woocommerce-address-fields select {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.woocommerce-account.logged-in .woocommerce-EditAccountForm input:not([type="checkbox"]):not([type="radio"]):focus,
.woocommerce-account.logged-in .woocommerce-address-fields input:not([type="checkbox"]):not([type="radio"]):focus,
.woocommerce-account.logged-in .woocommerce-address-fields select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14);
    outline: 0;
}

.woocommerce-account.logged-in .woocommerce-EditAccountForm fieldset,
.woocommerce-account.logged-in .woocommerce-address-fields fieldset {
    background: var(--surface-tint);
    border-radius: 12px;
}

@media (max-width: 767px) {
    .woocommerce-account.logged-in .motta-myaccount__wrapper,
    .woocommerce-account.logged-in .woocommerce-MyAccount-content {
        margin-bottom: 16px;
    }
}