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


/* ==========================================================
   1. TABLET / IPAD
   768px — 1199px

   Final tablet design:
   - Two-panel authentication layout remains active.
   - Branding content remains in the left panel.
   - Authentication form remains in the right panel.
   - Desktop/tablet trust indicators appear only once.
   - Mobile trust indicators remain hidden.

   Registration details and Account Phone responsive rules
   are maintained in registration.css to avoid duplicate
   component-level responsive overrides.
   ========================================================== */

@media (min-width: 768px) and (max-width: 1199px) {


    /* ======================================================
       Authentication Page
       ====================================================== */

    .avh-auth-page {
        min-height: calc(100vh - 70px);
        padding: 20px;
    }


    /* ======================================================
       Authentication Shell
       ====================================================== */

    .avh-auth-shell {
        width: 100%;
        max-width: 1100px;
        min-height: 680px;
        border-radius: 22px;
    }


    /* ======================================================
       Branding Panel
       ====================================================== */

    .avh-branding-panel {
        flex: 0 0 42%;
        width: 42%;
        padding: 42px 32px;
    }


    /* ======================================================
       Branding Wallpaper Decorations
       ====================================================== */

    .avh-branding-panel::before {
        top: -100px;
        right: -110px;
        width: 280px;
        height: 280px;
    }

    .avh-branding-panel::after {
        bottom: -130px;
        left: -110px;
        width: 320px;
        height: 320px;
    }


    /* ======================================================
       Branding Inner
       ====================================================== */

    .avh-branding-inner {
        max-width: 330px;
    }


    /* ======================================================
       Security Illustration
       ====================================================== */

    .avh-security-visual {
        width: 64px;
        height: 64px;
        margin-bottom: 28px;
    }

    .avh-security-shield .mi {
        font-size: 31px;
    }

    .avh-security-spark-left {
        top: 4px;
        right: -4px;
        font-size: 16px;
    }

    .avh-security-spark-right {
        top: 23px;
        right: -12px;
        font-size: 9px;
    }


    /* ======================================================
       Branding Title
       ====================================================== */

    .avh-brand-title {
        margin-bottom: 12px;
        font-size: 30px;
        line-height: 1.2;
    }


    /* ======================================================
       Branding Description
       ====================================================== */

    .avh-brand-description {
        max-width: 290px;
        font-size: 14px;
        line-height: 1.6;
    }


    /* ======================================================
       Desktop / Tablet Trust Indicators
       Secure · Private · Fast
       ====================================================== */

    .avh-auth-trust-desktop {
        display: flex;
    }

    .avh-auth-trust {
        gap: 18px;
        margin-top: 28px;
        padding-top: 24px;
    }

    .avh-auth-trust-item {
        gap: 14px;
    }


    /* ======================================================
       Trust Indicator Icons
       ====================================================== */

    .avh-auth-trust-icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
    }

    .avh-auth-trust-icon .mi {
        font-size: 21px;
    }


    /* ======================================================
       Trust Indicator Content
       ====================================================== */

    .avh-auth-trust-content {
        gap: 3px;
    }

    .avh-auth-trust-label {
        font-size: 14px;
    }

    .avh-auth-trust-description {
        max-width: 190px;
        font-size: 12px;
        line-height: 1.45;
    }


    /* ======================================================
       Desktop / Tablet Trust Badge
       ====================================================== */

    .avh-auth-trust-badge-desktop {
        display: inline-flex;
    }

    .avh-auth-trust-badge {
        gap: 7px;
        margin-top: 27px;
        padding: 9px 12px;
    }

    .avh-auth-trust-badge .mi {
        font-size: 16px;
    }

    .avh-auth-trust-badge-text {
        font-size: 10px;
        line-height: 1.35;
    }


    /* ======================================================
       Hide Mobile Trust Components
       ====================================================== */

    .avh-mobile-trust,
    .avh-mobile-trust-badge {
        display: none !important;
    }


    /* ======================================================
       Authentication Main Panel
       ====================================================== */

    .avh-auth-main {
        flex: 1 1 auto;
        width: 58%;
        padding: 42px 38px;
    }

    .avh-auth-main-inner {
        max-width: 460px;
    }


    /* ======================================================
       Authentication Tabs
       ====================================================== */

    .avh-auth-tabs {
        margin-bottom: 30px;
    }

    .avh-auth-tabs li a {
        padding: 14px 10px;
        font-size: 15px;
    }


    /* ======================================================
       Phone Authentication Intro
       ====================================================== */

    .avh-phone-step-intro {
        margin-bottom: 25px;
    }

    .avh-phone-step-icon {
        width: 58px;
        height: 58px;
        margin-bottom: 15px;
        border-radius: 16px;
        font-size: 27px;
    }

    .avh-phone-step-title {
        font-size: 22px;
    }

    .avh-phone-step-description {
        font-size: 13px;
    }


    /* ======================================================
       Phone Input
       ====================================================== */

    .avh-phone-input {
        min-height: 50px;
    }

    .avh-country-code {
        min-width: 78px;
        height: 50px;
        padding-right: 11px;
        padding-left: 11px;
    }

    #avh-phone {
        height: 50px;
        font-size: 16px;
    }


    /* ======================================================
       Send OTP Button
       ====================================================== */

    #avh-send-otp {
        min-height: 50px;
        margin-top: 18px;
    }


    /* ======================================================
       Phone Privacy Reassurance
       ====================================================== */

    .avh-phone-privacy {
        margin-top: 15px;
        font-size: 11px;
    }


    /* ======================================================
       OTP Layout
       ====================================================== */

    .avh-otp-header {
        margin-bottom: 28px;
    }

    .avh-otp-boxes {
        gap: 8px;
    }

    .avh-otp-boxes input,
    .avh-otp-digit {
        flex: 0 0 46px;
        width: 46px;
        max-width: 46px;
        height: 52px;
        font-size: 21px;
        line-height: 52px;
    }

}


/* ==========================================================
   2. MOBILE
   Up to 767px

   Final compact mobile design:
   - Compact branding area.
   - Security illustration, title and description remain.
   - White authentication panel overlaps branding area.
   - Reduced space above Sign In / Register tabs.
   - Desktop trust indicators hidden.
   - Mobile trust indicators displayed below auth content.

   Registration details and Account Phone responsive rules
   are maintained in registration.css.
   ========================================================== */

@media (max-width: 767px) {


    /* ======================================================
       Authentication Page
       ====================================================== */

    .avh-auth-page {
        width: 100%;
        min-height: 100vh;
        padding: 0;
        background: var(--avh-surface);
    }


    /* ======================================================
       Authentication Shell
       ====================================================== */

    .avh-auth-shell {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100vh;
        margin: 0;
        border-radius: 0;
        background: var(--avh-surface);
        box-shadow: none;
        overflow: visible;
    }


    /* ======================================================
       Branding Panel
       Compact Mobile Header
       ====================================================== */

    .avh-branding-panel {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex: none;
        width: 100%;
        min-height: 220px;
        padding: 24px 24px 50px;
        overflow: hidden;

        background:
            linear-gradient(
                145deg,
                var(--avh-wallpaper-primary) 0%,
                var(--avh-wallpaper-secondary) 52%,
                var(--avh-wallpaper-accent) 100%
            );

        color: var(--avh-wallpaper-text);
    }


    /* ======================================================
       Branding Wallpaper Decorations
       ====================================================== */

    .avh-branding-panel::before {
        top: -110px;
        right: -110px;
        width: 250px;
        height: 250px;
    }

    .avh-branding-panel::after {
        bottom: -170px;
        left: -110px;
        width: 290px;
        height: 290px;
    }


    /* ======================================================
       Branding Inner
       ====================================================== */

    .avh-branding-inner {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        text-align: center;
    }


    /* ======================================================
       Branding Copy
       ====================================================== */

    .avh-branding-copy {
        width: 100%;
        text-align: center;
    }


    /* ======================================================
       Security Illustration
       ====================================================== */

    .avh-security-visual {
        width: 54px;
        height: 54px;
        margin: 0 auto 12px;
        background: rgba(255, 255, 255, .13);
    }

    .avh-security-shield .mi {
        font-size: 27px;
    }

    .avh-security-spark-left {
        top: 3px;
        right: -3px;
        font-size: 14px;
    }

    .avh-security-spark-right {
        top: 20px;
        right: -10px;
        font-size: 8px;
    }


    /* ======================================================
       Branding Title
       ====================================================== */

    .avh-brand-title {
        margin: 0 0 6px;
        font-size: 23px;
        line-height: 1.2;
        text-align: center;
    }


    /* ======================================================
       Branding Description
       ====================================================== */

    .avh-brand-description {
        max-width: 300px;
        margin: 0 auto;
        font-size: 13px;
        line-height: 1.4;
        text-align: center;
    }


    /* ======================================================
       Hide Desktop / Tablet Trust Components
       ====================================================== */

    .avh-auth-trust-desktop,
    .avh-auth-trust-badge-desktop {
        display: none !important;
    }


    /* ======================================================
       Authentication Main Panel
       ====================================================== */

    .avh-auth-main {
        position: relative;
        z-index: 5;
        display: block;
        flex: 1 1 auto;
        width: calc(100% - 24px);
        margin: -32px 12px 0;
        padding: 12px 20px 24px;
        border-radius: 24px 24px 0 0;
        background: var(--avh-surface);
        box-shadow: 0 -8px 28px rgba(15, 23, 42, .08);
    }


    /* ======================================================
       Authentication Main Inner
       ====================================================== */

    .avh-auth-main-inner {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }


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

    .avh-auth-main .auth-notices {
        width: 100%;
    }


    /* ======================================================
       Authentication Tabs
       ====================================================== */

    .avh-auth-tabs {
        width: 100%;
        margin: 0 0 20px;
    }

    .avh-auth-tabs li a {
        padding: 11px 8px;
        font-size: 15px;
    }

    .avh-auth-tabs li.active::after {
        height: 3px;
    }


    /* ======================================================
       Authentication Form Panels
       ====================================================== */

    .avh-auth-form-panel {
        width: 100%;
    }

    .avh-auth-form-panel .avh-auth-wrapper {
        width: 100%;
    }


    /* ======================================================
       Phone Authentication Intro
       ====================================================== */

    .avh-phone-step-intro {
        margin-bottom: 18px;
        text-align: center;
    }

    .avh-phone-step-icon {
        width: 52px;
        height: 52px;
        margin: 0 auto 11px;
        border-radius: 16px;
        font-size: 25px;
    }

    .avh-phone-step-title {
        margin-bottom: 5px;
        font-size: 21px;
        line-height: 1.3;
    }

    .avh-phone-step-description {
        max-width: 290px;
        margin: 0 auto;
        font-size: 12px;
        line-height: 1.4;
    }


    /* ======================================================
       Phone Form
       ====================================================== */

    #avh-phone-step .form-group,
    .avh-phone-form-group {
        width: 100%;
    }


    /* ======================================================
       Phone Label
       ====================================================== */

    .avh-phone-label {
        margin-bottom: 7px;
        font-size: 13px;
    }


    /* ======================================================
       Phone Input
       ====================================================== */

    .avh-phone-input {
        width: 100%;
        min-height: 48px;
    }

    .avh-country-code {
        min-width: 76px;
        height: 48px;
        padding: 0 10px;
        gap: 5px;
        font-size: 13px;
    }

    .avh-country-flag {
        font-size: 15px;
    }

    #avh-phone {
        height: 48px;
        padding: 0 12px;

        /*
         * 16px prevents automatic zoom when focusing
         * the phone field on iOS devices.
         */
        font-size: 16px;
    }


    /* ======================================================
       Send OTP Button
       ====================================================== */

    #avh-send-otp {
        width: 100%;
        min-height: 48px;
        margin-top: 13px;
        border-radius: var(--avh-radius-small);
    }


    /* ======================================================
       Phone Privacy Message
       ====================================================== */

    .avh-phone-privacy {
        width: 100%;
        margin-top: 11px;
        gap: 6px;
        font-size: 10px;
        line-height: 1.4;
        text-align: center;
    }

    .avh-phone-privacy .mi {
        font-size: 14px;
    }


    /* ======================================================
       Mobile Trust Indicators
       Secure · Private · Fast
       ====================================================== */

    .avh-mobile-trust {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin-top: 22px;
        padding-top: 20px;
        border-top: 1px solid var(--avh-border-color);
    }


    /* ======================================================
       Mobile Trust Item
       ====================================================== */

    .avh-mobile-trust-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-width: 0;
        text-align: center;
    }


    /* ======================================================
       Mobile Trust Icon
       ====================================================== */

    .avh-mobile-trust-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0 auto 8px;
        border-radius: 50%;
        background: var(--avh-feature-background);
        color: var(--avh-feature-icon-color);
    }

    .avh-mobile-trust-icon .mi {
        margin: 0;
        color: inherit;
        font-size: 20px;
        line-height: 1;
    }


    /* ======================================================
       Mobile Trust Label
       ====================================================== */

    .avh-mobile-trust-label {
        display: block;
        margin-bottom: 3px;
        color: var(--avh-feature-text-color);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
    }


    /* ======================================================
       Mobile Trust Description
       ====================================================== */

    .avh-mobile-trust-description {
        display: block;
        max-width: 100px;
        margin: 0 auto;
        color: var(--avh-text-secondary);
        font-size: 9px;
        font-weight: 400;
        line-height: 1.35;
    }


    /* ======================================================
       Mobile Trust Badge
       ====================================================== */

    .avh-mobile-trust-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: fit-content;
        max-width: 100%;
        margin: 18px auto 0;
        padding: 8px 12px;
        border: 1px solid var(--avh-border-color);
        border-radius: 999px;
        background: var(--avh-brand-soft);
        color: var(--avh-feature-text-color);
    }

    .avh-mobile-trust-badge .mi {
        flex-shrink: 0;
        margin: 0;
        color: var(--avh-feature-icon-color);
        font-size: 15px;
        line-height: 1;
    }

    .avh-mobile-trust-badge-text {
        color: inherit;
        font-size: 9px;
        font-weight: 500;
        line-height: 1.4;
    }


    /* ======================================================
       OTP Step
       ====================================================== */

    .avh-otp-step {
        width: 100%;
    }

    .avh-otp-header {
        margin-bottom: 22px;
    }

    .avh-otp-header-icon {
        width: 56px;
        height: 56px;
        margin: 0 auto 13px;
        font-size: 26px;
    }

    .avh-otp-heading {
        font-size: 21px;
    }

    .avh-otp-description {
        font-size: 12px;
    }

    .avh-otp-phone-number {
        font-size: 16px;
    }


    /* ======================================================
       OTP Digit Boxes
       ====================================================== */

    .avh-otp-boxes {
        gap: 8px;
    }

    .avh-otp-boxes input,
    .avh-otp-digit {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 52px;
        height: 54px;
        font-size: 21px;
        line-height: 54px;
    }


    /* ======================================================
       OTP Timer / Resend
       ====================================================== */

    .avh-otp-timer {
        margin-top: 20px;
        font-size: 13px;
    }

    .avh-resend-wrapper {
        margin-top: 20px;
    }

    .avh-resend-wrapper a {
        font-size: 13px;
    }


    /* ======================================================
       Verify OTP Button
       ====================================================== */

    #avh-verify-otp {
        min-height: 48px;
        margin-top: 20px;
    }


    /* ======================================================
       Change Phone
       ====================================================== */

    .avh-change-phone-wrap {
        margin-top: 16px;
    }

    #avh-change-phone-inline {
        font-size: 12px;
    }


    /* ======================================================
       Create Account Button

       General mobile action-button sizing only.
       Detailed registration responsive styling is handled
       by registration.css.
       ====================================================== */

    #avh-create-account {
        min-height: 48px;
    }

}


/* ==========================================================
   3. SMALL MOBILE REFINEMENTS
   Up to 480px

   Compact refinements for standard mobile devices.
   ========================================================== */

@media (max-width: 480px) {


    /* ======================================================
       Branding Panel
       ====================================================== */

    .avh-branding-panel {
        min-height: 205px;
        padding: 20px 20px 46px;
    }


    /* ======================================================
       Security Illustration
       ====================================================== */

    .avh-security-visual {
        width: 50px;
        height: 50px;
        margin: 0 auto 10px;
    }

    .avh-security-shield .mi {
        font-size: 25px;
    }

    .avh-security-spark-left {
        top: 3px;
        right: -3px;
        font-size: 13px;
    }

    .avh-security-spark-right {
        top: 18px;
        right: -9px;
        font-size: 8px;
    }


    /* ======================================================
       Branding Title
       ====================================================== */

    .avh-brand-title {
        margin-bottom: 5px;
        font-size: 22px;
    }


    /* ======================================================
       Branding Description
       ====================================================== */

    .avh-brand-description {
        max-width: 280px;
        font-size: 12px;
        line-height: 1.4;
    }


    /* ======================================================
       Authentication Main Panel
       ====================================================== */

    .avh-auth-main {
        width: calc(100% - 16px);
        margin: -30px 8px 0;
        padding: 10px 18px 22px;
        border-radius: 22px 22px 0 0;
    }


    /* ======================================================
       Authentication Tabs
       ====================================================== */

    .avh-auth-tabs {
        margin-bottom: 18px;
    }

    .avh-auth-tabs li a {
        padding: 10px 6px;
        font-size: 14px;
    }


    /* ======================================================
       Phone Intro
       ====================================================== */

    .avh-phone-step-intro {
        margin-bottom: 16px;
    }

    .avh-phone-step-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 9px;
        border-radius: 15px;
        font-size: 23px;
    }

    .avh-phone-step-title {
        margin-bottom: 4px;
        font-size: 20px;
    }

    .avh-phone-step-description {
        max-width: 270px;
        font-size: 11px;
        line-height: 1.4;
    }


    /* ======================================================
       Phone Input
       ====================================================== */

    .avh-country-code {
        min-width: 72px;
        padding: 0 9px;
        gap: 4px;
        font-size: 12px;
    }

    #avh-phone {
        padding: 0 10px;
        font-size: 16px;
    }


    /* ======================================================
       Send OTP
       ====================================================== */

    #avh-send-otp {
        margin-top: 12px;
    }


    /* ======================================================
       Privacy Message
       ====================================================== */

    .avh-phone-privacy {
        margin-top: 9px;
        font-size: 9px;
    }


    /* ======================================================
       Mobile Trust Indicators
       ====================================================== */

    .avh-mobile-trust {
        gap: 6px;
        margin-top: 18px;
        padding-top: 17px;
    }


    /* ======================================================
       Mobile Trust Icons
       ====================================================== */

    .avh-mobile-trust-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 7px;
    }

    .avh-mobile-trust-icon .mi {
        font-size: 19px;
    }


    /* ======================================================
       Mobile Trust Labels
       ====================================================== */

    .avh-mobile-trust-label {
        margin-bottom: 2px;
        font-size: 11px;
    }


    /* ======================================================
       Mobile Trust Descriptions
       ====================================================== */

    .avh-mobile-trust-description {
        max-width: 90px;
        font-size: 8px;
        line-height: 1.35;
    }


    /* ======================================================
       Mobile Trust Badge
       ====================================================== */

    .avh-mobile-trust-badge {
        margin-top: 16px;
        padding: 7px 11px;
    }

    .avh-mobile-trust-badge .mi {
        font-size: 14px;
    }

    .avh-mobile-trust-badge-text {
        font-size: 8px;
    }


    /* ======================================================
       OTP Header
       ====================================================== */

    .avh-otp-header {
        margin-bottom: 22px;
    }

    .avh-otp-header-icon {
        width: 54px;
        height: 54px;
        margin-bottom: 13px;
        font-size: 25px;
    }

    .avh-otp-heading {
        font-size: 20px;
    }

    .avh-otp-description {
        font-size: 12px;
    }

    .avh-otp-phone-number {
        font-size: 15px;
    }


    /* ======================================================
       OTP Boxes
       ====================================================== */

    .avh-otp-boxes {
        gap: 7px;
    }

    .avh-otp-boxes input,
    .avh-otp-digit {
        max-width: 48px;
        height: 52px;
        font-size: 20px;
        line-height: 52px;
    }

}

/* ==========================================================
   4. EXTRA SMALL MOBILE
   Up to 380px

   Further compacts the layout for narrow devices without
   restoring the old oversized branding panel.
   ========================================================== */

@media (max-width: 380px) {


    /* ======================================================
       Branding Panel
       ====================================================== */

    .avh-branding-panel {
        min-height: 192px;
        padding: 17px 16px 42px;
    }


    /* ======================================================
       Security Illustration
       ====================================================== */

    .avh-security-visual {
        width: 46px;
        height: 46px;
        margin-bottom: 8px;
    }

    .avh-security-shield .mi {
        font-size: 23px;
    }

    .avh-security-spark-left {
        font-size: 12px;
    }

    .avh-security-spark-right {
        top: 17px;
        right: -8px;
        font-size: 7px;
    }


    /* ======================================================
       Branding Copy
       ====================================================== */

    .avh-brand-title {
        margin-bottom: 4px;
        font-size: 20px;
    }

    .avh-brand-description {
        max-width: 250px;
        font-size: 11px;
        line-height: 1.35;
    }


    /* ======================================================
       Authentication Main Panel
       ====================================================== */

    .avh-auth-main {
        width: calc(100% - 12px);
        margin: -28px 6px 0;
        padding: 9px 14px 20px;
        border-radius: 20px 20px 0 0;
    }


    /* ======================================================
       Authentication Tabs
       ====================================================== */

    .avh-auth-tabs {
        margin-bottom: 16px;
    }

    .avh-auth-tabs li a {
        padding: 9px 5px;
        font-size: 14px;
    }


    /* ======================================================
       Phone Intro
       ====================================================== */

    .avh-phone-step-intro {
        margin-bottom: 14px;
    }

    .avh-phone-step-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 8px;
        border-radius: 14px;
        font-size: 21px;
    }

    .avh-phone-step-title {
        font-size: 19px;
    }

    .avh-phone-step-description {
        max-width: 250px;
        font-size: 10px;
    }


    /* ======================================================
       Phone Label
       ====================================================== */

    .avh-phone-label {
        margin-bottom: 6px;
        font-size: 12px;
    }


    /* ======================================================
       Phone Input
       ====================================================== */

    .avh-phone-input {
        min-height: 46px;
    }

    .avh-country-code {
        min-width: 68px;
        height: 46px;
        padding: 0 7px;
        font-size: 11px;
    }

    .avh-country-flag {
        font-size: 14px;
    }

    #avh-phone {
        height: 46px;
        padding: 0 9px;

        /*
         * Keep the input at 16px to prevent automatic
         * zoom when focused on iOS devices.
         */
        font-size: 16px;
    }


    /* ======================================================
       Send OTP
       ====================================================== */

    #avh-send-otp {
        min-height: 46px;
        margin-top: 11px;
    }


    /* ======================================================
       Privacy Message
       ====================================================== */

    .avh-phone-privacy {
        margin-top: 8px;
        gap: 5px;
        font-size: 8px;
    }

    .avh-phone-privacy .mi {
        font-size: 13px;
    }


    /* ======================================================
       Mobile Trust Indicators
       ====================================================== */

    .avh-mobile-trust {
        gap: 4px;
        margin-top: 16px;
        padding-top: 15px;
    }

    .avh-mobile-trust-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 6px;
    }

    .avh-mobile-trust-icon .mi {
        font-size: 17px;
    }

    .avh-mobile-trust-label {
        font-size: 10px;
    }

    .avh-mobile-trust-description {
        max-width: 82px;
        font-size: 7px;
        line-height: 1.3;
    }


    /* ======================================================
       Mobile Trust Badge
       ====================================================== */

    .avh-mobile-trust-badge {
        gap: 5px;
        margin-top: 14px;
        padding: 6px 9px;
    }

    .avh-mobile-trust-badge .mi {
        font-size: 13px;
    }

    .avh-mobile-trust-badge-text {
        font-size: 7px;
    }


    /* ======================================================
       OTP Header
       ====================================================== */

    .avh-otp-header {
        margin-bottom: 18px;
    }

    .avh-otp-header-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 10px;
        font-size: 23px;
    }

    .avh-otp-heading {
        font-size: 19px;
    }

    .avh-otp-description {
        font-size: 11px;
    }

    .avh-otp-phone-number {
        font-size: 14px;
    }


    /* ======================================================
       OTP Boxes
       ====================================================== */

    .avh-otp-boxes {
        gap: 5px;
    }

    .avh-otp-boxes input,
    .avh-otp-digit {
        max-width: 44px;
        height: 48px;
        font-size: 19px;
        line-height: 48px;
    }


    /* ======================================================
       OTP Timer / Resend
       ====================================================== */

    .avh-otp-timer {
        margin-top: 17px;
        font-size: 12px;
    }

    .avh-resend-wrapper {
        margin-top: 17px;
    }


    /* ======================================================
       Verify OTP
       ====================================================== */

    #avh-verify-otp {
        min-height: 46px;
        margin-top: 18px;
    }

}


/* ==========================================================
   5. SHORT MOBILE SCREENS
   Up to 767px wide and 750px high

   Reduces vertical spacing further on shorter screens.
   This helps keep the main phone authentication experience
   visible without changing the overall design structure.
   ========================================================== */

@media (max-width: 767px) and (max-height: 750px) {


    /* ======================================================
       Branding Panel
       ====================================================== */

    .avh-branding-panel {
        min-height: 190px;
        padding-top: 16px;
        padding-bottom: 40px;
    }


    /* ======================================================
       Security Illustration
       ====================================================== */

    .avh-security-visual {
        width: 46px;
        height: 46px;
        margin-bottom: 8px;
    }

    .avh-security-shield .mi {
        font-size: 23px;
    }


    /* ======================================================
       Branding Copy
       ====================================================== */

    .avh-brand-title {
        margin-bottom: 4px;
        font-size: 20px;
    }

    .avh-brand-description {
        font-size: 11px;
        line-height: 1.35;
    }


    /* ======================================================
       Authentication Main Panel
       ====================================================== */

    .avh-auth-main {
        margin-top: -28px;
        padding-top: 8px;
        padding-bottom: 18px;
    }


    /* ======================================================
       Authentication Tabs
       ====================================================== */

    .avh-auth-tabs {
        margin-bottom: 14px;
    }

    .avh-auth-tabs li a {
        padding-top: 8px;
        padding-bottom: 8px;
    }


    /* ======================================================
       Phone Intro
       ====================================================== */

    .avh-phone-step-intro {
        margin-bottom: 13px;
    }

    .avh-phone-step-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 7px;
        font-size: 20px;
    }

    .avh-phone-step-title {
        margin-bottom: 3px;
        font-size: 19px;
    }

    .avh-phone-step-description {
        font-size: 10px;
    }


    /* ======================================================
       Send OTP / Privacy
       ====================================================== */

    #avh-send-otp {
        margin-top: 10px;
    }

    .avh-phone-privacy {
        margin-top: 7px;
    }


    /* ======================================================
       Mobile Trust
       ====================================================== */

    .avh-mobile-trust {
        margin-top: 14px;
        padding-top: 13px;
    }

    .avh-mobile-trust-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 5px;
    }

    .avh-mobile-trust-icon .mi {
        font-size: 17px;
    }

    .avh-mobile-trust-badge {
        margin-top: 12px;
    }

}


/* ==========================================================
   6. MOBILE LANDSCAPE
   Up to 767px wide with landscape orientation

   Keeps the authentication interface usable on short,
   wide mobile viewports.
   ========================================================== */

@media (max-width: 767px) and (orientation: landscape) {


    /* ======================================================
       Authentication Shell
       ====================================================== */

    .avh-auth-shell {
        min-height: auto;
    }


    /* ======================================================
       Branding Panel
       ====================================================== */

    .avh-branding-panel {
        min-height: 170px;
        padding: 14px 24px 36px;
    }


    /* ======================================================
       Security Illustration
       ====================================================== */

    .avh-security-visual {
        width: 42px;
        height: 42px;
        margin-bottom: 6px;
    }

    .avh-security-shield .mi {
        font-size: 21px;
    }


    /* ======================================================
       Branding Copy
       ====================================================== */

    .avh-brand-title {
        margin-bottom: 3px;
        font-size: 19px;
    }

    .avh-brand-description {
        font-size: 10px;
        line-height: 1.3;
    }


    /* ======================================================
       Authentication Main Panel
       ====================================================== */

    .avh-auth-main {
        margin-top: -26px;
        padding-top: 8px;
    }


    /* ======================================================
       Phone Intro
       ====================================================== */

    .avh-phone-step-intro {
        margin-bottom: 12px;
    }

    .avh-phone-step-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 6px;
        font-size: 19px;
    }

    .avh-phone-step-title {
        font-size: 18px;
    }


    /* ======================================================
       Mobile Trust
       ====================================================== */

    .avh-mobile-trust {
        margin-top: 14px;
        padding-top: 12px;
    }

}


/* ==========================================================
   END
   AVH AUTH
   MyListing Authentication — Responsive Styles
   ========================================================== */