/**
 * Account Auth (ims/account-auth) — login + register two-column layout.
 *
 * Inherits IMS design tokens from style.css (:root) — gold CTA, dark text,
 * border grey — so the buttons match the rest of the site automatically.
 */

.ims-auth {
    max-width: 1120px;
    margin: 0 auto;
    padding: 2.5rem 1rem 4rem;
    font-size: 15px;
    color: var(--color-text, #111);
}

.ims-auth--logged-in {
    text-align: center;
    padding: 3rem 1rem;
}
.ims-auth--logged-in a {
    font-weight: 600;
    color: var(--color-cta, #FAB000);
}

/* WC notices — inside the block */
.ims-auth-notices {
    max-width: 700px;
    margin: 0 auto 1.5rem;
}
.ims-auth-notices .woocommerce-message,
.ims-auth-notices .woocommerce-error,
.ims-auth-notices .woocommerce-info {
    border-radius: 6px;
}

/* WC notices rendered OUTSIDE the block (above main content by
   woocommerce_output_all_notices). Full-width bars look awful above a
   centered card, so constrain them to the same width as the auth grid
   when we're on any account / register / lost-password page.

   Body classes:
     .woocommerce-account           — /my-account (login + dashboard)
     .page-template-page-register   — /register (our custom page template)
     .woocommerce-lost-password     — lost-password step URLs */
.woocommerce-account .woocommerce-notices-wrapper,
.page-template-page-register .woocommerce-notices-wrapper,
.page-register .woocommerce-notices-wrapper,
.woocommerce-lost-password .woocommerce-notices-wrapper,
.woocommerce-account > .woocommerce-error,
.woocommerce-account > .woocommerce-message,
.woocommerce-account > .woocommerce-info,
.page-template-page-register .woocommerce-error,
.page-template-page-register .woocommerce-message,
.page-template-page-register .woocommerce-info,
.page-register .woocommerce-error,
.page-register .woocommerce-message,
.page-register .woocommerce-info {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-info,
.page-template-page-register .woocommerce-notices-wrapper .woocommerce-message,
.page-template-page-register .woocommerce-notices-wrapper .woocommerce-error,
.page-template-page-register .woocommerce-notices-wrapper .woocommerce-info,
.page-register .woocommerce-notices-wrapper .woocommerce-message,
.page-register .woocommerce-notices-wrapper .woocommerce-error,
.page-register .woocommerce-notices-wrapper .woocommerce-info {
    border-radius: 6px;
    margin-left: 1rem;
    margin-right: 1rem;
}

/* Top-of-page "Important information" disclosure panel.
   Native <details> element, so keyboard + screen-reader behaviour is
   built-in. We hide the default marker and supply our own chevron. */
.ims-auth-notice {
    max-width: 1120px;
    margin: 0 auto 24px;
    background: #fffdf5;
    border: 1px solid rgba(250, 176, 0, 0.45);
    border-left: 4px solid var(--color-cta, #FAB000);
    border-radius: 8px;
    overflow: hidden;
}

.ims-auth-notice-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: var(--color-text, #111);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    transition: background-color 0.15s;
}
.ims-auth-notice-summary::-webkit-details-marker { display: none; }
.ims-auth-notice-summary:hover {
    background: rgba(250, 176, 0, 0.08);
}
.ims-auth-notice-summary:focus-visible {
    outline: 2px solid var(--color-cta, #FAB000);
    outline-offset: -2px;
}

.ims-auth-notice-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-cta, #FAB000);
    color: #5a3b00;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.ims-auth-notice-title {
    flex: 1 1 auto;
}

.ims-auth-notice-chevron {
    flex: 0 0 auto;
    color: #8a5a00;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}
.ims-auth-notice[open] .ims-auth-notice-chevron {
    transform: rotate(180deg);
}

.ims-auth-notice-body {
    padding: 0 18px 16px 44px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--color-text-muted, #4b5563);
}
.ims-auth-notice-body p {
    margin: 0;
}
.ims-auth-notice-body strong {
    color: var(--color-text, #111);
    font-weight: 700;
}

@media (max-width: 480px) {
    .ims-auth-notice-summary {
        padding: 12px 14px;
        gap: 10px;
        font-size: 13.5px;
    }
    .ims-auth-notice-body {
        padding: 0 14px 14px 40px;
    }
}

/* Grid */
.ims-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
.ims-auth-grid--single {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
}

/* Card */
.ims-auth-card {
    background: #fff;
    border: 1px solid var(--color-border, #E8EAED);
    border-radius: 10px;
    padding: 28px 28px 24px;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03);
}
.ims-auth-card--accent {
    background: #fffdf5;
    border-color: rgba(250, 176, 0, 0.35);
}

/* Header */
.ims-auth-head { margin-bottom: 18px; }
.ims-auth-eyebrow {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-cta, #FAB000);
    margin-bottom: 8px;
}
.ims-auth-card--accent .ims-auth-eyebrow {
    background: rgba(250, 176, 0, 0.15);
    color: #8a5a00;
    padding: 3px 9px;
    border-radius: 12px;
}

/* Eyebrow row: holds the pill, the info button, and the tooltip together
   so the tooltip can be positioned relative to this group. */
.ims-auth-eyebrow-row {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.ims-auth-eyebrow-row .ims-auth-eyebrow {
    margin-bottom: 0;
}

/* Info button — small circular "i" next to the badge. Sized to feel
   like part of the badge without overpowering it. */
.ims-auth-info {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1.5px solid rgba(138, 90, 0, 0.45);
    border-radius: 50%;
    background: transparent;
    color: #8a5a00;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.ims-auth-info:hover,
.ims-auth-info:focus-visible,
.ims-auth-info[aria-expanded="true"] {
    background: rgba(250, 176, 0, 0.18);
    border-color: #8a5a00;
    color: #5a3b00;
    outline: none;
}
.ims-auth-info:focus-visible {
    box-shadow: 0 0 0 3px rgba(250, 176, 0, 0.25);
}

/* Tooltip — anchored to the eyebrow row, opens below the badge.
   Hidden by default via [hidden]; revealed by either CSS hover/focus
   on the trigger or by JS toggling [hidden] on click. */
.ims-auth-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 5;
    width: max-content;
    max-width: 300px;
    padding: 12px 14px;
    background: #fff;
    color: var(--color-text, #111);
    border: 1px solid var(--color-border, #E8EAED);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(17, 17, 17, 0.12);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* Caret pointing up at the info button. Two stacked triangles produce a
   bordered notch that matches the tooltip's border + background. */
.ims-auth-tooltip::before,
.ims-auth-tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 22px;
    width: 0;
    height: 0;
    border-style: solid;
}
.ims-auth-tooltip::before {
    border-width: 0 7px 7px 7px;
    border-color: transparent transparent var(--color-border, #E8EAED) transparent;
}
.ims-auth-tooltip::after {
    margin-bottom: -1px;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #fff transparent;
    left: 23px;
}

.ims-auth-tooltip-title {
    display: block;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--color-text, #111);
}
.ims-auth-tooltip-body {
    margin: 0;
    color: var(--color-text-muted, #4b5563);
}

/* Pointer hover (desktop) — only active on devices that actually
   have hover, so iOS Safari doesn't enter a sticky-hover state on
   first tap. */
@media (hover: hover) {
    .ims-auth-info:hover + .ims-auth-tooltip,
    .ims-auth-tooltip:hover {
        display: block;
    }
}

/* Keyboard focus (any device) and the JS-toggled open state used by
   touch/click. .is-open is the source of truth for tap interactions
   so an outside-tap can close it without fighting with :hover. */
.ims-auth-info:focus-visible + .ims-auth-tooltip,
.ims-auth-tooltip.is-open {
    display: block;
}
.ims-auth-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text, #111);
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}
.ims-auth-sub {
    font-size: 13.5px;
    color: var(--color-text-muted, #6b7280);
    margin: 0;
    line-height: 1.5;
}

/* Fields */
.ims-auth-field {
    margin: 0 0 14px;
}

/* Side-by-side field row (e.g. First name + Last name on register).
   Stacks on narrow viewports so labels never wrap awkwardly. */
.ims-auth-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ims-auth-field-row .ims-auth-field {
    margin-bottom: 14px;
}
@media (max-width: 480px) {
    .ims-auth-field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}
.ims-auth-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text, #111);
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}
.ims-auth-field .required { color: #c0392b; margin-left: 2px; }

.ims-auth-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    border: 1.5px solid var(--color-border, #E8EAED);
    border-radius: 6px;
    background: #fff;
    color: var(--color-text, #111);
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.ims-auth-input:focus {
    outline: none;
    border-color: var(--color-cta, #FAB000);
    box-shadow: 0 0 0 3px rgba(250, 176, 0, 0.18);
}

.ims-auth-hint {
    display: block;
    font-size: 11.5px;
    color: var(--color-text-muted, #6b7280);
    margin-top: 5px;
}

/* Password requirements checklist — each rule ticks on as it's met. */
.ims-auth-pw-requirements {
    list-style: none;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--color-border, #E8EAED);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-muted, #6b7280);
}
.ims-auth-pw-requirements li {
    position: relative;
    padding-left: 20px;
    transition: color 0.15s;
}
.ims-auth-pw-requirements li::before {
    content: "○";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    transition: color 0.15s;
}
.ims-auth-pw-requirements li.is-met {
    color: #1b8a3a;
}
.ims-auth-pw-requirements li.is-met::before {
    content: "✓";
    color: #1b8a3a;
    font-weight: 700;
}

/* Confirm-password match indicator. */
.ims-auth-pw-match {
    display: block;
    font-size: 11.5px;
    margin-top: 5px;
    min-height: 14px;
    color: var(--color-text-muted, #6b7280);
}
.ims-auth-pw-match.is-match {
    color: #1b8a3a;
}
.ims-auth-pw-match.is-mismatch {
    color: #c0392b;
}

/* Remember-me + forgot-password row */
.ims-auth-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    margin: 4px 0 16px;
}
.ims-auth-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    color: var(--color-text, #111);
}
.ims-auth-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-cta, #FAB000);
    cursor: pointer;
    margin: 0;
}
.ims-auth-link {
    color: var(--color-cta, #FAB000);
    font-weight: 600;
    text-decoration: none;
}
.ims-auth-link:hover { text-decoration: underline; }

/* Submit button — inherit the IMS gold gradient from style.css. Keep these
   overrides minimal so a theme-wide button style change propagates here. */
.ims-auth-submit { margin: 18px 0 0; }
.ims-auth-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}
.ims-auth-btn--primary {
    background: var(--color-cta, #FAB000);
    color: var(--color-dark, #111);
}
.ims-auth-btn--primary:hover {
    background: var(--color-cta-hover, #E09E00);
    box-shadow: 0 2px 8px rgba(250, 176, 0, 0.35);
}
.ims-auth-btn--primary:active { transform: translateY(1px); }

.ims-auth-fineprint {
    font-size: 11.5px;
    color: var(--color-text-muted, #6b7280);
    text-align: center;
    margin: 14px 0 0;
    line-height: 1.5;
}
.ims-auth-fineprint a {
    color: inherit;
    text-decoration: underline;
}

/* Responsive — stack at tablet and below */
@media (max-width: 820px) {
    .ims-auth-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto;
    }
    .ims-auth-card { padding: 24px 20px 20px; }
    .ims-auth-title { font-size: 20px; }
}