/*
 * 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;
}