﻿/* Teachers Live — PHASE 11 FIX2
   Admin modal hard fix + public pages exact cinematic-home treatment. */

/* ==========================================================================
   ADMIN — definitive modal stack fix
   ========================================================================== */
.modal.tl11-body-modal{
  position:fixed!important;
  inset:0!important;
  z-index:3060!important;
}
.modal.tl11-body-modal.show{
  display:block!important;
}
.modal.tl11-body-modal .modal-dialog{
  position:relative;
  z-index:3061!important;
  pointer-events:auto!important;
}
.modal-backdrop,
.modal-backdrop.tl11-admin-backdrop{
  z-index:3050!important;
}
body.modal-open .tl-admin-shell{
  pointer-events:auto;
}

/* ==========================================================================
   PUBLIC — exact visual language of the cinematic Home/Login
   ========================================================================== */
body:has(.tl11-public-page){
  background:#04111f!important;
}
body:has(.tl11-public-page) .tl-public{
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 16%,rgba(199,154,43,.13),transparent 20rem),
    radial-gradient(circle at 10% 72%,rgba(8,152,119,.17),transparent 27rem),
    linear-gradient(135deg,#03101f 0%,#061a2c 46%,#073a35 100%)!important;
}
body:has(.tl11-public-page) .tl7e-public-nav-shell,
body:has(.tl11-public-page) > .navbar,
body:has(.tl11-public-page) .navbar{
  background:rgba(4,16,29,.70)!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  box-shadow:none!important;
  backdrop-filter:blur(18px) saturate(135%);
}
body:has(.tl11-public-page) .navbar .nav-link,
body:has(.tl11-public-page) .navbar-brand strong{
  color:#fff!important;
}
body:has(.tl11-public-page) .tl-brand-sub{
  color:#e4c66e!important;
}
body:has(.tl11-public-page) .tl7e-public-footer{
  background:rgba(2,11,20,.72)!important;
  border-top:1px solid rgba(255,255,255,.06)!important;
}

.tl11-public-page{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:calc(100vh - 70px);
  color:#fff!important;
  background:
    radial-gradient(circle at 86% 12%,rgba(199,154,43,.12),transparent 18rem),
    radial-gradient(circle at 9% 67%,rgba(8,152,119,.17),transparent 26rem),
    linear-gradient(135deg,#03101f 0%,#061b2d 48%,#073a35 100%)!important;
}
.tl11-public-page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.45;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.024) 0 1px,transparent 1px 22px),
    linear-gradient(100deg,rgba(0,0,0,.08),transparent 58%);
  mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.7) 62%,transparent);
}
.tl11-public-page::after{
  content:"TEACHERS LIVE";
  position:fixed;
  inset:auto auto -40px 4vw;
  z-index:-1;
  pointer-events:none;
  font-size:clamp(4.5rem,11vw,10rem);
  font-weight:900;
  letter-spacing:-.07em;
  color:rgba(255,255,255,.025);
  white-space:nowrap;
}

/* One continuous page, not a dark hero + unrelated white site */
.tl11-public-hero{
  min-height:330px;
  display:flex;
  align-items:flex-end;
  padding:clamp(64px,8vw,110px) 0 52px!important;
  background:transparent!important;
}
.tl11-public-hero::before,
.tl11-public-hero::after{display:none!important}
.tl11-public-hero .container-xl{
  width:min(1180px,calc(100% - 48px));
  margin-inline:auto;
}
.tl11-public-eyebrow{
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(255,255,255,.06)!important;
  color:#e9f7f2!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.tl11-public-hero h1{
  color:#fff!important;
  max-width:900px!important;
  margin:1rem 0 .7rem!important;
  font-size:clamp(2.8rem,6vw,5.6rem)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
  text-shadow:0 10px 35px rgba(0,0,0,.18);
}
.tl11-public-hero p{
  color:rgba(233,241,244,.72)!important;
  max-width:780px!important;
  font-size:1.02rem!important;
}

.tl11-public-section,
.tl11-public-section.alt,
.tl11-error-wrap{
  background:transparent!important;
  color:#fff!important;
}
.tl11-public-section{
  padding:0 0 clamp(54px,7vw,90px)!important;
}
.tl11-public-section > .container-xl,
.tl11-error-wrap > .container-xl{
  width:min(1180px,calc(100% - 48px));
  margin-inline:auto;
}

/* Glass surfaces matching Home/Login card language */
.tl11-home-card,
.tl11-legal-card,
.tl11-contact-card,
.tl11-error-card{
  border:1px solid rgba(255,255,255,.095)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035))!important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(18px) saturate(125%);
}
.tl11-home-card,
.tl11-contact-card{
  border-radius:26px!important;
}
.tl11-home-card h2,
.tl11-home-card h3,
.tl11-legal-card h2,
.tl11-contact-card strong,
.tl11-error-card h1{
  color:#fff!important;
}
.tl11-home-card p,
.tl11-home-card li,
.tl11-legal-card p,
.tl11-contact-card span,
.tl11-contact-card small,
.tl11-error-card p{
  color:rgba(226,236,240,.72)!important;
}
.tl11-feature-icon{
  background:linear-gradient(135deg,rgba(10,152,119,.20),rgba(199,154,43,.15))!important;
  color:#d9bd65!important;
  border:1px solid rgba(255,255,255,.07);
}
.tl11-clean-list li{
  border-color:rgba(255,255,255,.075)!important;
  background:rgba(255,255,255,.035)!important;
  color:rgba(236,243,245,.82)!important;
}
.tl11-clean-list li::before{
  background:rgba(20,196,148,.14)!important;
  color:#43d6ad!important;
}

/* Legal pages */
.tl11-legal-note{
  border-color:rgba(199,154,43,.19)!important;
  background:rgba(199,154,43,.075)!important;
  color:#ead68e!important;
  backdrop-filter:blur(14px);
}
.tl11-legal-card{
  border-radius:28px!important;
  max-width:980px!important;
}
.tl11-legal-card h2{
  color:#e8cb72!important;
}
.tl11-legal-card a{
  color:#57d9b4!important;
}

/* Contact — readable icon system */
.tl11-contact-grid{
  gap:1rem!important;
}
.tl11-contact-card-primary{
  background:
    radial-gradient(circle at 88% 5%,rgba(199,154,43,.11),transparent 10rem),
    linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035))!important;
}
.tl11-contact-card:hover,
.tl11-social-link:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(55,210,169,.25)!important;
  box-shadow:0 30px 76px rgba(0,0,0,.27)!important;
}
.tl11-social-grid{
  gap:.9rem!important;
}
.tl11-social-link{
  min-height:92px!important;
  border:1px solid rgba(255,255,255,.085)!important;
  background:rgba(255,255,255,.055)!important;
  color:#fff!important;
  border-radius:20px!important;
  backdrop-filter:blur(15px);
}
.tl11-social-link strong{
  color:#fff!important;
  font-size:.96rem!important;
}
.tl11-social-link span{
  color:rgba(224,235,239,.67)!important;
}
.tl11-social-icon,
.tl11-social-link .tl11-social-icon{
  width:50px!important;
  height:50px!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,rgba(8,116,93,.42),rgba(7,24,44,.90))!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}
.tl11-social-icon svg{
  width:25px!important;
  height:25px!important;
  display:block;
  stroke:currentColor;
}
.tl11-social-icon svg.fill-icon{
  fill:currentColor;
  stroke:none;
}
.tl11-contact-card .btn-primary{
  background:linear-gradient(135deg,#08745d,#0a9877)!important;
  border:0!important;
  box-shadow:0 10px 28px rgba(7,116,93,.24)!important;
}

/* Error page uses same composition */
.tl11-error-wrap{
  min-height:420px!important;
  padding:0 0 80px!important;
}
.tl11-error-card{
  border-radius:30px!important;
}
.tl11-error-code{
  background:linear-gradient(135deg,#0a896d,#c79a2b)!important;
  box-shadow:0 12px 36px rgba(0,0,0,.24)!important;
}
.tl11-error-card .btn-outline-primary{
  color:#fff!important;
  border-color:rgba(255,255,255,.24)!important;
  background:rgba(255,255,255,.05)!important;
}

@media(max-width:767.98px){
  .tl11-public-hero{min-height:270px;padding:48px 0 34px!important}
  .tl11-public-hero .container-xl,
  .tl11-public-section > .container-xl,
  .tl11-error-wrap > .container-xl{
    width:min(100% - 28px,1180px);
  }
  .tl11-public-hero h1{font-size:2.65rem!important}
}
@media(max-width:575.98px){
  .tl11-home-card,.tl11-contact-card,.tl11-legal-card,.tl11-error-card{border-radius:22px!important}
  .tl11-social-grid{grid-template-columns:1fr!important}
}
