/* ==========================================================
   AVH AUTH
   MyListing Authentication — Base Styles
   ========================================================== */


/* ==========================================================
   AVH Auth Design System
   ==========================================================

   The primary design variables below are dynamically
   supplied by the AVH Auth Design settings through
   integrations/class-my-listing.php.

   Fallback values ensure that the authentication interface
   continues to work when custom design settings have not
   been saved or dynamic variables are unavailable.

   ========================================================== */

:root {

    /* ------------------------------------------------------
       Admin Design Settings
       ------------------------------------------------------ */

    --avh-primary-color: #2563eb;

    --avh-brand-primary: #5f35f5;
    --avh-brand-secondary: #7c4dff;
    --avh-brand-accent: #8b5cf6;

    --avh-button-background-color: #2563eb;
    --avh-button-text-color: #ffffff;

    --avh-heading-color: #111827;
    --avh-text-color: #4b5563;

    --avh-input-border-color: #d1d5db;
    --avh-otp-active-color: #2563eb;

    --avh-border-radius: 8px;


    /* ------------------------------------------------------
       Supporting Brand Palette
       ------------------------------------------------------ */

    --avh-brand-soft: #f3efff;
    --avh-brand-surface: #ffffff;


    /* ------------------------------------------------------
       Coordinated Wallpaper Pair
       ------------------------------------------------------

       These variables inherit the configurable branding
       gradient colors supplied by the Design settings.

       ------------------------------------------------------ */

    --avh-wallpaper-primary: var(--avh-brand-primary);
    --avh-wallpaper-secondary: var(--avh-brand-secondary);
    --avh-wallpaper-accent: var(--avh-brand-accent);

    --avh-wallpaper-text: #ffffff;
    --avh-wallpaper-muted-text: rgba(255, 255, 255, 0.82);


    /* ------------------------------------------------------
       Feature Highlights
       Secure · Private · Fast
       ------------------------------------------------------ */

    --avh-feature-icon-color: var(--avh-primary-color);
    --avh-feature-text-color: var(--avh-text-color);
    --avh-feature-background: var(--avh-brand-soft);


    /* ------------------------------------------------------
       Typography
       ------------------------------------------------------ */

    --avh-text-primary: var(--avh-heading-color);
    --avh-text-secondary: var(--avh-text-color);
    --avh-text-muted: #9ca3af;


    /* ------------------------------------------------------
       Borders / Surfaces
       ------------------------------------------------------ */

    --avh-border-color: var(--avh-input-border-color);
    --avh-border-light: #f0f1f3;

    --avh-surface: #ffffff;
    --avh-surface-soft: #f8fafc;


    /* ------------------------------------------------------
       Focus
       ------------------------------------------------------ */

    --avh-focus-color: var(--avh-otp-active-color);

    /*
     * Static fallback focus ring.
     *
     * The solid configurable focus color is controlled by
     * --avh-otp-active-color. The translucent ring remains
     * intentionally separate because standard HEX colors
     * cannot directly provide an alpha channel.
     */
    --avh-focus-ring: rgba(37, 99, 235, 0.14);


    /* ------------------------------------------------------
       Success
       ------------------------------------------------------ */

    --avh-success-text: #155724;
    --avh-success-background: #d4edda;
    --avh-success-border: #c3e6cb;


    /* ------------------------------------------------------
       Error
       ------------------------------------------------------ */

    --avh-error-text: #721c24;
    --avh-error-background: #f8d7da;
    --avh-error-border: #f5c6cb;
    --avh-error-strong: #dc2626;


    /* ------------------------------------------------------
       Shared Shape
       ------------------------------------------------------ */

    --avh-radius-small: var(--avh-border-radius);
    --avh-radius-medium: var(--avh-border-radius);
    --avh-radius-large: var(--avh-border-radius);


    /* ------------------------------------------------------
       Shared Motion
       ------------------------------------------------------ */

    --avh-transition-fast: 0.2s ease;
    --avh-transition-normal: 0.25s ease;

}


/* ==========================================================
   Authentication Steps
   ========================================================== */

#avh-phone-step,
#avh-otp-box,
#avh-register-details {
    animation: avhFade var(--avh-transition-normal);
}


/* ==========================================================
   Authentication Buttons — Shared
   ==========================================================

   Primary authentication actions use the configurable
   button colors and shared border radius supplied by the
   AVH Auth Design settings.

   ========================================================== */

#avh-send-otp,
#avh-verify-otp,
#avh-create-account {
    width: 100%;
    background-color: var(--avh-button-background-color);
    color: var(--avh-button-text-color);
    border-radius: var(--avh-border-radius);
}

#avh-send-otp i,
#avh-verify-otp i,
#avh-create-account i {
    color: inherit;
}


/* ==========================================================
   OR Divider
   ========================================================== */

.avh-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 28px 0;
    color: var(--avh-text-secondary);
    font-size: 14px;
    font-weight: 500;
}

.avh-divider::before,
.avh-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--avh-border-color);
}

.avh-divider span {
    padding: 0 18px;
}


/* ==========================================================
   Authentication Notices
   ========================================================== */

.avh-auth-main .auth-notices:empty {
    display: none;
}


/* ==========================================================
   OTP Status Notice
   ========================================================== */

#avh-otp-notice {
    display: none;
    margin: 18px 0;
    padding: 14px 16px;
    border-radius: var(--avh-radius-small);
    font-size: 14px;
    line-height: 1.5;
}

#avh-otp-notice.success {
    display: block;
    color: var(--avh-success-text);
    background: var(--avh-success-background);
    border: 1px solid var(--avh-success-border);
}

#avh-otp-notice.error {
    display: block;
    color: var(--avh-error-text);
    background: var(--avh-error-background);
    border: 1px solid var(--avh-error-border);
}


/* ==========================================================
   Shared Typography
   ========================================================== */

.avh-auth-main h1,
.avh-auth-main h2,
.avh-auth-main h3,
.avh-auth-main h4,
.avh-auth-main h5,
.avh-auth-main h6 {
    color: var(--avh-heading-color);
}

.avh-auth-main p {
    color: var(--avh-text-color);
}


/* ==========================================================
   Shared Input Styling
   ==========================================================

   Provides the base configurable border and corner styling.

   Component-specific stylesheets may add layout, dimensions
   and other visual properties while inheriting these design
   values.

   ========================================================== */

.avh-auth-main input[type="text"],
.avh-auth-main input[type="tel"],
.avh-auth-main input[type="email"],
.avh-auth-main input[type="password"],
.avh-auth-main input[type="number"] {
    border-color: var(--avh-input-border-color);
    border-radius: var(--avh-border-radius);
}

.avh-auth-main input[type="text"]:focus,
.avh-auth-main input[type="tel"]:focus,
.avh-auth-main input[type="email"]:focus,
.avh-auth-main input[type="password"]:focus,
.avh-auth-main input[type="number"]:focus {
    border-color: var(--avh-otp-active-color);
}


/* ==========================================================
   Helper Classes
   ========================================================== */

.avh-hidden {
    display: none !important;
}

.avh-text-center {
    text-align: center;
}

.avh-mt-10 {
    margin-top: 10px;
}

.avh-mt-20 {
    margin-top: 20px;
}

.avh-mb-20 {
    margin-bottom: 20px;
}


/* ==========================================================
   Loading Spinner
   ========================================================== */

.mi.spin {
    display: inline-block;
    animation: avhSpin .8s linear infinite;
}

@keyframes avhSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* ==========================================================
   Fade Animation
   ========================================================== */

@keyframes avhFade {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ==========================================================
   Terms & Conditions Validation Error
   ========================================================== */

.avh-terms-error {
    animation: avhTermsShake .4s ease;
}

.avh-terms-error,
.avh-terms-error a {
    color: var(--avh-error-strong) !important;
}

.avh-terms-error input[type="checkbox"] {
    outline: 2px solid var(--avh-error-strong);
    outline-offset: 2px;
}

@keyframes avhTermsShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-3px);
    }

}