/* ---- Tokens ---- */
:root{
  --brand:#0e3f68;
  --brand-600:#0b3253;
  --ink:#0b1520;
  --muted:#5b6b7a;
  --line:#e8edf3;
  --bg:#f7f9fc;
  --white:#fff;
  --ok:#0ea5e9;
  --err:#b42318;
}

/* Center the whole flow on desktop */
.bn-wrap{
  padding:24px 0;
  background:var(--bg);
}
.bn-container{
  max-width: 1200px;   /* or 1100–1280px to taste */
  margin: 0 auto;      /* centers */
  padding: 0 16px;     /* side breathing room */
}



/* No change needed to .bn-grid except ensure it fills container */
.bn-grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:16px;
}
@media (max-width: 1000px){
  .bn-grid{ grid-template-columns:1fr; }
}

.bn-steps{ margin: 0 0 12px; }


/* ---- Layout ---- */
.bn-wrap{padding:24px 0;background:var(--bg); }
.bn-grid{display:grid;grid-template-columns:1fr 360px;gap:16px;}
@media (max-width: 1000px){.bn-grid{grid-template-columns:1fr;}}
.bn-main{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px;}
.bn-error{background:#ffe9e9;color:var(--err);padding:.75rem;border-radius:10px;border:1px solid #ffd0d0;margin-bottom:12px;}
h1{font-size:28px;line-height:1.2;margin:.2rem 0 1rem;color:var(--ink);}
h2{font-size:20px;margin:1rem 0 .5rem;color:var(--ink);}


/* ---- Stepper ---- */
.bn-steps{margin-bottom:12px;}
.bn-steps ol{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none;}
.bn-steps li{padding:.42rem .9rem;border:1px solid var(--line);border-radius:999px;font-weight:700;color:var(--muted);background:var(--white);}
.bn-steps li[aria-current="step"], .bn-steps li.active{background:var(--brand);border-color:var(--brand);color:#fff;}

/* ---- Cards (categories & services) ---- */
.bn-card-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
@media (max-width:1200px){.bn-card-grid{grid-template-columns:repeat(4,1fr);}}
@media (max-width:900px){.bn-card-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.bn-card-grid{grid-template-columns:repeat(2,1fr);}}

.bn-card{display:flex;flex-direction:column;gap:.55rem;border:1px solid var(--line);border-radius:16px;background:var(--white);padding:.6rem;cursor:pointer;text-align:center;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;outline:0;}
.bn-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(14,63,104,.08);}
.bn-card:active{transform:translateY(0);}
.bn-card:focus-visible{box-shadow:0 0 0 3px rgba(14,63,104,.25);}
.bn-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;background:#eef3f9;}
.bn-card span{font-weight:700;color:var(--ink);font-size:14.5px}

/* ---- Summary (only on review sidebar) ---- */
.bn-summary-toggle{display:none;}
.bn-summary-panel{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px;}
@media (max-width:1000px){
  .bn-summary-toggle{display:block;width:100%;padding:.75rem;border:1px solid var(--line);border-radius:12px;background:var(--white);font-weight:700;margin-bottom:8px;}
  .bn-summary[data-collapsed] .bn-summary-panel{display:none;}
  .bn-summary[data-open] .bn-summary-panel{display:block;}
}
.bn-summary-box h3{margin:.2rem 0 .6rem;color:var(--ink);}
.bn-summary-list{padding-left:0;list-style:none;display:grid;gap:6px;font-size:14.5px;color:var(--ink);}
.bn-summary-details h4{margin:.8rem 0 .3rem;font-size:15px;color:var(--muted);}
.bn-summary-details ul{padding-left:18px;margin:0;}

/* ---- Forms ---- */
label{display:flex;flex-direction:column;gap:.35rem;margin:.5rem 0;color:var(--ink);font-weight:600;}
input[type="text"],input[type="email"],input[type="number"],input[type="date"],input[type="time"],select,textarea{
  appearance:none;border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;font-size:15px;background:#fff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:0;box-shadow:0 0 0 3px rgba(14,63,104,.25);border-color:var(--brand);}
fieldset{border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;margin:.6rem 0 1rem;}
legend{padding:0 .4rem;color:var(--muted);}

/* ---- Actions / Buttons ---- */
.bn-actions{margin-top:12px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
.bn-btn,.bn-actions button{
  background:var(--brand);color:#fff;border:none;padding:.72rem 1rem;border-radius:12px;font-weight:800;cursor:pointer;
  transition:filter .12s ease, transform .05s ease;
}
.bn-btn:hover,.bn-actions button:hover{filter:brightness(.96);}
.bn-btn:active,.bn-actions button:active{transform:translateY(1px);}
.bn-btn:focus-visible,.bn-actions button:focus-visible{box-shadow:0 0 0 3px rgba(14,63,104,.25);outline:0;}




/* Center the stepper row */
.bn-steps { margin: 0 0 12px; text-align: center; }
.bn-steps ol { justify-content: center; }

/* When there is NO sidebar (all steps except Review), make the form column narrower and centered */
.bn-container:not(.is-review) .bn-grid { grid-template-columns: 1fr; }
.bn-container:not(.is-review) .bn-main { max-width: 760px; margin: 0 auto; }

/* On Review (has sidebar), keep two columns but center the whole layout via container max-width */
.bn-container.is-review .bn-grid { grid-template-columns: 1fr 360px; }

/* Optional: center step titles for a cleaner look */
.bn-main h1 { text-align: center; }


/* =================================CENTRE CONTENT=========================================== */

/* --- FINAL OVERRIDES: center everything on non-review steps --- */

/* --- FINAL: single centered column across all steps --- */

.bn-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* Center the stepper pills */
.bn-steps ol {
  display: flex !important;
  justify-content: center !important;
}

/* Make the grid a centered single column */
.bn-grid {
  display: flex !important;
  justify-content: center !important;
}

.bn-main {
  width: 100%;
  max-width: 760px; /* adjust to taste (e.g., 820px) */
}

/* Optional: center page titles */
.bn-main h1 { text-align: center; }

/* Remove any leftover summary styles effect */
.bn-summary,
.bn-summary-toggle,
.bn-summary-panel { display: none !important; }


/* --- HARD CENTERED SINGLE-COLUMN LAYOUT --- */

/* Outer page container */
.bn-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Center the stepper pills */
.bn-steps ol{
  display:flex;
  justify-content:center;
}

/* The centered card that holds each step */
.bn-center{
  max-width: 760px;          /* adjust to taste (e.g., 820px) */
  margin: 0 auto;            /* centers horizontally */
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 12px;
  padding: 16px;
}

/* Optional: center page titles */
.bn-center h1{ text-align:center; }

/* Kill any leftover grid styles from earlier CSS */
.bn-grid, .bn-main, .bn-summary, .bn-summary-toggle, .bn-summary-panel{
  all: unset;
  display: initial;
}



/* Center + constrain any content that sits OUTSIDE the card (e.g., stepper, intro text) */
.bn-prose{
  max-width: 760px;      /* same width as the card for visual harmony */
  margin: 0 auto 12px;   /* centers and adds a little space below */
  padding: 0 8px;
}

/* Make the stepper fully centered */
.bn-steps{
  display: flex;
  justify-content: center;
  text-align: center;
}
.bn-steps ol{
  display: flex;
  justify-content: center;
}

/* Headings: allowed to look 'full-width', but centered text */
.bn-prose h1, .bn-prose h2, .bn-prose h3 { text-align: center; }

/* The centered card itself (already present, repeated here to ensure final override) */
.bn-center{
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 12px;
  padding: 16px;
}

/* Optional: ensure no legacy layout leaks through */
.bn-grid, .bn-main, .bn-summary, .bn-summary-toggle, .bn-summary-panel{
  display: none; /* we removed the sidebar/grid approach */
}

/* === Desktop centering + container card for Service Select (safe overrides) === */
@media (min-width: 992px){
  /* Page-level container */
  .bn-container{
    max-width: 1100px;
    margin: 24px auto !important;   /* centers whole flow */
    padding: 0 24px;
  }

  /* Stepper + any text ABOVE the card */
  .bn-prose{
    max-width: 820px;
    margin: 0 auto 16px !important; /* centers the block */
    text-align: left;                /* keep text readable */
  }
  .bn-steps{ text-align: center !important; }
  .bn-steps > ol{ display: flex; justify-content: center !important; }

  /* Main step content card (your service cards live inside here) */
  .bn-center{
    max-width: 820px;
    margin: 0 auto 24px !important; /* centers the card */
    background: #fff;
    border: 1px solid var(--bn-border, var(--line, #e8edf3));
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 12px 32px rgba(14,63,104,.10);
  }

  /* Make sure the grid of cards itself doesn't pull left */
  .bn-center .bn-card-grid{
    justify-content: center !important;
  }
}



/* ========================================= BOOKNOW CONTAINER ANIMATION  */
/* Particles background layer (decorative) */
#bn-particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:0.95;
  mix-blend-mode: normal;
}

/* Ensure booking content sits above the decorative layer */
.bn-wrap > .bn-container,
.bn-wrap .bn-prose,
.bn-wrap .bn-center {
  position: relative;
  z-index: 1;
}

/* Respect reduced motion (hide particles) */
@media (prefers-reduced-motion: reduce){
  #bn-particles { display: none !important; }
}