/* ==========================================================================
   Auth pages (resources/views/auth): photo on the left, modern panel on the right
   with a soft card, Login / Sign Up tabs, icon fields and Flame Orange (#F26B3A) main action.
   Inputs have no shadows. Phones: short photo banner on top, the card below, full width.
   ========================================================================== */

.gf-auth {
    --gf-auth-orange: #C94A16;
    --gf-auth-orange-2: #A33E0D;
    --gf-auth-navy: #00132D;
    --gf-auth-navy-2: #000B1A;
    --gf-auth-cream: #F8FAFC;
    --gf-auth-field: #FFFFFF;
    display: grid;
    background: var(--gf-auth-cream);
}

@media (min-width: 992px) {
    .gf-auth {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: calc(100vh - 96px);
    }
}

/* ---------- Photo ---------- */
.gf-auth__media { position: relative; overflow: hidden; background: var(--gf-auth-navy-2); }

.gf-auth__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    -webkit-mask-image: none;
    mask-image: none;
}

/* Phones and tablets: a short banner that keeps the logo and headline in view */
@media (max-width: 991.98px) {
    .gf-auth__media { height: 230px; }
    .gf-auth__media video { object-position: center 14%; }
}

@media (max-width: 575.98px) {
    .gf-auth__media { height: 180px; }
}

/* ---------- Modern clean side ---------- */
.gf-auth__side {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vw, 56px) 16px;
    background: var(--gf-auth-cream);
}

@media (max-width: 575.98px) {
    .gf-auth__side { padding: 0; background: var(--gf-auth-cream); }
}

.gf-auth__card {
    width: 100%;
    max-width: 440px;
    padding: 32px 32px 28px;
    background: #FFFFFF;
    border: 1px solid var(--gf-line, #E2E8F0);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(1, 26, 56, .06);
}

@media (max-width: 575.98px) {
    /* Pulls up over the banner a little so the page reads as one piece */
    .gf-auth__card {
        position: relative;
        max-width: none;
        margin-top: -18px;
        padding: 22px 16px 26px;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 16px 16px 0 0;
    }
}

/* ---------- Tabs ---------- */
.gf-auth__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 22px;
    padding: 4px;
    background: #F1F5F9;
    border-radius: 10px;
}

.gf-auth__tab {
    height: 40px;
    padding: 0 10px;
    font-family: var(--gf-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--gf-ink);
    background: transparent;
    border: 0;
    border-radius: 8px;
    transition: color .2s var(--gf-ease), background .2s var(--gf-ease);
}

.gf-auth__tab:hover { color: var(--gf-auth-navy); }
.gf-auth__tab.is-active { color: #fff; background: var(--gf-auth-navy); }

/* ---------- Heading ---------- */
.gf-body .gf-auth__title {
    margin: 0 0 4px;
    font-size: clamp(1.75rem, 3vw, 2.15rem);
    line-height: 1.1;
    color: var(--gf-auth-navy);
}

.gf-auth__lede { margin: 0 0 18px; font-size: 14px; color: var(--gf-muted); }

/* ---------- Fields: icon inside, no shadow ---------- */
.gf-auth__form { display: grid; gap: 12px; }

.gf-auth__input { position: relative; }

.gf-auth__input > i {
    position: absolute;
    top: 50%;
    left: 14px;
    font-size: 16px;
    color: var(--gf-muted);
    pointer-events: none;
    transform: translateY(-50%);
    transition: color .2s var(--gf-ease);
}

.gf-auth .gf-auth__input input {
    width: 100%;
    height: 46px;
    min-height: 46px;
    padding: 0 44px 0 42px;
    font-family: var(--gf-body);
    font-size: 14.5px;
    color: var(--gf-ink);
    background: var(--gf-auth-field);
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    box-shadow: none !important;
    outline: none;
    transition: border-color .2s var(--gf-ease);
}

.gf-auth .gf-auth__input input::placeholder { color: #94A3B8; }
.gf-auth .gf-auth__input input:hover { border-color: #94A3B8; }
.gf-auth .gf-auth__input input:focus { border-color: var(--gf-auth-orange); }
.gf-auth__input:focus-within > i { color: var(--gf-auth-orange); }

.gf-auth__eye {
    position: absolute;
    top: 50%;
    right: 4px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 16px;
    color: var(--gf-muted);
    background: none;
    border: 0;
    border-radius: 8px;
    transform: translateY(-50%);
}

.gf-auth__eye:hover { color: var(--gf-auth-orange); }

.gf-auth__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (max-width: 400px) {
    .gf-auth__pair { grid-template-columns: 1fr; }
}

.gf-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.gf-auth__check { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: 13px; color: var(--gf-ink-2); }

.gf-auth__check .form-check-input {
    float: none;
    width: 16px;
    height: 16px;
    margin: 0;
    flex: none;
    background-color: #fff;
    border-color: #CBD5E1;
    border-radius: 4px;
    box-shadow: none !important;
}

.gf-auth__check .form-check-input:checked { background-color: var(--gf-auth-orange); border-color: var(--gf-auth-orange); }
.gf-auth__check a { color: var(--gf-auth-orange); text-decoration: underline; text-underline-offset: 3px; }

.gf-auth__link {
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--gf-auth-orange);
    background: none;
    border: 0;
}

.gf-auth__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Main action: Flame Orange (#F26B3A) ---------- */
.gf-auth__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    margin-top: 4px;
    font-family: var(--gf-body);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--gf-auth-orange);
    border: 0;
    border-radius: 10px;
    transition: background .25s var(--gf-ease);
}

.gf-auth__submit:hover { background: var(--gf-auth-orange-2); }
.gf-auth__submit i { transition: transform .25s var(--gf-ease); }
.gf-auth__submit:hover i { transform: translateX(3px); }
.gf-auth__submit.disabled { opacity: .7; pointer-events: none; }

.gf-auth__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 0;
    font-size: 13px;
    color: var(--gf-muted);
    background: none;
    border: 0;
}

.gf-body .gf-auth__back:hover { color: var(--gf-auth-orange); }

/* ---------- Social ---------- */
.gf-auth__social { margin-top: 18px; }

.gf-auth__or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--gf-muted);
}

.gf-auth__or::before,
.gf-auth__or::after { content: ""; flex: 1; height: 1px; background: #E2E8F0; }

.gf-auth__google { display: flex; justify-content: center; min-height: 44px; }

.gf-auth__foot { margin: 18px 0 0; font-size: 13px; text-align: center; color: var(--gf-muted); }
.gf-auth__foot a { font-weight: 500; color: var(--gf-auth-orange); }

[hidden] { display: none !important; }

/* Omniva's button rules push the tab label to the top-left; centre it */
.gf-auth .gf-auth__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
}

/* Desktop: the photo keeps one screen height and stays pinned under the 64px header,
   so a taller form (Sign Up) scrolls beside it instead of stretching the image */
@media (min-width: 992px) {
    .gf-auth__media {
        position: sticky;
        top: 55px;
        align-self: start;
        height: calc(100vh - 96px);
        min-height: 580px;
    }
}


/* ---------- Phones: fit the form on one screen and never scroll sideways ---------- */
.gf-auth { overflow-x: clip; }

@media (max-width: 575.98px) {
    .gf-auth__media { height: 132px; }
    .gf-auth__media video { object-position: center 18%; }

    .gf-auth__card { margin-top: -14px; padding: 16px 16px 20px; }
    .gf-auth__tabs { margin-bottom: 14px; }
    .gf-auth__tab { height: 38px; font-size: 14px; }
    .gf-body .gf-auth__title { font-size: 1.6rem; }
    .gf-auth__lede { margin-bottom: 14px; font-size: 13px; }
    .gf-auth__form { gap: 10px; }
    .gf-auth .gf-auth__input input { height: 44px; min-height: 44px; font-size: 16px; } /* 16px stops iOS zooming into fields */
    .gf-auth__submit { height: 46px; }
    .gf-auth__social { margin-top: 14px; }
    .gf-auth__or { margin-bottom: 10px; }
    .gf-auth__back { margin-bottom: 10px; }
}

.gf-auth__legal { margin: 10px 0 0; font-size: 12px; line-height: 1.5; text-align: center; color: var(--gf-muted); }
.gf-auth__legal a { color: inherit; text-decoration: underline; }