/* ===================================================
   AGENT REGISTRATION FORM
   =================================================== */

.agent-registration-form.form {
    margin-top: -1.25rem;
    gap: var(--space-1, 0.625rem);
}

/* Cancel the extra margin-block-start from .flow — flex gap handles it */
.agent-registration-form.form > * {
    margin-block-start: 0 !important;
}

/* Direct .flex layout rows only — align tops, 1rem side gap */
.agent-registration-form > .flex {
    --flex-align-vertical: flex-start;
    gap: 1rem;
}

/* Every direct form-field child of a layout row stretches equally */
.agent-registration-form > .flex > .form-field {
    flex: 1;
    min-width: 0;
}

/* Membership type + membership number section spacing */
.agent-registration-form .form-group-margin {
    margin-top: 1.25rem;
    margin-bottom: 0;
}

/* Membership number / trade body row */
.agent-registration-form .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.agent-registration-form .col-md-6 {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
}

.agent-registration-form .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Membership textbox styling — matches form-control inputs */
.agent-registration-form .membership-textbox {
    width: 100%;
    padding: var(--space-1-3, 0.625rem) var(--space-2, 1rem);
    border: none;
    border-bottom: 1px solid var(--c-border, #ccc);
    background-color: var(--c-input-bg, #f5f5f5);
    font-size: inherit;
    color: inherit;
    border-radius: 0;
    outline: none;
    box-sizing: border-box;
}

.agent-registration-form .membership-textbox:disabled {
    background-color: #ddd;
    color: #9ca3af;
    cursor: not-allowed;
    border-color: #e5e7eb;
}

/* Terms row spacing */
.agent-registration-form .form-group.mbe-3 {
    margin-block-end: 1rem;
}

/* Terms & Conditions / Privacy Policy links */
.agent-registration-form .agentLoginTerm a {
    color: var(--c-burnt-orange);
    text-decoration: underline;
}

/* Submit button row */
.agent-registration-form .flex.mbs-3 {
    margin-block-start: 1.5rem;
}

.agent-registration-form .agentRegistrationButton {
    width: 100%;
}

/* ===================================================
   AGENT MENU DROPDOWN (replaces Nuxt VDropdown)
   =================================================== */

.agent-menu-dropdown {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    left: var(--am-left, 0);
    max-width: 22.5rem;
    min-width: 0;
    position: fixed;
    right: auto;
    top: var(--am-top, 0);
    width: var(--am-width, 22.5rem);
    z-index: 200;
}

.agent-menu-dropdown::before {
    content: '';
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 14px solid #fff;
    position: absolute;
    left: var(--arrow-left, 50%);
    top: -14px;
}

/* Keep trigger circle gold when menu is open — overrides site-header__sub li button[aria-expanded=true] { background:#fff } */
.site-header__sub li button.agent-menu__initials[aria-expanded="true"] {
    background-color: var(--c-warm-gold);
    color: var(--c-navy-blue);
}

/* Nuxt utility classes: ta-c, mbe-2, text-navy-blue — don't exist in Classic styles.css */
.agent-menu-dropdown .agent-menu__content {
    color: var(--c-navy-blue);
    text-align: center;
    margin-block-end: var(--space-2);
}

.agent-menu-dropdown .agent-menu__content p,
.agent-menu-dropdown .agent-menu__content h2 {
    color: var(--c-navy-blue);
}

.agent-menu-dropdown .agent-menu__actions .cta {
    width: 100%;
}

/* Ensure sign-out secondary border is always burnt orange regardless of theme-dark context */
.agent-menu-dropdown .cta[data-variant="secondary"] {
    border: 1px solid var(--c-burnt-orange);
    background-color: #fff;
    color: var(--c-burnt-orange);
}

/* ===================================================
   LOGIN BUTTON LOADING STATE
   =================================================== */

.agent-login .cta[data-loading="true"] {
    pointer-events: none;
    opacity: 0.85;
}

/* ===================================================
   RESPONSIVE
   =================================================== */

@media (max-width: 768px) {
    .agent-registration-form .col-md-6,
    .agent-registration-form .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .agent-registration-form .flex > .form-field {
        flex: 0 0 100%;
    }
}