/* =============================================================
   portal-ui.css  —  OeHMIS HISCitizenServices Design System
   Scope: patient-facing registration & appointment portal pages
   Does NOT touch any business logic or server-side behaviour.
   Overrides: Verdana inline style, generic Bootstrap defaults.
   Author: UI enhancement pass — July 2026
   ============================================================= */

/* ── 1. Design Tokens ─────────────────────────────────────── */
:root {
  --brand-primary:   #1977cc;
  --brand-dark:      #145fa8;
  --brand-light:     #e8f1fb;
  --brand-border:    #b8d4f0;

  --surface-page:    #f4f7fc;
  --surface-card:    #ffffff;
  --surface-section: #f0f4fa;

  --text-base:       #1e293b;
  --text-muted:      #64748b;
  --text-label:      #374151;

  --success:         #16a34a;
  --warning:         #d97706;
  --danger:          #dc2626;
  --info:            #0ea5e9;

  --radius-card:     12px;
  --radius-input:    8px;
  --radius-btn:      8px;
  --radius-badge:    20px;

  --shadow-card:     0 4px 24px rgba(25, 119, 204, 0.10), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-hover:    0 8px 32px rgba(25, 119, 204, 0.16), 0 2px 8px rgba(0,0,0,0.08);

  --transition:      0.2s ease;

  --font-body:       "Open Sans", system-ui, -apple-system, sans-serif;
  --font-heading:    "Raleway", "Open Sans", system-ui, sans-serif;
}

/* ── 2. Global Reset — override inline Verdana/12px ─────── */
body.provistional2,
body.provistional3 {
  font-family: var(--font-body) !important;
  font-size:   14px !important;
  color:       var(--text-base) !important;
  background:  var(--surface-page) !important;
}

/* ── 3. Typography ───────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-base);
}

label, .col-form-label {
  font-family: var(--font-body) !important;
  font-size:   13.5px !important;
  color:       var(--text-label) !important;
  font-weight: 500;
}

/* ── 4. Card enhancements ────────────────────────────────── */
.card {
  border:        1px solid #dde6f0 !important;
  border-radius: var(--radius-card) !important;
  box-shadow:    var(--shadow-card) !important;
  background:    var(--surface-card);
  transition:    box-shadow var(--transition), transform var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-hover) !important;
}

.card-body {
  padding: 1.5rem 1.75rem;
}

/* ── 5. Card Header (.cardheader) — brand gradient ──────── */
.cardheader,
.card-header.cardheader {
  background:    linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-dark) 100%) !important;
  color:         #ffffff !important;
  font-family:   var(--font-heading) !important;
  font-size:     15px !important;
  font-weight:   600 !important;
  letter-spacing: 0.3px;
  padding:       0.85rem 1.25rem !important;
  border-bottom: none !important;
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
}

.cardheader span,
.cardheader i,
.card-header.cardheader span,
.card-header.cardheader i {
  color: #ffffff !important;
}

/* ── 5b. Section Header (.section-hdr) — shared gradient header ─ */
.section-hdr {
  background:    linear-gradient(135deg, #1a5276 0%, #2980b9 100%);
  color:         #fff;
  border-radius: 6px 6px 0 0;
  padding:       11px 16px;
  display:       flex;
  align-items:   center;
  gap:           10px;
  text-align:    left;
}
.section-hdr .sh-title {
  font-size:   1rem;
  font-weight: 700;
  margin:      0;
  color:       #fff;
}
.section-hdr .sh-sub {
  font-size: .78rem;
  opacity:   .85;
  margin:    0;
  color:     #fff;
}
.section-hdr .sh-badge {
  margin-left:      auto;
  background:       rgba(255,255,255,.18);
  border:           1px solid rgba(255,255,255,.35);
  border-radius:    20px;
  font-size:        .78rem;
  padding:          2px 12px;
  white-space:      nowrap;
  color:            #fff;
}

/* Section sub-headers (alert-secondary used as dividers) */
.alert.alert-secondary.fw-bold {
  background:    var(--surface-section) !important;
  border:        none !important;
  border-left:   4px solid var(--brand-primary) !important;
  border-radius: 0 6px 6px 0 !important;
  color:         var(--brand-dark) !important;
  font-family:   var(--font-heading) !important;
  font-size:     13.5px !important;
  padding:       0.55rem 1rem !important;
  margin-bottom: 0.75rem !important;
}

/* ── 6. Form Inputs ──────────────────────────────────────── */
.form-control,
select.form-control {
  border-radius: var(--radius-input) !important;
  border:        1.5px solid #cbd5e1 !important;
  font-size:     13.5px !important;
  font-family:   var(--font-body) !important;
  color:         var(--text-base) !important;
  padding:       0.45rem 0.75rem !important;
  height:        auto !important;          /* override the calc() inline height */
  transition:    border-color var(--transition), box-shadow var(--transition);
  background:    #ffffff;
}

.form-control:focus,
select.form-control:focus {
  border-color: var(--brand-primary) !important;
  box-shadow:   0 0 0 3px rgba(25, 119, 204, 0.15) !important;
  outline:      none !important;
}

.form-control:disabled,
.form-control[readonly] {
  background:  #f1f5fb !important;
  color:       var(--text-muted) !important;
  border-color: #dde6f0 !important;
  cursor:      not-allowed;
}

.form-control-sm {
  border-radius: var(--radius-input) !important;
  border:        1.5px solid #cbd5e1 !important;
  font-size:     13px !important;
  padding:       0.35rem 0.65rem !important;
  transition:    border-color var(--transition), box-shadow var(--transition);
}

.form-control-sm:focus {
  border-color: var(--brand-primary) !important;
  box-shadow:   0 0 0 3px rgba(25, 119, 204, 0.15) !important;
}

.input-group-text {
  border-radius: var(--radius-input) 0 0 var(--radius-input) !important;
  border:        1.5px solid #cbd5e1 !important;
  font-size:     13px;
}

.input-group .form-control,
.input-group .form-control-sm {
  border-radius: 0 var(--radius-input) var(--radius-input) 0 !important;
}

.form-label {
  font-size:   13.5px !important;
  font-weight: 500 !important;
  color:       var(--text-label) !important;
  margin-bottom: 0.35rem !important;
}

.form-text {
  font-size: 12px !important;
  margin-top: 0.3rem !important;
}

/* ── 7. Buttons ──────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-btn) !important;
  font-family:   var(--font-body) !important;
  font-size:     13.5px !important;
  font-weight:   500;
  padding:       0.45rem 1.1rem !important;
  transition:    all var(--transition) !important;
}

.btn-sm {
  font-size:  13px !important;
  padding:    0.35rem 0.9rem !important;
}

.btn-primary,
.btn-sm.btn-primary {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

.btn-primary:hover {
  background:   var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
  transform:    translateY(-1px);
  box-shadow:   0 4px 12px rgba(25,119,204,0.28) !important;
}

.btn-outline-primary {
  color:        var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}
.btn-outline-primary:hover {
  background:   var(--brand-primary) !important;
  color:        #fff !important;
  transform:    translateY(-1px);
}

.btn-success,
.btn-sm.btn-success {
  background:   var(--success) !important;
  border-color: var(--success) !important;
  color: #fff !important;
}
.btn-success:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
}

.btn-outline-danger:hover {
  transform: translateY(-1px);
}

/* Input-type=button visuals (legacy inputs used as buttons) */
input[type="button"].btn-sm,
input[type="button"].btn-outline-primary,
input[type="button"].btn-outline-warning,
input[type="button"].btn-outline-danger,
input[type="button"].btn-sm.btn-success,
input[type="button"].btn-sm.btn-outline-danger,
input[type="button"].btn-sm.btn-outline-primary {
  cursor:        pointer;
  border-radius: var(--radius-btn) !important;
  font-family:   var(--font-body) !important;
  font-size:     13px !important;
  font-weight:   500;
  padding:       0.35rem 0.9rem !important;
  transition:    all var(--transition) !important;
  border-width:  1.5px !important;
}

input[type="button"]:hover {
  transform:  translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.12) !important;
}

/* ── 8. Option Tile Cards (BookAppointment radio selectors) ─ */
.option-tile-group {
  display:         flex;
  flex-direction:  row;
  flex-wrap:       nowrap;
  gap:             0.75rem;
  padding:         0.5rem 0;
  justify-content: center;
  align-items:     stretch;
}

.option-tile {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  padding:       1rem 1.25rem;
  border:        2px solid #dde6f0;
  border-radius: 10px;
  background:    #ffffff;
  cursor:        pointer;
  transition:    border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
  user-select:   none;
  text-align:    left;
  flex:          1 1 0;
  min-width:     0;
}

.option-tile:hover {
  border-color: var(--brand-primary);
  background:   var(--brand-light);
  transform:    translateX(3px);
  box-shadow:   0 3px 12px rgba(25,119,204,0.15);
}

.option-tile.selected,
.option-tile:has(input:checked) {
  border-color: var(--brand-primary);
  background:   var(--brand-light);
  box-shadow:   0 3px 14px rgba(25,119,204,0.18);
}

.option-tile input[type="radio"] {
  display: none;
}

.option-tile-icon {
  width:            44px;
  height:           44px;
  border-radius:    50%;
  background:       var(--brand-light);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  font-size:        18px;
  color:            var(--brand-primary);
  border:           2px solid var(--brand-border);
  transition:       background var(--transition), border-color var(--transition);
}

.option-tile:hover .option-tile-icon,
.option-tile.selected .option-tile-icon {
  background:   var(--brand-primary);
  border-color: var(--brand-primary);
  color:        #ffffff;
}

.option-tile-body {
  flex: 1;
}

.option-tile-title {
  font-family:  var(--font-heading);
  font-size:    14px;
  font-weight:  600;
  color:        var(--text-base);
  margin-bottom: 2px;
}

.option-tile-desc {
  font-size:  12px;
  color:      var(--text-muted);
  line-height: 1.4;
}

.option-tile-arrow {
  color:      #b0c4de;
  font-size:  16px;
  flex-shrink: 0;
  transition: color var(--transition), transform var(--transition);
}

.option-tile:hover .option-tile-arrow {
  color:     var(--brand-primary);
  transform: translateX(3px);
}

/* ── 9. Step Wizard (FindCrNo progress indicator) ────────── */
.step-wizard {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0.75rem 1rem;
  gap:             0;
  background:      var(--surface-section);
  border-top:      1px solid #e2eaf5;
  border-radius:   0 0 var(--radius-card) var(--radius-card);
}

.step-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  position:       relative;
  flex:           1;
}

.step-item + .step-item::before {
  content:    '';
  position:   absolute;
  left:       -50%;
  top:        14px;
  width:      100%;
  height:     2px;
  background: #d1dde8;
  z-index:    0;
}

.step-item.step-active + .step-item::before,
.step-item.step-done + .step-item::before {
  background: var(--brand-primary);
}

.step-dot {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  border:          2px solid #c8d8e8;
  background:      #ffffff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       11px;
  font-weight:     700;
  color:           #94a3b8;
  position:        relative;
  z-index:         1;
  transition:      all var(--transition);
}

.step-item.step-active .step-dot {
  background:   var(--brand-primary);
  border-color: var(--brand-primary);
  color:        #ffffff;
  box-shadow:   0 0 0 4px rgba(25,119,204,0.18);
}

.step-item.step-done .step-dot {
  background:   var(--success);
  border-color: var(--success);
  color:        #ffffff;
}

.step-label {
  font-size:   10.5px;
  font-weight: 500;
  color:       #94a3b8;
  margin-top:  5px;
  white-space: nowrap;
}

.step-item.step-active .step-label {
  color: var(--brand-primary);
  font-weight: 600;
}

.step-item.step-done .step-label {
  color: var(--success);
}

/* ── 10. Patient Info Panel (revisit page) ────────────────── */
.patient-info-panel {
  background:    linear-gradient(135deg, #eef4fc 0%, #f8faff 100%);
  border:        1.5px solid var(--brand-border);
  border-radius: 10px;
  padding:       1rem 1.5rem;
  margin-bottom: 1rem;
}

.patient-info-panel .info-field-label {
  font-size:   11.5px;
  font-weight: 600;
  color:       var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.patient-info-panel .info-field-value {
  font-size:   14px;
  font-weight: 500;
  color:       var(--text-base);
}

/* ── 11. DataTable enhancements ──────────────────────────── */
table.dataTable thead th {
  background:    var(--brand-primary) !important;
  color:         #ffffff !important;
  font-family:   var(--font-heading) !important;
  font-size:     13px !important;
  font-weight:   600 !important;
  border:        none !important;
  padding:       0.6rem 0.8rem !important;
  white-space:   nowrap;
}

table.dataTable tbody tr {
  font-size:  13px !important;
  font-family: var(--font-body) !important;
  transition: background var(--transition);
}

table.dataTable tbody tr:hover td {
  background: var(--brand-light) !important;
}

table.dataTable tbody td {
  padding:      0.5rem 0.8rem !important;
  vertical-align: middle !important;
  border-color: #e8f0f9 !important;
}

/* ── 12. Badge & pill improvements ───────────────────────── */
.badge {
  font-family:    var(--font-body) !important;
  font-size:      11.5px !important;
  font-weight:    500 !important;
  padding:        0.35em 0.75em !important;
  border-radius:  var(--radius-badge) !important;
}

/* ── 13. List group (instructions list) ──────────────────── */
.list-group-item {
  font-size:   13.5px;
  font-family: var(--font-body) !important;
  border-color: #e8f0f9 !important;
  color:       var(--text-base);
  padding:     0.6rem 1rem !important;
}

.list-group-item:first-child {
  border-top-left-radius:  var(--radius-input) !important;
  border-top-right-radius: var(--radius-input) !important;
}

.list-group-item:last-child {
  border-bottom-left-radius:  var(--radius-input) !important;
  border-bottom-right-radius: var(--radius-input) !important;
}

/* ── 14. Alert info (instructions panel) ─────────────────── */
.alert.alert-primary {
  border-left:    4px solid var(--brand-primary) !important;
  background:     var(--brand-light) !important;
  border-top:     none !important;
  border-right:   none !important;
  border-bottom:  none !important;
  border-radius:  6px !important;
  font-size:      13.5px !important;
  font-family:    var(--font-body) !important;
  color:          var(--brand-dark) !important;
}

/* ── 15. Captcha section ─────────────────────────────────── */
#captchaImg,
img#captchaImg {
  border-radius: 6px !important;
  height:        40px;
  vertical-align: middle;
}

/* ── 16. Section container padding (forms) ───────────────── */
.container.pe-5.ps-5.pt-2 {
  padding-left:  1.5rem !important;
  padding-right: 1.5rem !important;
}

/* ── 17. OTP / Captcha card footer (FindCrNo) ────────────── */
.card-footer.bg-light {
  background:    var(--surface-section) !important;
  border-top:    1px solid #e2eaf5 !important;
  padding:       0.65rem 1rem !important;
}

/* ── 18. Responsive ─────────────────────────────────────── */
@media (max-width: 576px) {
  .card-body {
    padding: 1rem 1rem;
  }
  .container.pe-5.ps-5.pt-2 {
    padding-left:  0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .option-tile-group {
    flex-direction: column;
    flex-wrap:      wrap;
  }
  .option-tile {
    padding: 0.8rem 1rem;
    flex:    1 1 100%;
  }
  .option-tile-icon {
    width:  36px;
    height: 36px;
    font-size: 15px;
  }
}

/* ── 19. Headrline class (used in some pages as section title) */
.headrline {
  background:    linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-dark) 100%) !important;
  padding:       0.55rem 1rem !important;
  color:         white !important;
  border-radius: 4px;
  font-family:   var(--font-heading);
  font-size:     13.5px;
  font-weight:   600;
}

/* ── 20. Main section top spacing ───────────────────────── */
.main-section {
  min-height: calc(100vh - 160px);
}

section.about.animation,
section#counts.banner {
  padding-bottom: 2rem;
}

/* ── 21. Slot counter & doctor panel — collapse when empty ── */
#regcounter:empty {
  display: none;
}
#regcounter {
  padding: 4px 0;
}

/* ── Language Switcher Buttons ─────────────────────────────── */
#lang-switcher {
    gap: 2px;
}

.lang-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         2px 7px;
    border-radius:   4px;
    font-size:       0.78rem;
    color:           #fff;
    cursor:          pointer;
    transition:      background 0.15s, color 0.15s;
    user-select:     none;
    white-space:     nowrap;
}

.lang-btn:hover {
    background: rgba(255,255,255,0.2);
}

.lang-btn-active {
    background: rgba(255,255,255,0.28);
    font-weight: 700;
    border-bottom: 2px solid #fff;
}

.lang-sep {
    color:       rgba(255,255,255,0.5);
    font-size:   0.7rem;
    line-height: 1;
    padding:     0 1px;
}

/* ── Google Translate — hide default toolbar / banner ──────── */
/* Keep the element hidden; we drive it programmatically only. */
#google_translate_element { display: none !important; }
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0 !important; }  /* prevent Google's page-push */
.goog-te-gadget-icon     { display: none !important; }
.goog-logo-link          { display: none !important; }
.goog-te-gadget          { font-size: 0 !important; }
/* End Google Translate overrides */