.registration-panel{margin-top:20px;background:#fff;border:1px solid #dce5ee;border-radius:18px;padding:20px;max-width:760px}.registration-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.registration-field{display:flex;flex-direction:column;gap:7px;font-weight:600;color:#243b53}.registration-field input,.registration-field select,.registration-field textarea{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:10px;padding:12px;font:inherit;background:#fff}.registration-form button{grid-column:auto;min-height:46px}
.registration-form>.registration-step{grid-column:1/-1}@media(max-width:620px){.registration-panel{padding:14px}.registration-form{grid-template-columns:1fr}}

/* Blue department selection buttons */
.department-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;width:100%}
.department-button{border:1px solid #1d4ed8;border-radius:12px;background:#eff6ff;color:#1e40af;padding:12px 14px;min-height:48px;font:inherit;font-weight:700;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease}
.department-button:hover{background:#dbeafe;transform:translateY(-1px)}
.department-button.selected{background:#1d4ed8;color:#fff;border-color:#1d4ed8;box-shadow:0 4px 12px rgba(29,78,216,.22)}
@media(max-width:620px){.department-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.department-button{padding:10px 8px;font-size:14px}}


/* Step-by-step Front Office registration */
.registration-step{display:flex;flex-direction:column;gap:16px;min-width:0}
.registration-step-title{margin:2px 0 4px;color:#102a43;font-size:18px}
.registration-step .registration-field{min-width:0}
.registration-step-actions{display:flex;gap:10px;align-items:center}
.registration-step-actions button{flex:1}
.registration-step .primary-button,.registration-step .secondary-button{border:0;border-radius:11px;min-height:48px;padding:12px 18px;font:inherit;font-weight:700;cursor:pointer}
.registration-step .primary-button{background:#155eef;color:#fff}
.registration-step .primary-button:disabled{opacity:.45;cursor:not-allowed}
.registration-step .secondary-button{background:#e8eef5;color:#243b53}
.service-area{width:100%}
.service-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;width:100%}
.service-button{border:1px solid #0f9f6e;border-radius:12px;background:#ecfdf5;color:#047857;padding:12px 14px;min-height:48px;font:inherit;font-weight:700;cursor:pointer;text-align:center}
.service-button:hover{background:#d1fae5}
.service-button.selected{background:#047857;border-color:#047857;color:#fff;box-shadow:0 4px 12px rgba(4,120,87,.2)}
.service-empty{margin:0;padding:12px;color:#64748b;background:#f8fafc;border-radius:10px}
@media(max-width:620px){.service-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.service-button{padding:10px 8px;font-size:14px}.registration-step-actions{flex-direction:column-reverse}.registration-step-actions button{width:100%}}


/* Larger, clearer selection tiles for the Front Office */
.department-buttons,
.service-buttons {
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.department-button,
.service-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 18px 42px 18px 18px;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.55;
  text-align: center;
  box-shadow: 0 5px 14px rgba(16, 42, 67, .07);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.department-button {
  border: 1px solid #c5d9f2;
  color: #123e70;
  background: linear-gradient(145deg, #ffffff 0%, #edf5ff 100%);
}

.service-button {
  border: 1px solid #b8e5d2;
  color: #086747;
  background: linear-gradient(145deg, #ffffff 0%, #edfbf4 100%);
}

.department-button::after,
.service-button::after {
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  font-size: 23px;
  line-height: 1;
}

.department-button:hover,
.service-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 11px 22px rgba(16, 42, 67, .12);
}

.department-button.selected {
  border-color: #155eef;
  color: #fff;
  background: linear-gradient(135deg, #1769d2, #1049a8);
  box-shadow: 0 8px 20px rgba(29, 78, 216, .25);
}

.service-button.selected {
  border-color: #047857;
  color: #fff;
  background: linear-gradient(135deg, #0a9b70, #047857);
  box-shadow: 0 8px 20px rgba(4, 120, 87, .22);
}

.department-button.selected::after,
.service-button.selected::after {
  content: "✓";
  color: #fff;
  background: rgba(255,255,255,.2);
  font-size: 15px;
  font-weight: 900;
}

.department-button:focus-visible,
.service-button:focus-visible {
  outline: 3px solid #f0bd58;
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .department-buttons,
  .service-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
  .department-button,
  .service-button {
    min-height: 70px;
    padding: 15px 35px 15px 12px;
    font-size: 15px;
  }
}

@media (max-width: 390px) {
  .department-buttons,
  .service-buttons {
    grid-template-columns: 1fr;
  }
}


/* Colorful Front Office workspace */
.registration-panel {
  position: relative;
  max-width: 1040px;
  margin: 22px auto;
  padding: 26px;
  overflow: hidden;
  border: 1px solid #d7e4f2;
  border-radius: 22px;
  background: linear-gradient(145deg, #ffffff 0%, #f4f8ff 58%, #f0fbf7 100%);
  box-shadow: 0 14px 36px rgba(16,42,67,.09);
}
.registration-panel::before {
  content: "";
  display: block;
  height: 7px;
  margin: -26px -26px 22px;
  background: linear-gradient(90deg,#155eef 0%,#3987e8 42%,#10a879 75%,#f0bd58 100%);
}
.department-result {
  margin: 0 0 22px;
  padding: 14px 17px;
  border: 1px solid #c9ddf5;
  border-left: 5px solid #246bd2;
  border-radius: 13px;
  color: #164477;
  background: #eaf3ff;
  font-weight: 700;
  line-height: 1.6;
}
.registration-form { gap: 20px; }
.registration-step {
  padding: 22px;
  border: 1px solid #e0e9f3;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 5px 16px rgba(16,42,67,.045);
}
.registration-step-title {
  padding-bottom: 13px;
  border-bottom: 2px solid #e8eff8;
  color: #123e70;
  font-size: 20px;
  font-weight: 850;
}
.registration-field { color: #254765; font-size: 14px; }
.registration-field input,
.registration-field select,
.registration-field textarea {
  min-height: 48px;
  border: 1.5px solid #cfdae8;
  border-radius: 12px;
  background: #fbfdff;
  color: #17324d;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.registration-field input:focus,
.registration-field select:focus,
.registration-field textarea:focus {
  outline: none;
  border-color: #2874d8;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(40,116,216,.12);
}
.registration-step .primary-button {
  background: linear-gradient(135deg,#1769d2,#1049a8);
  box-shadow: 0 6px 15px rgba(29,78,216,.2);
}
.registration-step .primary-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(29,78,216,.25);
}
.registration-step .secondary-button {
  border: 1px solid #d5e0ec;
  background: #edf2f8;
}
.service-area { padding: 14px; border-radius: 16px; background: #f0faf5; border: 1px solid #d6eee2; }
.service-empty { border: 1px dashed #b7dcca; }
@media(max-width:620px) {
  .registration-panel { margin: 14px 0; padding: 15px; border-radius: 17px; }
  .registration-panel::before { margin: -15px -15px 17px; }
  .registration-step { padding: 15px; }
  .registration-step-title { font-size: 17px; }
}


/* Neluwa Front Office: department tiles matching the requested 3-column layout */
.registration-choice-section { width: 100%; min-width: 0; }
.registration-choice-section > .registration-step-title { margin-top: 8px; }
.registration-choice-section .department-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}
.registration-choice-section .department-button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 84px;
  padding: 16px 12px;
  border: 1px solid #104b68;
  border-radius: 16px;
  background: #176482;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  justify-content: center;
  box-shadow: 0 5px 14px rgba(16, 42, 67, .10);
}
.registration-choice-section .department-button::after { display: none; }
.registration-choice-section .department-button:hover {
  background: #10536f;
  color: #fff;
  transform: translateY(-2px);
}
.registration-choice-section .department-button.selected {
  background: #0b7d65;
  border-color: #08634f;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(16, 168, 121, .18);
}
.registration-choice-section .department-button:focus-visible {
  outline: 3px solid #f0bd58;
  outline-offset: 3px;
}
@media (max-width: 760px) {
  .registration-choice-section .department-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .registration-choice-section .department-button {
    min-height: 72px;
    padding: 12px 8px;
    font-size: 15px;
  }
}
@media (max-width: 380px) {
  .registration-choice-section .department-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .registration-choice-section .department-button { font-size: 14px; }
}


/* Step 1: visitor details occupy the full available page width */
.registration-details-step .registration-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 17px;
  width: 100%;
}
.registration-details-step .registration-field {
  display: flex;
  width: 100%;
  min-width: 0;
}
.registration-details-step .registration-field input,
.registration-details-step .registration-field textarea {
  width: 100%;
  min-height: 54px;
  box-sizing: border-box;
  font-size: 16px;
}
.registration-details-step .registration-field textarea {
  min-height: 92px;
  resize: vertical;
}
.registration-details-step > .primary-button {
  width: 100%;
  min-height: 54px;
  margin-top: 18px;
}
.registration-choice-step .department-buttons { width: 100%; }
.registration-choice-step .registration-step-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.registration-choice-step .registration-step-actions button { flex: 1; }
@media (max-width: 620px) {
  .registration-details-step .registration-field input,
  .registration-details-step .registration-field textarea { min-height: 50px; }
  .registration-choice-step .registration-step-actions { flex-direction: column; }
  .registration-choice-step .registration-step-actions button { width: 100%; }
}


/* Separate service-selection screen after a department is tapped */
.registration-service-step {
  width: 100%;
  min-width: 0;
}
.registration-service-step .service-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}
.registration-service-step .service-button {
  min-height: 84px;
  padding: 16px 12px;
  border-radius: 16px;
  font-size: 17px;
}
@media (max-width: 760px) {
  .registration-service-step .service-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .registration-service-step .service-button {
    min-height: 72px;
    padding: 12px 8px;
    font-size: 15px;
  }
}


/* A6 Front Office receipt preview and print */
.visitor-receipt{margin:24px auto 8px;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:14px}
.visitor-receipt.hidden{display:none}
.receipt-paper{box-sizing:border-box;width:100%;max-width:397px;min-height:560px;padding:28px 25px;background:#fff;border:1px solid #d8e0e9;border-radius:12px;box-shadow:0 8px 24px rgba(16,42,67,.12);color:#172b4d;font-family:"Noto Sans Sinhala","Iskoola Pota",sans-serif}
.receipt-header{text-align:center}
.receipt-office{font-size:19px;font-weight:800}
.receipt-place{font-size:23px;font-weight:900;margin-top:3px}
.receipt-rule{height:2px;background:#1d4ed8;margin:14px 0 20px}
.receipt-token-label{text-align:center;font-weight:800;color:#475569;font-size:16px}
.receipt-token{text-align:center;font-size:54px;line-height:1.2;font-weight:900;letter-spacing:2px;color:#0b5cab;margin:4px 0 22px}
.receipt-details{display:grid;gap:11px}
.receipt-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px;border-bottom:1px dashed #d7e0ea;padding-bottom:7px;font-size:14px}
.receipt-label{color:#64748b;font-weight:700}
.receipt-value{overflow-wrap:anywhere;color:#172b4d;font-weight:700}
.receipt-footer{margin-top:24px;padding-top:14px;border-top:1px solid #d7e0ea;text-align:center;font-size:13px;font-weight:700;line-height:1.8}
.receipt-print-button{width:min(100%,397px);min-height:48px;border:0;border-radius:12px;background:#155eef;color:#fff;font:inherit;font-weight:800;cursor:pointer}
@media print{
  @page{size:A6 portrait;margin:0}
  html,body{width:105mm!important;height:148mm!important;margin:0!important;padding:0!important;background:#fff!important}
  body *{visibility:hidden!important}
  .visitor-receipt,.visitor-receipt *{visibility:visible!important}
  .visitor-receipt{display:block!important;position:absolute!important;left:0!important;top:0!important;width:105mm!important;height:148mm!important;margin:0!important;padding:0!important}
  .receipt-paper{box-sizing:border-box!important;width:105mm!important;height:148mm!important;max-width:none!important;min-height:0!important;margin:0!important;padding:9mm 8mm!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important}
  .receipt-print-button{display:none!important}
}


/* Final A6 receipt layout: monochrome border, large token and QR panel */
.visitor-receipt{max-width:560px}
.receipt-paper{
  width:397px;min-height:560px;box-sizing:border-box;
  padding:17px 18px;background:#fff;color:#000;
  border:1px solid #111;border-radius:0;box-shadow:none;
  font-family:"Noto Sans Sinhala","Iskoola Pota",sans-serif;
}
.receipt-header{text-align:center;color:#000}
.receipt-office{font-size:25px;line-height:1.35;font-weight:900;color:#000}
.receipt-place{font-size:21px;line-height:1.3;font-weight:800;margin-top:1px;color:#000}
.receipt-rule{height:0;background:transparent;border-top:1px solid #111;margin:9px 0 10px}
.receipt-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin-bottom:10px}
.receipt-date-time{display:flex;flex-direction:column;gap:5px;font-size:13px;line-height:1.45;font-weight:700;color:#000}
.receipt-token-block{text-align:center;min-width:128px;color:#000}
.receipt-token-label{font-size:26px;line-height:1.25;font-weight:900;color:#000}
.receipt-token{font-size:60px;line-height:1.12;font-weight:900;letter-spacing:0;color:#000;margin:0;white-space:nowrap}
.receipt-details{display:grid;gap:5px;margin-top:4px}
.receipt-row{display:grid;grid-template-columns:125px minmax(0,1fr);gap:5px;border:0;padding:0;font-size:11.5px;line-height:1.45;color:#000}
.receipt-label,.receipt-value{color:#000;font-weight:700}
.receipt-value{overflow-wrap:anywhere}
.receipt-feedback{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:10px;margin-top:10px;padding-top:8px;border-top:1px solid #111;color:#000}
.receipt-qr{width:88px;height:88px;box-sizing:border-box;display:grid;place-items:center;font-size:10px;font-weight:900;color:#000;background:#fff;overflow:hidden}.receipt-qr-image{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.receipt-feedback-text{font-size:10.5px;line-height:1.55;font-weight:700;color:#000;text-align:left}
.receipt-footer{margin-top:9px;padding-top:7px;border-top:1px solid #111;text-align:center;font-size:10px;line-height:1.5;font-weight:700;color:#000}
@media print{
  @page{size:A6 portrait;margin:0}
  html,body{width:105mm!important;height:148mm!important;margin:0!important;padding:0!important;background:#fff!important}
  body *{visibility:hidden!important}
  .visitor-receipt,.visitor-receipt *{visibility:visible!important}
  .visitor-receipt{display:block!important;position:absolute!important;left:0!important;top:0!important;width:105mm!important;height:148mm!important;margin:0!important;padding:0!important}
  .receipt-paper{box-sizing:border-box!important;width:105mm!important;height:148mm!important;max-width:none!important;min-height:0!important;margin:0!important;padding:4mm!important;border:1px solid #111!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important}
  .receipt-office{font-size:19pt!important}
  .receipt-place{font-size:15pt!important}
  .receipt-date-time{font-size:9pt!important}
  .receipt-token-label{font-size:17pt!important}
  .receipt-token{font-size:44pt!important}
  .receipt-row{grid-template-columns:36mm minmax(0,1fr)!important;font-size:8.2pt!important;line-height:1.35!important}
  .receipt-feedback{grid-template-columns:27mm minmax(0,1fr)!important;gap:2mm!important;margin-top:2.5mm!important;padding-top:2mm!important}
  .receipt-qr{width:25mm!important;height:25mm!important}.receipt-qr-image{width:25mm!important;height:25mm!important}
  .receipt-feedback-text{font-size:7.5pt!important}
  .receipt-footer{font-size:7pt!important;margin-top:2mm!important;padding-top:1.5mm!important}
  .receipt-print-button{display:none!important}
}


/* Enforce exact A6 portrait page when printing the visitor receipt */
@media print {
  @page {
    size: 105mm 148mm;
    margin: 0;
  }

  html,
  body {
    width: 105mm !important;
    min-width: 105mm !important;
    max-width: 105mm !important;
    height: 148mm !important;
    min-height: 148mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body * {
    visibility: hidden !important;
  }

  .visitor-receipt,
  .visitor-receipt * {
    visibility: visible !important;
  }

  .visitor-receipt {
    display: block !important;
    position: fixed !important;
    inset: 0 auto auto 0 !important;
    width: 105mm !important;
    height: 148mm !important;
    max-width: 105mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    page-break-after: avoid !important;
    break-after: avoid-page !important;
  }

  .receipt-paper {
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 105mm !important;
    min-width: 105mm !important;
    max-width: 105mm !important;
    height: 148mm !important;
    min-height: 148mm !important;
    max-height: 148mm !important;
    margin: 0 !important;
    padding: 4mm !important;
    border: 1px solid #111 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    page-break-inside: avoid !important;
    break-inside: avoid-page !important;
  }

  .receipt-print-button {
    display: none !important;
  }
}


/* Receipt refinements: underline token number and improve visitor detail readability */
.receipt-token {
  display: inline-block;
  padding: 0 3px 3px !important;
  border-bottom: 2px solid #111 !important;
}

.receipt-row {
  font-size: 13px !important;
  line-height: 1.5 !important;
  grid-template-columns: 132px minmax(0, 1fr) !important;
}

.receipt-label,
.receipt-value {
  font-size: inherit !important;
}

@media print {
  .receipt-token {
    padding-bottom: 2mm !important;
    border-bottom: 0.6mm solid #111 !important;
  }

  .receipt-row {
    grid-template-columns: 37mm minmax(0, 1fr) !important;
    font-size: 9pt !important;
    line-height: 1.45 !important;
  }
}


/* One continuous underline across the full date/time and token row */
.receipt-top {
  padding-bottom: 6px !important;
  border-bottom: 2px solid #111 !important;
  margin-bottom: 10px !important;
}
.receipt-token {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
@media print {
  .receipt-top {
    padding-bottom: 2mm !important;
    border-bottom: 0.6mm solid #111 !important;
    margin-bottom: 2.5mm !important;
  }
  .receipt-token {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}


/* Slightly larger QR feedback instruction and thank-you footer */
.receipt-feedback-text {
  font-size: 12px !important;
  line-height: 1.65 !important;
}
.receipt-footer {
  font-size: 11.5px !important;
  line-height: 1.65 !important;
}
@media print {
  .receipt-feedback-text {
    font-size: 8.5pt !important;
    line-height: 1.5 !important;
  }
  .receipt-footer {
    font-size: 8pt !important;
    line-height: 1.5 !important;
  }
}


/* A6 receipt: give visitor details more room and position thank-you lower */
.receipt-details {
  min-height: 48mm;
  align-content: start;
  row-gap: 2.2mm;
}
.receipt-footer {
  margin-top: 5mm !important;
  padding-top: 2.5mm !important;
}
@media print {
  .receipt-details {
    min-height: 48mm !important;
    row-gap: 2.2mm !important;
  }
  .receipt-footer {
    margin-top: 5mm !important;
    padding-top: 2.5mm !important;
  }
}


/* Clear, neat black frame around the A6 visitor receipt */
@media print {
  .receipt-paper {
    border: 0.8mm solid #111 !important;
  }
}
.receipt-paper {
  border: 2px solid #111 !important;
}


/* Slightly enlarge visitor detail text on the A6 receipt */
.receipt-row {
  font-size: 14px !important;
  line-height: 1.55 !important;
}
@media print {
  .receipt-row {
    font-size: 9.5pt !important;
    line-height: 1.45 !important;
  }
}


/* Set visitor detail text to 10.5pt on A6 print */
@media print {
  .receipt-row {
    font-size: 10.5pt !important;
    line-height: 1.4 !important;
  }
}


/* Official office contact details on the A6 visitor receipt (fax intentionally omitted) */
.receipt-contact {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #111;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px 12px;
  color: #000;
  font-size: 9px;
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
}
@media print {
  .receipt-contact {
    margin-top: 1.5mm !important;
    padding-top: 1mm !important;
    gap: 1mm 2mm !important;
    font-size: 6.5pt !important;
    line-height: 1.25 !important;
  }
}


/* Receipt actions: allow reprinting after the print dialog is cancelled or printer fails. */
.receipt-actions{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(100%,397px)}
.receipt-actions .receipt-print-button{width:100%}
.receipt-new-visitor-button{width:100%;min-height:40px;border:1px solid #cbd5e1;border-radius:10px;padding:9px 14px;background:#edf2f7;color:#243b53;font:inherit;font-size:13px;font-weight:750;cursor:pointer}
.receipt-new-visitor-button:hover{background:#dce7f2}
@media print {
  .receipt-actions{display:none!important}
}


/* Final department selection sizing: equal, larger tiles on every screen */
.registration-choice-section .department-buttons,
.registration-choice-step .department-buttons,
.department-buttons {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}
.registration-choice-section .department-button,
.registration-choice-step .department-button,
.department-button {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 92px !important;
  min-height: 92px !important;
  padding: 18px 42px 18px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
}
@media (max-width: 900px) {
  .registration-choice-section .department-buttons,
  .registration-choice-step .department-buttons,
  .department-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
  }
  .registration-choice-section .department-button,
  .registration-choice-step .department-button,
  .department-button {
    height: 86px !important;
    min-height: 86px !important;
    padding: 15px 36px 15px 10px !important;
    font-size: 16px !important;
  }
}
@media (max-width: 380px) {
  .registration-choice-section .department-buttons,
  .registration-choice-step .department-buttons,
  .department-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  .registration-choice-section .department-button,
  .registration-choice-step .department-button,
  .department-button {
    font-size: 14px !important;
    padding-left: 7px !important;
    padding-right: 30px !important;
  }
}


/* Fresh Royal Purple & Gold theme for department selection */
.registration-choice-section .department-buttons,
.registration-choice-step .department-buttons,
.department-buttons {
  gap: 16px !important;
}
.registration-choice-section .department-button,
.registration-choice-step .department-button,
.department-button {
  background: linear-gradient(145deg, #fbf8ff 0%, #f0e9fb 100%) !important;
  color: #513078 !important;
  border: 1.5px solid #d7c5ed !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 16px rgba(81, 48, 120, .09) !important;
  font-weight: 800 !important;
}
.registration-choice-section .department-button::after,
.registration-choice-step .department-button::after,
.department-button::after {
  background: #fff !important;
  color: #7547a5 !important;
  box-shadow: 0 2px 7px rgba(81, 48, 120, .12) !important;
}
.registration-choice-section .department-button:hover,
.registration-choice-step .department-button:hover,
.department-button:hover {
  background: linear-gradient(145deg, #f0e5ff 0%, #e5d5f7 100%) !important;
  border-color: #a985d0 !important;
  color: #40205f !important;
  box-shadow: 0 10px 22px rgba(81, 48, 120, .16) !important;
}
.registration-choice-section .department-button.selected,
.registration-choice-step .department-button.selected,
.department-button.selected {
  background: linear-gradient(135deg, #60358b 0%, #3f205f 100%) !important;
  border-color: #d5ad55 !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(213, 173, 85, .22), 0 9px 22px rgba(63, 32, 95, .24) !important;
}
.registration-choice-section .department-button.selected::after,
.registration-choice-step .department-button.selected::after,
.department-button.selected::after {
  background: #e2bd69 !important;
  color: #3f205f !important;
}
.registration-choice-section .department-button:focus-visible,
.registration-choice-step .department-button:focus-visible,
.department-button:focus-visible {
  outline: 3px solid #d5ad55 !important;
  outline-offset: 3px !important;
}