/* ============================================================================
   Online Admission — printable receipt
   Two A4 "sheets" that look the same on screen and on paper. Screen shows a
   toolbar and a page shadow; print drops both and lets each sheet break.
   ========================================================================== */

.ar-wrap {
  --ar-line: #000;
  --ar-sec-bg: #f2f2f2;
  font-family: "Times New Roman", "Nikosh", "SolaimanLipi", serif;
  color: #000;
  font-size: 12px;
  line-height: 1.45;
}

/* ---------- toolbar (screen only) ---------------------------------------- */
.ar-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 0 18px;
}

.ar-btn {
  border: none;
  border-radius: 6px;
  padding: 10px 22px;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ar-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ar-btn i { margin-right: 6px; }

.ar-btn-print { background: var(--theme-color, #17a2b8); }
.ar-btn-pdf   { background: #c0392b; }
.ar-btn-xls   { background: #1d6f42; }
.ar-btn-pay   { background: #e67e22; }

.ar-pdf-hint {
  display: none;
  max-width: 780px;
  margin: 0 auto 16px;
  padding: 10px 14px;
  border: 1px solid #ffe08a;
  background: #fff8e1;
  border-radius: 6px;
  font-size: 13px;
  color: #7a5b00;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- the sheet ----------------------------------------------------- */
.ar-sheet {
  background: #fff;
  width: 100%;
  max-width: 820px;
  margin: 0 auto 24px;
  padding: 22px 26px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
}

/* ---------- institute header --------------------------------------------- */
.ar-head { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.ar-head td { vertical-align: middle; padding: 0; }

.ar-head-logo { width: 90px; text-align: left; }
.ar-head-logo img { max-width: 78px; max-height: 78px; object-fit: contain; }

.ar-head-mid { text-align: center; }
.ar-head-mid h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 2px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.ar-head-mid div { font-size: 12px; line-height: 1.35; }

.ar-head-photo { width: 96px; text-align: right; }
.ar-head-photo img {
  width: 82px; height: 96px;
  object-fit: cover;
  border: 1px solid #999;
}
.ar-photo-ph {
  width: 82px; height: 96px;
  border: 1px solid #999;
  background: #fafafa;
  display: inline-block;
}

/* ---------- title row ----------------------------------------------------- */
.ar-title-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  position: relative;
  margin: 12px 0 8px;
  border-top: 2px solid var(--ar-line);
  padding-top: 8px;
}
.ar-title {
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-transform: uppercase;
}
.ar-roll {
  position: absolute;
  right: 0;
  font-size: 12px;
  font-weight: 700;
}

/* ---------- the data grid ------------------------------------------------- */
.ar-tbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 10px;
}
.ar-tbl td, .ar-tbl th {
  border: 1px solid var(--ar-line);
  padding: 4px 7px;
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* label / value split — the label column is the narrower one */
.ar-tbl .ar-lbl { width: 18%; }
.ar-tbl .ar-val { width: 32%; font-weight: 600; }
.ar-tbl .ar-val[colspan="3"] { width: auto; }

.ar-sec {
  background: var(--ar-sec-bg);
  font-weight: 700;
  text-align: center;
  text-transform: none;
  letter-spacing: .2px;
}

.ar-amt { text-align: right; }
.ar-total { font-weight: 700; }
.ar-empty { text-align: center; color: #666; }

/* ---------- education table ----------------------------------------------
   Eight narrow columns, so it sizes to content rather than the fixed 18/32
   split the label/value grid uses — but it still fills the sheet width. */
.ar-tbl-edu { table-layout: auto; width: 100%; }
.ar-tbl-edu .ar-th th {
  background: #fff;
  font-weight: 700;
  text-align: center;
  font-size: 11.5px;
}
.ar-tbl-edu td { text-align: center; font-size: 11.5px; }

/* ---------- page 2: QR + checklist ---------------------------------------- */
.ar-tbl-notes { table-layout: fixed; }
.ar-qr {
  width: 210px;
  text-align: center;
  vertical-align: middle;
}
.ar-qr img { width: 165px; height: 165px; }

.ar-notes { padding: 14px 18px !important; }
.ar-notes-title { font-weight: 700; margin: 0 0 8px; font-size: 13px; }
.ar-notes-list { margin: 0; padding-left: 20px; }
.ar-notes-list li { margin-bottom: 5px; font-size: 12.5px; }

.ar-dev {
  border: 1px solid var(--ar-line);
  border-top: none;
  padding: 5px 8px;
  font-size: 11px;
}

/* ---------- responsive (screen) ------------------------------------------- */
@media (max-width: 640px) {
  .ar-sheet { padding: 14px; }
  .ar-head-mid h1 { font-size: 15px; }
  .ar-tbl { font-size: 11px; }
  .ar-tbl .ar-lbl, .ar-tbl .ar-val { width: auto; }
  .ar-qr { width: 120px; }
  .ar-qr img { width: 100px; height: 100px; }
  /* The education table is the one thing that cannot usefully reflow. */
  .ar-tbl-edu { display: block; overflow-x: auto; }
}

/* ============================================================================
   PRINT — this is what the PDF button produces too, so the paper copy and the
   PDF cannot drift apart.
   ========================================================================== */
@media print {
  @page { size: A4 portrait; margin: 10mm; }

  /* Hide everything, then reveal only the receipt. Walking up from .ar-wrap
     keeps each ancestor visible without having to know the site's layout. */
  body * { visibility: hidden !important; }
  .ar-wrap, .ar-wrap * { visibility: visible !important; }
  .ar-wrap {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
  }

  .no-print, .ar-toolbar, .ar-pdf-hint { display: none !important; }

  .ar-sheet {
    box-shadow: none;
    border: none;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    page-break-after: always;
    break-after: page;
  }
  .ar-sheet:last-child { page-break-after: auto; break-after: auto; }

  /* Keep a block from splitting across the page fold. */
  .ar-tbl, .ar-head { page-break-inside: avoid; break-inside: avoid; }
  .ar-tbl tr { page-break-inside: avoid; break-inside: avoid; }

  /* Backgrounds must survive the printer's "no background" default. */
  .ar-sec {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: var(--ar-sec-bg) !important;
  }
}