/* ==================================================
  CSS Table of Contents (logical page order)

  Page markers below help reviewers read the stylesheet
  in the order of the site flow. These are comments only
  and do not change styles.

  1. Welcome — Hero
  2. Step 1 — Category selection / front
  3. Step 2 — MSME details
  4. Step 3 — Documents / Uploads
  5. Step 4 — Financials
  6. Step 5 — Submission
  7. Step 6 — Optional / Popular Award
  8. Thank-you / Receipt
  9. Shared components, Modals & Utilities

  ================================================== */

.container-lg {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Global font scaling: reduce base by 2px (from 16px -> 14px) */
html { font-size: 14px; }

/* Page background and body typography for a cleaner, professional look */
body{
    background: #d6d6d6;
    color: #16324f;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
}
/* ==================================================
  Page: Welcome — Hero
  Hero animations and hero layout rules
  ================================================== */
/* Hero section entrance animations */
.hero .anim-target {
  opacity: 0;
  transform: translateY(8px);
  /* very slow, smooth fade-in while keeping movement responsive */
  transition: opacity 2000ms cubic-bezier(.16,.84,.32,1), transform 900ms cubic-bezier(.16,.84,.32,1);
  transition-delay: 80ms; /* small global delay so entrances feel smoother */
}
.hero .anim-in { opacity: 1; transform: translateY(0); }

/* Specific variants */
.hero .fade-in { transform: translateY(0); }
.hero .slide-in-right { transform: translateX(40px); }
.hero .slide-in-up { transform: translateY(18px); }

/* When applied with .anim-in the transform is reset and opacity becomes 1 */
.hero .anim-in.fade-in { transform: translateY(0); }
.hero .anim-in.slide-in-right { transform: translateX(0); }
.hero .anim-in.slide-in-up { transform: translateY(0); }

/* Optional small stagger helper classes to adjust delays in markup */
.anim-delay-0 { transition-delay: 150ms; }
.anim-delay-1 { transition-delay: 220ms; }
.anim-delay-2 { transition-delay: 440ms; }
.anim-delay-3 { transition-delay: 660ms; }
.anim-delay-4 { transition-delay: 880ms; }


.logo-box.anim-target {

  transition: transform 1800ms cubic-bezier(.16,.84,.32,1), opacity 2200ms cubic-bezier(.16,.84,.32,1);
  transition-delay: 140ms;
  opacity: 0; /* start hidden */
}
.logo-box.anim-in { opacity: 1; }
/* Also fade the image inside for a smoother effect and add a slight internal delay */
.logo-box img {
  opacity: 0;
  transition: opacity 2000ms cubic-bezier(.16,.84,.32,1) 300ms; /* slower image fade with a small delay */
}
.logo-box.anim-in img { opacity: 1; }
/* style trailing required asterisk added by JS */
label.form-label .required {
  color: #d32f2f;        /* red accent for required fields */
  margin-left: 6px;      /* small gap from the label text */
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1;
  vertical-align: middle;
}
.card {
  max-width: 960px;
  margin: 40px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  overflow: visible;
  padding: 40px;
}
/* ==================================================
  Page: Step 1 — Category selection / front
  Card and step-1 specific layout rules
  ================================================== */
.card.card--step1 { padding-right: 48px; }
.step[data-step="1"] .card, .step[data-step="1"] .step-card { padding-right: 44px; }
.topbar{ background: transparent; padding: 24px 0 12px; }
.topbar-inner{ display:flex; align-items:center; min-height:100px; }
.topbar-logo{ height: 60px; max-width: 100%; object-fit: contain; display:block }
.step .step-header{ height:90px }
.step-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; }
.step-header-text{ font-size:14px; font-weight:300; color:#ffffff; }
.step-header-meta{ margin-left:auto; text-align:right; min-width:160px; padding-left:12px; }
.header-app-number{ font-size:18px; font-weight:400; color:#ffffff; letter-spacing:0.2px; white-space:nowrap; }
.header-app-number.small{ font-size:16px; font-weight:300; }

@media (max-width: 640px){
  .header-app-number{ font-size:18px; }
  .step-header-meta{ min-width:110px; }
}
@media (min-width: 769px){
  .topbar{ padding: 10px 0 14px; }
  .topbar-inner{ min-height: 100px; }
  .topbar-logo{ height: 100px; }
}
.step-card{ padding:24px 20px; max-width:1280px; margin:0 auto; }
.step[data-step="1"] .step-card{ padding:40px 36px; }
.step[data-step="1"] .form-grid{ padding-right:16px }
.step[data-step="1"] .panel{ padding-right:28px }
.step[data-step="1"] .choice-group{ gap: 28px 36px; row-gap: 18px; justify-content: center; }
.step[data-step="1"] .choice-group .radio-pill{ margin: 0; }
.step[data-step="1"] .radio-pill>div{ padding: 10px 10px; border-radius: 12px; min-width: 150px; min-height: 29px; line-height: 1.15; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.two-col-form{ display:grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 992px){ .two-col-form{ grid-template-columns: 1fr } }

/* ==================================================
  Page: Step 2 — MSME details
  Step 2 specific rules (radio themes and layout)
  ================================================== */

/* Panel Design System */
.step-description {
  margin-bottom: 32px;
  color: #555;
  font-size: 16px;
  line-height: 1.6;
  max-width: 900px;
}

/* base panel styles consolidated below (Panels section) */

.panel--white {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  padding: 28px 32px 24px 28px;
  margin-bottom: 32px;
}

.panel--white .document-section { background-color: #ffffff; border-color: #e2ecf6; }

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  color: #16324f;
  font-weight: 600;
  font-size: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 16px;
}

.section-title svg {
  margin-right: 8px;
  color: #0066cc;
}

.form-description {
  color: #4b5563;
  margin-bottom: 16px;
  font-size: 14px;
}

.form-actions {
  margin-top: 24px;
}

/* Input and Button Styling - centralized below in .btn-submit (gradient) */

/* File Upload Styling */
.file-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.file-upload-item {
  margin-bottom: 16px;
}

.file-input-wrapper {
  margin-top: 8px;
}

.file-hint {
  display: block;
  color: #6b7280;
  font-size: 12px;
  margin-top: 4px;
}

/* ==================================================
  Page: Step 3 — Documents & Uploads
  Upload tiles, progress and status indicators
  ================================================== */
/* New Document Upload Styling */
.document-section {
  padding: 22px 24px;
  border: 1px solid #e2ecf6;
  border-radius: 14px;
  background-color: #f7fbff;
  margin-bottom: 32px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.04);
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 20px;
}

@media (min-width: 768px) {
  /* Two columns on tablets/desktops */
  .document-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  /* Three columns on wide screens for a denser but airy layout */
  .document-section { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.document-section h3 {
  color: #00796b;
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: 600;
}


/* Light green document upload tile */
.document-item {
  background-color: #f3fff6; /* very light green */
  border: 1.5px solid #8ee3b6; /* mint border */
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(14, 84, 46, 0.05);
  transition: box-shadow 0.18s ease, transform 0.12s ease, border-color 0.12s ease, background-color 0.2s ease;
  overflow: visible;
}

.document-item:hover {
  box-shadow: 0 10px 24px rgba(14, 84, 46, 0.10);
  border-color: #58d39c;
  transform: translateY(-1px);
}

.document-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: #0b6b3a;
}

/* Uploaded pill styling applies anywhere (status header or bottom meta) */
.uploaded-label {
  background: #e8fff3;
  border: 1px solid #8ee3b6;
  color: #0b6b3a;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.document-status .text-success { /* keep legacy selector for any existing uses */
  background: #e8fff3;
  border: 1px solid #8ee3b6;
  color: #0b6b3a;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
/* Add a check mark for a friendlier uploaded indicator */
/* Show a tick before the uploaded text */
.uploaded-label::before { content: "✓"; font-weight: 700; margin-right: 4px; }

.document-name {
  font-weight: 600;
  color: #16324f;
  font-size: 15px;
  letter-spacing: 0;
  margin-bottom: 8px;
}

/* Show and style the action area (e.g., View button) */
.document-action { display: inline-flex !important; align-items: center; gap: 8px; }
.document-action .btn-view,
.document-action .action-link,
.document-action button {
  appearance: none;
  background: #ffffff;
  color: #0b6b3a;
  border: 1px solid #8ee3b6;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(14,84,46,0.06);
  transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
.document-action .btn-view { margin-right: 2px; }
.document-action .btn-view:hover,
.document-action .action-link:hover,
.document-action button:hover {
  background: #eafff4;
  border-color: #58d39c;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(14,84,46,0.10);
}
/* Inside the dashed upload box, stack the text and action vertically */
.file-upload-modern .document-action {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.document-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
/* When meta lives inside the upload box, keep spacing tidy */
.file-upload-modern .document-meta { margin-top: 8px; }

.upload-placeholder {
  color: #757575;
  padding: 8px 0;
  font-style: italic;
}

.file-upload-modern {
  position: relative;
  border: 2px dashed #cfd7e3;         /* make the whole region the dashed box */
  border-radius: 10px;
  padding: 12px 14px;                 /* space for the label and the meta row */
  background-color: #ffffff;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
}

/* =========================
  Modals (overlay, OTP)
  Canonical modal and OTP rules live here. Keep duplicates removed.
  ========================= */

.modal {
  position: fixed;
  inset: 0; /* top/right/bottom/left */
  display: none; /* toggled via inline style or JS */
  background: rgba(6, 18, 36, 0.5);
  z-index: 1200;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* If JS sets display:block, switch to flex so content is centered vertically/horizontally */
#otpModal[style*="display: block"],
.modal[style*="display: block"] {
  display: flex !important;
}

.modal .modal-content {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(13, 32, 60, 0.2);
  overflow: visible;
  padding: 20px 22px;
  box-sizing: border-box; /* ensure padding doesn't cause unexpected overflow */
}

#otpModal {
  align-items: center;
  justify-content: center;
  padding: 12px;
}

#otpModal .modal-content {
  max-width: 350px;
  width: 100%;
  min-width: 280px;
  max-height: 72vh; /* allow a bit more room so content fits comfortably */
  overflow: hidden;  /* contain internals; body will scroll if needed */
  padding: 14px 16px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* let body take natural height; footer sits inside */
}

#otpModal .modal-header {
  position: relative;
  padding: 10px 16px 0 16px;
  min-height: 50px;
  border-bottom: none;
  background-image: url('/images/banner2.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  border-radius: 12px;
  overflow: hidden;
}


#otpModal .modal-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(6, 18, 36, 0.28);
  border-radius: 12px;
  pointer-events: none;
}

#otpModal .modal-header h3 { position: relative; z-index: 2; color: #fff }
#otpModal .modal-header .close { position: relative; z-index: 3; color: #fff; background: rgba(255,255,255,0.08); border-radius: 50%; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center }

#otpModal .modal-body { flex: 1 1 auto; overflow: auto; padding: 8px 4px 0 4px; -ms-overflow-style: none; scrollbar-width: none; }
#otpModal .modal-body::-webkit-scrollbar { width: 0; height: 0; }
#otpModal .modal-footer {
  margin-top: 8px;   /* tighter spacing to keep button inside */
  padding-top: 8px;
  border-top: none;  /* remove global border to save vertical space */
}

@media (max-width: 420px) {
  #otpModal .modal-content { max-width: 92%; min-width: unset; padding: 12px }
}

/* OTP segmented input styles */
.otp-segment-row { display:flex; gap:8px; justify-content:center; align-items:center; margin-top:8px }
.otp-digit { width:36px; height:44px; border-radius:8px; text-align:center; font-size:18px; font-weight:600; border:1px solid rgba(10,30,60,0.08); background:#fff; box-shadow:inset 0 -1px 0 rgba(0,0,0,0.02); }
.otp-digit:focus { outline:none; border-color: #3b82f6; box-shadow:0 6px 20px rgba(59,130,246,0.12) }
.otp-segment-row .otp-digit::placeholder { color: rgba(0,0,0,0.25) }

@media (max-width:420px) {
  .otp-digit { width:36px; height:44px; font-size:18px }
}

/* OTP modal specific tightening so everything fits within the card */
#otpModal .otp-segment-row { gap: 6px; }
#otpModal .otp-digit { width: 32px; height: 40px; font-size: 16px; }
#otpModal .input-card { padding: 12px; margin: 10px 0 6px; }

/* When viewport height is very small, further compact the OTP modal */
@media (max-height: 640px) {
  #otpModal .modal-header { min-height: 44px; padding: 8px 12px 0 12px; }
  #otpModal .modal-content { max-height: 78vh; }
  #otpModal .otp-digit { height: 44px; }
}

/* Highlighted input card inside modal for OTP and similar forms */
.modal .input-card {
  background: linear-gradient(180deg, #fbfdff 0%, #f6f9ff 100%);
  border: 1px solid rgba(29, 78, 216, 0.06);
  box-shadow: 0 8px 24px rgba(12, 42, 100, 0.06);
  border-radius: 10px;
  padding: 18px;
  margin: 12px 0 8px 0;
}

.modal .input-card label { color: #27425a; font-weight:600; margin-bottom:6px; display:block }
.modal .input-card .form-control { background: #fff; border:1px solid rgba(10,30,60,0.06); padding:12px 14px; border-radius:8px }

/* OTP-specific input: keep field compact for 6-digit entry and center it */
.modal .input-card #otpInput {
  max-width: 320px;    /* compact width for 6-digit input */
  width: 100%;
  display: block;
  margin: 10px auto 0;
  text-align: center;
  font-size: 16px;
  letter-spacing: 2px;
}

@media (max-width: 420px) {
  .modal .input-card #otpInput { max-width: 260px; font-size:15px }
}

/* refined alert styles used inside modals */
.modal .alert { display:block; padding:10px 12px; border-radius:8px; margin-bottom:10px }
.modal .alert-danger { background:#fff1f2; color:#9b1c1c; border:1px solid #f5c6cb }
.modal .alert-warning { background:#fff8e6; color:#8a5a00; border:1px solid #fae5b1 }
.modal .alert-success { background:#e8f7ee; color:#0f5132; border:1px solid #c6efda }

/* decorative button underline / subtle glow */
.modal .btn-resume { position:relative; overflow:visible }
.modal .btn-resume:after { content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:-12px; width:70%; height:12px; background: radial-gradient(closest-side, rgba(67,105,255,0.12), transparent); border-radius:8px }

/* small visual tweak: reduced modal padding on very small screens */
@media (max-width:420px) {
  .modal .modal-content { padding: 14px }
}

.modal-card { padding: 20px; }

.modal-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 6px }
.modal-header h3 { margin:0; font-size:18px; color:#16324f }
.modal-header .close { background:transparent; border:none; font-size:26px; line-height:1; cursor:pointer; color:#6b7280 }

.modal-body { padding-top:8px }
.modal-body .form-group { margin-top:12px }
.modal-body label { display:block; margin-bottom:6px; color:#4b5563 }
.modal-body .form-control { width:100%; padding:10px 12px; border-radius:8px; border:1px solid rgba(0,0,0,0.08) }

.modal-footer { display:flex; align-items:center; justify-content:center }

/* Reuse existing .btn-resume look for primary action in modals */
.modal .btn-resume { min-width:160px; height:44px; border-radius:12px; padding:.45rem .9rem; box-shadow:0 8px 20px rgba(67,105,255,0.14); color:#fff; border:none; display:inline-flex; align-items:center; justify-content:center }

/* small-screen tweaks */
@media (max-width: 560px) {
  .modal .modal-content { max-width: 100%; padding: 14px }
  .modal-header h3 { font-size:16px }
}

.file-upload-modern:hover {
  background-color: #f4f7fc;
  border-color: #9fb7d6;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(25, 118, 210, 0.12);
}

/* Only the top label/button area triggers the file picker; keep meta clickable */
.file-upload-modern input[type="file"] {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 44px;
  cursor: pointer;
  top: 0;
  left: 0;
  z-index: 1;
}

.file-upload-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 44px;
  color: #52606d;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  transition: color 0.18s ease;
  margin: 0;
}


.file-upload-modern .document-meta {
  position: relative;
  z-index: 2;
}

/* subtle separation between the label row and the actions inside the dashed box */
.file-upload-modern .document-meta { border-top: 1px dashed #e3eaf4; padding-top: 8px; margin-top: 10px; }


.financial-card {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.financial-details-table {
  display: grid;
  grid-template-columns: 2fr 1fr;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(11,35,90,0.04);
  border: 1px solid rgba(20,58,102,0.06);
}

.financial-table-header,
.financial-table-row {
  display: contents;
}

.financial-data-type-col {
  grid-column: 1;
  padding: 14px;
  font-weight: 700;
  color: #16324f;
  background: linear-gradient(90deg, #f0f6ff 0%, #ffffff 100%);
  border-right: 1px solid rgba(20,58,102,0.05);
}

.financial-year-col {
  grid-column: auto;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(20,58,102,0.04);
  border-bottom: 1px solid rgba(20,58,102,0.04);
  background: #ffffff;
}

.financial-table-header .financial-data-type-col,
.financial-table-header .financial-year-col {
  background: linear-gradient(180deg, #5f84ff 0%, #446dff 100%);
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  justify-content: center;
}

.financial-year-col:last-child { border-right: none; }

.financial-data-type-col,
.financial-year-col {
  padding: 12px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(20,58,102,0.04);
}

.financial-table-row .financial-data-type-col { background: linear-gradient(90deg,#f8fbff 0%, #ffffff 100%); }
.financial-table-row .financial-year-col { background: #ffffff; }

.financial-table-row:nth-child(even) .financial-data-type-col,
.financial-table-row:nth-child(even) .financial-year-col {
  background-color: #fbfdff;
}


.financial-year-col .form-control { max-width: 160px; margin: 0 auto; }

/* Plus/add-year button tuned to header palette */
.add-year-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: #ffffff;
  cursor: pointer;
  padding: 6px 8px;
  margin-left: 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}

.add-year-btn:hover {
  background-color: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

.add-year-btn svg { width: 14px; height: 14px; }

/* =========================
  Uploads (status, progress)
  Canonical definitions for upload-status/progress live here.
  ========================= */

.upload-status {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.upload-status.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.upload-status.error {
  background-color: #f8d7da;
  color: #cd2435;
  border: 1px solid #f5c6cb;
}

/* Upload progress styling */
.upload-progress {
  margin-top: 8px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.progress-fill {
  height: 100%;
  background-color: #007bff;
  width: 0%;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 12px;
  color: #6c757d;
  text-align: center;
}


/* File upload modern styling for Step 5 */
.file-upload-modern {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  background-color: #f9fafb;
  transition: all 0.2s ease;
  cursor: pointer;
}

.file-upload-modern:hover {
  border-color: #0066cc;
  background-color: #f0f8ff;
}

.file-upload-modern.uploading {
  border-color: #0066cc;
  background-color: #f0f8ff;
}

.file-upload-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: #0066cc;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.file-upload-button:hover {
  background-color: #0052a3;
}

.file-info {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  background-color: #e8f4fd;
  border-radius: 6px;
  width: 100%;
}

.file-name {
  font-size: 14px;
  color: #374151;
  flex: 1;
}

.btn-remove {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.btn-remove:hover {
  background-color: #f8d7da;
}

.input-wrapper {
  position: relative;
}

.currency-symbol {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
}

.input-wrapper input {
  padding-left: 24px;
}

/* Step headers and subtitles */
.step .step-header .step-subtitle{color:#ffffff;font-weight:500;margin-top:6px}

/* Responsive tweaks for financial tables */
@media (max-width: 600px) {
  .financial-details-table {
    grid-template-columns: 1fr;
  }

  .financial-data-type-col,
  .financial-year-col {
    border-right: none;
    border-bottom: 1px solid #ddd;
  }

  .financial-table-header .financial-year-col::before {
    content: attr(data-year);
    font-weight: bold;
    margin-right: 10px;
  }

  .financial-table-header .financial-year-col {
    justify-content: flex-start;
  }
}

/* Category Selection */
.category-selection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.category-option {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 16px;
  transition: all 0.2s ease;
}

.category-option:hover {
  border-color: #0066cc;
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
}

.category-label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  cursor: pointer;
}

.category-name {
  font-weight: 600;
  margin-left: 8px;
  color: #16324f;
}

.category-description {
  font-size: 14px;
  color: #4b5563;
  margin-top: 4px;
  margin-left: 24px;
}

.category-requirements {
  padding: 12px;
  background: #f9fafb;
  border-radius: 6px;
}

/* Loading Indicator */
/* ==================================================
  Shared components & utilities
  Buttons, alerts, loaders, helpers used across pages
  ================================================== */
.loading-indicator {
  text-align: center;
  padding: 16px;
  color: #6b7280;
  font-style: italic;
}

/* Form Sections */
.form-section {
  margin-bottom: 32px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 28px 36px;
  margin-top: 20px;
  max-width: 1200px;
}

.form-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.form-field .form-label {
  margin-bottom: 10px;
  color: #2c3e50;
  font-weight: 600;
  font-size: 12px;
}
.choice-group { display:flex; flex-wrap:wrap; gap:18px 22px; }
.form-field .form-control {
  padding: 8px 10px;
  border: 1px solid #dbe1e8;
  border-radius: 8px;
  font-size: 14px;
  min-height: 20px;
  width: 100%;
  transition: all 0.2s ease;
  background: #fdfdff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.form-field .form-control:hover { border-color: #c7d2e0; }
.form-field .form-control:focus { outline:none; border-color:#3498db; box-shadow:0 0 0 3px rgba(52,152,219,0.15); transform: translateY(-1px); }
.btn-submit {
  background: linear-gradient(180deg, #5f84ff 0%, #446dff 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 8px 18px rgba(47, 78, 255, 0.18);
}
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(47, 78, 255, 0.22); }
.btn-submit:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(47, 78, 255, 0.16); }
.btn-submit:focus { outline: none; box-shadow: 0 0 0 6px rgba(68, 109, 255, .12), 0 10px 22px rgba(47, 78, 255, 0.22); }

/* --- Updated applicant-section and alignment rules --- */
.applicant-section {
  background: #eef5fc;
  border: none;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
  box-shadow: none;
  width: 100%;
  box-sizing: border-box;
}
.applicant-section .form-grid {
  grid-template-columns: 1fr;
  gap: 16px;
}
.applicant-section .form-control {
  background: #fdfdff;
  border: 1px solid #b8d6f5;
  padding: 8px 10px;
  min-height: 34px;
}
.applicant-section .form-control:focus {
  background: #fff;
  border-color: #1976d2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.08);
}
.form-actions { border-top: 1px solid #e9ecef; padding-top: 20px; margin-top: 24px; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .document-section { grid-template-columns: 1fr; }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .applicant-section {
    padding: 20px !important;
  }

  .radio-pill {
    flex: 1;
    min-width: 0;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px 24px;
  }
}
.step-card form h3{ grid-column: 1 / -1; margin-top:18px; font-size:1.25rem }
.step-card form > div[style],
.step-card form > .full-width,
.step-card form > .row-full{ grid-column: 1 / -1; }
/* make our .col-md-6 behave as grid children */
.step-card .col-md-6{ display:block }
.step-card label.form-label{ display:block; margin-bottom:6px; font-weight:600 }
.step-card .form-control{ width:100%; }

/* Utility classes used in Step 1 */
.inline-row { display:flex; align-items:center; gap:12px; }
.form-grid .full-width { grid-column: 1 / -1; }
.form-result { margin-top:16px; color:#b00; text-align:center; font-weight:500; }
.fixed-label { font-weight:600; min-width:180px; }
.mt-6 { margin-top:6px; }
.step-description--narrow { text-align:center; max-width:600px; margin:0 auto 32px; }

/* Small responsive adjustment */
@media (max-width:768px){
    .step-card form{ grid-template-columns: 1fr; }
    .hero { min-height:360px }
}
.step-header-text{ font-size:1.05rem; font-weight:600; color:#fff }
.form-label strong{ color:#213547 }
.form-control{ border:1px solid #e6eefc; padding:8px 10px; border-radius:8px; box-shadow:none; background:#fff; color:#0b2340; min-height: 34px }
/* Remove global submit button override; use .btn-submit only to avoid conflicts */

.financial-card .card-title {
    font-weight: 600;
}
.financial-card .yt-rows .financial-row .form-control {
    min-height: 34px;
    padding: 6px 10px;
}
.financial-card .yt-rows {
    margin-top: 4px;
}
.financial-card .small.text-muted {
    opacity: .9;
}
@media (max-width: 768px){
    .financial-card .row.g-2 > .col-5, .financial-card .row.g-2 > .col-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* --- Thank you page styles moved from inline in thank-you.blade.php --- */
.ty-container{max-width:980px;margin:0 auto;padding:0 24px}
.success-hero{
  background-image: url('/images/banner2.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
  border-radius: 16px;
  padding: 36px 28px;
  margin: 16px 0 24px;
  position: relative;
  overflow: hidden;
}
.success-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.success-hero .row{display:flex;align-items:center;gap:18px;position:relative;z-index:1}
.success-hero .check{width:56px;height:56px;border-radius:999px;background:#fff;color:#3652ff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(255,255,255,0.25);position:relative;z-index:1}
.success-hero h1{margin:0;font-size:28px;line-height:1.2}
.success-hero p{margin:6px 0 0;color:rgba(255,255,255,0.92)}
.app-badge{display:inline-block;background:#fff;color:#0b2340;border-radius:999px;padding:6px 12px;font-weight:700;box-shadow:0 6px 16px rgba(2,6,23,0.14);margin-top:10px}
.receipt-card{background:#fff;border:1px solid #e9edf7;border-radius:12px;box-shadow:0 4px 18px rgba(2,6,23,0.06);padding:18px 18px 6px 18px;margin:8px 0 24px}
.receipt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.receipt-grid .label{color:#5b6b82;font-size:13px}
.receipt-grid .value{font-weight:600;color:#0b2340}
.actions{display:flex;gap:12px;align-items:center;margin:6px 0 10px}
.btn-ghost{background:transparent;border:2px solid #cfdcff;color:#2b4fd6;border-radius:12px;padding:.5rem 1rem;cursor:pointer}
@media (max-width:768px){.receipt-grid{grid-template-columns:1fr}}

/* ==================================================
  Page: Thank-you / Receipt
  Styles used on the thank-you and receipt pages
  ================================================== */
/* End thank-you styles */
.d-flex .radio-pill{margin:0}
.d-flex .radio-pill+.radio-pill{margin-left:1rem}
.step-card .d-flex.gap-3{margin-bottom:24px}
@media (max-width:768px){
    .step-card .d-flex.gap-3{margin-bottom:16px}
}
.steps-nav{display:flex;gap:10px;justify-content:flex-start;margin:18px 0;padding-left:0}
.step-dot{width:12px;height:12px;border-radius:999px;background:#e9edf7;border:2px solid rgba(0,0,0,0.06);box-shadow:0 2px 6px rgba(2,6,23,0.06);cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s}

.step-progress-bar{
  margin-top:12px;
  margin-bottom:16px;
  overflow: visible !important;
  position: relative;
  z-index: 10;
}
.step-progress-bar .progress-bar{
  display:flex;
  align-items:center;
  gap:12px;
  max-width: calc(100% - 100px);
  margin: 0 auto;
  padding:8px 24px;
  background:transparent;
  overflow: visible !important;
  position: relative;
}
.step-progress-bar .progress-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:64px;
  overflow: visible !important;
  position: relative;
}
.step-progress-bar .step-marker{
  width:36px;
  height:36px;
  border-radius:999px;
  background:#eef2ff;
  color:#2b3aef;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  box-shadow:0 4px 12px rgba(11,35,90,0.06);
  position: relative;
  z-index: 5;
}
 .step-progress-bar .step-label{
  margin-top:6px;
  margin-bottom:16px;
  font-size:10px;
  color:#3a4758;
  text-align:center;
  overflow: visible !important;
  position: relative;
}
.step-progress-bar .progress-sep{
  flex:1;
  height:4px;
  background:#e9eefb;
  border-radius:4px;
  margin:0 6px;
  position: relative;
  z-index: 1;
  align-self: center;
  transform: translateY(-12px);
}
.step-progress-bar .progress-step.done .step-marker{
  background: linear-gradient(90deg,#5f84ff 0%, #446dff 100%);
  color:#fff;
}
.step-progress-bar .progress-step.active .step-marker{
  box-shadow:0 6px 18px rgba(68,109,255,0.18);
  transform: translateY(-2px);
}
.step-progress-bar .progress-step.done + .progress-sep{
  background: linear-gradient(90deg,#5f84ff 0%, #446dff 100%);
}

@media (max-width: 768px){
  .step-progress-bar .progress-bar{
  gap:8px;
  overflow:visible !important;
  margin: 0 8px;
  padding:6px 12px;
  }
  .step-progress-bar .progress-step{
    width:56px;
    overflow: visible !important;
  }
  .step-progress-bar .step-label{
    display:none;
  }
}

/* Compact progress bar for narrow phones <= 580px
   Reduce lateral insets, padding, marker sizes and separators so the bar fits snugly.
*/
@media (max-width: 580px) {
  .step-progress-bar {
    margin-top: 8px;
    margin-bottom: 12px;
  }

  .step-progress-bar .progress-bar{
    max-width: calc(100% - 40px); /* smaller horizontal gutters */
    margin: 0 6px;
    padding: 4px 8px;
    gap: 6px;
    align-items: center;
  }

  .step-progress-bar .progress-step{
    width: 48px; /* smaller step blocks */
  }

  .step-progress-bar .step-marker{
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .step-progress-bar .step-label{ display:none; }

  .step-progress-bar .progress-sep{
    height: 3px;
    margin: 0 4px;
    transform: translateY(-10px);
  }
}
.step-dot:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(2,6,23,0.08)}
.step-dot.active{background:#5f6cff;border-color:transparent;box-shadow:0 8px 20px rgba(95,108,255,0.18)}
.step-dot.disabled{opacity:.45;cursor:default}
.step[data-step="1"] .step-header,
.step[data-step="3"] .step-header{
    background-color:#5f6cff;
    background-image: url('/images/banner1.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    height:100px;
  width:100%;
  padding:0 24px;
  box-sizing: border-box;
    border-radius:12px;
    color:#fff;
    display:flex;
    align-items:center;
    overflow:hidden;
}
.step[data-step="2"] .step-header{
    background-color:#5f6cff;
    background-image: url('/images/banner2.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    height:100px;
  width:100%;
  padding:0 24px;
  box-sizing: border-box;
    border-radius:12px;
    color:#fff;
    display:flex;
    align-items:center;
    overflow:hidden;
}
.step[data-step="5"] .step-header{
    background-color:#5f6cff;
    background-image: url('/images/banner1.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    height:100px;
  width:100%;
  padding:0 24px;
  box-sizing: border-box;
    border-radius:12px;
    color:#fff;
    display:flex;
    align-items:center;
    overflow:hidden;
}
.step[data-step="4"] .step-header{
    background-color:#5f6cff;
    background-image: url('/images/banner2.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    height:100px;
  width:100%;
  padding:0 24px;
  box-sizing: border-box;
    border-radius:12px;
    color:#fff;
    display:flex;
    align-items:center;
    overflow:hidden;
}
.step[data-step="6"] .step-header{
    background-color:#5f6cff;
    background-image: url('/images/banner2.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    height:100px;
  width:100%;
  padding:0 24px;
  box-sizing: border-box;
    border-radius:12px;
    color:#fff;
    display:flex;
    align-items:center;
    overflow:hidden;
}
.step[data-step="4"] .step-header .step-header-text{color:#fff;font-weight:600;font-size:1.05rem;padding-left:18px}
.step[data-step="1"] .step-header img{display:none!important}
.step[data-step="2"] .step-header .step-header-text,
.step[data-step="3"] .step-header .step-header-text,
.step[data-step="4"] .step-header .step-header-text,
.step[data-step="5"] .step-header .step-header-text,
.step[data-step="6"] .step-header .step-header-text{color:#fff;font-weight:600;font-size:1.05rem;padding-left:18px}
.step[data-step="1"] .step-header img,
.step[data-step="2"] .step-header img,
.step[data-step="3"] .step-header img,
.step[data-step="4"] .step-header img,
.step[data-step="5"] .step-header img,
.step[data-step="6"] .step-header img{display:none!important}
@media (max-width:960px){
    .step[data-step="1"] .step-header,
    .step[data-step="2"] .step-header,
    .step[data-step="3"] .step-header,
  .step[data-step="4"] .step-header,
  .step[data-step="5"] .step-header,
  .step[data-step="6"] .step-header{height:120px;background-size:cover}
}
@media (max-width:768px){
    .steps-nav{justify-content:flex-start;padding-left:6px}
    .step[data-step="1"] .step-header,
    .step[data-step="2"] .step-header,
    .step[data-step="3"] .step-header,
  .step[data-step="4"] .step-header,
  .step[data-step="5"] .step-header,
  .step[data-step="6"] .step-header{height:100px;padding:8px 12px;background-size:cover}
}
.step[data-step="1"] .radio-pill input[type=radio]:checked + div,
.step[data-step="1"] .radio-pill:has(input[type=radio]:checked) > div{
  color: #fff;
  box-shadow: 0 0 0 3px rgba(95,108,255,0.28);
}
.step[data-step="1"] .radio-pill input[type=radio]:checked + div strong,
.step[data-step="1"] .radio-pill:has(input[type=radio]:checked) > div strong{ color: #fff; }
.step[data-step="1"] .radio-pill input[type=radio]:checked + div .text-muted,
.step[data-step="1"] .radio-pill:has(input[type=radio]:checked) > div .text-muted,
.step[data-step="1"] .radio-pill input[type=radio]:checked + div .radio-sub,
.step[data-step="1"] .radio-pill:has(input[type=radio]:checked) > div .radio-sub,
.step[data-step="1"] .radio-pill input[type=radio]:checked + div small,
.step[data-step="1"] .radio-pill:has(input[type=radio]:checked) > div small{ color: #ffffff !important; opacity: 1; }
.step .step-header{margin-bottom:32px; box-sizing: border-box}

.step[data-step="2"] .radio-pill{
  margin: 0 12px 10px 0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.step[data-step="2"] .radio-pill>div{
  padding: 8px 18px;
  min-width: 125px;
  min-height: 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align: center;
  gap:0px;
  border: 1px solid #e6eef7;
  border-radius: 12px;
  background: #ffffff;
  position: relative;
}
.step[data-step="2"] .radio-pill:hover>div{
  box-shadow: 0 8px 20px rgba(25,118,210,0.06);
  transform: none;
}
.step[data-step="2"] .radio-pill input[type=radio]{
  position:absolute; inset:0; opacity:0; width:100%; height:100%; z-index:3; cursor:pointer;
}

/* Selected state: solid blue with optional left pattern (btn4.svg) */
.step[data-step="2"] .radio-pill input[type=radio]:checked + div,
.step[data-step="2"] .radio-pill:has(input[type=radio]:checked) > div{
  background-color: #5f6cff;
  background-image: url('/images/btn4.svg');
  background-repeat: cover;
  background-position: left 0px center;
  background-size: auto 100%;
  color: #ffffff; /* white text on blue fill */
  border-color: #5f6cff; /* blue outline */
  box-shadow: 0 6px 18px rgba(95,108,255,0.10), 0 0 0 2px rgba(95,108,255,0.18);
  padding-left: 0px; /* space for the scaled pattern */
}
.step[data-step="2"] .radio-pill input[type=radio]:checked + div strong,
.step[data-step="2"] .radio-pill:has(input[type=radio]:checked) > div strong{
  color: #ffffff; font-size: 14px; font-weight:700; /* white title on blue fill */
}
.step[data-step="2"] .radio-pill input[type=radio]:checked + div .radio-sub,
.step[data-step="2"] .radio-pill:has(input[type=radio]:checked) > div .radio-sub{
  color: rgba(255,255,255,0.95); font-size:11px; margin-top:0; /* snug subtitle on blue */
}


/* Unselected title/subtext styles remain subtle */
.step[data-step="2"] .radio-pill>div strong{
  font-size:12px;
  color:#16324f;
  line-height:1;
  display:block;
  margin: 0 0 2px 0; /* small gap below title */
  text-align:center;
}
.step[data-step="2"] .radio-pill>div .radio-sub{
  font-size:11px;
  color:#6c7a89;
  margin: 0; /* keep subtitle snug under title */
  text-align:center;
}
/* Remove default paragraph margins inside radio pills so title/sub stay close */
.step[data-step="2"] .radio-pill>div p{ margin: 0; }
.step .step-header{margin-bottom:32px; box-sizing: border-box}
@media (max-width:960px){
    .step .step-header{margin-bottom:24px}
}
@media (max-width:768px){
    .step .step-header{margin-bottom:20px}
}
.step .step-header{margin-bottom:32px}
.file-drop{
    border:2px solid #8ee3b6;
    background: #f3fff6;
    border-radius:12px;
    padding:18px;
    box-shadow: 0 6px 18px rgba(14,84,46,0.04);
}
.doc-box{
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border: 1px solid #e6eefc;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(15,37,120,0.04);
}
.doc-box .form-label{display:block;margin-bottom:.5rem}
.doc-box .btn-sm{min-width:120px}
.file-drop .mb-2{margin-bottom:8px}
.file-drop .mb-2 strong{display:block;color:#0b6b3a;font-weight:600}
.file-drop .text-muted.small{color:#5f6c67}
.file-drop .d-flex{align-items:center}
.file-drop .btn-sm{min-width:110px}
.file-drop #resumeFileName{margin-left:10px;color:#6c757d}
.file-drop small.text-muted{display:block;margin-top:8px;color:#6c757d}
.highlight-area{
    background: #eef7ff;
    border: 1px solid #d6eaff;
    border-radius: 12px;
    padding: 18px 18px 16px 18px;
    margin-bottom: 18px;
    box-shadow: 0 6px 18px rgba(12,44,90,0.04);
}
.highlight-area .form-label strong{color:#021127}
.highlight-area .form-control{background:#fff}
.highlight-area .radio-pill > div, .highlight-area .radio-pill > span { background: transparent; }
.review-box{background: #f7fbff; border: 1px solid #e6f0ff; border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; color: #213547; font-size: 14px;}
.review-box > div{margin-bottom:6px}
.review-box strong{display:inline-block;min-width:78px;color:#0b63d6;font-weight:600}
.declaration-text{margin:18px 0}
.declaration-text > div{display:flex;gap:12px;align-items:flex-start}
.declaration-text input[type=checkbox]{flex:0 0 20px;width:20px;height:20px;margin:0;margin-top:6px}
.declaration-text label{font-size:13px;color:#334;line-height:1.5;display:block;margin:0}
@media (max-width:768px){
    .declaration-text > div{align-items:flex-start}
    .declaration-text input[type=checkbox]{margin-top:4px}
}
.step-actions{margin-top:8px}
.step-actions .back-wrap .btn-back{border-radius:12px;padding:.5rem 1rem;border:2px solid #cfdcff;color:#2b4fd6;background:transparent}
.step-actions .back-wrap .btn-back:hover{background:#f4f6ff}
.step-actions .action-wrap .btn-outline-primary{border-radius:12px;padding:.45rem 1rem;margin-right:12px}
.step-actions .action-wrap .btn-primary{border-radius:12px;padding:.55rem 1rem;box-shadow:0 8px 20px rgba(95,108,255,0.18)}
@media (max-width:768px){
    .step-actions{flex-direction:column;gap:10px}
    .step-actions .action-wrap{display:flex;flex-direction:column;align-items:stretch}
    .step-actions .action-wrap .btn-outline-primary{margin-right:0}
}
.step{display:flex;flex-direction:column}
.step .step-card{flex:1 1 auto}
.step .step-card .row{min-height:10px}
.step[data-step="3"] .step-card .row{padding-bottom:250px}
.step[data-step="4"] .step-card .row{padding-bottom:40px}
@media (max-width:768px){
    .step .step-card .row{min-height:unset;padding-bottom:24px}
    .step[data-step="3"] .step-card .row{padding-bottom:28px}
}
.site-footer{ margin: 24px auto 0; padding: 16px 0 28px; color:#6b7280; font-size:13px; text-align:center; }
.site-footer p{ margin:0; }
/* Step 1 radio layout: single row */
@media (min-width: 768px){
  /* Keep them centered and allow wrapping if needed */
  .step[data-step="1"] .choice-group{ flex-wrap: wrap; gap: 28px 36px; justify-content: center; padding-bottom: 2px; }
  .step[data-step="1"] .choice-group .radio-pill{ margin: 2px 0; flex: 0 1 220px; }
}
.step[data-step="1"] .radio-pill>div{ min-width: 200px; padding: 6px 10px; min-height: 32px; border-radius: 12px; text-align: center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
@media (max-width: 480px){
  .step[data-step="1"] .radio-pill>div{ min-width: 160px; }
}
/* Panels */
.panel{background:#fff;border:1px solid #e9edf7;border-radius:12px;padding:20px 20px 16px 20px;margin-bottom:20px}
.panel--blue{background:#f5f9ff;border-color:#c5daff}
.panel--teal{background:#f3f8fa;border-color:#d9e6fc}
.panel--lavender{background:#f6f3ff;border-color:#eeeef0; padding: 12px 16px 12px 16px;}
.panel--lavender .section-title{ margin-bottom: 10px; padding-bottom: 8px; }
.panel--amber{background:#fcfcfc7c;border-color:#e9e8e9}
.panel--lavender .form-grid{ margin-top: 10px; gap: 12px 16px; }
.panel--lavender .form-field .form-label{ margin-bottom: 6px; }
.panel--lavender .form-control{
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 10px;
  border-color: #c8b8ff; /* lavender */
}
.panel--lavender .form-control:focus{
  outline: none;
  border-color: #a894ff; /* deeper lavender */
  box-shadow: 0 0 0 3px rgba(168, 148, 255, 0.22);
}
.panel--lavender .badge-display,
.panel--lavender .display-pill{
  display:inline-block;
  padding: 4px 10px;
  min-height: 28px;
  line-height: 20px;
  background:#fff;
  border:1px solid #c8b8ff;
  border-radius:10px;
  color:#4b4f5c;
}
.section-title{display:flex;align-items:center;gap:8px;color:#1f3a68;font-weight:700;margin-bottom:14px}
.section-title svg{color:#3b71ca}
.choice-group{display:flex;gap:16px;flex-wrap:wrap}
.choice-group .radio-pill{margin:0}
/* Ensure radio pills align consistently */
.radio-pill>div{min-width:140px;text-align:center}

.form-check { display: flex; align-items: center; gap: 8px; margin: 6px 12px 6px 0; }
.form-check-inline { display: inline-flex; align-items: center; margin-right: 16px; margin-bottom: 8px; }
.form-check-input { margin-top: 0; }
.form-check-label { margin: 0; }

/* Generic safety: when radios are placed directly inside labels */
label > input[type="radio"] { margin-right: 8px; }

/* Choice groups: ensure consistent wrap + spacing on all steps */
.choice-group { display: flex; flex-wrap: wrap; gap: 16px 18px; }
.choice-group .radio-pill { margin: 0; }

/* When radio pills stack (narrow screens), keep comfortable spacing */
@media (max-width: 768px) {
  .choice-group { gap: 12px 14px; }
  .choice-group .radio-pill { flex: 1 1 100%; }
}

/* Category labels (Step 5/6) — align radio + text and add space */
.category-label { gap: 10px; }
.category-label input[type="radio"] { margin: 0; }

/* --- Step 2 layout refinements --- */
/* Prevent right-edge clipping by reducing min column width and adding right padding */
.step[data-step="2"] .form-grid { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); padding-right: 16px; }
.step[data-step="2"] .panel { padding-right: 24px; }

/* SME Classification radio pills: consistent spacing and width */
.step[data-step="2"] .choice-group { display: flex; flex-wrap: wrap; gap: 18px 24px; justify-content: center; }

@media (max-width: 768px){
  .step[data-step="2"] .form-grid { grid-template-columns: 1fr; padding-right: 10px; }
  .step[data-step="2"] .choice-group { gap: 12px 14px; }
  .step[data-step="2"] .radio-pill { flex: 1 1 100%; margin: 0 0 10px 0; }
}

.highlight-area .radio-pill + .radio-pill { margin-left: 12px; }

/* Step 2 selected-radio theme is defined lower in the Step 2 layout section for clarity. */

/* Global radio pill component: consistent, accessible pill UI across steps */
.radio-pill {
  display: inline-flex;
  align-items: stretch;
  position: relative;
  cursor: pointer;
}
.radio-pill input[type=radio] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.radio-pill > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid #dbe1e8;
  background: #ffffff;
  border-radius: 999px;
  min-height: 38px;
  min-width: 140px;
  transition: box-shadow .12s, transform .12s, border-color .12s, background-color .12s, color .12s;
}
.radio-pill:hover > div {
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.06);
  border-color: #c7d2e0;
  transform: translateY(-1px);
}
.radio-pill input[type=radio]:focus-visible + div {
  box-shadow: 0 0 0 4px rgba(68, 109, 255, 0.14);
  border-color: #446dff;
}
/* Default checked state (steps without custom themes) */
.radio-pill input[type=radio]:checked + div {
  border-color: #446dff;
  background: linear-gradient(180deg, #5f84ff 0%, #446dff 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(68, 109, 255, 0.18);
}
.radio-pill input[type=radio]:checked + div .radio-sub { color: rgba(255,255,255,0.95); }
/* Title and subtitle inside pills */
.radio-pill > div strong {
  display: block;       /* ensure the title can be centered reliably */
  width: 100%;
  text-align: center;   /* center the title in all states */
  font-weight: 700;
  color: #16324f;
  line-height: 1;
}
.radio-pill input[type=radio]:checked + div strong { color: #ffffff; }
.radio-pill > div .radio-sub { display: block; color: #6c7a89; font-size: 12px; line-height: 1.2; text-align: center; }

:root{ --radio-pill-width: 160px; --radio-pill-height: 48px; --radio-pill-padding-x: 14px; }
.radio-pill, .radio-pill > div {
  box-sizing: border-box;
  width: var(--radio-pill-width);
  min-width: var(--radio-pill-width);
  max-width: var(--radio-pill-width);
}
.radio-pill > div {
  position: relative; /* used for the decorative pseudo-element */
  height: var(--radio-pill-height);
  min-height: var(--radio-pill-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: var(--radio-pill-padding-x);
  padding-right: var(--radio-pill-padding-x);
  overflow: hidden; /* clip decorative pseudo-element to pill shape */
}

.step[data-step="2"] .radio-pill > div::before{
  content: none; /* hidden by default */
}
.step[data-step="2"] .radio-pill:has(input[type=radio]:checked) > div::before,
.step[data-step="2"] .radio-pill input[type=radio]:checked + div::before{
  content: "";
  position: absolute;
  inset: 0; /* cover the entire pill */
  border-radius: inherit;
  background-image: url('/images/btn4.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* ensure the svg covers the full pill */
  pointer-events: none;
  opacity: 1;
  z-index: 0; /* sit behind text */
}

.step[data-step="2"] .radio-pill input[type=radio]:checked + div,
.step[data-step="2"] .radio-pill:has(input[type=radio]:checked) > div{
  padding-left: var(--radio-pill-padding-x);
  padding-right: var(--radio-pill-padding-x);
  background-image: none; /* remove previous background-image usage to avoid overlap */
}

.radio-pill > div strong,
.radio-pill > div .radio-sub {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .radio-pill, .radio-pill > div {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .radio-pill > div { height: auto; min-height: 44px; }
  .choice-group .radio-pill { flex: 1 1 100%; }
}

/* Responsive hero section */
.hero {
  background-image: url('../images/bg4.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  color: #fff;
  border-radius: 16px;
  padding: 24px;
  margin: 24px auto;
  width: calc(100% - 48px);
  max-width: 1200px; /* fixed visual width on large screens */
  position: relative;
  overflow: hidden;
  min-height: 360px;
  /* Fixed hero height on large screens */
  height: 720px;
  display: flex;
  align-items: center;
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.12);
}

.hero > .d-flex {
  width: 100%;
  display: flex;
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.btn-apply{ display:flex; gap:14px; align-items:center; margin-top:18px }
.hero a.btn.btn-apply,
.hero a.btn-apply,
.btn.btn-apply {
  background-image: url('/images/btn1.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-color: transparent;
  color:#fff !important;
  border:0;
  padding: .45rem .9rem;
  font-weight:600;
  font-size:0.82rem;
  border-radius:22px;
  box-shadow: 0 8px 20px rgba(52,84,255,0.16);
  display:inline-flex; align-items:center; justify-content:center;
  height:25px; min-width:120px; width:120px;
  line-height: 1;
  text-decoration: none !important;
}

.resume-row{ display:flex; gap:14px; align-items:center; margin-top:18px }
.resume-row .btn-resume{
  background-image: url('/images/btn1.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-color: transparent;
  color:#fff !important;
  border:0;
  padding: .45rem .9rem;
  font-weight:600;
  font-size:0.82rem; /* label text size */
  border-radius:22px;
  box-shadow: 0 8px 20px rgba(52,84,255,0.16);
  display:inline-flex; align-items:center; justify-content:center;
  height:25px; min-width:120px; width:120px; /* fixed size to match resume button */
  line-height: 1;
  text-decoration: none !important;
}

.hero h1 { font-size:56px; line-height:1.02; margin:0 0 18px; font-weight:700; text-transform:uppercase; letter-spacing:.5px }
.hero p { color: rgba(255,255,255,.92); max-width:980px; font-size:17px; line-height:1.6; margin-bottom:28px; text-align: justify; text-justify: inter-word }
.hero .btn-light, .hero .btn-ghost { border-radius:12px; padding:.6rem 1rem; }
.hero .resume-row { display:flex; gap:18px; align-items:center; margin-top:0 }
.hero input#application_number { width:340px; border-radius:10px; padding:.45rem .9rem; background:rgba(255,255,255,0.95); color:#222; border:none; box-shadow:0 6px 18px rgba(2,6,23,0.18); height:20px; min-width:160px; font-size:13px; line-height:1 }
.hero label[for="application_number"] { display:inline-block; background:transparent; padding:.45rem .75rem; color:#e9f0ff; border-radius:8px }
.btn-resume { background-image: url('/images/btn1.svg'); background-repeat:no-repeat; background-position:center center; background-size:contain; color: #fff; border-radius:22px; padding:.45rem .9rem; border:none; min-width:160px; height:44px; box-shadow:0 8px 20px rgba(67,105,255,0.14); display:inline-flex; align-items:center; justify-content:center; text-decoration:none }
.btn-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: url('/images/btn1.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-color: transparent;
  color: #fff;
  border: 0;
  padding: .45rem .9rem; /* match resume */
  height: 44px;
  min-width: 160px;
  width: 160px;
  margin-bottom: 12px;
  border-radius: 22px;
  box-shadow: 0 8px 20px rgba(52,84,255,0.12);
  text-decoration: none;
  /* Fallback gradient for environments not loading images */
  background-blend-mode: normal;
}
.btn-apply:empty { /* in case icon-only button uses svg solely */
  padding: 0.45rem;
}

/* If image fails to load, apply gradient via a utility class on .btn-apply-fallback */
.btn-apply-fallback {
  background: linear-gradient(180deg,#5f84ff 0%, #446dff 100%) !important;
}
.hero .logo-box { display:flex; align-items:flex-end; justify-content:flex-end; }

.hero .logo-box img {
  width: auto;
  /* responsive cap: lets the logo scale down on small screens */
  height: clamp(140px, 26vh, 430px);
  max-height: 62vh;
  object-fit: contain;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
  margin-right: 28px;
  transform: translateY(0);
  pointer-events: none;
  transition: height .16s ease, margin .16s ease;
}

/* Reduce logo size further on small screens to keep layout compact */
@media (max-width: 768px) {
  .hero .logo-box img {
    height: clamp(100px, 22vh, 220px);
    margin-right: 0;
  }
}

/* Responsive fixed heights for hero container */
@media (max-width: 1400px) {
  .hero { height: 820px; }
}
@media (max-width: 1200px) {
  .hero { height: 720px; }
}
@media (max-width: 992px) {
  .hero { height: 620px; }
}
@media (max-width: 768px) {
  .hero { height: 520px; padding: 20px; }
}
@media (max-width: 480px) {
  /* On very small screens keep a reasonable height to avoid overflow */
  .hero { height: 460px; padding: 16px; }
  .hero > .d-flex { gap: 12px; }
  .hero h1 { font-size: clamp(14px, 7.6vw, 28px); }
}

/* New: Mobile-first friendly hero reflow (preserve desktop rules above) */
@media (max-width: 480px) {
  /* Let hero grow with content and remove fixed desktop height */
  .hero { height: auto; min-height: 360px; padding: 18px; display: block; box-shadow: none; }

  .hero > .d-flex { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; max-width: 100%; }

  #heroLogo { display: block; height: auto; width: clamp(220px, 28vw, 200px); margin: 6px auto 8px auto; }

  .logo-box { width: 100%; display: flex; justify-content: center; order: 3; margin-top: 6px; }
  .logo-box img { height: clamp(60px, 14vh, 110px); margin-right: 0; max-width: 25%; opacity: 0.98; }

  /* Center and increase readability of hero paragraph */
  .hero p { text-align: center; font-size: 15px; line-height: 1.5; margin: 8px 12px 12px; }

  /* Stack action buttons vertically, center them and make them touch-friendly */
  .btn-apply, .btn-resume {
    display: block;
    width: 100%;
    max-width: 260px;
    height:44px;
    min-width: unset;
    margin: 10px auto;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
  .resume-row { flex-direction: column; gap: 10px; align-items: center; width:100%; }

  /* Make application number input full width */
  .hero input#application_number { width: calc(100% - 32px); max-width: 340px; box-sizing: border-box; padding: 12px 14px; height:44px; font-size:14px; border-radius:10px; }

  /* paddings around hero internals */
  .hero > .d-flex, .hero .container { padding: 0; }

  /* hide the trophy to prioritize actions/text */
  @media (max-height: 640px) {
    .logo-box { display: none; }
  }
}

@media (max-width: 580px) {
  .hero .resume-row {
    width: 100%;
    justify-content: center !important; /* force center even if other rules intervene */
    align-items: center !important;
  }

  .hero .resume-row {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .hero .resume-row .btn-resume,
  .hero .resume-row .btn-apply,
  .hero .btn-resume,
  .hero .btn-apply {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    padding: .35rem .7rem !important;
    box-sizing: border-box !important;
    width: 160px !important;
    max-width: 160px !important;
    margin: 8px auto !important;
    text-align: center !important;
    line-height: 1 !important;
  }

  #heroLogo { display: block; height: auto; width: clamp(380px, 28vw, 200px); margin: 6px auto 8px auto; }

  .logo-box { width: 100%; display: flex; justify-content: center; order: 3; margin-top: 6px; }
  .logo-box img { height: clamp(50px, 14vh, 800px); margin-right: 0; max-width: 25%; opacity: 0.98; }

  .hero {
    height: auto !important;
    min-height: 360px !important;
    padding: 18px !important;
    display: block !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .hero > .d-flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    max-width: 100% !important;
  }

  .hero p { text-align: center !important; font-size: 15px !important; line-height: 1.5 !important; margin: 8px 12px 12px !important; }

  .hero input#application_number { width: calc(100% - 40px) !important; max-width: 420px !important; box-sizing: border-box !important; padding: 12px 14px !important; height: 44px !important; font-size: 14px !important; border-radius: 10px !important; }

  .logo-box img { max-width: 22% !important; height: auto !important; }

  .hero input#application_number {
    display: block !important;
    margin: 12px auto 0 auto !important;
    order: 3 !important;
    width: calc(100% - 40px) !important;
    max-width: 420px !important;
  }
}

/* Loading States and Spinner */
.btn-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
}

.btn-loading {
    display: none;
    align-items: center;
    gap: 8px;
}

.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.form-result {
    margin-top: 16px;
}

.alert {
  /* smaller vertical padding to reduce height */
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  border: 1px solid transparent;
  line-height: 1.25;
}

/* Remove extra vertical spacing inside alerts (lists/paragraphs) */
.alert p,
.alert ul,
.alert ol {
  margin-top: 0;
  margin-bottom: 0;
}

.alert ul,
.alert ol {
  padding-left: 20px; /* keep the bullet indent */
}

.alert li {
  margin: 0 0 6px 0; /* small gap between items if multiple */
}

.alert-info {
    background-color: #e3f2fd;
    border-color: #2196f3;
    color: #0d47a1;
}

.alert-success {
    background-color: #e8f5e8;
    border-color: #4caf50;
    color: #2e7d32;
}

.alert-danger {
    background-color: #ffebee;
    border-color: #f44336;
    color: #c62828;
}

/* Step 3: Document Upload Styles */
/* Enhanced file upload styling */
.file-upload-modern {
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.file-upload-button {
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
  color: #6c757d;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
}

.file-upload-button:hover {
  border-color: #007bff;
  background-color: #f8f9ff;
  color: #007bff;
}

.file-upload-modern input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Progress bar styling */
.upload-progress {
  margin-top: 12px;
  background: #f8f9fa;
  border-radius: 4px;
  padding: 8px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: #007bff;
  width: 0%;
  transition: width 0.3s ease;
}

.progress-text {
  text-align: center;
  font-size: 12px;
  color: #6c757d;
}

/* Upload status styling */
.upload-status {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}

.upload-status.success {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.upload-status.error {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

/* Document actions */
.document-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.btn-replace, .btn-delete {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-replace {
  background: #007bff;
  color: white;
}

.btn-replace:hover {
  background: #0056b3;
}

.btn-delete {
  background: #dc3545;
  color: white;
}

.btn-delete:hover {
  background: #c82333;
}

/* Document uploaded info styling */
.document-uploaded-info {
  margin-top: 8px;
  padding: 8px 12px;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.document-uploaded-info:hover {
  background: #c3e6cb;
  border-color: #a6d8a6;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.document-uploaded-info:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.document-uploaded {
  color: #155724;
  font-weight: 600;
  margin-right: 8px;
}

.document-filename {
  color: #155724;
  font-style: italic;
}

.document-accept-types {
  margin-top: 4px;
  font-size: 0.8em;
  color: #6c757d;
}

.document-accept-types small {
  color: #6c757d;
  font-style: italic;
}

/* Loading states */
.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.file-upload-modern.uploading {
  pointer-events: none;
  opacity: 0.7;
}

.file-upload-modern.uploading .file-upload-button {
  background: #e9ecef;
  color: #6c757d;
}

/* Ensure progress steps are fully visible in Step 3 */
.step[data-step="3"] .progress-steps {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

.step[data-step="3"] .progress-step {
  overflow: visible !important;
  height: auto !important;
}

/* Fix any container overflow issues in Step 3 */
.step[data-step="3"] {
  overflow: visible !important;
}

.step[data-step="3"] .container-lg {
  overflow: visible !important;
}
/* OTP Modal Styles */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.form-control {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-primary:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.modal-footer {
  border-top: 1px solid #dee2e6;
  padding-top: 20px;
  margin-top: 20px;
}


/* Tight mobile centering for hero action buttons (stronger specificity to avoid conflicts) */
@media (max-width: 480px) {
  .hero .resume-row {
    width: 100%;
    justify-content: center !important; /* force center even if other rules intervene */
    align-items: center !important;
  }

  .hero .resume-row .btn-resume,
  .hero .resume-row .btn-apply,
  .hero .btn-resume,
  .hero .btn-apply {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   height: 44px !important;
   padding: .45rem .9rem !important;
  box-sizing: border-box !important;
  width: 160px !important;
  max-width: 160px !important;
  padding: .35rem .7rem !important;
  margin: 8px auto !important;
  text-align: center !important;
   line-height: 1 !important;
  }
}