/* ==========================================================================
   Teachers Live — PHASE 10 FIX3
   Homepage review: nav cleanup, OTP UX security, tablet cards, Arabic clipping.
   ========================================================================== */

/* Homepage already contains role switching inside the form:
   hide the duplicated Student/Teacher buttons in the public header. */
.tl-public:has(.tl-cinema-entry)
.tl7ga-public-nav-shell > .container-xl > .d-flex.gap-2{
  display:none!important;
}

/* Public legal links are desktop/tablet only. */
.tl10f3-legal-nav{
  display:none!important;
}
@media(min-width:768px){
  .tl10f3-legal-nav{
    display:inline-flex!important;
  }
}

/* Keep public navigation centered after the duplicated login CTAs are removed. */
.tl-public:has(.tl-cinema-entry) .tl7e-public-nav{
  margin-inline-start:auto!important;
  margin-inline-end:0!important;
}

/* IMPORTANT: Arabic glyphs/diacritics must never be clipped. */
.tl-cinema-entry-copy,
.tl-cinema-entry-copy h1,
.tl-cinema-entry-copy h1 em{
  overflow:visible!important;
}
.tl-cinema-entry-copy h1{
  line-height:1.06!important;
  padding-block:.08em .13em!important;
  text-wrap:balance;
}
.tl-cinema-entry-copy h1 em{
  display:inline-block;
  padding-inline:.03em;
}

/* OTP professional flow */
.tl10f3-otp-flow{
  display:grid;
  gap:.9rem;
}
.tl10f3-locked-mobile{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:.75rem;
  padding:.8rem .9rem;
  border:1px solid rgba(8,123,100,.14);
  border-radius:16px;
  background:linear-gradient(135deg,#f3faf7,#fff);
}
.tl10f3-lock-icon{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:12px;
  color:#fff;
  font-weight:900;
  background:linear-gradient(135deg,#087b64,#0ca581);
  box-shadow:0 8px 20px rgba(8,123,100,.18);
}
.tl10f3-locked-mobile small{
  display:block;
  color:#7a8795;
  font-size:.7rem;
  margin-bottom:.12rem;
}
.tl10f3-locked-mobile strong{
  display:block;
  color:#08243a;
  font-size:1rem;
  letter-spacing:.08em;
}
.tl10f3-lock-badge{
  padding:.32rem .55rem;
  border-radius:999px;
  color:#087b64;
  background:#e7f6f0;
  font-size:.65rem;
  font-weight:900;
  white-space:nowrap;
}
.tl10f3-security-note{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  padding:.65rem .75rem;
  border-radius:13px;
  color:#617080;
  background:#f5f7f6;
  border:1px solid rgba(4,31,52,.055);
}
.tl10f3-security-note span{
  flex:0 0 auto;
  line-height:1.4;
}
.tl10f3-security-note small{
  line-height:1.7;
  font-size:.7rem;
}
.tl10f3-resend-form{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.6rem;
  min-height:40px;
}
.tl10f3-resend-btn{
  min-height:38px!important;
  padding:.45rem .8rem!important;
  color:#405064!important;
  font-size:.75rem!important;
}
.tl10f3-resend-btn:disabled{
  opacity:.55;
  transform:none!important;
  cursor:not-allowed;
}
.tl10f3-countdown{
  color:#768493;
  font-size:.72rem;
  font-weight:800;
  direction:rtl;
}
.tl10f3-alert{
  border-radius:14px!important;
  font-size:.78rem;
  line-height:1.7;
}

/* Tablet: the three value cards must stay in ONE row.
   No wrapping, therefore no artificial second row / vertical scroll. */
@media(min-width:576px) and (max-width:1199.98px){
  .tl-cinema-entry-features{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:.55rem!important;
    width:100%;
    max-width:760px;
    margin-inline:auto!important;
  }
  .tl-cinema-entry-features>div{
    min-width:0!important;
    width:auto!important;
    margin:0!important;
  }
}

/* Tablet portrait: keep login page within a natural viewport without a giant tail. */
@media(min-width:576px) and (max-width:991.98px) and (orientation:portrait){
  .tl-cinema-entry-grid{
    min-height:100svh!important;
    align-content:center!important;
    padding-top:5.1rem!important;
    padding-bottom:1.25rem!important;
  }
  .tl-cinema-entry-story{
    padding-top:.2rem!important;
  }
  .tl-cinema-entry-copy h1{
    line-height:1.02!important;
  }
}

/* Phone: legal/nav links remain hidden; title keeps safe Arabic line-height. */
@media(max-width:575.98px){
  .tl-public:has(.tl-cinema-entry) .tl7e-public-nav{
    display:none!important;
  }
  .tl-cinema-entry-copy h1{
    line-height:1.00!important;
    padding-block:.09em .14em!important;
  }
  .tl10f3-locked-mobile{
    grid-template-columns:auto minmax(0,1fr)!important;
  }
  .tl10f3-lock-badge{
    grid-column:1/3;
    justify-self:start;
  }
  .tl10f3-security-note small{
    font-size:.66rem;
  }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .tl10f3-lock-icon{
    box-shadow:none!important;
  }
}