html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

:root {
  --kv-maroon: #7a1f3d;
  --kv-maroon-dark: #551429;
  --kv-maroon-darker: #3d0e1d;
  --kv-gold: #c9962c;
  --kv-gold-light: #e8c37a;
  --kv-cream: #fff8ef;
  --kv-cream-deep: #f6ead9;
  --kv-ink: #2c1810;

  --bs-font-sans-serif: 'Catamaran', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, .kv-heading-font {
  font-family: 'Noto Serif Tamil', 'Catamaran', Georgia, serif;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--kv-gold);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  background-color: var(--kv-cream);
  color: var(--kv-ink);
  /* Sticky footer: body is a full-viewport-tall column, .kv-main grows to fill
     any leftover space so .kv-footer is pushed to the bottom on short pages. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Site chrome — matrimony brand theme */

.kv-navbar {
    background: linear-gradient(120deg, var(--kv-maroon) 0%, var(--kv-maroon-dark) 100%);
    padding-top: .4rem;
    padding-bottom: .4rem;
    box-shadow: 0 2px 10px rgba(61, 14, 29, .25);
    margin-bottom: 0 !important;
}

.kv-brand {
  font-family: 'Noto Serif Tamil', 'Catamaran', Georgia, serif;
  color: var(--kv-cream) !important;
  font-weight: 700;
  font-size: 1.35rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}

.kv-brand-tamil {
  font-size: .95rem;
  font-weight: 500;
  color: var(--kv-gold-light);
}

.kv-brand-mark {
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  align-self: center;
  filter: drop-shadow(0 1px 2px rgba(61, 14, 29, .35));
}

.kv-navbar .nav-link {
  color: rgba(255, 248, 239, .85) !important;
  font-weight: 500;
}

.kv-navbar .nav-link:hover,
.kv-navbar .nav-link:focus {
  color: var(--kv-gold-light) !important;
}

.kv-navbar .navbar-toggler {
  border-color: rgba(255, 248, 239, .4);
}

.kv-navbar .navbar-toggler-icon {
  filter: invert(1) grayscale(1) brightness(2);
}

/* Wraps <main> between the navbar and footer; grows to absorb spare vertical
   space (flex-grow: 1) but never shrinks below its content (flex-shrink: 0). */
.kv-main {
  flex: 1 0 auto;
}

.kv-footer {
  background: var(--kv-maroon-darker);
  color: rgba(255, 248, 239, .8);
  flex-shrink: 0;
}

.kv-footer-brand {
  font-family: 'Noto Serif Tamil', 'Catamaran', Georgia, serif;
  color: var(--kv-cream);
  font-weight: 700;
  font-size: 1.1rem;
}

.kv-footer a {
  color: var(--kv-gold-light);
  text-decoration: none;
}

.kv-footer a:hover {
  text-decoration: underline;
}

/* ============================================================
   Shared UI component library — used by every view beyond the
   landing page (home.css stays landing-page-only). Reuses the
   --kv-* tokens defined above.
   ============================================================ */

:root {
  --kv-muted: #6b5a4f;
  --kv-border: var(--kv-cream-deep);
  --kv-surface: #fff;
  --kv-shadow-sm: 0 2px 10px rgba(61, 14, 29, .06);
  --kv-shadow-md: 0 12px 28px rgba(122, 31, 61, .10);
  --kv-radius: .9rem;
  --kv-radius-sm: .5rem;
  --kv-success: #2e7d4f;
  --kv-success-bg: #eaf6ee;
  --kv-danger: #b3261e;
  --kv-danger-bg: #fdecea;
}

/* Brand buttons — shared across every page (landing hero included) */
.btn-kv-primary {
  background-color: var(--kv-gold);
  border-color: var(--kv-gold);
  color: var(--kv-maroon-darker);
  font-weight: 700;
  padding: .65rem 1.75rem;
  border-radius: .5rem;
}

.btn-kv-primary:hover,
.btn-kv-primary:focus {
  background-color: var(--kv-gold-light);
  border-color: var(--kv-gold-light);
  color: var(--kv-maroon-darker);
}

.btn-kv-dark {
  background-color: var(--kv-maroon);
  border-color: var(--kv-maroon);
  color: var(--kv-cream);
  font-weight: 700;
  padding: .65rem 1.9rem;
  border-radius: .5rem;
}

.btn-kv-dark:hover,
.btn-kv-dark:focus {
  background-color: var(--kv-maroon-dark);
  border-color: var(--kv-maroon-dark);
  color: var(--kv-cream);
}

/* Active nav state */
.kv-navbar .nav-link.active {
  color: var(--kv-gold-light) !important;
  font-weight: 700;
}

/* Page header — sits above the main content of every non-landing page */
.kv-page-header {
  padding: 1.75rem 0 1.25rem;
  border-bottom: 1px solid var(--kv-border);
  margin-bottom: 1.75rem;
}

.kv-page-eyebrow {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--kv-gold);
  margin-bottom: .3rem;
}

.kv-page-title {
  color: var(--kv-maroon);
  margin-bottom: .35rem;
}

.kv-page-subtitle {
  color: var(--kv-muted);
  margin-bottom: 0;
  max-width: 640px;
}

/* Cards */
.kv-card {
  background: var(--kv-surface);
  border: 1px solid var(--kv-border);
  border-radius: var(--kv-radius);
  box-shadow: var(--kv-shadow-sm);
  padding: 1.75rem;
}

.kv-card + .kv-card {
  margin-top: 1.5rem;
}

.kv-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--kv-border);
}

.kv-card-header h2,
.kv-card-header h3 {
  margin: 0;
  color: var(--kv-maroon);
  font-size: 1.2rem;
}

.kv-card-header .bi {
  color: var(--kv-gold);
  margin-right: .5rem;
}

/* Form section grouping, e.g. the "Address" subheading inside Basic Details */
.kv-form-section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--kv-maroon);
  font-family: 'Noto Serif Tamil', 'Catamaran', Georgia, serif;
  font-size: 1.05rem;
  margin: 2rem 0 1.1rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--kv-border);
}

.kv-form-section-title:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.kv-form-section-title i {
  color: var(--kv-gold);
}

/* Form fields */
.kv-field {
  margin-bottom: 1.15rem;
}

.kv-field > label,
.kv-field .form-check-label {
  font-weight: 600;
  color: var(--kv-ink);
  font-size: .92rem;
  margin-bottom: .35rem;
  display: inline-block;
}

.kv-field .form-check {
  padding-top: .1rem;
}

.kv-field .form-check-label {
  margin-bottom: 0;
}

.form-control,
.form-select {
  border-color: var(--kv-border);
  border-radius: var(--kv-radius-sm);
  padding: .55rem .85rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--kv-gold);
}

.form-check-input:checked {
  background-color: var(--kv-maroon);
  border-color: var(--kv-maroon);
}

.form-text {
  color: var(--kv-muted);
}

/* Validation */
.text-danger {
  color: var(--kv-danger) !important;
}

.validation-summary-errors {
  background: var(--kv-danger-bg);
  border: 1px solid rgba(179, 38, 30, .2);
  border-radius: var(--kv-radius-sm);
  padding: .9rem 1.1rem;
  margin-bottom: 1.5rem;
}

.validation-summary-errors ul {
  margin-bottom: 0;
  padding-left: 1.1rem;
}

.validation-summary-valid {
  display: none;
}

.input-validation-error {
  border-color: var(--kv-danger) !important;
}

/* Form action row */
.kv-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 1.85rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--kv-border);
}

/* Wizard stepper (profile completion) */
.kv-stepper {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.kv-stepper::-webkit-scrollbar {
  display: none;
}

.kv-step-item {
  flex: 1 1 0;
  min-width: 92px;
  text-align: center;
  position: relative;
  padding: 0 .25rem;
}

.kv-step-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(50% + 26px);
  right: calc(-50% + 26px);
  height: 2px;
  background: var(--kv-border);
}

.kv-step-item.is-complete:not(:last-child)::after {
  background: var(--kv-gold);
}

.kv-step-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  color: var(--kv-muted);
  position: relative;
  z-index: 1;
}

.kv-step-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--kv-border);
  font-weight: 700;
  font-size: .85rem;
  color: var(--kv-muted);
  transition: all .15s ease;
}

.kv-step-item.is-active .kv-step-circle {
  border-color: var(--kv-maroon);
  background: var(--kv-maroon);
  color: #fff;
}

.kv-step-item.is-complete .kv-step-circle {
  border-color: var(--kv-gold);
  background: var(--kv-gold);
  color: var(--kv-maroon-darker);
}

.kv-step-label {
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}

.kv-step-item.is-active .kv-step-label {
  color: var(--kv-maroon);
}

.kv-step-item.is-complete .kv-step-label {
  color: var(--kv-ink);
}

.kv-step-link:hover .kv-step-label {
  color: var(--kv-maroon);
}

.kv-step-link:hover .kv-step-circle {
  border-color: var(--kv-maroon);
}

/* Empty state */
.kv-empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--kv-muted);
  background: var(--kv-cream);
  border: 1px dashed var(--kv-border);
  border-radius: var(--kv-radius-sm);
}

.kv-empty-state i {
  font-size: 1.75rem;
  color: var(--kv-gold);
  display: block;
  margin-bottom: .5rem;
}

.kv-empty-state p {
  margin-bottom: .75rem;
}

/* Summary rows (Details page) */
.kv-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.1rem 1.5rem;
}

.kv-summary-item dt {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--kv-muted);
  font-weight: 700;
  margin-bottom: .2rem;
}

.kv-summary-item dd {
  margin: 0;
  font-size: 1rem;
  color: var(--kv-ink);
  font-weight: 500;
}

/* Status badges */
.kv-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
}

.kv-badge-gold {
  background: rgba(201, 150, 44, .16);
  color: #8a6a1e;
}

.kv-badge-success {
  background: var(--kv-success-bg);
  color: var(--kv-success);
}

.kv-badge-muted {
  background: var(--kv-cream-deep);
  color: var(--kv-muted);
}

/* Photo grid */
.kv-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

.kv-photo-tile {
  position: relative;
  border-radius: var(--kv-radius-sm);
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--kv-border);
  background: var(--kv-cream);
}

.kv-photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kv-photo-tile .kv-badge {
  position: absolute;
  bottom: .5rem;
  left: .5rem;
}

/* Lightbox — full-image popup for a clickable photo tile (currently used by
   the horoscope chart galleries on Details/Chart/PublicProfile). Any
   `<img data-kv-lightbox>` is wired up by the delegated click handler in
   site.js; no per-view JS needed. */
.kv-photo-tile img[data-kv-lightbox] {
  cursor: zoom-in;
}

#kv-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 10, .88);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 1080;
}

#kv-lightbox-overlay.kv-lightbox-open {
  display: flex;
}

#kv-lightbox-overlay img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--kv-radius-sm);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .5);
}

.kv-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.kv-lightbox-close:hover {
  background: rgba(255, 255, 255, .3);
}

/* Admin — user management table */
.kv-toolbar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.kv-toolbar .form-control {
  max-width: 320px;
}

.kv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.kv-table thead th {
  text-align: left;
  padding: .6rem .75rem;
  border-bottom: 2px solid var(--kv-border);
  color: var(--kv-muted);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.kv-table tbody td {
  padding: .7rem .75rem;
  border-bottom: 1px solid var(--kv-border);
  vertical-align: middle;
}

.kv-table tbody tr:last-child td {
  border-bottom: 0;
}

.kv-row-actions {
  display: flex;
  gap: .4rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.kv-row-actions form {
  margin: 0;
}

/* Keep the per-row action buttons uniform in size regardless of label or variant.
   `.btn-kv-primary` ("Make admin") hard-codes a large padding, so pin padding /
   font-size / line-height here too — otherwise it sits taller than the plain
   Bootstrap outline buttons ("Deactivate"). */
.kv-row-actions .btn {
  min-width: 8rem;
  padding: .35rem .5rem;
  font-size: .82rem;
  line-height: 1.4;
}

/* Admin social posting — rendered post text, template editor autocomplete, placeholder chips */
.kv-post-preview {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: .95rem;
  background: var(--kv-cream);
  border: 1px solid var(--kv-border);
  border-radius: var(--kv-radius);
  padding: .75rem 1rem;
  margin: 0;
}

.kv-post-preview-sm {
  font-size: .8rem;
  max-height: 7rem;
  overflow: auto;
  min-width: 14rem;
}

.kv-post-preview-image {
  display: block;
  width: 100%;
  max-width: 320px;
  border-radius: var(--kv-radius);
  border: 1px solid var(--kv-border);
}

.kv-ac-wrap {
  position: relative;
}

.kv-ac-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  margin: 2px 0 0;
  padding: .25rem;
  list-style: none;
  background: var(--kv-surface);
  border: 1px solid var(--kv-border);
  border-radius: var(--kv-radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  max-height: 16rem;
  overflow-y: auto;
}

.kv-ac-list[hidden] {
  display: none;
}

.kv-ac-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  padding: .4rem .6rem;
  border-radius: calc(var(--kv-radius) - 2px);
  cursor: pointer;
}

.kv-ac-item span {
  color: var(--kv-text-muted, #6c757d);
  font-size: .8rem;
}

.kv-ac-item.active,
.kv-ac-item:hover {
  background: var(--kv-cream);
}

.kv-placeholder-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.kv-placeholder-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  padding: .4rem .6rem;
  background: var(--kv-surface);
  border: 1px solid var(--kv-border);
  border-radius: var(--kv-radius);
  min-height: 2.75rem; /* comfortable tap target */
}

.kv-placeholder-chip span {
  color: var(--kv-text-muted, #6c757d);
  font-size: .78rem;
}

.kv-placeholder-chip:hover,
.kv-placeholder-chip:focus-visible {
  background: var(--kv-cream);
  border-color: var(--kv-gold);
}

/* Browse profiles — member grid */
.kv-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.kv-member-card {
  background: var(--kv-surface);
  border: 1px solid var(--kv-border);
  border-radius: var(--kv-radius);
  overflow: hidden;
  box-shadow: var(--kv-shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}

.kv-member-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--kv-shadow-md);
}

.kv-member-photo {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.kv-member-photo.kv-avatar-placeholder {
  width: 100%;
  height: 180px;
  border-radius: 0;
  box-shadow: none;
  border: none;
  font-size: 2.5rem;
}

.kv-member-body {
  padding: 1rem;
}

.kv-member-body h3 {
  font-size: 1.05rem;
  color: var(--kv-maroon);
  margin-bottom: .3rem;
}

.kv-member-meta {
  color: var(--kv-muted);
  font-size: .85rem;
  margin-bottom: .25rem;
}

.kv-member-meta i {
  color: var(--kv-gold);
  margin-right: .25rem;
}

/* Profile avatar */
.kv-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--kv-gold);
}

.kv-avatar-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kv-maroon), var(--kv-maroon-dark));
  color: var(--kv-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 700;
  font-family: 'Noto Serif Tamil', serif;
  flex-shrink: 0;
}

/* Generic content page (Privacy, Error) */
.kv-content-card {
  max-width: 760px;
  margin: 0 auto;
}

.kv-content-card h2 {
  color: var(--kv-maroon);
  font-size: 1.15rem;
  margin-top: 1.75rem;
}

.kv-content-card h2:first-child {
  margin-top: 0;
}

/* Auth pages (Identity area) */
.kv-auth-wrap {
  min-height: calc(100vh - 320px);
  display: flex;
  align-items: center;
  padding: 2.5rem 0;
}

.kv-auth-card {
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
}

.kv-auth-card .kv-card {
  padding: 2rem 2rem 2.25rem;
}

.kv-auth-eyebrow {
  text-align: center;
  font-family: 'Noto Serif Tamil', serif;
  color: var(--kv-gold);
  font-size: .95rem;
  margin-bottom: .35rem;
}

.kv-auth-title {
  color: var(--kv-maroon);
  text-align: center;
  margin-bottom: .35rem;
}

.kv-auth-subtitle {
  color: var(--kv-muted);
  text-align: center;
  margin-bottom: 1.75rem;
}

.kv-auth-footer-link {
  text-align: center;
  margin-top: 1.35rem;
  font-size: .92rem;
  color: var(--kv-muted);
}

.kv-auth-footer-link a,
.kv-auth-card a {
  color: var(--kv-maroon);
  font-weight: 600;
  text-decoration: none;
}

.kv-auth-footer-link a:hover,
.kv-auth-card a:hover {
  text-decoration: underline;
}

.kv-auth-wide {
  max-width: 640px;
}

/* Status message banner (Identity "StatusMessage" TempData) */
.kv-status-banner {
  border-radius: var(--kv-radius-sm);
  padding: .85rem 1.1rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  border: 1px solid transparent;
}

.kv-status-banner.kv-status-success {
  background: var(--kv-success-bg);
  color: var(--kv-success);
  border-color: rgba(46, 125, 79, .2);
}

.kv-status-banner.kv-status-error {
  background: var(--kv-danger-bg);
  color: var(--kv-danger);
  border-color: rgba(179, 38, 30, .2);
}

/* Bootstrap alert theming (used by scaffolded Identity pages) */
.alert {
  border-radius: var(--kv-radius-sm);
}

.alert-danger {
  background: var(--kv-danger-bg);
  color: var(--kv-danger);
  border-color: rgba(179, 38, 30, .2);
}

.alert-warning {
  background: #fff4e0;
  color: #8a5a12;
  border-color: rgba(201, 150, 44, .3);
}

.alert-success {
  background: var(--kv-success-bg);
  color: var(--kv-success);
  border-color: rgba(46, 125, 79, .2);
}

/* Vertical account-settings nav (Manage account pages) */
.kv-nav-pills .nav-link {
  color: var(--kv-ink);
  border-radius: var(--kv-radius-sm);
  padding: .6rem .9rem;
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: .25rem;
}

.kv-nav-pills .nav-link:hover {
  background: var(--kv-cream);
  color: var(--kv-maroon);
}

.kv-nav-pills .nav-link.active {
  background: var(--kv-maroon);
  color: #fff;
}

/* Loading feedback — this app has no SPA/AJAX, every "fetch" is a real full-page navigation (a
   link click or a form submit), so the feedback is a slim top progress bar plus a per-button
   spinner/disabled state. Behavior lives in site.js ("Loading feedback for full-page
   navigations"); these are just the visuals. */
#kv-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--kv-gold);
  z-index: 2000;
  opacity: 0;
  transition: width 4s cubic-bezier(.1, .7, 1, .1), opacity .3s ease;
  pointer-events: none;
}

#kv-progress-bar.kv-progress-bar-active {
  width: 90%;
  opacity: 1;
}

.kv-btn-loading {
  opacity: .85;
  cursor: wait !important;
}

.kv-btn-loading .spinner-border {
  border-width: .16em;
}

/* ============================================================
   Mobile refinements — small-screen-only overrides for components
   defined above. Kept as one block (rather than scattered inline
   media queries) so the phone experience is reviewable in one
   place. Targets Bootstrap's `sm` breakpoint (575.98px) — phone
   widths; tablets and up keep the desktop layout already defined
   above.
   ============================================================ */
@media (max-width: 575.98px) {
  /* Comfortable minimum tap target on touch screens for every
     button, without changing the compact `.btn-sm` sizing used
     deliberately elsewhere (desktop keeps its current density). */
  .btn {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .kv-card {
    padding: 1.1rem;
  }

  .kv-page-header {
    padding: 1.25rem 0 1rem;
    margin-bottom: 1.25rem;
  }

  /* Primary/cancel form buttons stack full-width instead of sitting
     side by side at their label's natural width — easier to hit
     accurately and reads like a native app's form actions. */
  .kv-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .kv-form-actions .btn {
    width: 100%;
  }

  /* Keeps the navbar brand from crowding the toggler button on
     narrow phones — the Tamil subtitle is decorative here, not
     load-bearing (it's still shown in the hero and footer). */
  .kv-brand-tamil {
    display: none;
  }

  /* Wizard stepper now has 6 steps (BasicDetails/Religious/
     Education/Occupation/Chart/Photo) — at the desktop sizing that
     needs the horizontal scroll (still there as a fallback) on
     every phone width. Shrinking the circles/spacing and hiding
     non-active labels lets all 6 fit without scrolling on a typical
     360-430px phone; the current step's name is already shown in
     the page's own title/eyebrow above the stepper, so dropping the
     other labels here loses no information, just density. */
  .kv-step-item {
    min-width: 54px;
  }

  .kv-step-circle {
    width: 28px;
    height: 28px;
    font-size: .75rem;
  }

  .kv-step-item:not(:last-child)::after {
    top: 14px;
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
  }

  .kv-step-label {
    font-size: 0;
  }

  .kv-step-item.is-active .kv-step-label {
    font-size: .68rem;
  }

  /* Account-settings nav (Manage account pages): a horizontal
     scrollable tab bar instead of 5-6 stacked pills pushing the
     actual settings form below the fold on a phone. Same
     scroll-without-a-visible-scrollbar technique as .kv-stepper. */
  .kv-nav-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    gap: .4rem;
    padding-bottom: .25rem;
  }

  .kv-nav-pills::-webkit-scrollbar {
    display: none;
  }

  .kv-nav-pills .nav-link {
    white-space: nowrap;
    margin-bottom: 0;
  }

  /* Admin user search: let the input use the full row instead of
     capping at 320px, since that cap exists to stop it stretching
     too wide on desktop next to the search button, not to shrink it. */
  .kv-toolbar .form-control {
    max-width: none;
    width: 100%;
  }

  /* Lightbox: tighter overlay padding and a smaller close button so more
     of the image is visible on a phone screen. */
  #kv-lightbox-overlay {
    padding: .75rem;
  }

  .kv-lightbox-close {
    top: .5rem;
    right: .5rem;
  }
}