/* KINARA v5.8.52 — consistent, high-contrast modal experience.
   Presentation-only: does not modify Supabase, Razorpay, K-Pay tier calculation,
   booking submission, modal-history handling or background scroll locking. */
.bs-modal {
  --surface: #fffdfa;
  --surface-soft: #f3f8f4;
  --care: #e7f1ea;
  --joy: #eaf6fb;
  --calm: #eaf6fb;
  --ink: #173f3b;
  --muted: #31534d;
  --wine: #0c4d48;
  --rose: #176a63;
  --line: rgba(12,77,72,.20);
  --font-ui: "KoHo", "Segoe UI", Arial, sans-serif;
  --font-display: "KoHo", "Segoe UI", Arial, sans-serif;
  --font-copy: "KoHo", "Segoe UI", Arial, sans-serif;
  color-scheme: light;
  background: rgba(11,45,42,.63) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.bs-modal .bs-modal__panel,
.bs-modal[data-page-level-overlay="true"] .bs-modal__panel {
  color: #173f3b !important;
  border: 1px solid #c4d9cf !important;
  border-radius: 20px !important;
  background: #fffdfa !important;
  box-shadow: 0 28px 80px rgba(7,38,34,.27) !important;
  overflow-x: hidden;
}
.bs-modal .bs-modal__header,
.bs-modal[data-page-level-overlay="true"] .bs-modal__header {
  background: #f0f7f2 !important;
  border-bottom: 1px solid #c7ddd1 !important;
  padding: 17px 20px !important;
  min-height: 76px;
  align-items: center !important;
}
.bs-modal .bs-modal__header h2 {
  color: #173f3b !important;
  font-family: "KoHo", "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(1.35rem, 3vw, 1.85rem) !important;
  line-height: 1.22 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
}
.bs-modal .bs-eyebrow {
  margin: 0 0 5px !important;
  font-family: "KoHo", "Segoe UI", Arial, sans-serif !important;
  color: #0c4d48 !important;
  font-size: .83rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  line-height: 1.3 !important;
}
.bs-modal .bs-modal__close,
.bs-modal[data-page-level-overlay="true"] .bs-modal__close {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  background: #fff !important;
  color: #0c4d48 !important;
  border: 1px solid #a6c6b9 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  font-family: "KoHo", "Segoe UI", Arial, sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.bs-modal .bs-modal__close:hover {
  background: #dcebe2 !important;
  border-color: #0c4d48 !important;
}
.bs-modal .bs-modal-content {
  color: #173f3b !important;
  background: #fffdfa !important;
  font-family: "KoHo", "Segoe UI", Arial, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  padding: clamp(16px, 2.8vw, 24px) !important;
  gap: 16px !important;
  overflow-wrap: break-word;
}
.bs-modal .bs-modal-content p,
.bs-modal .bs-modal-content li,
.bs-modal .bs-modal-content label,
.bs-modal .bs-modal-content .bs-coordination-note,
.bs-modal .bs-modal-content .bs-professional-service-description {
  color: #254a43 !important;
  font-size: clamp(.96rem, 1.6vw, 1.02rem) !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
}
.bs-modal .bs-modal-content strong,
.bs-modal .bs-modal-content b,
.bs-modal .bs-modal-content h3 {
  color: #173f3b !important;
  font-weight: 700 !important;
}
.bs-modal .bs-modal-content h3 {
  font-size: 1.18rem !important;
  line-height: 1.35 !important;
}
.bs-modal .bs-tool-panel,
.bs-modal .bs-timezone-line,
.bs-modal .bs-selected-provider,
.bs-modal .bs-selected-slot,
.bs-modal .bs-custom-request,
.bs-modal .bs-credential-row,
.bs-modal .bs-credential-option,
.bs-modal .bs-selected-facts,
.bs-modal .bs-programme-manager,
.bs-modal .bs-programme-recruitment > div,
.bs-modal .bs-minor-section,
.bs-modal .bs-programme-booking-box,
.bs-modal .bs-coordination-note {
  border: 1px solid #d4e3dc !important;
  background: #f5faf6 !important;
  color: #173f3b !important;
  box-shadow: none !important;
}
.bs-modal .bs-credential-row span,
.bs-modal .bs-credential-option-type,
.bs-modal .bs-selected-fact span,
.bs-modal .bs-programme-manager span,
.bs-modal .bs-programme-recruitment span,
.bs-modal .bs-coordination-note span,
.bs-modal .bs-programme-components li span,
.bs-modal .bs-programme-components li small,
.bs-modal .bs-success-list,
.bs-modal .bs-success-list li,
.bs-modal .bs-submit-note {
  color: #31534d !important;
  font-size: .98rem !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}
.bs-modal .bs-programme-recruitment strong,
.bs-modal .bs-selected-fact strong,
.bs-modal .bs-credential-row strong,
.bs-modal .bs-credential-option-title {
  color: #0c4d48 !important;
  font-size: .94rem !important;
  line-height: 1.42 !important;
}
.bs-modal .bs-field {
  font-size: .89rem !important;
  color: #173f3b !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  text-transform: none !important;
}
.bs-modal input,
.bs-modal select,
.bs-modal textarea {
  color: #173f3b !important;
  background: #fff !important;
  border-color: #b5d0c1 !important;
  font-size: max(1rem, 16px) !important;
  line-height: 1.45 !important;
}
.bs-modal input::placeholder,
.bs-modal textarea::placeholder { color: #43645c !important; opacity: 1 !important; }
.bs-modal button:focus-visible,
.bs-modal a:focus-visible,
.bs-modal input:focus-visible,
.bs-modal select:focus-visible,
.bs-modal textarea:focus-visible {
  outline: 3px solid #176a63 !important;
  outline-offset: 3px !important;
}
.bs-modal .bs-primary-btn,
.bs-modal .bs-kpay-book-action {
  border-color: #0c4d48 !important;
  background: #0c4d48 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  min-height: 44px !important;
}
.bs-modal .bs-primary-btn:hover,
.bs-modal .bs-kpay-book-action:hover { background: #176a63 !important; }
.bs-modal .bs-primary-btn *,
.bs-modal .bs-kpay-book-action * { color: #fff !important; }
.bs-modal .bs-secondary-btn,
.bs-modal .bs-know-more,
.bs-modal .bs-view-more-link,
.bs-modal .bs-help-action {
  border: 1px solid #9fbfb2 !important;
  color: #0c4d48 !important;
  background: #fff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  min-height: 44px !important;
}
.bs-modal .bs-booking-status,
.bs-modal .bs-next-step,
.bs-modal .bs-programme-gate {
  background: #eaf6fb !important;
  border-color: #bcd7e0 !important;
  color: #173f3b !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

/* The slot popup had a higher-specificity legacy font-size/colour rule. */
#bsSlotModal .bs-modal__header h2 {
  color: #173f3b !important;
  font-size: clamp(1.4rem, 3vw, 1.85rem) !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
}
#bsSlotModal #bsSelectedProvider .bs-provider-meta {
  color: #31534d !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

/* K-Pay specifically: full-size copy, opaque boxes and unmistakable selection. */
#bsKPayModal .bs-kpay-modal__panel,
#bsKPayInfoModal .bs-kpay-modal__panel { width: min(740px, 100%) !important; }
#bsKPayModal .bs-kpay-content,
#bsKPayInfoModal .bs-kpay-content { gap: 17px !important; }
#bsKPayModal .bs-kpay-intro,
#bsKPayInfoModal .bs-kpay-intro {
  text-align: left !important;
  color: #173f3b !important;
  font-size: 1.04rem !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
}
#bsKPayModal .bs-kpay-guide,
#bsKPayInfoModal .bs-kpay-guide {
  display: grid !important;
  gap: 9px !important;
  padding: 16px !important;
  border: 1px solid #c5dcd0 !important;
  border-radius: 14px !important;
  background: #edf5f0 !important;
  text-align: left !important;
  box-shadow: none !important;
}
#bsKPayModal .bs-kpay-guide > strong,
#bsKPayInfoModal .bs-kpay-guide > strong {
  color: #0c4d48 !important;
  font-size: 1.08rem !important;
  line-height: 1.42 !important;
  font-weight: 700 !important;
}
#bsKPayModal .bs-kpay-guide span,
#bsKPayInfoModal .bs-kpay-guide span {
  display: block !important;
  color: #254a43 !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.58 !important;
  text-align: left !important;
  overflow-wrap: anywhere;
}
#bsKPayModal .bs-kpay-guide b,
#bsKPayInfoModal .bs-kpay-guide b { color: #0c4d48 !important; font-weight: 700 !important; }
#bsKPayModal .bs-kpay-tier-grid { gap: 12px !important; }
#bsKPayModal .bs-kpay-tier {
  position: relative;
  gap: 8px !important;
  padding: 17px 14px !important;
  min-height: 192px !important;
  border: 2px solid #c4d9cd !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #173f3b !important;
  text-align: center !important;
  box-shadow: none !important;
}
#bsKPayModal .bs-kpay-tier:hover { border-color: #176a63 !important; background: #f3f9f5 !important; }
#bsKPayModal .bs-kpay-tier.is-selected {
  border: 3px solid #0c4d48 !important;
  background: #e8f2ec !important;
  box-shadow: inset 0 0 0 1px #fff, 0 8px 20px rgba(12,77,72,.12) !important;
}
#bsKPayModal .bs-kpay-tier-name {
  font-size: .98rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  color: #0c4d48 !important;
}
#bsKPayModal .bs-kpay-tier strong {
  font-size: clamp(1.38rem, 2.8vw, 1.68rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #173f3b !important;
}
#bsKPayModal .bs-kpay-tier small {
  color: #31534d !important;
  font-size: .97rem !important;
  font-weight: 500 !important;
  line-height: 1.53 !important;
}
#bsKPayModal .bs-kpay-note,
#bsKPayInfoModal .bs-kpay-note {
  margin: 0 !important;
  padding: 15px 17px !important;
  border: 1px solid #d1e2d7 !important;
  border-left: 4px solid #0c4d48 !important;
  border-radius: 11px !important;
  background: #f5faf6 !important;
  color: #254a43 !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-align: left !important;
}
#bsKPayModal .bs-kpay-tier:focus-visible { outline: 3px solid #176a63 !important; outline-offset: 3px !important; }

@media (max-width: 680px) {
  .bs-modal .bs-modal__header,
  .bs-modal[data-page-level-overlay="true"] .bs-modal__header {
    padding: 12px 13px !important;
    gap: 10px !important;
    min-height: 70px;
  }
  .bs-modal .bs-modal__header h2 { font-size: 1.4rem !important; }
  .bs-modal .bs-modal-content { padding: 15px !important; font-size: 1rem !important; }
  #bsKPayModal .bs-kpay-tier-grid { grid-template-columns: 1fr !important; }
  #bsKPayModal .bs-kpay-tier {
    min-height: 0 !important;
    padding: 14px 16px !important;
    gap: 5px !important;
  }
  #bsKPayModal .bs-kpay-guide,
  #bsKPayInfoModal .bs-kpay-guide { padding: 14px !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .bs-modal { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}