/* ==========================================================================
   LWSOC Premium Glass Layer
   Loaded last (after custom.css) — owns brand tokens, glass utilities, and
   the premium restyle of header, auth pages, breadcrumb, and footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand tokens + legacy variable overrides
   -------------------------------------------------------------------------- */
:root {
    --lwsoc-primary: #116AF8;
    --lwsoc-indigo: #052699;
    --lwsoc-navy: #052699;
    --lwsoc-ink: #061A3A;
    --lwsoc-muted: #52627A;
    --lwsoc-surface: #F4FBFF;
    --lwsoc-surface-2: rgba(168, 230, 255, 0.24);
    --lwsoc-gradient: linear-gradient(135deg, #052699 0%, #116AF8 100%);
    --lwsoc-radius-sm: 10px;
    --lwsoc-radius: 14px;
    --lwsoc-radius-lg: 20px;
    --lwsoc-radius-xl: 28px;
    --lwsoc-shadow-sm: 0 1px 2px rgba(5, 38, 153, 0.05), 0 4px 12px rgba(5, 38, 153, 0.05);
    --lwsoc-shadow-md: 0 2px 6px rgba(5, 38, 153, 0.06), 0 12px 32px rgba(5, 38, 153, 0.10);
    --lwsoc-shadow-lg: 0 4px 12px rgba(5, 38, 153, 0.08), 0 24px 64px rgba(5, 38, 153, 0.14);
    --lwsoc-focus-ring: 0 0 0 3px rgba(17, 106, 248, 0.25);
    --lwsoc-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Legacy Academy LMS variables re-pointed at the brand palette.
       Everything still reading var(--color-4/12/15) recolors site-wide. */
    --color-4: #116AF8;
    --color-12: rgba(17, 106, 248, 0.23);
    --color-15: rgba(17, 106, 248, 0.35);
}

/* --------------------------------------------------------------------------
   2. Global polish
   -------------------------------------------------------------------------- */
html {
    scroll-padding-top: 92px; /* keep anchors clear of the sticky header */
}

::selection {
    background: rgba(17, 106, 248, 0.22);
}

/* Restore visible keyboard focus (legacy CSS removed it on form controls) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(17, 106, 248, 0.45);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Unify every Bootstrap-primary button to the brand gradient */
.btn-primary {
    background: var(--lwsoc-gradient) !important;
    border: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.25s var(--lwsoc-ease), box-shadow 0.25s var(--lwsoc-ease), filter 0.25s var(--lwsoc-ease);
}

.btn-primary:hover,
.btn-primary:focus {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(17, 106, 248, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-primary:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   3. Glass utility
   -------------------------------------------------------------------------- */
.lwsoc-glass {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lwsoc-glass {
        background: rgba(255, 255, 255, 0.96);
    }
}

/* --------------------------------------------------------------------------
   4. Header — sticky frosted nav
   -------------------------------------------------------------------------- */
body > header {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.menubar {
    position: relative;
    background: transparent;
    border-bottom: 1px solid rgba(18, 19, 20, 0.08);
    padding: 10px 0;
}

/* Blur lives on a pseudo-element so the fixed-position offcanvas inside the
   menubar is not trapped by a backdrop-filter containing block. */
.menubar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .menubar::before {
        background: rgba(255, 255, 255, 0.97);
    }
}

.menubar .right-menubar a {
    transition: color 0.2s var(--lwsoc-ease);
}

.menubar .right-menubar a:hover {
    color: var(--lwsoc-primary);
}

/* "Join Now" header CTA as a glossy gradient pill */
.ctBtn {
    border-radius: 30px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    padding: 9px 20px;
    text-align: center;
    transition: transform 0.25s var(--lwsoc-ease), box-shadow 0.25s var(--lwsoc-ease), filter 0.25s var(--lwsoc-ease);
}

.ctBtn:hover {
    color: #fff !important;
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(17, 106, 248, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Language switcher relocated from the removed top bar */
.lwsoc-lang-switch {
    display: flex;
    align-items: center;
}

.lwsoc-lang-switch .form-select {
    background-color: rgba(18, 19, 20, 0.04);
    border: 1px solid rgba(18, 19, 20, 0.08);
    border-radius: 30px;
    color: var(--lwsoc-ink);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    min-height: 36px;
    padding: 4px 30px 4px 14px;
    width: auto;
}

.mobile-view-offcanves .lwsoc-lang-switch .form-select {
    min-height: 44px;
}

/* Mobile offcanvas menu */
.mobile-view-offcanves .offcanvas {
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: none;
    border-radius: 0 var(--lwsoc-radius-lg) var(--lwsoc-radius-lg) 0;
    box-shadow: var(--lwsoc-shadow-lg);
}

.mobile-view-offcanves .offcanvas-header,
.mobile-view-offcanves .offcanves-top {
    background: transparent !important;
}

.mobile-view-offcanves .offcanvas-body {
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-view-offcanves .offcanvas-body li {
    background: transparent !important;
}

.mobile-view-offcanves .btn-toggle,
.mobile-view-offcanves .btn-toggle-list {
    border-radius: var(--lwsoc-radius-sm);
    min-height: 48px;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: background-color 0.2s var(--lwsoc-ease), color 0.2s var(--lwsoc-ease);
    width: 100%;
}

.mobile-view-offcanves .btn-toggle:hover,
.mobile-view-offcanves .btn-toggle-list:hover {
    background: rgba(17, 106, 248, 0.08);
    color: var(--lwsoc-primary) !important;
}

.mobile-view-offcanves .btn-toggle i,
.mobile-view-offcanves .btn-toggle-list i {
    color: var(--lwsoc-primary);
}

.mobile-view-offcanves .badge.bg-danger {
    background: var(--lwsoc-gradient) !important;
}

.offcanves-btn .signUp-btn,
.offcanves-btn .logIn-btn {
    align-items: center;
    border-radius: 30px;
    display: inline-flex;
    font-weight: 600;
    justify-content: center;
    min-height: 44px;
    padding: 10px 24px;
    transition: 0.25s var(--lwsoc-ease);
}

.offcanves-btn .signUp-btn {
    background: var(--lwsoc-gradient);
    border: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #fff !important;
}

.offcanves-btn .logIn-btn {
    background: transparent;
    border: 1px solid rgba(17, 106, 248, 0.45);
    color: var(--lwsoc-primary) !important;
}

/* --------------------------------------------------------------------------
   5. Auth pages (login / sign up / forgot password)
   -------------------------------------------------------------------------- */
.lwsoc-auth {
    background:
        radial-gradient(circle at 16% 8%, rgba(17, 106, 248, 0.24) 0%, rgba(17, 106, 248, 0) 34%),
        radial-gradient(circle at 86% 88%, rgba(32, 188, 237, 0.22) 0%, rgba(32, 188, 237, 0) 32%),
        linear-gradient(135deg, #f7fcff 0%, #eaf8ff 44%, #d7f2ff 100%);
    overflow: hidden;
    padding: 72px 0 110px;
    position: relative;
}

.lwsoc-auth::before,
.lwsoc-auth::after {
    border-radius: 50%;
    content: "";
    pointer-events: none;
    position: absolute;
}

.lwsoc-auth::before {
    background: radial-gradient(circle, rgba(5, 38, 153, 0.2) 0%, rgba(5, 38, 153, 0) 68%);
    height: 720px;
    left: -190px;
    top: -220px;
    width: 720px;
}

.lwsoc-auth::after {
    background: radial-gradient(circle, rgba(32, 188, 237, 0.24) 0%, rgba(32, 188, 237, 0) 68%);
    bottom: -260px;
    height: 760px;
    right: -210px;
    width: 760px;
}

.lwsoc-auth-card {
    border-radius: var(--lwsoc-radius-xl);
    box-shadow: var(--lwsoc-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    margin: 0 auto;
    max-width: 440px;
    padding: 40px 36px 32px;
    position: relative;
    z-index: 1;
}

.lwsoc-auth-card-wide {
    max-width: 500px;
}

.lwsoc-auth-head {
    margin-bottom: 28px;
    text-align: center;
}

.lwsoc-auth-head h1 {
    color: var(--lwsoc-ink);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
}

.lwsoc-auth-head p {
    color: var(--lwsoc-muted);
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 0;
}

.lwsoc-field {
    margin-bottom: 18px;
}

.lwsoc-field label {
    color: var(--lwsoc-ink);
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.lwsoc-field .position-relative > i {
    color: rgba(18, 19, 20, 0.38);
    font-size: 15px;
    left: 17px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.lwsoc-field .lwsoc-eye {
    cursor: pointer;
    left: unset;
    pointer-events: auto;
    right: 17px;
    transition: color 0.2s var(--lwsoc-ease);
}

.lwsoc-field .lwsoc-eye:hover {
    color: var(--lwsoc-primary);
}

.lwsoc-auth .form-control {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(18, 19, 20, 0.1);
    border-radius: var(--lwsoc-radius);
    color: var(--lwsoc-ink);
    font-size: 16px; /* >=16px prevents iOS auto-zoom */
    min-height: 50px;
    padding: 12px 16px 12px 46px;
    transition: border-color 0.2s var(--lwsoc-ease), box-shadow 0.2s var(--lwsoc-ease), background-color 0.2s var(--lwsoc-ease);
    width: 100%;
}

.lwsoc-auth textarea.form-control,
.lwsoc-auth input[type="file"].form-control {
    padding-left: 16px;
}

.lwsoc-auth .form-control::placeholder {
    color: rgba(18, 19, 20, 0.42);
}

.lwsoc-auth .form-control:focus {
    background: #fff;
    border-color: var(--lwsoc-primary);
    box-shadow: var(--lwsoc-focus-ring);
    outline: none;
}

.lwsoc-auth-meta {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.lwsoc-auth-meta a {
    color: var(--lwsoc-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s var(--lwsoc-ease);
}

.lwsoc-auth-meta a:hover {
    color: var(--lwsoc-primary);
}

.lwsoc-auth .g-recaptcha {
    margin-top: 18px;
    max-width: 100%;
}

.lwsoc-auth .log-in .btn {
    align-items: center;
    border-radius: var(--lwsoc-radius);
    color: #fff;
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    margin: 22px 0 0;
    min-height: 52px;
    padding: 12px 30px;
    width: 100%;
}

.lwsoc-auth-another {
    margin-top: 22px;
    text-align: center;
}

.lwsoc-auth-another p {
    color: var(--lwsoc-muted);
    font-size: 14px;
    margin-bottom: 0;
}

.lwsoc-auth-another p a {
    color: var(--lwsoc-primary);
    font-weight: 600;
    margin-left: 6px;
    text-decoration: none;
}

.lwsoc-auth-another p a:hover {
    color: var(--lwsoc-indigo);
}

.lwsoc-auth-divider {
    align-items: center;
    color: var(--lwsoc-muted);
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 14px;
    margin: 20px 0 16px;
    text-transform: uppercase;
}

.lwsoc-auth-divider::before,
.lwsoc-auth-divider::after {
    background: rgba(18, 19, 20, 0.1);
    content: "";
    flex: 1 1 auto;
    height: 1px;
}

.lwsoc-auth .social-media .btn {
    border-radius: var(--lwsoc-radius);
    margin: 0 0 6px;
    min-height: 48px;
    padding: 11px 20px;
    width: 100%;
}

.lwsoc-auth .form-check-line {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.lwsoc-auth .form-check-line input[type="checkbox"] {
    accent-color: var(--lwsoc-primary);
    height: 18px;
    width: 18px;
}

.lwsoc-auth .form-check-line label {
    color: var(--lwsoc-ink);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
}

.lwsoc-field small {
    color: var(--lwsoc-muted);
    display: block;
    font-size: 12.5px;
    margin-top: 6px;
}

@media (max-width: 575px) {
    .lwsoc-auth {
        padding: 36px 0 64px;
    }

    .lwsoc-auth-card {
        border-radius: var(--lwsoc-radius-lg);
        -webkit-backdrop-filter: blur(14px) saturate(170%);
        backdrop-filter: blur(14px) saturate(170%);
        padding: 30px 20px 26px;
    }

    .lwsoc-auth-head h1 {
        font-size: 24px;
    }
}

/* --------------------------------------------------------------------------
   6. Breadcrumb band (all inner pages)
   -------------------------------------------------------------------------- */
.bread-crumb {
    background:
        radial-gradient(circle at 88% 0%, rgba(17, 106, 248, 0.14), transparent 34%),
        radial-gradient(circle at 4% 100%, rgba(32, 188, 237, 0.1), transparent 30%),
        linear-gradient(180deg, var(--lwsoc-surface) 0%, var(--lwsoc-surface-2) 100%) !important;
    border-bottom: 1px solid rgba(18, 19, 20, 0.06);
}

.bread-crumb .book-img {
    display: none;
}

.breadcrumb {
    padding: 26px 0 0;
}

.breadcrumb-item {
    padding: 6px 0;
}

.breadcrumb span,
.breadcrumb i {
    color: var(--lwsoc-muted);
    font-size: 14px;
    padding: 0;
}

.breadcrumb-item.active span {
    color: var(--lwsoc-ink);
    font-weight: 500;
}

.breadcrumb a {
    transition: color 0.2s var(--lwsoc-ease);
}

.breadcrumb a:hover span,
.breadcrumb a:hover i {
    color: var(--lwsoc-primary);
}

.bread-crumb h1 {
    color: var(--lwsoc-ink);
    font-size: 34px;
    font-weight: 700;
    margin: 6px 0 36px;
}

@media (max-width: 767px) {
    .breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .bread-crumb h1 {
        font-size: 26px;
        margin-bottom: 26px;
    }
}

/* --------------------------------------------------------------------------
   7. Footer refinements
   -------------------------------------------------------------------------- */
.ft2-border-bottom {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.ft2-newsLetter-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--lwsoc-radius);
    color: #fff;
    transition: border-color 0.2s var(--lwsoc-ease), box-shadow 0.2s var(--lwsoc-ease);
}

.ft2-newsLetter-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.ft2-newsLetter-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--lwsoc-primary);
    box-shadow: var(--lwsoc-focus-ring);
    color: #fff;
    outline: none;
}

.ft2-newsLetter-btn {
    background: var(--lwsoc-gradient) !important;
    border-radius: var(--lwsoc-radius-sm);
    transition: filter 0.2s var(--lwsoc-ease);
}

.ft2-newsLetter-btn:hover {
    filter: brightness(1.08);
}

.lms2-footer-section .ft2-socila-link svg path,
.lms2-footer-section .ft2-nav-link svg path {
    fill: #CED6EF;
}

.lms2-footer-section .ft2-socila-link {
    transition: 0.25s var(--lwsoc-ease);
}

.lms2-footer-section .ft2-socila-link:hover {
    transform: translateY(-2px);
}

/* Homepage glass refinements live in home_university2_assets.php, whose inline
   style block loads after this sheet and owns those component styles. */