/* =========================================================
   Redeemer's University Student Portal – Main Stylesheet
   ========================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button, input, select, textarea, a, .icon-item, .sidebar-action-btn {
  touch-action: manipulation;
}

img {
  max-width: 100%;
}

body {
  background:
    repeating-linear-gradient(
      -45deg,
      #0b1e3c 0px,
      #0b1e3c 13px,
      #091730 13px,
      #091730 26px
    );
}

/* Hide all pages by default */
.page { display: none; }
.page.active { display: block; }

/* Content sections inside logged-in shell */
.content-section { display: none; }
.content-section.active { display: block; }

/* =====================================================================
   SHARED SITE HEADER (Patterned Diagonal Shade)
   ===================================================================== */
.site-header {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.08) 0px,
      rgba(255, 255, 255, 0.08) 12px,
      transparent 12px,
      transparent 24px
    ),
    linear-gradient(to bottom, #0e3768 0%, #1e5997 45%, #0e3768 100%);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: 2px solid #4a8fc0;
  min-height: 82px;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-logo-img {
  height: 74px;
  width: auto;
  object-fit: contain;
  display: block;
}

.logo-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #a0bcd8;
  background: #dce8f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.logo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.logo-placeholder-inner {
  font-size: 6.5px;
  color: #173d72;
  text-align: center;
  font-weight: bold;
  line-height: 1.3;
  padding: 3px;
}

.univ-name-block { color: white; }

.univ-name-line1 {
  font-size: 27px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  letter-spacing: 1px;
  display: block;
  line-height: 1;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

.univ-name-line2 {
  font-size: 21px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  letter-spacing: 1px;
  display: block;
  line-height: 1.1;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

/* User info top-right box */
.user-info-box {
  position: absolute;
  right: 8px;
  top: 5px;
  background: rgba(8, 18, 46, 0.88);
  color: white;
  font-size: 11px;
  padding: 5px 10px;
  border: 1px solid #4a8fc0;
  line-height: 1.7;
  min-width: 185px;
}

.user-info-box span { display: block; }

.ui-bold {
  font-weight: bold;
  color: #8dc8ee;
}

/* =====================================================================
   NAV BAR
   ===================================================================== */
.nav-bar {
  background: #2070a4;
  display: flex;
  align-items: stretch;
  padding: 0;
  border-bottom: 2px solid #155a8a;
}

.nav-bar a,
.nav-bar button {
  color: white;
  text-decoration: none;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: bold;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: Arial, sans-serif;
  letter-spacing: 0.3px;
}

.nav-bar a:hover,
.nav-bar button:hover,
.nav-bar a.active {
  background: #155a8a;
  text-decoration: underline;
}

/* =====================================================================
   ICON BAR (Matching Image 5)
   ===================================================================== */
.icon-bar {
  background: #17436b;
  padding: 6px 8px;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  border-bottom: 2px solid #0f2d4a;
  flex-wrap: wrap;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  width: 82px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  padding: 4px 3px;
  background: none;
  border: none;
  font-family: Arial, sans-serif;
  border-radius: 3px;
  transition: background 0.15s;
}

.icon-item:hover { background: rgba(255,255,255,0.18); }

.icon-img-wrap {
  width: 50px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.icon-img {
  max-width: 46px;
  max-height: 42px;
  object-fit: contain;
}

/* Legacy emoji support */
.icon-emoji-wrap {
  width: 50px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.icon-emoji { font-size: 32px; line-height: 1; }

.icon-label {
  font-size: 11px;
  color: #ffffff;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  max-width: 78px;
  margin-top: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* =====================================================================
   LAYOUT WRAPPER (sidebar + main)
   ===================================================================== */
.layout-wrapper {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  gap: 10px;
  background: #c4d4e0;
  min-height: 560px;
}

/* =====================================================================
   STUDENT BRIEF SIDEBAR
   ===================================================================== */
.sidebar { width: 185px; flex-shrink: 0; }

.student-brief-box {
  border: 1px solid #888;
  background: white;
  padding: 4px 6px;
  font-size: 11.5px;
}

.brief-title {
  font-size: 12.5px;
  font-weight: bold;
  border-bottom: 1px solid #999;
  padding-bottom: 3px;
  margin-bottom: 5px;
}

.change-pic-link {
  display: block;
  text-align: center;
  font-size: 11px;
  color: #000;
  background: #e0e0e0;
  border: 1px solid #bbb;
  padding: 2px 4px;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 4px;
}

.change-pic-link:hover { background: #ccc; }

.sidebar-photo {
  width: 165px;
  height: 148px;
  background: #b0bcc8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
  overflow: hidden;
  border: 1px solid #aaa;
}

.sidebar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-photo-placeholder {
  font-size: 11px;
  color: #555;
  text-align: center;
}

.brief-row {
  margin-bottom: 2px;
  font-size: 11.5px;
  line-height: 1.4;
}

.brief-lbl { font-weight: bold; }

.fees-warning {
  color: red;
  font-size: 10.5px;
  margin-bottom: 2px;
  line-height: 1.35;
}

.fees-amount-line {
  color: red;
  font-size: 11px;
  font-weight: bold;
  display: block;
  margin-bottom: 3px;
}

.breakdown-btn {
  display: inline-block;
  background: #2070a4;
  color: white;
  font-size: 10.5px;
  padding: 2px 10px;
  cursor: pointer;
  border: none;
  border-radius: 2px;
  margin-bottom: 5px;
  font-family: Arial, sans-serif;
}

.sidebar-hr { border: none; border-top: 1px solid #ddd; margin: 4px 0; }

.sidebar-action-btn {
  display: block;
  background: none;
  border: none;
  color: #333;
  font-size: 11.5px;
  cursor: pointer;
  text-align: left;
  padding: 1px 0;
  font-family: Arial, sans-serif;
  text-decoration: none;
  width: 100%;
}

.sidebar-action-btn:hover { text-decoration: underline; color: #000; }

.sidebar-plain-text {
  display: block;
  font-size: 11.5px;
  color: #333;
  padding: 1px 0;
}

.view-room-link {
  color: red;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  display: block;
  margin: 4px 0 3px;
}

.live-chat-dark-btn {
  display: block;
  width: 100%;
  background: #1a1a1a;
  color: white;
  text-align: center;
  padding: 5px 8px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  margin-top: 6px;
  font-family: Arial, sans-serif;
}

.live-chat-dark-btn:hover { background: #333; }

/* =====================================================================
   MAIN CONTENT AREA
   ===================================================================== */
.main-content {
  flex: 1;
  background: white;
  padding: 14px 16px;
  min-height: 520px;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
  background: linear-gradient(to bottom, #2a4e7e, #1a3058);
  color: #bbb;
  padding: 8px 14px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 3px solid #4a8fc0;
}

.footer-center { text-align: center; flex: 1; }
.footer-center em { color: #87ceeb; font-style: normal; }
.footer-ip { font-size: 11px; color: #aaa; }

/* =====================================================================
   LOGIN PAGE SPECIFIC
   ===================================================================== */
.login-hero-img {
  width: 100%;
  height: 170px;
  position: relative;
  overflow: hidden;
  background: #1e4568;
}

.login-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.login-hero-img::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50px;
  background: linear-gradient(to top, rgba(5,15,30,0.6), transparent);
}

.login-content-area {
  background: #ececec;
  padding: 0;
}

.login-card {
  background: white;
  margin: 12px 14px;
  padding: 14px 18px 16px;
  border: 1px solid #ccc;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.login-two-col {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

/* Left instructions */
.login-left { flex: 1; font-size: 12.5px; }

.login-left h4 {
  color: #0055aa;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 12px;
}

.login-left h4:first-child { margin-top: 0; }

.login-left ol {
  margin-left: 18px;
  margin-bottom: 7px;
}

.login-left ol li { margin-bottom: 3px; line-height: 1.45; }

.login-left a { color: #0055aa; }

.login-left p { font-size: 12px; line-height: 1.55; }

/* Right form */
.login-right { flex: 1.15; }

.login-form-box {
  border: 1px solid #bbb;
  padding: 12px 14px;
  background: #f5f5f5;
}

.login-form-title {
  text-align: center;
  color: #0055aa;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px;
}

.login-banner-pink {
  background: #f08080;
  height: 33px;
  margin-bottom: 12px;
  border: 1px solid #e06060;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 7px;
  gap: 7px;
}

.form-row label {
  width: 138px;
  text-align: right;
  font-size: 12.5px;
  flex-shrink: 0;
  color: #222;
}

.form-row input[type="text"],
.form-row input[type="password"] {
  flex: 1;
  padding: 3px 6px;
  border: 1px solid #aaa;
  font-size: 12.5px;
  background: #d8d8d8;
  font-family: Arial, sans-serif;
}

.signin-text-btn {
  display: block;
  text-align: center;
  background: none;
  border: none;
  color: #0000cc;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  margin: 6px auto 8px;
  font-family: Arial, sans-serif;
}

.signin-text-btn:hover { color: #0000aa; }

.login-links-area {
  font-size: 11.5px;
  text-align: center;
  color: #333;
}

.login-links-area p { margin-bottom: 3px; line-height: 1.5; }
.login-links-area a { color: #0000cc; }

.live-chat-dark-login {
  display: block;
  background: #1a1a1a;
  color: white;
  text-align: center;
  padding: 5px 20px;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  margin: 10px auto 0;
  font-family: Arial, sans-serif;
  min-width: 90px;
}

.live-chat-dark-login:hover { background: #333; }

/* =====================================================================
   WELCOME PAGE
   ===================================================================== */
.welcome-main { text-align: center; padding: 10px 0 20px; }

.welcome-h1 {
  color: #003399;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 8px;
}

.welcome-name {
  color: #cc0000;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.welcome-session {
  color: #003399;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.welcome-semester {
  color: #003399;
  font-size: 15px;
  font-weight: bold;
}

/* =====================================================================
   COURSE REGISTRATION PAGE
   ===================================================================== */
.reg-form-title {
  color: #cc0000;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 12px;
  font-family: Arial, sans-serif;
}

.reg-notes-panel {
  background: #b8d4e8;
  border-left: 6px solid #cc0000;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 12.5px;
  line-height: 1.5;
}

.note-label {
  color: #cc0000;
  font-weight: bold;
}

.reg-notes-panel ol { margin-left: 18px; color: #000; }
.reg-notes-panel ol li { margin-bottom: 2px; }
.reg-notes-panel a { color: #0000cc; text-decoration: underline; }

.unit-limits-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
  font-size: 12px;
  font-weight: bold;
}

.unit-red-indicator {
  width: 18px;
  height: 18px;
  background: #cc0000;
  flex-shrink: 0;
}

.section-hdr {
  font-size: 13.5px;
  font-weight: bold;
  margin: 14px 0 5px;
}

.course-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 12.5px;
}

.course-table th {
  background: #009999;
  color: white;
  padding: 4px 7px;
  text-align: left;
  font-size: 12.5px;
  font-weight: bold;
}

.course-table td {
  padding: 3px 7px;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: middle;
}

.course-table tr:nth-child(even) td { background: #f5f5f5; }
.course-table tr:nth-child(odd) td { background: #fff; }

.course-table input[type="checkbox"] {
  cursor: pointer;
  width: 14px;
  height: 14px;
}

.submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 4px;
  border-top: 1px solid #ccc;
  margin-top: 10px;
}

.submit-reg-btn {
  background: #2070a4;
  color: white;
  border: none;
  padding: 5px 16px;
  cursor: pointer;
  font-size: 12.5px;
  font-family: Arial, sans-serif;
}

.submit-reg-btn:hover { background: #165e8a; }

.total-units-area { font-size: 12.5px; font-weight: bold; }

.total-units-num {
  display: inline-block;
  min-width: 28px;
  background: #f0f0f0;
  border: 1px solid #bbb;
  text-align: center;
  padding: 1px 6px;
  font-weight: bold;
}

/* =====================================================================
   MY PROFILE PAGE
   ===================================================================== */
.profile-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.profile-page-title {
  color: #003399;
  font-size: 17px;
  font-weight: bold;
}

.actions-btn {
  background: #606060;
  color: white;
  border: none;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
  font-family: Arial, sans-serif;
}

.actions-btn:hover { background: #444; }

.profile-box {
  border: 1px solid #ccc;
  padding: 10px 15px 15px;
}

.profile-section-title {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 14px;
}

.profile-section-title:first-child { margin-top: 0; }

.profile-divider {
  border: none;
  border-top: 1px solid #aaa;
  margin-bottom: 10px;
}

.profile-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 7px;
  font-size: 12.5px;
  padding: 0 8px;
}

.profile-label {
  width: 230px;
  text-align: right;
  padding-right: 16px;
  flex-shrink: 0;
  color: #444;
}

.profile-value { color: #000; flex: 1; }

.edit-profile-btn {
  background: #2070a4;
  color: white;
  border: none;
  padding: 5px 16px;
  cursor: pointer;
  font-size: 12.5px;
  font-family: Arial, sans-serif;
  display: block;
  margin: 16px auto 0;
}

.edit-profile-btn:hover { background: #165e8a; }

/* =====================================================================
   UPLOAD PASSPORT PAGE
   ===================================================================== */
.upload-page-title {
  color: #003399;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px;
}

.upload-form-box {
  border: 1px solid #ccc;
  padding: 15px 18px;
  max-width: 520px;
}

.upload-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}

.upload-row label { font-weight: bold; flex-shrink: 0; font-size: 13px; }

.upload-hint { color: #444; font-size: 12px; }

.passport-preview-wrap { margin-bottom: 6px; }

.passport-preview-box {
  width: 165px;
  height: 185px;
  background: #c0c0c0;
  border: 1px solid #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.passport-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.passport-ph-text { font-size: 11px; color: #555; }

.file-size-text {
  font-size: 11.5px;
  color: #333;
  margin-bottom: 10px;
  display: block;
}

.upload-pic-btn {
  background: #2070a4;
  color: white;
  border: none;
  padding: 5px 16px;
  cursor: pointer;
  font-size: 12.5px;
  font-family: Arial, sans-serif;
  display: block;
  margin-top: 10px;
}

.upload-pic-btn:hover { background: #165e8a; }

/* =====================================================================
   UPLOAD SIGNATURE PAGE
   ===================================================================== */
.sig-upload-box {
  border: 1px solid #ccc;
  padding: 15px 18px;
  max-width: 520px;
}

.sig-preview-box {
  width: 300px;
  height: 80px;
  border: 1px solid #aaa;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  overflow: hidden;
}

.sig-preview-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* =====================================================================
   MODAL POPUP
   ===================================================================== */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.modal-overlay.active { display: flex; }

.modal-box {
  background: white;
  border: 2px solid #2070a4;
  padding: 28px 36px;
  text-align: center;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  border-radius: 3px;
}

.modal-icon { font-size: 38px; margin-bottom: 8px; }

.modal-msg {
  font-size: 17px;
  font-weight: bold;
  color: #003399;
  margin-bottom: 18px;
}

.modal-close-btn {
  background: #2070a4;
  color: white;
  border: none;
  padding: 6px 24px;
  cursor: pointer;
  font-size: 13px;
  font-family: Arial, sans-serif;
  border-radius: 2px;
}

.modal-close-btn:hover { background: #165e8a; }

/* =====================================================================
   UTILITY
   ===================================================================== */
a { color: inherit; }

/* =====================================================================
   FEES PAYMENT PAGE
   ===================================================================== */
.fees-visa-header {
  color: #cc0000;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 12px;
  font-family: Arial, sans-serif;
  letter-spacing: 0.3px;
}

.fees-card,
.special-payments-card {
  border: 1px solid #7ea0b8;
  border-radius: 4px;
  padding: 12px 14px;
  background: #fff;
  margin-bottom: 12px;
}

.fees-card-title {
  color: #d32f2f;
  font-size: 13.5px;
  font-weight: bold;
  margin-bottom: 8px;
  font-family: Arial, sans-serif;
  text-align: left;
}

.remita-text-label {
  text-align: center;
  margin-bottom: 6px;
  font-size: 13px;
  color: #000;
  font-family: Arial, sans-serif;
  font-weight: 500;
}

.remita-select-wrap {
  text-align: center;
  margin-bottom: 6px;
}

.remita-select {
  font-size: 11.5px;
  padding: 1px 6px;
  font-family: Arial, sans-serif;
  border: 1px solid #888;
  border-radius: 2px;
  background: #fff;
}

.fees-radio-bar {
  background: #00a2e8;
  padding: 4px 10px;
  text-align: center;
  color: #000;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #0088cc;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.fees-radio-bar label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #000;
  font-size: 12px;
  font-weight: bold;
}

.fees-jamb-warning-box {
  border: 1px solid #7ea0b8;
  border-top: none;
  padding: 8px 12px;
  text-align: center;
  background: #fff;
  color: #d32f2f;
  font-size: 12px;
  line-height: 1.35;
  font-weight: normal;
  margin-bottom: 8px;
}

.fees-divider-line {
  border: none;
  border-top: 1px solid #aaa;
  margin: 10px 0;
}

.fees-fetch-btn-row {
  text-align: center;
  margin: 8px 0;
}

.fees-fetch-btn {
  background: #e8e8e8;
  border: 1px solid #888;
  border-radius: 2px;
  padding: 3px 14px;
  font-size: 11.5px;
  cursor: pointer;
  color: #000;
  font-family: Arial, sans-serif;
}

.fees-fetch-btn:hover {
  background: #d4d4d4;
}

.fees-card-warning-bold {
  text-align: center;
  font-size: 12.5px;
  font-weight: bold;
  color: #000;
  margin-top: 6px;
  font-family: Arial, sans-serif;
  line-height: 1.35;
}

/* =====================================================================
   PAYMENT HISTORY AND RECEIPT CARD & TABLE
   ===================================================================== */
.payment-history-card {
  border: 1px solid #7ea0b8;
  border-radius: 4px;
  padding: 12px 14px;
  background: #fff;
  margin-top: 12px;
}

.payment-history-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #000;
  margin-bottom: 10px;
}

.payment-history-icon {
  font-size: 14px;
  line-height: 1;
}

.payment-history-title {
  font-size: 12.5px;
  font-weight: bold;
  color: #000;
}

.payment-history-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.history-select {
  font-size: 11.5px;
  padding: 2px 6px;
  border: 1px solid #888;
  border-radius: 2px;
  max-width: 320px;
  flex: 1;
  min-width: 140px;
  font-family: Arial, sans-serif;
  background: #fff;
}

.view-history-btn {
  background: none;
  border: none;
  color: #0088cc;
  font-size: 11.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-family: Arial, sans-serif;
  font-weight: 500;
}

.view-history-btn:hover {
  color: #005599;
  text-decoration: underline;
}

.view-history-book-icon {
  color: #0088cc;
  font-size: 13px;
}

.payment-history-loading-msg {
  text-align: center;
  color: #d32f2f;
  font-size: 13px;
  font-weight: bold;
  margin: 14px 0;
  font-family: Arial, sans-serif;
}

.payment-history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 11px;
  font-family: Arial, sans-serif;
}

.payment-history-table th {
  background: #00a2e8;
  color: #000;
  font-weight: bold;
  padding: 5px 6px;
  border: 1px solid #0088cc;
  text-align: center;
  font-size: 11px;
}

.payment-history-table td {
  border: 1px solid #cbd5e1;
  padding: 4px 6px;
  text-align: center;
  font-size: 11px;
  background: #fff;
  color: #000;
  vertical-align: middle;
}

.payment-history-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.history-print-btn {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.history-print-icon {
  width: 22px;
  height: 20px;
  vertical-align: middle;
  display: inline-block;
  background: transparent !important;
}

.requery-link {
  color: #0000cc;
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
}

.requery-link:hover {
  text-decoration: underline;
}

.fees-aggregate-info {
  text-align: right;
  font-size: 13px;
  margin: 14px 0 8px;
  line-height: 1.6;
}

.fees-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 6px;
  font-size: 11.5px;
}

.fees-table th {
  background: #2070a4;
  color: white;
  padding: 5px 6px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 1px solid #1a5f8a;
}

.fees-table td {
  padding: 4px 6px;
  border: 1px solid #ccc;
  text-align: center;
  vertical-align: middle;
  font-size: 11.5px;
}

.fees-table td:nth-child(2) {
  text-align: left;
}

.fees-table tbody tr:nth-child(even) td {
  background: #f5f5f5;
}

.fees-table tbody tr:nth-child(odd) td {
  background: #fff;
}

.fees-total-row td {
  background: #cc0066 !important;
  color: white !important;
  font-weight: bold;
  font-size: 12px;
}

.pay-now-input {
  width: 72px;
  padding: 2px 4px;
  font-size: 11px;
  border: 1px solid #999;
  text-align: right;
  font-family: Arial, sans-serif;
  background: #fffde8;
}

.pay-now-input:focus {
  outline: 2px solid #2070a4;
  background: #fff;
}

.fees-table input[type="checkbox"] {
  cursor: pointer;
  width: 14px;
  height: 14px;
}

.fees-checkout-btn {
  background: #e8e8e8;
  border: 1px solid #999;
  padding: 5px 24px;
  cursor: pointer;
  font-size: 12.5px;
  font-family: Arial, sans-serif;
}

.fees-checkout-btn:hover {
  background: #d0d0d0;
}

/* =====================================================================
   FEES CONFIRMATION / ERROR MODALS
   ===================================================================== */
.fees-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

.fees-modal-overlay.active {
  display: flex;
}

.fees-modal-box {
  background: rgba(30, 30, 30, 0.95);
  padding: 28px 32px;
  border-radius: 14px;
  max-width: 400px;
  width: 90%;
  text-align: left;
}

.fees-modal-msg {
  color: white;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 22px;
}

.fees-modal-btns {
  display: flex;
  justify-content: flex-end;
  gap: 28px;
}

.fees-modal-cancel {
  background: none;
  border: none;
  color: #aaa;
  font-size: 16px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

.fees-modal-cancel:hover {
  color: #fff;
}

.fees-modal-ok,
.fees-modal-close {
  background: none;
  border: none;
  color: #4db8ff;
  font-size: 16px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

.fees-modal-ok:hover,
.fees-modal-close:hover {
  color: #80ccff;
}

/* Fees error modal overlay & dark card matching Image 1 */
.fees-error-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

.fees-error-modal-overlay.active {
  display: flex;
}

.fees-error-dark-card {
  background: #212832;
  color: #ffffff;
  border-radius: 14px;
  padding: 26px 30px 18px;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 12px 35px rgba(0,0,0,0.65);
  border: 1px solid #323d4d;
}

.fees-error-dark-text {
  color: #ffffff;
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: 24px;
  font-weight: 500;
}

.fees-error-dark-actions {
  display: flex;
  justify-content: flex-end;
}

.fees-error-dark-close-btn {
  background: none;
  border: none;
  color: #4da3ff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  font-family: inherit;
}

.fees-error-dark-close-btn:hover {
  color: #79b8ff;
}

/* =====================================================================
   BREAKDOWN MODAL
   ===================================================================== */
.breakdown-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 20px;
}

.breakdown-overlay.active {
  display: flex;
}

.breakdown-popup {
  background: white;
  border: 1px solid #999;
  max-width: 600px;
  width: 95%;
  margin-top: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.breakdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f5f5f5;
  border-bottom: 1px solid #ccc;
}

.breakdown-title {
  font-size: 14px;
  font-weight: bold;
  color: #222;
}

.breakdown-close-btn {
  background: none;
  border: 1px solid #aaa;
  padding: 2px 10px;
  cursor: pointer;
  font-size: 11px;
  color: #333;
  border-radius: 2px;
  font-family: Arial, sans-serif;
}

.breakdown-close-btn:hover {
  background: #eee;
}

.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.breakdown-section-hdr th {
  background: #2070a4;
  color: white;
  text-align: center;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: bold;
  border: 1px solid #1a6090;
}

.breakdown-col-hdr th {
  background: #b8d4e8;
  color: #111;
  padding: 5px 8px;
  text-align: left;
  font-size: 11.5px;
  font-weight: bold;
  border: 1px solid #99bcd0;
}

.breakdown-table td {
  padding: 3px 8px;
  border: 1px solid #ddd;
  font-size: 11.5px;
  background: white;
}

.breakdown-table tbody tr:nth-child(even) td {
  background: #f0f7ff;
}

.breakdown-highlight td {
  background: #ffffcc !important;
}

.breakdown-total td {
  font-weight: bold;
  background: #e8f0f8 !important;
  border-top: 2px solid #999;
}

/* =====================================================================
   CHANGE SECURITY INFORMATION SECTION (Image 3)
   ===================================================================== */
.sec-page-wrap {
  padding: 10px 15px;
}

.sec-page-heading {
  font-size: 15px;
  font-weight: bold;
  color: #006699;
  text-align: center;
  margin-bottom: 18px;
}

.sec-card-box {
  background: white;
  border: 1px solid #8ba8bc;
  border-radius: 6px;
  padding: 18px 24px;
  max-width: 620px;
  margin: 0 auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.sec-card-title {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #111;
  margin-bottom: 8px;
}

.sec-divider-line {
  border: none;
  border-top: 1px solid #7ea0b8;
  margin: 10px 0 16px;
}

.sec-form-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sec-form-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.sec-form-label {
  width: 140px;
  text-align: right;
  font-size: 12px;
  font-weight: bold;
  color: #111;
  flex-shrink: 0;
}

.sec-form-control {
  flex: 1;
}

.sec-select {
  width: 100%;
  max-width: 320px;
  padding: 4px 8px;
  border: 1px solid #8ca2b5;
  background: #cad8e6;
  border-radius: 4px;
  font-size: 12px;
  color: #111;
}

.sec-input {
  width: 100%;
  max-width: 320px;
  padding: 4px 8px;
  border: 1px solid #8ca2b5;
  background: #cad8e6;
  border-radius: 4px;
  font-size: 12px;
  color: #111;
}

.sec-btn-row {
  text-align: center;
  margin-top: 15px;
}

.sec-save-btn {
  background: #007acc;
  color: white;
  border: none;
  padding: 6px 20px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.sec-save-btn:hover {
  background: #005fa3;
}

/* =====================================================================
   QUESTIONNAIRE STYLES (Project Supervision & Exit Survey - Images 4 & 5)
   ===================================================================== */
.quest-container,
.exit-survey-container {
  padding: 8px 12px;
  background: white;
}

.quest-main-title {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  margin: 10px 0 12px;
  letter-spacing: 0.5px;
}

.quest-desc-p {
  font-size: 12px;
  line-height: 1.45;
  color: #111;
  margin-bottom: 10px;
  text-align: justify;
}

.quest-sup-select-row {
  text-align: center;
  margin: 12px 0 14px;
}

.quest-sup-select {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid #999;
  border-radius: 3px;
  min-width: 180px;
}

.quest-main-table,
.exit-survey-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
  font-size: 11.5px;
  border: 1px solid #333;
}

.quest-banner-th {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.quest-main-table td,
.exit-survey-table td {
  border: 1px solid #777;
  padding: 4px 6px;
  vertical-align: middle;
}

.quest-num-col {
  width: 25px;
  text-align: center;
  font-weight: bold;
  vertical-align: top;
}

.quest-text-col {
  font-size: 11.5px;
  color: #000;
  line-height: 1.35;
}

.quest-opt-col {
  width: 75px;
  text-align: center;
}

.quest-radio-group {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.quest-radio-group label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  cursor: pointer;
}

.quest-radio-group input[type="radio"] {
  margin-bottom: 1px;
  cursor: pointer;
}

.lbl-yesno {
  font-size: 10px;
  color: #222;
}

.quest-submit-bar {
  text-align: center;
  margin: 15px 0 20px;
}

.quest-btn-submit {
  background: #d6d6d6;
  color: #111;
  border: 1px solid #999;
  border-radius: 3px;
  padding: 4px 14px;
  font-size: 11.5px;
  cursor: pointer;
  font-family: Arial, sans-serif;
}

.quest-btn-submit:hover {
  background: #c0c0c0;
}

/* Exit survey specific table rows */
.exit-part-hdr td {
  background: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  padding: 5px;
  border: 1px solid #555;
}

.exit-subpart-hdr td {
  background: #fff;
  font-weight: bold;
  font-size: 11.5px;
  padding: 4px 6px;
}

.exit-q-col {
  width: 48%;
  font-size: 11px;
  line-height: 1.35;
}

.exit-ans-col {
  width: 52%;
}

.exit-select {
  width: 100%;
  max-width: 280px;
  padding: 2px 4px;
  font-size: 11px;
  border: 1px solid #999;
  border-radius: 2px;
  background: #fff;
}

.exit-input {
  width: 100%;
  max-width: 280px;
  padding: 3px 6px;
  font-size: 11px;
  border: 1px solid #999;
  border-radius: 2px;
}

.exit-textarea {
  width: 100%;
  height: 60px;
  padding: 4px 6px;
  font-size: 11px;
  border: 1px solid #999;
  border-radius: 2px;
  resize: vertical;
  font-family: Arial, sans-serif;
}

/* =====================================================================
   CREDO ETRANZACT PAYMENT GATEWAY & LOADERS (Images 1 & 2)
   ===================================================================== */

/* Full-screen Loader Overlay */
.credo-loader-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 25, 47, 0.75);
  backdrop-filter: blur(4px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

.credo-loader-overlay.active {
  display: flex;
}

.credo-loader-box {
  background: white;
  padding: 35px 45px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  text-align: center;
  max-width: 380px;
  width: 90%;
}

.credo-spinner {
  width: 46px;
  height: 46px;
  border: 4px solid #e2e8f0;
  border-top: 4px solid #00c0f3;
  border-radius: 50%;
  animation: credoSpin 0.85s linear infinite;
  margin: 0 auto 16px;
}

@keyframes credoSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.credo-loader-title {
  font-size: 15px;
  font-weight: bold;
  color: #1e293b;
  margin-bottom: 6px;
}

.credo-loader-sub {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

/* Credo Gateway Overlay Modal */
.credo-gateway-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #edf2f9;
  z-index: 9999;
  overflow-y: auto;
}

.credo-gateway-overlay.active {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.credo-gateway-container {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  background: #f0f4f9;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 25px rgba(0,0,0,0.08);
}

/* Top Header */
.credo-header {
  background: white;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e2e8f0;
}

.credo-logo-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.credo-logo-circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.credo-logo-titles {
  display: flex;
  flex-direction: column;
}

.credo-logo-main {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
  letter-spacing: -0.5px;
}

.credo-logo-sub {
  font-size: 10px;
  font-weight: 600;
  color: #334155;
  letter-spacing: 0.3px;
  margin-top: 1px;
}

.e-red { color: #e11d48; font-weight: bold; }
.e-dark { color: #1e293b; }

.credo-header-right {
  text-align: right;
}

.credo-amount-display {
  font-size: 17px;
  font-weight: 800;
  color: #0052cc;
  line-height: 1.2;
}

.credo-student-name {
  font-size: 12px;
  color: #0f172a;
  font-weight: 500;
  margin-top: 2px;
}

/* Credo Body Content */
.credo-body-content {
  flex: 1;
  padding: 24px 20px;
}

.credo-screen-view {
  display: none;
}

.credo-screen-view.active {
  display: block;
}

/* Screen 1: Method selection card */
.credo-method-box {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.credo-method-box:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 12px rgba(0,82,204,0.08);
  transform: translateY(-1px);
}

.credo-method-left-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.credo-method-text-wrap {
  flex: 1;
}

.credo-method-heading {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 3px;
}

.credo-method-subheading {
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
}

.credo-method-chevron {
  flex-shrink: 0;
}

/* Screen 2: Card Form */
.credo-change-method-link {
  background: #e9eff7;
  color: #3b82f6;
  border: none;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 22px;
  transition: background 0.15s;
}

.credo-change-method-link:hover {
  background: #dbeafe;
}

.credo-form-prompt {
  font-size: 14px;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 20px;
}

.credo-card-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.credo-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.credo-input-group.flex-1 {
  flex: 1;
}

.credo-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e3a8a;
}

.credo-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.credo-field {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #1e293b;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.credo-field:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.credo-field-icon {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.credo-form-dual-row {
  display: flex;
  gap: 14px;
}

/* Proceed button */
.credo-proceed-action-btn {
  margin-top: 14px;
  width: 100%;
  padding: 13px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #0052cc;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,82,204,0.25);
}

.credo-proceed-action-btn.disabled,
.credo-proceed-action-btn:disabled {
  background: #eef2f7 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  pointer-events: none;
}

.credo-proceed-action-btn:not(:disabled):hover {
  background: #0043a8;
  box-shadow: 0 4px 12px rgba(0,82,204,0.35);
}

/* Credo Footer */
.credo-bottom-footer {
  text-align: center;
  padding: 20px 10px 30px;
}

.credo-power-by {
  font-size: 12px;
  color: #475569;
  font-weight: 500;
}

.credo-version-text {
  font-size: 10.5px;
  color: #64748b;
  font-style: italic;
  margin-top: 2px;
}

/* Floating Live Chat Widget */
.credo-floating-chat {
  position: absolute;
  bottom: 24px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: #0052cc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,82,204,0.35);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.credo-floating-chat:hover {
  transform: scale(1.06);
}

/* Active icon item highlight */
.icon-item.active-icon {
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 4px;
  outline: 1px solid rgba(255, 255, 255, 0.5);
}

/* =====================================================================
   PRINT RECEIPT STYLES
   ===================================================================== */
.receipt-card-wrap {
  background: #ffffff;
  border: 1px solid #999;
  border-radius: 4px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.receipt-header-strip {
  text-align: center;
  border-bottom: 2px solid #173d72;
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.receipt-uni-name {
  font-size: 18px;
  font-weight: bold;
  color: #173d72;
  letter-spacing: 1px;
}

.receipt-sub-addr {
  font-size: 11.5px;
  color: #555;
  margin: 3px 0 6px;
}

.receipt-doc-title {
  display: inline-block;
  background: #173d72;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 12px;
  border-radius: 3px;
}

.receipt-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 12px;
  margin-bottom: 16px;
}

.receipt-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 12px;
}

.receipt-table th {
  background: #2070a4;
  color: #fff;
  padding: 6px 10px;
  text-align: left;
  border: 1px solid #1a5f8a;
  font-size: 11.5px;
}

.receipt-table td {
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
}

.receipt-total-row td {
  background: #f1f5f9;
  font-weight: bold;
}

.receipt-stamp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px dashed #94a3b8;
  margin-top: 16px;
}

.receipt-stamp-circle {
  width: 90px;
  height: 90px;
  border: 3px dashed #0a8528;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #0a8528;
  text-align: center;
  transform: rotate(-10deg);
}

.receipt-sign-box {
  text-align: center;
  font-size: 11px;
  color: #555;
}

.receipt-sign-line {
  width: 160px;
  border-bottom: 1px solid #333;
  margin-bottom: 4px;
}

.receipt-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}

.receipt-print-btn, .receipt-pdf-btn {
  background: #173d72;
  color: #fff;
  border: none;
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: bold;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.receipt-print-btn:hover, .receipt-pdf-btn:hover {
  background: #0f2d57;
}

/* =====================================================================
   EVALUATION & GST & ROOM ALLOCATION STYLES
   ===================================================================== */
.eval-card-wrap, .gst-card-wrap, .room-alloc-card {
  background: #ffffff;
  border: 1px solid #777;
  padding: 16px;
  margin-bottom: 20px;
}

.eval-select-row {
  margin-bottom: 12px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.eval-select-ctrl {
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid #8ca2b5;
  border-radius: 3px;
  background: #cad8e6;
  font-weight: bold;
}

.gst-intro-text {
  font-size: 12.5px;
  color: #333;
  line-height: 1.5;
  margin-bottom: 14px;
}

.gst-download-btn {
  background: #2070a4;
  color: #fff;
  border: none;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: bold;
  border-radius: 3px;
  cursor: pointer;
}

.gst-download-btn:hover {
  background: #165682;
}

.room-alloc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #2070a4;
  padding-bottom: 8px;
  margin-bottom: 14px;
}

.room-alloc-badge {
  background: #0a8528;
  color: #fff;
  font-size: 11.5px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}

.room-alloc-session {
  font-size: 12px;
  font-weight: bold;
  color: #173d72;
}

.room-alloc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 12px;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 14px;
}

.room-lbl {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 2px;
}

.room-val {
  font-weight: bold;
  color: #0f172a;
}

.room-rules-panel {
  background: #fffbeb;
  border: 1px solid #fef3c7;
  padding: 10px 14px;
  border-radius: 4px;
}

.room-print-btn {
  background: #173d72;
  color: #fff;
  border: none;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 3px;
  cursor: pointer;
}

/* =====================================================================
   PORTAL POPUP MODALS & LIVE CHAT WINDOW
   ===================================================================== */
.portal-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 12000;
  align-items: center;
  justify-content: center;
}

.portal-modal-overlay.active {
  display: flex;
}

.info-modal-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 22px 24px;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  border: 1px solid #94a3b8;
}

.info-modal-title {
  font-size: 16px;
  font-weight: bold;
  color: #173d72;
  margin-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 6px;
}

.live-chat-window {
  width: 360px;
  max-width: 95%;
  height: 480px;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0,0,0,0.35);
  border: 1px solid #cbd5e1;
}

.live-chat-header {
  background: #173d72;
  color: #ffffff;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.live-chat-agent-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-chat-dot-online {
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid #ffffff;
}

.live-chat-agent-name {
  font-size: 13px;
  font-weight: bold;
}

.live-chat-agent-sub {
  font-size: 10px;
  color: #cbd5e1;
}

.live-chat-close {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

.live-chat-messages {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 82%;
}

.chat-msg.bot-msg {
  align-self: flex-start;
}

.chat-msg.user-msg {
  align-self: flex-end;
}

.chat-bubble {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.4;
}

.bot-msg .chat-bubble {
  background: #e2e8f0;
  color: #0f172a;
  border-bottom-left-radius: 2px;
}

.user-msg .chat-bubble {
  background: #173d72;
  color: #ffffff;
  border-bottom-right-radius: 2px;
}

.chat-time {
  font-size: 9.5px;
  color: #94a3b8;
  margin-top: 2px;
  align-self: flex-end;
}

.live-chat-input-bar {
  padding: 8px 10px;
  display: flex;
  gap: 6px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}

.live-chat-input-bar input {
  flex: 1;
  padding: 7px 10px;
  font-size: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  outline: none;
}

.live-chat-send-btn {
  background: #173d72;
  color: #ffffff;
  border: none;
  padding: 0 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

/* =====================================================================
   SCALED SIDE-BY-SIDE RESPONSIVENESS (DESKTOP LAYOUT PRESERVED ON MOBILES)
   ===================================================================== */

/* Base responsive utilities */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 6px;
}

.table-responsive::-webkit-scrollbar {
  height: 4px;
}

.table-responsive::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   MEDIUM & TABLET SCREENS (max-width: 850px)
   ───────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 850px) {
  html, body {
    font-size: 9.5px;
  }

  .site-header {
    min-height: 65px;
    padding: 4px 8px;
  }

  .header-logo-img {
    height: 56px;
  }

  .user-info-box {
    font-size: 8px;
    padding: 3px 6px;
    min-width: 135px;
    line-height: 1.4;
  }

  .icon-bar {
    padding: 4px 4px;
    gap: 1px;
  }

  .icon-item {
    width: calc(100% / 7);
    padding: 3px 1px;
  }

  .icon-img-wrap {
    width: 38px;
    height: 34px;
  }

  .icon-img {
    max-width: 34px;
    max-height: 30px;
  }

  .icon-label {
    font-size: 8px;
    max-width: 100%;
  }

  .layout-wrapper {
    padding: 6px;
    gap: 6px;
  }

  .sidebar {
    width: 155px;
  }

  .sidebar-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 165/140;
  }

  .main-content {
    padding: 10px 12px;
  }

  /* Login page side-by-side */
  .login-two-col {
    gap: 12px;
  }

  .login-card {
    margin: 8px 10px;
    padding: 10px 12px;
  }

  .form-row label {
    width: 95px;
    font-size: 9px;
  }

  .profile-label {
    width: 140px;
    font-size: 9px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   MOBILE SCREENS (max-width: 600px)
   ───────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 600px) {
  html, body {
    font-size: 8px;
  }

  /* Header side-by-side */
  .site-header {
    min-height: 48px;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    position: relative;
  }

  .header-logo-img {
    height: 40px;
    max-width: 55%;
  }

  .user-info-box {
    position: absolute;
    right: 4px;
    top: 3px;
    font-size: 6.5px;
    padding: 2px 4px;
    min-width: 105px;
    line-height: 1.3;
  }

  /* Nav bar */
  .nav-bar a, .nav-bar button {
    padding: 3px 6px;
    font-size: 8px;
  }

  /* Icon bar side-by-side */
  .icon-bar {
    padding: 2px 2px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .icon-item {
    width: calc(100% / 7);
    padding: 2px 1px;
  }

  .icon-img-wrap {
    width: 100%;
    height: 24px;
    margin-bottom: 1px;
  }

  .icon-img {
    max-width: 22px;
    max-height: 22px;
  }

  .icon-label {
    font-size: 6px;
    line-height: 1.1;
    max-width: 100%;
    margin-top: 1px;
  }

  /* Main layout strictly side-by-side */
  .layout-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 4px;
    gap: 4px;
  }

  .sidebar {
    width: 32%;
    max-width: 130px;
    min-width: 95px;
    flex-shrink: 0;
  }

  .student-brief-box {
    padding: 2px 4px;
    font-size: 6.5px;
  }

  .brief-title {
    font-size: 7.5px;
    padding-bottom: 2px;
    margin-bottom: 3px;
  }

  .change-pic-link {
    font-size: 6px;
    padding: 1px 2px;
    margin-bottom: 2px;
  }

  .sidebar-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 165/140;
    margin-bottom: 3px;
  }

  .brief-row {
    font-size: 6.5px;
    margin-bottom: 1px;
    line-height: 1.25;
  }

  .fees-warning {
    font-size: 5.5px;
    margin-bottom: 1px;
    line-height: 1.2;
  }

  .fees-amount-line {
    font-size: 6.5px;
    margin-bottom: 2px;
  }

  .breakdown-btn {
    font-size: 6px;
    padding: 1px 5px;
    margin-bottom: 3px;
  }

  .sidebar-action-btn {
    font-size: 6.5px;
    padding: 1px 0;
  }

  .view-room-link {
    font-size: 6px;
    margin: 2px 0;
  }

  .live-chat-dark-btn {
    font-size: 6.5px;
    padding: 2px 4px;
    margin-top: 3px;
  }

  .main-content {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
  }

  /* Login page side-by-side */
  .login-hero-img {
    height: 80px;
  }

  .login-card {
    margin: 4px 6px;
    padding: 6px 8px;
  }

  .login-two-col {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: flex-start;
  }

  .login-left {
    flex: 1;
    min-width: 0;
    font-size: 6.5px;
  }

  .login-left h4 {
    font-size: 7px;
    margin-bottom: 2px;
    margin-top: 3px;
  }

  .login-left ol {
    margin-left: 8px;
    margin-bottom: 3px;
  }

  .login-left ol li {
    font-size: 6px;
    margin-bottom: 1px;
    line-height: 1.2;
  }

  .login-left p {
    font-size: 6px;
    line-height: 1.2;
  }

  .login-right {
    flex: 1.15;
    min-width: 0;
  }

  .login-form-box {
    padding: 4px 6px;
  }

  .login-form-title {
    font-size: 9px;
    margin-bottom: 3px;
  }

  .login-banner-pink {
    height: 18px;
    margin-bottom: 4px;
    font-size: 6.5px;
  }

  .form-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    margin-bottom: 3px;
  }

  .form-row label {
    width: 60px;
    text-align: right;
    font-size: 6.5px;
    flex-shrink: 0;
  }

  .form-row input[type="text"],
  .form-row input[type="password"] {
    flex: 1;
    min-width: 0;
    padding: 2px 4px;
    font-size: 7.5px;
  }

  .signin-text-btn {
    font-size: 7.5px;
    margin: 3px auto;
  }

  .login-links-area {
    font-size: 6px;
  }

  .login-links-area p {
    margin-bottom: 1px;
    line-height: 1.2;
  }

  .live-chat-dark-login {
    font-size: 6.5px;
    padding: 2px 6px;
    margin: 4px auto 0;
    min-width: 55px;
  }

  /* Welcome page */
  .welcome-h1 {
    font-size: 12px;
    margin-bottom: 3px;
  }

  .welcome-name {
    font-size: 8.5px;
    margin-bottom: 3px;
  }

  .welcome-session, .welcome-semester {
    font-size: 7.5px;
    margin-bottom: 2px;
  }

  /* Course Registration side-by-side */
  .reg-form-title {
    font-size: 9px;
    margin-bottom: 4px;
  }

  .reg-notes-panel {
    padding: 3px 5px;
    font-size: 6.5px;
    line-height: 1.25;
    margin-bottom: 4px;
  }

  .unit-limits-row {
    font-size: 6.5px;
    gap: 5px;
    margin-bottom: 5px;
  }

  .unit-red-indicator {
    width: 10px;
    height: 10px;
  }

  .section-hdr {
    font-size: 7.5px;
    margin: 5px 0 3px;
  }

  .course-table {
    font-size: 6.5px;
    margin-bottom: 4px;
  }

  .course-table th {
    padding: 2px 3px;
    font-size: 6.5px;
  }

  .course-table td {
    padding: 2px 3px;
    font-size: 6.5px;
  }

  .course-table input[type="checkbox"] {
    width: 10px;
    height: 10px;
  }

  .submit-row {
    padding: 3px 2px;
    margin-top: 4px;
  }

  .submit-reg-btn {
    padding: 2px 6px;
    font-size: 7px;
  }

  .total-units-area {
    font-size: 7px;
  }

  .total-units-num {
    min-width: 18px;
    padding: 1px 3px;
  }

  /* Profile page side-by-side */
  .profile-header-row {
    margin-bottom: 5px;
  }

  .profile-page-title {
    font-size: 10px;
  }

  .actions-btn {
    padding: 2px 5px;
    font-size: 7px;
  }

  .profile-box {
    padding: 4px 6px;
  }

  .profile-section-title {
    font-size: 7.5px;
    margin-top: 5px;
    margin-bottom: 3px;
  }

  .profile-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 2px;
    font-size: 6.5px;
    padding: 0;
  }

  .profile-label {
    width: 38%;
    max-width: 100px;
    text-align: right;
    padding-right: 5px;
    font-size: 6.5px;
    flex-shrink: 0;
  }

  .profile-value {
    flex: 1;
    min-width: 0;
    font-size: 6.5px;
    word-break: break-word;
  }

  .edit-profile-btn {
    padding: 2px 8px;
    font-size: 7px;
    margin: 6px auto 0;
  }

  /* Uploads side-by-side */
  .upload-page-title {
    font-size: 9px;
    margin-bottom: 6px;
  }

  .upload-form-box, .sig-upload-box {
    padding: 5px 6px;
    max-width: 100%;
  }

  .upload-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    font-size: 6.5px;
    margin-bottom: 4px;
  }

  .upload-row label {
    font-size: 6.5px;
  }

  .upload-hint {
    font-size: 6px;
  }

  .passport-preview-box {
    width: 80px;
    height: 90px;
  }

  .sig-preview-box {
    width: 130px;
    height: 35px;
  }

  .upload-pic-btn {
    padding: 2px 8px;
    font-size: 7px;
    margin-top: 4px;
  }

  /* Fees side-by-side */
  .fees-visa-header {
    font-size: 9.5px;
    margin-bottom: 5px;
  }

  .fees-card, .special-payments-card, .payment-history-card {
    padding: 5px 6px;
    margin-bottom: 6px;
  }

  .fees-card-title {
    font-size: 8px;
    margin-bottom: 3px;
  }

  .remita-text-label {
    font-size: 7.5px;
    margin-bottom: 4px;
  }

  .remita-select {
    font-size: 6.5px;
    padding: 1px 3px;
  }

  .fees-radio-bar {
    padding: 3px 5px;
    font-size: 7px;
    gap: 6px;
  }

  .fees-jamb-warning-box {
    font-size: 6px;
    padding: 3px 5px;
    line-height: 1.2;
  }

  .fees-card-warning-bold {
    font-size: 6.5px;
    margin-top: 3px;
  }

  .payment-history-header {
    font-size: 8px;
    margin-bottom: 5px;
  }

  .payment-history-title {
    font-size: 8px;
  }

  .payment-history-controls-row {
    gap: 3px;
    margin-bottom: 5px;
  }

  .history-select {
    font-size: 6.5px;
    padding: 1px 3px;
  }

  .view-history-btn {
    font-size: 6.5px;
    padding: 1px 3px;
  }

  .payment-history-loading-msg {
    font-size: 8px;
    margin: 6px 0;
  }

  .payment-history-table {
    font-size: 6px;
  }

  .payment-history-table th, .payment-history-table td {
    padding: 2px;
    font-size: 6px;
  }

  .requery-link {
    font-size: 6px;
  }

  .fees-aggregate-info {
    font-size: 6.5px;
    margin: 3px 0;
    line-height: 1.3;
    text-align: right;
  }

  .fees-table {
    font-size: 6px;
  }

  .fees-table th {
    padding: 2px;
    font-size: 5.5px;
  }

  .fees-table td {
    padding: 2px;
    font-size: 6px;
  }

  .pay-now-input {
    width: 36px;
    font-size: 6px;
    padding: 1px 2px;
  }

  .fees-table input[type="checkbox"] {
    width: 9px;
    height: 9px;
  }

  .fees-fetch-btn, .fees-checkout-btn {
    padding: 2px 8px;
    font-size: 7px;
  }

  /* Security settings side-by-side */
  .sec-page-wrap {
    padding: 3px;
  }

  .sec-page-heading {
    font-size: 9px;
    margin-bottom: 6px;
  }

  .sec-card-box {
    padding: 6px 8px;
    max-width: 100%;
  }

  .sec-card-title {
    font-size: 7.5px;
    margin-bottom: 3px;
  }

  .sec-form-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }

  .sec-form-label {
    width: 65px;
    font-size: 6.5px;
    text-align: right;
    flex-shrink: 0;
  }

  .sec-select, .sec-input {
    padding: 1px 3px;
    font-size: 7px;
    max-width: 100%;
  }

  .sec-save-btn {
    padding: 2px 10px;
    font-size: 7px;
  }

  /* Questionnaires side-by-side */
  .quest-container, .exit-survey-container {
    padding: 3px;
  }

  .quest-main-title {
    font-size: 8px;
    margin: 3px 0 5px;
  }

  .quest-desc-p {
    font-size: 6px;
    line-height: 1.25;
    margin-bottom: 4px;
  }

  .quest-sup-select-row {
    margin: 3px 0 5px;
  }

  .quest-sup-select {
    padding: 1px 4px;
    font-size: 6.5px;
    min-width: 100px;
  }

  .quest-main-table, .exit-survey-table {
    font-size: 6px;
    margin-bottom: 6px;
  }

  .quest-banner-th {
    padding: 2px 3px;
    font-size: 6.5px;
  }

  .quest-main-table td, .exit-survey-table td {
    padding: 2px 2px;
  }

  .quest-num-col {
    width: 14px;
  }

  .quest-text-col {
    font-size: 6px;
    line-height: 1.2;
  }

  .quest-opt-col {
    width: 38px;
  }

  .quest-radio-group {
    gap: 2px;
  }

  .quest-radio-group label {
    font-size: 5.5px;
  }

  .lbl-yesno {
    font-size: 5.5px;
  }

  .quest-radio-group input[type="radio"] {
    width: 9px;
    height: 9px;
  }

  .quest-btn-submit {
    padding: 2px 8px;
    font-size: 6.5px;
  }

  .exit-q-col {
    font-size: 6px;
    line-height: 1.2;
  }

  .exit-select, .exit-input {
    padding: 1px 2px;
    font-size: 6px;
    max-width: 100%;
  }

  .exit-textarea {
    height: 30px;
    padding: 1px 3px;
    font-size: 6px;
  }

  /* Evaluation & GST */
  .eval-card-wrap, .gst-card-wrap, .room-alloc-card {
    padding: 5px 6px;
    margin-bottom: 6px;
  }

  .eval-select-row {
    font-size: 6.5px;
    gap: 3px;
    margin-bottom: 5px;
  }

  .eval-select-ctrl {
    padding: 1px 3px;
    font-size: 6.5px;
  }

  .quest-table {
    font-size: 6px;
  }

  .quest-table th, .quest-table td {
    padding: 2px 2px;
    font-size: 6px;
  }

  .quest-select {
    padding: 1px 2px;
    font-size: 6px;
  }

  .quest-textarea {
    height: 30px;
    font-size: 6px;
    padding: 1px 3px;
  }

  .gst-intro-text {
    font-size: 6.5px;
    line-height: 1.25;
    margin-bottom: 5px;
  }

  .gst-download-btn {
    padding: 1px 5px;
    font-size: 6px;
  }

  /* Receipts & Room allocation side-by-side */
  .receipt-card-wrap {
    padding: 6px 8px;
    margin-bottom: 8px;
  }

  .receipt-header-strip {
    padding-bottom: 3px;
    margin-bottom: 5px;
  }

  .receipt-uni-name {
    font-size: 9px;
  }

  .receipt-sub-addr {
    font-size: 6px;
    margin: 1px 0 2px;
  }

  .receipt-doc-title {
    font-size: 6px;
    padding: 1px 5px;
  }

  .receipt-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 5px;
    padding: 3px 5px;
    font-size: 6px;
    margin-bottom: 5px;
  }

  .receipt-table {
    font-size: 6px;
    margin-bottom: 5px;
  }

  .receipt-table th, .receipt-table td {
    padding: 2px 3px;
    font-size: 6px;
  }

  .receipt-stamp-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    margin-top: 5px;
  }

  .receipt-stamp-circle {
    width: 40px;
    height: 40px;
    border-width: 1.5px;
    font-size: 4.5px;
  }

  .receipt-sign-box {
    font-size: 6px;
  }

  .receipt-sign-line {
    width: 70px;
    margin-bottom: 2px;
  }

  .receipt-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
    margin-top: 6px;
  }

  .receipt-print-btn, .receipt-pdf-btn {
    padding: 2px 6px;
    font-size: 6.5px;
  }

  .room-alloc-header {
    padding-bottom: 3px;
    margin-bottom: 5px;
  }

  .room-alloc-badge {
    font-size: 6px;
    padding: 1px 3px;
  }

  .room-alloc-session {
    font-size: 6.5px;
  }

  .room-alloc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 5px;
    padding: 3px 5px;
    font-size: 6px;
    margin-bottom: 5px;
  }

  .room-lbl {
    font-size: 5.5px;
  }

  .room-rules-panel {
    padding: 3px 5px;
    font-size: 6px;
  }

  .room-rules-panel ol {
    margin: 2px 0 0 8px;
    font-size: 5.5px;
  }

  .room-print-btn {
    padding: 2px 8px;
    font-size: 6.5px;
  }

  /* Modals */
  .modal-box {
    max-width: 220px;
    padding: 12px 14px;
  }

  .modal-icon {
    font-size: 20px;
    margin-bottom: 3px;
  }

  .modal-msg {
    font-size: 9px;
    margin-bottom: 8px;
  }

  .modal-close-btn {
    padding: 2px 10px;
    font-size: 7.5px;
  }

  .breakdown-popup {
    max-width: 95%;
    margin-top: 8px;
  }

  .breakdown-title {
    font-size: 8.5px;
  }

  .breakdown-table {
    font-size: 6px;
  }

  .breakdown-table td, .breakdown-table th {
    padding: 2px 2px;
    font-size: 6px;
  }

  .live-chat-window {
    width: 240px;
    height: 320px;
  }

  .live-chat-header {
    padding: 4px 6px;
  }

  .live-chat-agent-name {
    font-size: 8.5px;
  }

  .live-chat-agent-sub {
    font-size: 6.5px;
  }

  .chat-bubble {
    padding: 4px 6px;
    font-size: 7.5px;
  }

  /* Footer side-by-side */
  .site-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 3px 5px;
    font-size: 6.5px;
  }

  .footer-ip {
    font-size: 6px;
  }

  .footer-center {
    font-size: 6px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   EXTRA SMALL SCREENS (max-width: 380px)
   ───────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 380px) {
  .sidebar {
    width: 34%;
    min-width: 85px;
    max-width: 110px;
  }

  .form-row label {
    width: 52px;
    font-size: 6px;
  }

  .profile-label {
    width: 35%;
    font-size: 6px;
  }

  .user-info-box {
    min-width: 90px;
    font-size: 6px;
    padding: 1px 2px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   PRINT STYLES
   ───────────────────────────────────────────────────────────────────── */
@media print {
  body {
    background: #fff !important;
  }

  .site-header,
  .nav-bar,
  .icon-bar,
  .sidebar,
  .site-footer,
  .receipt-actions,
  .room-print-btn,
  .portal-modal-overlay,
  .credo-gateway-overlay,
  .modal-overlay {
    display: none !important;
  }

  .layout-wrapper {
    padding: 0 !important;
    background: #fff !important;
  }

  .main-content {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .receipt-card-wrap,
  .room-alloc-card {
    box-shadow: none !important;
    border: 1px solid #333 !important;
    page-break-inside: avoid;
  }
}