/* === Base & Theme (AMBER) === */
:root {
  --bg: #f8fafc;               /* slate-50 */
  --fg: #0f172a;               /* slate-900 */
  --muted: #6b7280;            /* gray-500 */
  --ring: rgba(139,92,246,.25); /* violet-500 @ 25% */
	
  --primary-600: #7e22ce;      /* violet-600 */
  --primary-700: #7e22ce;      /* violet-700 */

  --accent-lime: #65a30d;      /* success pills (unchanged) */
  --border: #e5e7eb;           /* gray-200 */
  --card: #ffffff;
  --shadow: 0 8px 24px rgba(2,6,23,.06), 0 2px 6px rgba(2,6,23,.04);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

/* === Layout === */
.container{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* === Header === */
.hdr{
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  color:#fff; padding:28px 0 36px;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.hdr h1{ margin:0 0 6px; font-size:26px; font-weight:800; letter-spacing:.2px; }
.hdr .subtitle{ color:var(--primary-100); font-size:15px; }

/* === Cards === */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow); margin-top:-20px; overflow:hidden;
}
.card-head{ padding:16px 18px; border-bottom:1px solid var(--border); background:#fff; }
.card-body{ padding:16px 18px 20px; overflow-x:auto; }

/* === Buttons === */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--primary-600); color:#fff; text-decoration:none;
  padding:10px 14px; border-radius:10px; border:1px solid transparent;
  font-weight:600; transition:transform .04s ease, background .2s ease, box-shadow .2s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.btn:hover{ background:var(--primary-700) }
.btn:active{ transform:translateY(1px) }
.btn-outline{ background:#fff; color:var(--primary-700); border-color:var(--primary-600); }
.btn-outline:hover{ background:var(--primary-50); }
.btn[disabled]{ opacity:.7; cursor:not-allowed; }

/* === Table (outer) === */
.table{
  width:100%; border-collapse:separate; border-spacing:0; min-width:900px;
}
.table thead th{
  position:sticky; top:0; background:var(--primary-50); color:#374151;
  text-align:left; font-weight:700; font-size:13px; padding:10px 12px;
  border-bottom:1px solid var(--border);
}
.table tbody td{ padding:4px; border:1px solid var(--border); vertical-align:middle; font-size:14px; }
.table tbody tr:hover{ background:#fafafa }

/* Right-align number-ish columns for big tables (not the inner one) */
.table th:nth-child(1), .table td:nth-child(1),
.table th:nth-child(4), .table td:nth-child(4),
.table th:nth-child(7), .table td:nth-child(7){ text-align:right; }

/* === Personal Details (inner table) — desktop === */
table.inner{ width:100%; border-collapse:separate; border-spacing:0; min-width:700px; }
table.inner thead th{
  background:var(--primary-50); color:var(--primary-700);
  border-bottom:1px solid var(--border); padding:10px 12px; font-weight:700;
}
table.inner tbody td{ padding:10px 12px; border-bottom:1px solid var(--border); }

/* === Badges / Pills === */
.pill{
  display:inline-block; padding:4px 9px; border-radius:999px;
  font-size:12px; font-weight:700;
  background:var(--primary-50); color:var(--primary-700); border:1px solid var(--primary-100);
}
.pill--active{ background:#ecfccb; color:#3f6212; border-color:#bef264; }

/* === Forms === */
input[type="text"], input[type="tel"], input[type="number"], select{
  width:100%; padding:10px 12px; border:1px solid var(--border);
  border-radius:10px; background:#fff; color:var(--fg);
  outline:none; transition: box-shadow .2s ease, border-color .2s ease;
}
input:focus, select:focus{
  border-color:var(--primary-600);
  box-shadow:0 0 0 4px var(--ring);
}

/* Radio/checkbox hit area */
.stack label{ display:flex; gap:10px; align-items:center; padding:10px 8px; border-radius:8px; }
.stack input[type="radio"], .stack input[type="checkbox"]{ transform:scale(1.1); }

/* === Links === */
a{ color:var(--primary-700) } a:hover{ color:var(--primary-600) }

/* === Sticky footer summary & mobile action bar === */
.summary{
  position: sticky; bottom: 0; z-index: 20;
  background:#fff; border-top:1px solid var(--border);
  display:flex; gap:10px; justify-content:space-between; align-items:center;
  padding:10px 14px;
}
.btnbar{ display:flex; gap:10px; }

/* Utility */
.hidden{ display:none !important; }
.muted{ color: var(--muted); }

/* === Room grids (shared by Main & Pune) === */
.room-grid-header{
  display:grid;
  grid-template-columns: 1fr 120px 140px; /* Type | Qty | Mattresses */
  gap:8px 12px;
  font-weight:600; color:#374151;
  padding:0 6px 6px;
  border-bottom:1px solid var(--border);
  margin-bottom:8px;
}
.desktop-only{ display:none; }
@media (min-width:641px){ .desktop-only{ display:grid; } }

.room-grid{ display:grid; gap:12px; }

.room-row{
  display:grid;
  grid-template-columns: 1fr 120px 140px; /* desktop: 3 cols */
  gap:8px 12px;
  align-items:center;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
}

.room-type{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:#eef2ff; color:#3730a3; font-size:.85rem; border:1px solid #e0e7ff;
}

/* Compact meta lines (hidden on desktop, shown on mobile) */
.meta-line{
  display:none;
  font-size:.92rem;
  color:#6b7280;           /* muted text */
  line-height:1.2;
  width:100%;
  margin-top:2px;
}

/* === Responsive tweaks === */
@media (min-width:992px){
  .hdr{ padding-bottom:44px; }
  .card{ margin-top:-28px; }
}

/* Mobile: stack two-column rows */
@media (max-width:640px){
  .row, .row.row-2{ display:block; }
  .row.row-2 > *{ width:100%; }

  /* Personal Details: label on its own line, input below */
  table.inner thead{ display:none; }
  table.inner tbody tr{
    display:block; background:#fff; border:1px solid var(--border); border-radius:12px;
    padding:12px; margin-bottom:12px;
  }
  table.inner tbody td{ display:block; padding:10px 0; border:0; }
  table.inner tbody td::before{
    content: attr(data-label);
    display:block; margin:0 0 6px; font-weight:600; font-size:13px; color:#374151;
  }
  table.inner tbody input, table.inner tbody select{
    width:100%; min-width:0; padding:12px; border:1px solid var(--border); border-radius:10px; font-size:16px;
  }
  table.inner tbody td[data-label="Primary Contact"] input[type="radio"]{ transform:scale(1.25); }

  /* Sticky actions above footer */
  .btnbar{
    position: sticky; bottom: 56px; z-index: 30;
    display: grid; gap: 10px;
    background: rgba(255,255,255,.98);
    padding: 8px 0;
    backdrop-filter: saturate(150%) blur(6px);
  }
  .btnbar .btn{ width:100%; justify-content:center; }

  .hdr h1{ font-size:22px }
  .card-head{ padding:12px 14px }
  .card-body{ padding:12px 14px }
}

/* --- FIX: Personal Details overflow on mobile --- */
@media (max-width: 640px){
  table.inner{
    min-width: 0 !important;
    width: 100% !important;
    display: block;
    overflow-x: hidden;
  }
  table.inner tbody,
  table.inner tr,
  table.inner td{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  table.inner tbody input,
  table.inner tbody select{
    width: 100%;
    max-width: 100%;
  }
  .card-body{
    overflow-x: visible;
    padding-bottom: 140px; /* reserve space for sticky bars */
  }
}

/* Mobile: room sections stack & use meta-lines instead of badges */
@media (max-width:640px){
  .room-grid-header{ display:none!important; }
  .room-row{ grid-template-columns: 1fr; }
  .room-row .field input{ width:100%; }
  .room-type{ flex-direction:column; align-items:flex-start; gap:4px; }

  .badge{ display:none; }     /* hide desktop pills */
  .meta-line{ display:block; }/* show compact lines */
}

/* Mobile: emphasize room type name, keep meta lines subtle */
@media (max-width:640px){
  /* Make the room name stand out */
  .room-row .room-type{
    font-weight: 700;
    color: #111827; /* or var(--fg) */
    line-height: 1.3;
  }

}

/* ===== Purple Footer Theme ===== */
:root{
  --pur-900:#3b0764;
  --pur-800:#4c1d95;
  --pur-700:#6b21a8; /* base */
  --pur-600:#7c3aed;
  --pur-500:#8b5cf6;
}

.site-footer{
  color:#f8f5ff;
  background:linear-gradient(135deg, var(--pur-800), var(--pur-700));
  xborder-top:3px solid var(--pur-600);
  xmargin-top:2rem;
}
.site-footer__inner{
  display:flex; align-items:center; justify-content:space-between; xgap:12px;
  flex-wrap:wrap; xpadding:10px 16px;
  text-align:center;
}
.site-footer__meta{ flex:1 1 auto; }

.site-footer__copy{
  margin:0; font-weight:600; font-size:14px; letter-spacing:.2px;
}
@media (min-width:640px){ .site-footer__copy{ font-size:16px; } }

.site-footer__user{
  margin:2px 0 0; font-size:12px; opacity:.95;
}

.site-footer__logout{ margin:0; }

/* Button: glossy purple */
.site-footer__btn{
  display:inline-block;
  padding:8px 14px;
  font-size:14px;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(180deg, var(--pur-600), var(--pur-700));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    0 1px 2px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.15);
  cursor:pointer;
  transition:background .2s ease, box-shadow .2s ease, transform .02s ease;
}
.site-footer__btn:hover{
  background:linear-gradient(180deg, var(--pur-500), var(--pur-600));
  box-shadow:
    0 2px 6px rgba(0,0,0,.35),
    0 0 0 3px rgba(124,58,237,.25);
}
.site-footer__btn:active{ transform:translateY(1px); }
.site-footer__btn:focus{
  outline:none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 5px rgba(139,92,246,.45);
}

.site-footer__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:2px 16px 6px 1px;
  text-align:center;
}

/* Responsive stack for small screens (Payment Break up) */
.table--stack .amt { white-space: nowrap; }

@media (max-width: 640px) {
  .table--stack thead { display: none; }
  .table--stack tbody tr {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
  }
  .table--stack tbody tr:last-child { border-bottom: 0; }

  /* make each cell its own line */
  .table--stack tbody td {
    display: block;
    padding: 2px 0 !important;
    text-align: left !important;
  }
  /* amount on its own line, right aligned + bolder */
  .table--stack tbody td.amt {
    font-weight: 600;
    text-align: right !important;
    margin-top: 2px;
  }

  /* emphasis for total row */
  .table--stack tbody tr.total-row td {
    font-weight: 700;
  }
  /* note row spacing */
  .table--stack tbody tr.note-row td {
    padding-top: 6px !important;
  }
}

/* Payment Break-up: responsive stack */
#pay-breakup .amt { white-space: nowrap; }

/* mobile */
@media (max-width: 640px) {
  #pay-breakup thead { display: none !important; }
  #pay-breakup tr {
    display: block !important;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
  }
  #pay-breakup tr:last-child { border-bottom: 0; }

  /* each cell becomes its own row */
  #pay-breakup td,
  #pay-breakup th {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
    text-align: left !important;   /* override any inline right-align */
  }
  /* amount line */
  #pay-breakup td.amt {
    font-weight: 600;
    text-align: right !important;  /* keep amounts right if you like */
    margin-top: 2px;
  }

  /* emphasis for total row */
  #pay-breakup tr.total-row td { font-weight: 700; }
}

/* Visibility helpers */
.desktop-only { display:block; }
.mobile-only  { display:none; }
@media (max-width:640px){
  .desktop-only { display:none !important; }
  .mobile-only  { display:block !important; }
}

/* Mobile reg cards */
.reg-list { display:flex; flex-direction:column; gap:12px; }
.reg-card {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.reg-card__head {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  margin-bottom:8px;
}
.reg-card__title {
  font-weight:600; font-size:16px; line-height:1.2;
}
.reg-card__rows .row {
  display:flex; justify-content:space-between; align-items:center;
  padding:4px 0; border-bottom:1px dashed #eee;
}
.reg-card__rows .row:last-child { border-bottom:0; }
.reg-card .label { color:#6b7280; font-size:13px; }
.reg-card .value { font-weight:600; font-size:14px; }
.reg-card .btnbar { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }

/* Optional: make primary CTA stand out */
@media (max-width:640px){
  .reg-card .btn { padding:8px 12px; }
}

.disabled-section { opacity:.5; pointer-events:none; user-select:none; }

button, .btn-primary, .home-btn {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
}
button:hover {
  background-color: var(--primary-800);
}

.header-banner {
  background: var(--primary-700);
}

/* ==== Brand tokens (keep in one place) ==== */
:root{
  --primary-50:#f5f3ff;
  --primary-100:#ede9fe;
  --primary-500:#7c3aed;
  --primary-600:#6d28d9; /* main */
  --primary-700:#5b21b6;
  --ink:#0f172a;         /* headings */
  --text:#1f2937;        /* body */
  --muted:#6b7280;
  --card:#ffffff;
  --border:#e5e7eb;
  --ring: rgba(109,40,217,.35);
  --bg:#f6f7fb;          /* page background */
  --radius:12px;
  --shadow:0 10px 25px rgba(2,6,23,.07);
}

/* ==== Page layout ==== */
.page{
  min-height:100vh;
  margin:0;
  background:
    linear-gradient(180deg, var(--primary-50) 0%, transparent 220px),
    var(--bg);
  color:var(--text);
  display:flex;
  flex-direction:column;
}

/* Centers the content block */
.main.centered{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
}

/* Keep site bg + purple in sync with yatra.php */
.bg-site { background: var(--site-bg, #f5f3ff); }

/* Muted utility links under the purple header */
.muted-link { color:#6b7280; text-decoration:none; }
.muted-link:hover { text-decoration:underline; }
.muted-link.active { font-weight:600; }

/* Consistent content width & spacing like yatra.php */
.yatra-copy.prose h2 { margin-top:.5rem; margin-bottom:1rem; }
.yatra-copy.prose p  { margin: .75rem 0; line-height:1.7; }

/* Button sizes used on yatra.php */
.btn.btn-lg { padding:.8rem 1.1rem; font-size:1rem; border-radius:10px; }

/* --- Shared header (moved out of yatra.php) --- */
.hdr{
  background: linear-gradient(180deg, #6d28d9 0%, #5b21b6 100%);
  padding: 18px 0;
  color: #fff;
}
.hdr .container{
  display:flex; align-items:center; justify-content:space-between;
}
.hdr h1{ margin:0; line-height:1; }
.hdr .brand-pill{
  display:inline-block; background:#fff; color:#6d28d9; text-decoration:none;
  padding:10px 16px; border-radius:14px; font-weight:800; box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.hdr .topnav a{
  color:#e9d5ff; text-decoration:none; margin-left:12px; font-weight:600;
}
.hdr .topnav a:hover{ color:#fff; text-decoration:underline; }
.hdr .topnav .sep{ opacity:.6; margin:0 6px; }

/* Optional page bg used on yatra.php */
.bg-site{ background:#f5f3ff; }

/* Add breathing room below the purple hero bar */
.hdr {
  margin-bottom: 1.5rem; /* roughly 24px */
}

/* Balanced hero flush like Admin Dashboard */
.hdr {
  background: linear-gradient(180deg, #6d28d9 0%, #5b21b6 100%);
  padding: 18px 0 22px; /* slightly more bottom padding for breathing */
  color: #fff;
}

/* Subtle lift for the first card/content under hero */
.container > .card:first-child,
main.container > *:first-child {
  margin-top: -0.25rem; /* aligns with Admin look */
  padding-top: 0.25rem;
}

/* ——— Make the hero → first card flush match Admin ——— */
.hdr{ padding:18px 0 26px; }         /* a touch more bottom padding like Admin */

.after-hero{                          /* apply to the first container after .hdr */
  padding-top: 12px;                  /* creates the same breathing room as .ad-wrap */
}

/* if a card is the first element under that container, don't add extra spacing */
.after-hero > .card:first-child{ margin-top: 0; }

/* optional: if some pages don't use .after-hero, still keep a small cushion */
.hdr + .container{ padding-top: 8px; }

.table-simple {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.table-simple td {
  padding: 6px 10px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}
.table-simple strong { color: #4c1d95; }

/* --- Section heading polish for details page --- */
.yatra-copy h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #4c1d95;                     /* purple accent */
  border-bottom: 2px solid #e9d5ff;   /* soft lavender underline */
  padding-bottom: 4px;
  margin-top: 1.8rem;
  margin-bottom: 0.8rem;
}

.yatra-copy h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #4338ca;                     /* slightly deeper shade */
  border-bottom: 1px dashed #ddd6fe;  /* lighter dashed underline */
  padding-bottom: 2px;
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
}

/* Optional: add a bit more breathing space between sections */
.yatra-copy ul, .yatra-copy p {
  margin-bottom: 0.8rem;
}

/* For the tables (if used inside) */
.yatra-copy .table-simple {
  border-left: 3px solid #ddd6fe;
  border-radius: 4px;
}

/* --- Major section headers (h3) --- */
.yatra-copy h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #4c1d95;                     /* brand purple */
  border-bottom: 2px solid #e9d5ff;   /* soft lavender underline */
  padding-bottom: 4px;
  margin-top: 1.8rem;
  margin-bottom: 0.8rem;
}

/* --- Subsection headers (h4) --- */
.yatra-copy h4 {
  font-size: 1.05rem;                 /* just one step above body */
  font-weight: 600;
  color: #4b5563;                     /* neutral gray-700 tone */
  margin-top: 1.2rem;
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}

/* Body text harmony */
.yatra-copy p,
.yatra-copy ul {
  font-size: 1rem;
  color: #1f2937;                     /* gray-800 */
  line-height: 1.65;
  margin-bottom: 0.8rem;
}

/* Optional: soften the tables slightly */
.yatra-copy .table-simple {
  border-left: 3px solid #ddd6fe;
  border-radius: 4px;
  font-size: 0.95rem;
}

.yatra-copy ul li strong {
  color: #4c1d95;      /* same purple accent as headings */
  font-weight: 600;
}

.muted-link-label {
  color:#6b7280;
  margin-right:4px;
}
.muted-link {
  color:#4b5563;
  text-decoration:none;
}
.muted-link:hover { text-decoration:underline; }
.muted-link.active { font-weight:600; color:#4c1d95; }

.topnav {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* controls spacing uniformly */
}

.topnav .sep {
  color: rgba(255,255,255,0.7);
  margin: 0;
  font-weight: 300;
}

/* remove default text-node spacing effect */
.topnav a + .sep,
.topnav .sep + a {
  margin-left: 0;
  margin-right: 0;
}

.topnav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topnav .sep {
  opacity: 0.7;
  margin: 0 2px;
}

/* Remove top gap above the filter bar */
.ad-filters {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Reduce internal field label spacing */
.ad-filters .field {
  margin-top: 0;
}

/* Make labels sit closer to their inputs */
.ad-filters .field label {
  margin-bottom: 2px;   /* was likely 6–10px */
  font-weight: 500;
  color: #374151;
}

/* Tighten filter buttons */
.ad-filters button,
.ad-filters a.btn-sm {
  margin-top: 2px;
}

/* --- Mobile margin fix --- */
@media (max-width: 480px) {
  .container {
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

.btn-primary {
  background-color: #6d28d9;      /* base purple */
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 16px;
  transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
  background-color: #5b21b6;      /* darker purple on hover */
  color: #fff;                    /* keep white text visible */
}

.guru-photo {
  width: 10vw;              /* 10% of viewport width */
  max-width: 60px;
  min-width: 40px;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
}

.btn-xs { padding: 2px 8px; line-height: 1; min-height: 0; font-size: 12px; }
.table .btn-xs { padding: 1px 6px; }