/*
 * The guest "login" dropdown lives outside <nav id="navmenu"> (as a sibling,
 * like the logout button) so it isn't part of the collapsible mobile menu.
 * It only needs its own dropdown-on-hover styling for desktop; on mobile the
 * plain student/staff login links inside the main menu are used instead.
 */
.guest-login-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.guest-login-menu .dropdown {
    position: relative;
}
.guest-login-menu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    list-style: none;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    inset-inline-start: 0;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}
.guest-login-menu .dropdown ul li {
    min-width: 140px;
}
.guest-login-menu .dropdown ul a {
    display: block;
    padding: 8px 16px;
    font-size: 15px;
    color: var(--nav-dropdown-color);
}
.guest-login-menu .dropdown ul a:hover {
    color: var(--nav-dropdown-hover-color);
}
.guest-login-menu .dropdown:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
}
/*
 * newmain.css's own .btn-getstarted rule renders this as a small CTA pill
 * (font-size: .8125rem / ~13px, padding: 8px 20px) — much smaller than a
 * normal button. Override to a standard button size here instead of
 * editing the shared vendor stylesheet (would affect every tenant).
 */
.guest-login-menu .dropdown.btn-getstarted {
    font-size: 1rem;
    padding: 10px 24px;
}
.guest-login-menu .dropdown.btn-getstarted > a {
    font-size: 1rem;
}
@media (max-width: 1199px) {
    .guest-login-menu {
        display: none !important;
    }
}

/*
 * newmain.css sets line-height: 0 on this icon (28px font-size squeezed into
 * a zero-height line box), which caused one of the hamburger icon's three
 * bars to render cramped/blurry on some mobile browsers. line-height:1 gives
 * the glyph proper room.
 *
 * Positioning: this icon is position:absolute against <header class="...
 * sticky-top">, whose height varies across breakpoints (logo/title wrap
 * differently on narrow phones vs wider tablets). A fixed top:Npx only looks
 * centered at whatever height it was tuned against. top:50% + translateY(-50%)
 * centers it relative to the header's ACTUAL height at any screen size, so it
 * stays correctly positioned across all phones and tablets, not just one.
 */
.mobile-nav-toggle {
    line-height: 1;
    top: 50%;
    transform: translateY(-50%);
}

/*
 * newmain.css sets flex-direction: column on .fixed-contact-icons
 * unconditionally (not inside a media query), so the WhatsApp/call buttons
 * are always stacked vertically, even on desktop. Row on desktop (side by
 * side), column only under the same 768px breakpoint newmain.css already
 * uses for this component's other mobile-specific sizing.
 */
.fixed-contact-icons {
    flex-direction: row;
    bottom: 40px;
    /*
     * The accessibility widget's config (layouts/app.blade.php) is now set
     * to render on the same side as this group for the current language
     * (inset-inline-end flips with direction, matching it). Pushed further
     * in from the edge than newmain.css's default (20px) to leave room for
     * the widget's own button next to it instead of colliding — this is an
     * estimate since the widget's actual rendered size/margin isn't
     * inspectable from our source; adjust based on what you see live.
     */
    inset-inline-end: 90px;
}
@media (max-width: 768px) {
    .fixed-contact-icons {
        flex-direction: column;
        /* newmain.css's own mobile default (bottom: 16px) is unchanged here. */
    }
}

/*
 * "Send OTP via" choice: plain radio/label pairs laid out in an even row
 * instead of manual &emsp;/&nbsp; spacing hacks. Shared by student login
 * and staff login (auth/login.blade.php).
 */
.otp-choice-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: flex-start;
    margin-top: .5rem;
}
.otp-choice-group .otp-option {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

/* Staff login only: "sendotpvia" label + its stacking wrapper. */
.otp-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}
.otp-label {
    display: contents;
    width: 100%;
    text-align: end;
    margin-bottom: .25rem;
}

/*
 * Shared tab-form convention (id="tutor" + .tab-nav + .form-group.mb-20),
 * used by student login/signup/2FA/password-reset/add-english-name: row-gap
 * on the form replaces each field's own margin-bottom for consistent
 * spacing. Only matches forms with class="row" directly inside #tutor, so
 * it's a no-op on pages that don't follow that exact structure.
 */
.tab-nav {
    margin-bottom: 1rem;
}
#tutor > form.row {
    row-gap: 1rem;
}
#tutor .form-group {
    margin-bottom: 0 !important;
}

/* Student login: password field + show/hide button as one flush unit. */
.password-input-group {
    display: flex;
    align-items: stretch;
}
.password-input-group .form-control {
    flex: 1 1 auto;
}
.password-input-group #showPassword {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Student login: submit button + footer links spacing. */
.login-submit-row {
    margin-top: .25rem;
}
.login-footer-links {
    margin-top: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

/* Student login: forgot-password modal spacing. */
#forget_password .modal-body {
    padding: 1.5rem;
}
#forget_password .form-group label {
    display: block;
    margin-bottom: .5rem;
}
#forget_password .modal-footer {
    margin-top: 1.25rem;
}

/* Student dashboard: course card footer button row, no more <br><br> spacing hacks. */
.student-footer-course {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.student-footer-course .btn,
.student-footer-course a.btn {
    margin: 0 !important;
}

/*
 * Auth pages: never hide content waiting for AOS.
 * Form columns previously used data-aos="zoom-in" (opacity:0 until aos.js runs).
 */
.auth-page [data-aos],
.public-page [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* Auth layout header — branding + language switcher */
.auth-header {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-color-s, var(--accent-color)) 100%);
    color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.auth-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    padding-block: 0.625rem;
}

.auth-header__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    text-decoration: none;
    min-width: 0;
    flex: 1 1 auto;
}

.auth-header__brand:hover {
    color: #fff;
    opacity: 0.92;
}

.auth-header__logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 4px;
}

.auth-header__title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.auth-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.auth-header__lang {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.auth-header__lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.auth-header__lang-btn .flag-icon {
    width: 1.1rem;
    line-height: 1rem;
    border-radius: 2px;
}

.auth-header__lang-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.auth-header__lang-btn.is-active {
    background: #fff;
    color: var(--accent-color);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.auth-header__home {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.auth-header__home:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 575.98px) {
    .auth-header__inner {
        min-height: 56px;
        gap: 0.5rem;
    }

    .auth-header__logo {
        width: 38px;
        height: 38px;
    }

    .auth-header__title {
        font-size: 0.8125rem;
        -webkit-line-clamp: 1;
    }

    .auth-header__lang-btn span:not(.flag-icon) {
        display: none;
    }

    .auth-header__lang-btn {
        padding: 0.4rem 0.55rem;
    }

    .auth-header__home span {
        display: none;
    }

    .auth-header__home {
        padding: 0.45rem 0.6rem;
    }
}