/* ============================================================
   PrepResults.in — pr-mobile.css  v2.0
   Upload to public_html/pr-mobile.css  (replace existing)
============================================================ */

/* ── GLOBAL OVERFLOW FIX — covers ALL page templates ── */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
img, table, iframe, video {
  max-width: 100% !important;
}

/* ── LARGE DESKTOP ≤1200px ── */
@media (max-width: 1200px) {
  .fi2 { grid-template-columns: 1.2fr repeat(5, 1fr) !important; }
}

/* ── TABLET LANDSCAPE ≤992px ── */
@media (max-width: 992px) {
  .fi2 { grid-template-columns: repeat(4, 1fr) !important; }
  .wg  { grid-template-columns: repeat(2, 1fr) !important; }
  .pw  { gap: 20px !important; }
  .hni { flex-wrap: wrap !important; }
  .hico { width: 70px !important; height: 70px !important; font-size: 32px !important; }
  .hc h1 { font-size: 20px !important; }
}

/* ── TABLET ≤768px — MAIN MOBILE FIX ── */
@media (max-width: 768px) {
  .hn  { display: none !important; }
  .hbg { display: flex !important; }
  .sw  { max-width: none !important; flex: 1 !important; }

  /* Sidebar collapses below content */
  .pw  { grid-template-columns: 1fr !important; padding: 0 14px !important; gap: 14px !important; }
  .sb2 { order: 2 !important; width: 100% !important; }

  .hc h1 { font-size: 18px !important; }
  .hico  { width: 64px !important; height: 64px !important; font-size: 28px !important; }
  .wg    { grid-template-columns: 1fr 1fr !important; }
  .fi2   { grid-template-columns: 1fr 1fr !important; }
  .fb    { grid-column: 1 / -1 !important; }
  .cn    { top: 54px !important; }
  .cc    { gap: 6px !important; }
  .chip  { padding: 4px 8px !important; font-size: 11px !important; }
  .ha    { gap: 8px !important; flex-wrap: wrap !important; }
}

/* ── MOBILE ≤600px ── */
@media (max-width: 600px) {
  .hi  { padding: 8px 14px !important; gap: 8px !important; }
  .logo img { height: 32px !important; }
  .sw input { font-size: 12px !important; padding: 7px 12px 7px 32px !important; }
  .bc  { font-size: 11px !important; padding: 8px 14px !important; }
  .hni { padding: 0 14px !important; }
  .hc h1 { font-size: 17px !important; }
  .hm  { gap: 8px !important; }
  .ha  { flex-direction: column !important; align-items: stretch !important; padding: 12px 0 14px !important; }
  .bp, .bo, .bo2 { width: 100% !important; text-align: center !important; }
  .tcard { gap: 10px !important; padding: 10px 12px !important; }
  .tico  { width: 36px !important; height: 36px !important; font-size: 15px !important; }
  .tt    { font-size: 13px !important; }
  .bt    { font-size: 10px !important; padding: 2px 6px !important; }
  .bs    { padding: 5px 11px !important; font-size: 11px !important; }
  .sh    { padding: 12px 15px !important; }
  .sh h2 { font-size: 15px !important; }
  .sb    { padding: 12px 15px !important; }
  .wg    { grid-template-columns: 1fr 1fr !important; }
  .wi    { font-size: 22px !important; }
  .wt    { font-size: 12px !important; }
  .wd    { font-size: 11px !important; }
  .fl li { font-size: 12.5px !important; padding: 7px 0 !important; }
  .tw    { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  table  { font-size: 12px !important; min-width: 300px !important; }
  table th, table td { padding: 8px 10px !important; }
  .sch h3 { font-size: 14px !important; }
  .sr2    { font-size: 12px !important; }
  .bb     { padding: 10px !important; font-size: 13px !important; }
  .mo     { padding: 12px !important; }
  .mb     { max-width: 96% !important; }
  .mh h3  { font-size: 16px !important; }
  .mbd    { padding: 14px 16px !important; }
  .mbd input, .mbd select { padding: 8px 10px !important; font-size: 12.5px !important; }
  .fi2    { grid-template-columns: 1fr 1fr !important; gap: 16px !important; padding: 0 14px !important; }
  .fb     { grid-column: 1 / -1 !important; text-align: center !important; }
  .fbt    { font-size: 11px !important; padding: 12px !important; }
  /* Exam info page specific */
  .page-content, .content-wrapper, .main-content { padding: 0 14px !important; }
  .info-table { width: 100% !important; }
}

/* ── SMALL MOBILE ≤480px ── */
@media (max-width: 480px) {
  .hni  { flex-direction: column !important; gap: 10px !important; }
  .hico { width: 52px !important; height: 52px !important; font-size: 24px !important; }
  .hc h1 { font-size: 16px !important; }
  .ha   { flex-direction: column !important; align-items: stretch !important; }
  .bp, .bo, .bo2 { width: 100% !important; text-align: center !important; }
  .wg   { grid-template-columns: 1fr !important; }
  .fi2  { grid-template-columns: 1fr !important; gap: 18px !important; }
  .fb, .fc { text-align: center !important; }
  .tb2  { padding: 8px 10px !important; font-size: 11px !important; }
  .tc   { font-size: 9px !important; padding: 1px 4px !important; }
  .ann  { font-size: 12px !important; padding: 6px 12px !important; }
}

/* ── SMALL PHONE ≤380px ── */
@media (max-width: 380px) {
  body  { font-size: 14px !important; } /* NO width:110% */
  .hi   { padding: 7px 12px !important; }
  .logo img { height: 28px !important; }
  .hc h1 { font-size: 15px !important; }
  .pw   { padding: 0 10px !important; }
  .tcard { flex-wrap: wrap !important; }
  .ta   { width: 100% !important; flex-direction: row !important; justify-content: space-between !important; margin-top: 6px !important; }
  .tico { width: 32px !important; height: 32px !important; font-size: 14px !important; }
  .tt   { font-size: 12px !important; }
}

/* ── TINY ≤320px ── */
@media (max-width: 320px) {
  .ci a  { padding: 6px 8px !important; font-size: 11px !important; }
  .tb2   { padding: 6px 8px !important; font-size: 10px !important; }
  .tcard { padding: 8px 10px !important; }
  .tico  { width: 28px !important; height: 28px !important; font-size: 12px !important; }
}

/* ── LANDSCAPE PHONE (short screen) ── */
@media (max-height: 600px) {
  .mb  { max-height: 88vh !important; }
  .mbd { padding: 10px 14px !important; }
  .mh  { padding: 12px 16px !important; }
}

/* ── TOUCH DEVICES ── */
@media (hover: none) and (pointer: coarse) {
  .tcard, .rc, .ci a, .tb2, .bb, .bp, .bo, .bo2, .bs, .fq, .fq_b {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }
  .tcard:active, .rc:active { opacity: 0.7; }
  .bs  { min-height: 36px !important; }
  .tb2 { min-height: 38px !important; }
  .bb  { min-height: 44px !important; }
}