/* css/req-popup.css - the "More info" popup on requirement cards (inc/req-popup.php,
   js/tt-req-popup.js). Loaded by tt_rq_dialog() on /students and /tutor-area/students. */
.tt-rq{ display:flex; flex-direction:column; width:min(560px, calc(100vw - 20px)); max-width:none;
  max-height:min(80vh, 720px); margin:auto; padding:0; border:0; border-radius:var(--r-sm, 10px);
  background:var(--white, #FFFFFF); color:var(--ink-700); box-shadow:var(--shadow-float, 0 12px 34px rgba(11,37,69,.12));
  overflow:hidden; }
.tt-rq:not([open]){ display:none; }   /* the flex above beats the UA's dialog:not([open]) */
.tt-rq::backdrop{ background:rgba(11,37,69,.55); }
.tt-rq[open]{ animation:tt-rq-in .25s ease-out; }
.tt-rq[open]::backdrop{ animation:tt-rq-fade .25s ease-out; }
@keyframes tt-rq-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes tt-rq-fade{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .tt-rq[open], .tt-rq[open]::backdrop{ animation:none; } }

.tt-rq__head{ display:flex; align-items:flex-start; gap:var(--sp-3, 12px); padding:14px 12px 12px 20px;
  border-bottom:1px solid var(--line); }
.tt-rq__title{ flex:1 1 auto; min-width:0; margin:6px 0 0; font:700 17px/1.4 var(--font-display); color:var(--navy-900);
  overflow-wrap:anywhere; }
.tt-rq__close{ flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0;
  border:0; border-radius:8px; background:transparent; color:var(--ink-700); cursor:pointer; }
.tt-rq__close:hover{ background:var(--blue-50); color:var(--blue-700); }
.tt-rq__close:focus-visible{ outline:2px solid var(--blue-600); outline-offset:2px; }

.tt-rq__body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:4px 20px 8px; }
.tt-rq__table{ width:100%; border-collapse:collapse; font-size:15px; line-height:1.5; }
.tt-rq__table th, .tt-rq__table td{ padding:10px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.tt-rq__table tr:last-child th, .tt-rq__table tr:last-child td{ border-bottom:0; }
.tt-rq__table th{ width:38%; padding-right:var(--sp-3, 12px); font-weight:600; color:var(--ink-500); }
.tt-rq__table td{ color:var(--ink-900); overflow-wrap:anywhere; }
.tt-rq__need{ white-space:normal; }
.tt-rq__otp{ display:inline-flex; align-items:center; gap:4px; margin-left:4px; padding:1px 8px; border-radius:6px;
  background:var(--green-50); font-size:12px; font-weight:700; line-height:1.6; color:var(--green-700); vertical-align:1px; }

.tt-rq__foot{ display:flex; justify-content:flex-end; padding:12px 20px; border-top:1px solid var(--line); background:#F8FAFC; }
.tt-rq__foot[hidden]{ display:none; }
.tt-rq__foot > div{ margin-left:0; }
.tt-rq__foot form{ margin:0; }

@media (max-width:600px){
  .tt-rq__head{ padding:10px 6px 10px 14px; }
  .tt-rq__title{ font-size:16px; }
  .tt-rq__body{ padding:2px 14px 6px; }
  .tt-rq__table{ font-size:14px; }
  .tt-rq__table th{ width:40%; }
  .tt-rq__foot{ padding:10px 14px; }
  .tt-rq__foot > div{ flex:1 1 auto; justify-content:stretch; }
  .tt-rq__foot > div > *{ flex:1 1 auto; }
  .tt-rq__foot form > button{ width:100%; justify-content:center; }
}
.tt-rq__pv{ white-space:nowrap; }   /* Profile verified (Part 15) */