/* Mobile type scale for this page — named once here so future pages that
   need the same "title / body / button / label" rhythm can reuse these
   tokens directly instead of a fresh set of guessed numbers.
   Buttons match input text (16px) deliberately — both are primary,
   interactive elements and should carry equal weight, not have the CTA
   read smaller than what you just typed. Body text sits one step below
   at 14px, close enough to 16px that the jump up to input/button text
   feels like a natural step rather than a jarring outlier. 16px itself
   is a hard floor, not a style choice — it's what stops iOS Safari from
   auto-zooming the page on focus, so it can't move lower. */
:root {
    --text-title-mobile: 18px;
    --text-input-mobile: 16px;
    --text-body-mobile: 14px;
    --text-button-mobile: 14px;
    --text-label-mobile: 12px;
}

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-optical-sizing: auto;
}

.container {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tabcontent {
    display: none;
    width: 100vw;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }

.card_main {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 750px;
    height: fit-content;
    border: 10px solid white;
    border-radius: 30px;
    box-shadow: 0px 0px 5px rgb(212, 212, 212);
    margin: auto;
    box-sizing: border-box;
}

.card_container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 562px;
}

.card_left {
    width: 50%;
    padding: 30px 30px;
}

.login_img {
    width: 100%;
    height: 120px;
    margin-top: 40px;
}

.app_logo {
    height: 42px;
    /* position: absolute;
    top: 60px;
    left: 50%;
    transform: translate(-50%, -50%); */
    /* background-color: white;
    padding: 13px;
    border-radius: 14px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
    margin-bottom:50px;
    width: fit-content;
}

.title_img_container {
    position: relative;
    display: inline-block;
    height: 100%;
}

.text_title {
    color: #272F68;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.text_description {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 30px;
}

.input_wrapper {
    margin-top: 9px;
}

.input_title {
    color: #949494;
    font-size: 10px;
    margin-left: 6px;
}

.login_input_field {
    width: -webkit-fill-available;
    outline: none;
    border: 2px solid #F0F0F0;
    padding: 10px 16px;
    border-radius: 6px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    transition: ease-in-out 0.3s;
}

.login_input_field:hover {
    border: 2px solid #8097F9;
}


.login_input_field[type] {
    font-weight: 400;
    color:#949494;
}



.login_input_field:focus {
    border: 2px solid #8097F9;
    color: #8097F9;
}

.input_wrapper:focus-within .input_title {
    color: #8097F9;
}

.input_title {
    transition: ease-in-out 0.3s;
}

.input_wrapper:hover .input_title {
    color: #8097F9;
}

.button_default {
    background-color: #8097F9;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: ease-in-out 0.3s;
}

.button_default:hover {
    background-color: #272F68;
}

.text_right {
    text-align: right;
}

.text_center {
    text-align: center;
}

.text_small {
    font-size: 10px;
}

.hyperlink {
    color: #8097F9;
    font-weight: 500;
    cursor: pointer;
    transition: ease-in-out 0.3s;
}

.hyperlink:hover {
    color: #272F68;
}

.card_right {
    width: 50%;
    background-color: white;
    height: 622px;
    border-radius: 0 22px 22px 0;
}

.title_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 0 20px 20px 0;
}

.m_t_6px {
    margin-top: 6px;
}

.card_container div:first-child {
    display: flex;
    flex-direction: column;
}

.card_container div:first-child div:first-child {
    display: flex;
    flex-direction: column;
}

/* Top logo stripe / bottom link stripe for the /legal/ auth pages (login.html),
   matching the look of .befayr_header/.befayr_footer used on /befayr pages.
   Dedicated classes instead of reusing .befayr_container: that class's mobile
   rules force every .tabcontent sibling to display:flex!important, which would
   show all of login.html's tab panels (signin/signup/forgot/...) at once
   instead of just the one openCity() just activated via inline style. */
body:has(.legal_auth_wrapper) {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body:has(.legal_auth_wrapper)::-webkit-scrollbar {
    display: none;
}

.legal_auth_wrapper {
    flex-direction: column;
    justify-content: space-between;
}

.legal_page_header {
    background-color: #272F68;
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.legal_page_header img {
    height: clamp(32px, 5vw, 50px);
    width: auto;
}

.legal_page_footer {
    width: 100%;
    background-color: #272F68;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.legal_page_footer a {
    text-decoration: none;
    color: white;
    font-weight: 400;
    padding: 10px 10px;
    font-size: 14px;
    cursor: pointer;
    transition: ease-in-out 0.3s;
}

.legal_page_footer a:hover {
    opacity: 0.7;
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    body:has(.legal_auth_wrapper) {
        overflow-y: auto;
    }

    /* iOS Safari auto-zooms the page in on focus for any text input with
       font-size under 16px, and there's no reliable way to force it back
       out afterwards — the standard fix is to just not trigger the zoom
       in the first place. */
    .login_input_field {
        font-size: var(--text-input-mobile);
    }

    /* Mobile type scale, via the tokens defined at the top of this file.
       .text_title and the two classes below are normally styled by
       befayr_style.css (shared across every /befayr/* page via
       .befayr_container in base.html, plus /legal/login's own
       .legal_auth_wrapper), so these are scoped to those two wrapper
       classes rather than edited globally — same values everywhere that
       uses them, without touching pages we haven't reviewed. */
    .input_title {
        font-size: var(--text-label-mobile);
    }

    .legal_auth_wrapper .befayr_section_title_w_icon .text_title,
    .befayr_container .befayr_section_title_w_icon .text_title {
        font-size: var(--text-title-mobile);
    }

    .legal_auth_wrapper .befayr_selection_top_description,
    .befayr_container .befayr_selection_top_description {
        font-size: var(--text-body-mobile);
    }

    .legal_auth_wrapper .befayr_selection_button,
    .befayr_container .befayr_selection_button {
        font-size: var(--text-button-mobile);
    }

    /* Real breathing room, not just bigger text — .input_wrapper's
       default 9px top margin was already tight for the old 12px input
       text; with 16px text it read as genuinely cramped. */
    .legal_auth_wrapper .input_wrapper,
    .befayr_container .input_wrapper {
        margin-top: 18px;
    }

    /* The phone number field (register.html, referral_register.html —
       built with the intl-tel-input library) was missed by the
       .login_input_field anti-zoom fix since it's a separate widget with
       its own classes — still 12px and still triggering iOS's zoom on
       focus. befayr_style.css sets these with !important too, and it
       loads AFTER this file (base.html's <link> order), so at equal
       specificity its rule would win the cascade tiebreak — adding
       .befayr_container gives this one higher specificity instead of
       relying on source order. */
    .befayr_container .phone_iti_wrapper .iti__tel-input,
    .befayr_container .iti__selected-dial-code {
        font-size: var(--text-input-mobile) !important;
    }

    /* intl-tel-input renders its country dropdown appended to <body>, not
       nested inside .befayr_container, so it can't be reached the same
       way — !important is what makes this one win instead. */
    .iti__dropdown-content {
        font-size: var(--text-body-mobile) !important;
    }

    /* .text_small (10px) was never brought up to the label tier like
       .input_title was. Scoped narrowly to the exact class combinations
       used pre-login (login.html's "Forgot password?", and register.html
       / referral_register.html's terms disclaimer, both of which also
       carry .text_center) rather than the bare .text_small.befayr_text_small
       combo, which is also used post-login on the checkout pages
       (monthly_plan.html / annual_plan.html) that this pass intentionally
       leaves untouched. */
    .text_small.tablinks,
    .text_small.text_center {
        font-size: var(--text-label-mobile);
    }
}

@media screen and (max-width: 480px) {
    /* iOS Safari auto-zooms the page in on focus for any text input with
       font-size under 16px, and there's no reliable way to force it back
       out afterwards — the standard fix is to just not trigger the zoom
       in the first place. */
    .login_input_field {
        font-size: var(--text-input-mobile);
    }

    /* Mobile type scale, via the tokens defined at the top of this file.
       .text_title and the two classes below are normally styled by
       befayr_style.css (shared across every /befayr/* page via
       .befayr_container in base.html, plus /legal/login's own
       .legal_auth_wrapper), so these are scoped to those two wrapper
       classes rather than edited globally — same values everywhere that
       uses them, without touching pages we haven't reviewed. */
    .input_title {
        font-size: var(--text-label-mobile);
    }

    .legal_auth_wrapper .befayr_section_title_w_icon .text_title,
    .befayr_container .befayr_section_title_w_icon .text_title {
        font-size: var(--text-title-mobile);
    }

    .legal_auth_wrapper .befayr_selection_top_description,
    .befayr_container .befayr_selection_top_description {
        font-size: var(--text-body-mobile);
    }

    .legal_auth_wrapper .befayr_selection_button,
    .befayr_container .befayr_selection_button {
        font-size: var(--text-button-mobile);
    }

    /* Real breathing room, not just bigger text — .input_wrapper's
       default 9px top margin was already tight for the old 12px input
       text; with 16px text it read as genuinely cramped. */
    .legal_auth_wrapper .input_wrapper,
    .befayr_container .input_wrapper {
        margin-top: 18px;
    }

    /* The phone number field (register.html, referral_register.html —
       built with the intl-tel-input library) was missed by the
       .login_input_field anti-zoom fix since it's a separate widget with
       its own classes — still 12px and still triggering iOS's zoom on
       focus. befayr_style.css sets these with !important too, and it
       loads AFTER this file (base.html's <link> order), so at equal
       specificity its rule would win the cascade tiebreak — adding
       .befayr_container gives this one higher specificity instead of
       relying on source order. */
    .befayr_container .phone_iti_wrapper .iti__tel-input,
    .befayr_container .iti__selected-dial-code {
        font-size: var(--text-input-mobile) !important;
    }

    /* intl-tel-input renders its country dropdown appended to <body>, not
       nested inside .befayr_container, so it can't be reached the same
       way — !important is what makes this one win instead. */
    .iti__dropdown-content {
        font-size: var(--text-body-mobile) !important;
    }

    /* .text_small (10px) was never brought up to the label tier like
       .input_title was. Scoped narrowly to the exact class combinations
       used pre-login (login.html's "Forgot password?", and register.html
       / referral_register.html's terms disclaimer, both of which also
       carry .text_center) rather than the bare .text_small.befayr_text_small
       combo, which is also used post-login on the checkout pages
       (monthly_plan.html / annual_plan.html) that this pass intentionally
       leaves untouched. */
    .text_small.tablinks,
    .text_small.text_center {
        font-size: var(--text-label-mobile);
    }

    /* Same treatment as .befayr_container at this breakpoint: let the page
       size to its content and scroll rather than locking to a fixed height,
       now that a header and footer take up their own space on top of the
       card. flex:1 (not display:flex!important) so tab visibility stays
       under openCity()'s control. */
    .legal_auth_wrapper {
        height: auto;
        min-height: 100dvh;
        overflow-y: visible;
    }

    body:has(.legal_auth_wrapper) {
        overflow-y: auto;
        height: auto;
        touch-action: auto;
    }

    .legal_page_header {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    /* Same as .befayr_container .card_right at this breakpoint: hidden
       outright rather than shown as a fixed background, since the card no
       longer stretches to fill the screen once header/footer take their
       own space, and the leftover photo strip above/below it looked wrong. */
    .legal_auth_wrapper .card_right {
        display: none;
    }

    /* flex-direction:column (.tabcontent defaults to row) so flex:1 on its
       children below controls their HEIGHT — height:100% doesn't reliably
       resolve through this many nested flex levels, so every step in this
       chain (.tabcontent -> .card_main -> .card_left -> .card_container)
       uses flex:1 consistently instead. */
    .legal_auth_wrapper .tabcontent {
        flex: 1;
        height: auto;
        flex-direction: column;
    }

    /* .card_container's flex:1 only stretches it if its parent (.card_left)
       is actually a flex container — it isn't by default, so without this
       .card_container just shrinks to its content's height and .card_main's
       justify-content:center then centers that compact block in the middle
       of the screen instead of spreading header/image/button apart. */
    .legal_auth_wrapper .card_main {
        flex: 1;
        width: 100%;
        justify-content: flex-start;
        align-items: stretch;
    }

    .legal_auth_wrapper .card_left {
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 100%;
        box-sizing: border-box;
    }

    /* Sign in / Sign up wrap .card_container in a <form> (Finish/Forgot
       don't) — that form sits between .card_left and .card_container in
       the DOM, so without also flexing it, .card_container's flex:1 has
       nothing to stretch against: the form just sizes to its natural
       content height at the top of .card_left, and the rest of the now
       full-height .card_left is left empty below it. */
    .legal_auth_wrapper .card_left form {
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 100%;
    }

    .legal_auth_wrapper .card_container {
        height: auto;
        flex: 1;
    }

    /* .befayr_selection_header's margin-bottom (20px) and .befayr_img's
       margin-top (40px) are fixed spacing meant for non-stretched layouts.
       Flex items don't collapse margins, so together they ate the entire
       60px of free space justify-content:space-between had to distribute,
       leaving all the gap bunched between header/image and none between
       image/button. Zeroing them here lets space-between spread evenly. */
    .legal_auth_wrapper .card_container > .befayr_selection_header {
        margin-bottom: 0;
    }

    .legal_auth_wrapper .card_container > .befayr_img {
        margin-top: 0;
    }

    /* Match .befayr_footer a's mobile size (befayr_style.css) so the
       /legal/ pages' footer reads the same as the rest of the site at
       this breakpoint. */
    .legal_page_footer a {
        font-size: 11px;
        padding: 8px 5px;
    }
}