/* ---- spacing & width that matched prior Tailwind usage ---- */
.max-w-6xl {
  max-width: 72rem;
}

/* ~ 1152px */
.max-w-xl {
  max-width: 36rem;
}

/* ~ 576px */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* margins used in app */
.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-16 {
  margin-top: 4rem;
}
button.pill-btn:hover {
    background: #EAF6FD;
}


/* typography scale close to your Tailwind sizes */
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1.1;
}

.font-semibold {
  font-weight: 600;
}

/* colors used in text helpers */
.text-gray-600 {
  color: #4b5563;
}

.text-gray-800 {
  color: #1f2937;
}

/* rounded helpers that Bootstrap doesn't ship exactly */
.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

/* transparent white panel look */
.bg-white-70 {
  background-color: rgba(255, 255, 255, 0.7);
}

/* quick utilities */
.block {
  display: block;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

/* Step dots size */
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.dot-lg {
  width: 14px;
  height: 14px;
}

/* Object-fit cover (Bootstrap has .object-fit-cover too; keep both) */
.object-cover,
.object-fit-cover {
  object-fit: cover;
}

/* Minimal border tone */
.border-subtle {
  border-color: #e5e7eb !important;
}

/* Disable pointer look */
.cursor-not-allowed {
  cursor: not-allowed !important;
  opacity: .4;
}

.display-5.fw-semibold{
	
	font-size:50px !important;
}

.tosn-section.tosn-nursery-content-block.tosn-nursery-enquiry-form {

  padding-bottom: 0 !important;
  padding-top: 10px;
}

/* scope to our container to avoid theme bleed */
.tosn-fee-calculator-container .btn-outline-primary {
  --bs-btn-color: #2F87B7;
  /* BRAND.accentDark */
  --bs-btn-border-color: #9FD2EF;
  /* BRAND.pillBorder */
  --bs-btn-hover-bg: #E6F5FD;
  /* light tint */
  --bs-btn-hover-color: #2F87B7;
  --bs-btn-hover-border-color: #2F87B7;
  --bs-btn-border-width: 2px;
}

.tosn-fee-calculator-container .form-select.rounded-pill {
  border: 2px solid #9FD2EF;
  color: #2F87B7;
}

/* Step dots look (already inline-coloured, but ensure spacing on WP pages) */
.tosn-fee-calculator-container .tosn-step-dots {
  gap: 12px;
}

/* Scope to the calculator container */
.tosn-fee-calculator-container {
  --tosn-accent: #45A6DC;
  --tosn-accent-dark: #2F87B7;
  --tosn-pill: #9FD2EF;
  --tosn-text: #3b3b3b;
}

.tosnfc h1,
.tosnfc h2 {
  color: var(--tosn-text);
}

.tosnfc .accent {
  color: var(--tosn-accent);
}

.tosnfc .btn-pill {
  border-radius: 9999px;
}

.tosnfc .btn-outline-accent {
  border: 2px solid var(--tosn-pill);
  color: var(--tosn-accent-dark);
  background: #fff;
}

.tosnfc .btn-outline-accent:hover {
  background: #f0fbff;
}

.tosnfc .btn-accent {
  background: var(--tosn-accent);
  color: #fff;
  border-radius: 9999px;
}

.tosnfc .btn-accent:disabled {
  background: #cfe7f5;
  color: #fff;
}

.tosnfc .ratio-hero {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid #e9ecef;
}

.tosnfc .ratio-hero img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.tosnfc .pill-btn {
  border: 1px solid var(--tosn-pill);
  color: var(--tosn-text);
  border-radius: 9999px;
  padding: .75rem 1.25rem;
  font-weight: 500;
  background: #fff;

}

.tosnfc .pill-btn.active {
  background: #f0fbff;
}

.tosnfc .stepper {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--tosn-pill);
  color: var(--tosn-accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tosnfc .dots button {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  border: 0;
  margin: 0 .35rem;
  background: #cfe7f5;
}

.tosnfc .dots button.active {
  background: var(--tosn-accent);
}
.HideButton{display:none;}
.tosnfc .dots button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.tosnfc .summary-head {
  background: var(--tosn-accent);
  color: #fff;
  border-radius: 0;
  font-size: 22px;
}

.tosnfc .summary-body {
  background: #CFEDF9;
  border-radius: 0;
}

.tosnfc .summary-card {
  background: #CFEDF9;
  border-radius: .75rem;
  padding: 1rem;
}

.tosnfc .summary-card .title {
  font-weight: 600;
  color: var(--tosn-text);
  font-size: 18px;
}

.tosnfc .summary-card .value {
  white-space: pre-line;
  font-size: 18px;
}

.tosnfc .sticky-nav {
  /* position: sticky; */
  bottom: 0;
  position: relative;
}

.tosnfc .sticky-nav .btn-link.p-0.align-middle {
  border: none !important;
  padding: 0 !important;
  font-size: 18px !important;
  color: var(--tosn-text) !important;
  background: none !important;
  margin-top: 50px;
  opacity: 9 !important;
}

/* Neutralise any theme `.button` impact inside our container */
.tosnfc .button {
  all: unset;
}

.tosnfc .button {
  display: inline-block;
}


.tosnfc .tosnfc-dot {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  border: 0;
  background: #cfe7f5;
}

.tosnfc .tosnfc-dot.active {
  background: #45A6DC;
}

.tosnfc .tosnfc-dot.disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* Scope everything to the calculator root */
.tosnfc .btn {
  border-width: 2px;
  border-color: #9FD2EF;
  /* BRAND.pillBorder */
  color: #2F87B7;
  /* BRAND.accentDark */
  border-radius: 9999px;
  /* pill */
  font-weight: 600;
}

/* subtle hover */
.tosnfc .btn:hover,
.tosnfc .btn:focus {
  background: #EAF6FD;
  /* very light */
  color: #2F87B7;
  border-color: #9FD2EF;
}

/* if the site has a global .button rule, neutralise it in our scope */
.tosnfc .button {
  all: unset;
  /* drop any theme button look */
}

/* Step dots */
.tosnfc .tpsn-step-dots {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: #cfe7f5;
}

/* ---------- Stage headings & body copy ---------- */
.tosnfc .q-title {
  line-height: 1.1;
  font-weight: 500;
  color: var(--tosn-text);
}

.tosnfc .muted {
  color: #6b7280;
}

/* ---------- Right-side option grid (Stage 3) ---------- */
.tosnfc .option-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 768px) {
  .tosnfc .option-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  
  
  
}

/* make every pill fill its grid cell */
.tosnfc .option-grid .pill-btn {
  width: 100%;
  text-align: center;
  padding: .75rem 1.25rem;
}

/* ---------- Accent link ("Check my funding eligibility →") ---------- */
.tosnfc .link-accent {
  color: var(--tosn-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
}

.tosnfc .link-accent span {
  color: var(--tosn-accent);
  font-size: 25px;
}

.tosnfc .link-accent:hover {
  text-decoration: none;
}



/* ---------- Button look (CTA) ---------- */
/* You already neutralise .button; make sure our .btn looks Bootstrap-y + pill'ed */
.tosnfc .btn {
  border-width: 2px;
  border-color: var(--tosn-pill);
  color: var(--tosn-accent-dark);
  border-radius: 9999px;
  font-weight: 600;
  padding: 5px 24px 5px 24px !important;
  font-size: 15px;
}

.tosnfc .btn:hover,
.tosnfc .btn:focus {
  background: #EAF6FD;
  color: var(--tosn-accent-dark);
  border-color: var(--tosn-accent-dark);
}

/* Optional: soften card borders where needed */
.tosnfc .border-subtle {
  border-color: #e5e7eb !important;
}

/* Ensure the two pills look even and roomy like Figma */
.tosnfc .option-grid .col-12.col-md-6 .btn.pill-btn {
  min-height: 46px;
  /* comfortable target */
  font-weight: 600;
}

/* Spacing consistency under h2 */
.tosnfc h2+p {
  margin-top: .75rem;
}

/* Keep pill look consistent when active */
.tosnfc .pill-btn.active {
  background: #f0fbff;
  /* matches your design tint */
  border-color: #9FD2EF;
  color: var(--tosn-text);
}

/* Stage 5 specifics */
.tosnfc .row-list .session-row:first-child {
  border-top: 1px solid #e9ecef;
}

.tosnfc .row-list .session-row {
  border-color: #e9ecef;
}

.tosnfc .count-pill {
  min-width: 80px;
  text-align: center;
  padding: .25rem .5rem;
  border: 1px solid #e9ecef;
  border-radius: 9999px;
  font-weight: 600;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

/* Make the left-column button look like the comp */
.tosnfc .btn-accent {
  background: var(--tosn-accent);
  color: #fff;
  border: none;
}

.tosnfc .btn-accent:disabled {
  background: #cfe7f5;
  color: #fff;
}

/* Stepper circles already exist; ensure consistent size */
.tosnfc .stepper {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--tosn-pill);
  background: #fff;
  line-height: 1;
  font-weight: 600;
}

/* --- Primary accent button (filled) --- */
.tosnfc .btn-accent {
  background: var(--tosn-accent);
  color: #fff;
  border: 2px solid var(--tosn-accent);
  border-radius: 9999px;
  font-weight: 700;
}

.tosnfc .btn-accent:hover,
.tosnfc .btn-accent:focus {
  background: var(--tosn-accent-dark);
  border-color: var(--tosn-accent-dark);
  color: #fff;
}

/* --- Outline accent button --- */
.tosnfc .btn-outline-accent {
  border: 2px solid var(--tosn-pill);
  color: var(--tosn-accent-dark);
  background: #fff;
  border-radius: 9999px;
  font-weight: 600;
  padding: 12px 24px 12px 24px !important;
  height: 60px;
  width: 233px;
  font-size: 17px;
}

.tosnfc .btn-outline-accent:hover,
.tosnfc .btn-outline-accent:focus {
  background: #eaf6fd;
}

/* Active (selected) pills become filled, like Figma */
.tosnfc .pill-btn {
  border: 1px solid var(--tosn-pill);
 /*  color: var(--tosn-text); */
 color: rgb(47, 135, 183);
  font-size: 16px;
  background: #fff;
  border-radius: 9999px;
  padding: .75rem 1.25rem;
  font-weight: 600;
}

.tosnfc .pill-btn.active {
  background: var(--tosn-accent);
  border-color: var(--tosn-accent);
  color: var(--tosn-text) !important;
}

/* Stepper buttons (– / +) circular look */
.tosnfc .stepper {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--tosn-pill);
  color: var(--tosn-text) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tosnfc .stepper:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.tosnfc .stepper.plus_icon {
  background-color: var(--tosn-accent);
}

/* Dots (keep existing but allow .active) */
.tosnfc .dots button {
  background: #cfe7f5;
}

.tosnfc .dots button.active {
  background: var(--tosn-accent);
}

/* “Learn more →” link spacing */
.tosnfc .link-arrow {
  text-decoration: none;
}

.tosnfc .link-arrow span {
  display: inline-block;
  transform: translateX(0);
  transition: transform .15s ease;
}

.tosnfc .link-arrow:hover span {
  transform: translateX(2px);
}


/* --- Buttons (primary + outline) --- */
.tosnfc .btn-pill {
  border-radius: 9999px;
}

.tosnfc .btn-outline-accent {
  border: 2px solid var(--tosn-pill);
  color: var(--tosn-accent-dark);
  background: #fff;
  border-radius: 9999px;
  font-weight: 600;
  padding: .65rem 1.25rem;
}

.tosnfc .btn-outline-accent:hover {
  background: #EAF6FD;
}

.tosnfc .btn-outline-accent:active,
.tosnfc .btn-outline-accent.is-active {
  background: #D8EEFB;
  border-color: var(--tosn-accent-dark);
}

.tosnfc .btn-accent {
  background: #fff;
  color: var(--tosn-accent);
  border: 1px solid var(--tosn-accent);
  border-radius: 9999px;
  font-weight: 600;
  text-transform: uppercase;
  padding: .85rem 1.5rem;
  letter-spacing: .02em;
  width: 320px;
  height: 60px;
  font-size: 17px;
}

.tosnfc .btn-accent:hover {
  filter: brightness(0.95);
}

.tosnfc .btn-accent:active,
.tosnfc .btn-accent.is-active {
  filter: brightness(0.90);
}

.tosnfc .btn-accent:disabled {
  background: #cfe7f5;
  border-color: #cfe7f5;
}

/* Stepper buttons ( + / – ) to match Figma */
.tosnfc .stepper {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--tosn-pill);
  color: var(--tosn-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tosnfc .stepper:active {
  background: #EAF6FD;
}

/* Dots (keep what you had, just ensure active tone) */
.tosnfc .dots button {
  background: #cfe7f5;
}

.tosnfc .dots button.active {
  background: var(--tosn-accent);
}

/* Summary panel polish */
.tosnfc .summary-head {
  background: var(--tosn-accent);
  color: #fff;
  border-radius: 0;
}

.tosnfc .summary-card {
  background: #CFEDF9;
  border-radius: .75rem;
  padding: 1rem;
  /* box-shadow: 0 1px 0 rgba(0, 0, 0, .03); */
}

.tosnfc .summary-card .title {
  font-weight: 600;
  color: var(--tosn-text);
}

.tosnfc .summary-card .value {
  white-space: pre-line;
}

/* “Change” action */
.tosnfc .change-link {
  font-weight: 600;
  text-decoration: none;
  color: var(--tosn-text);
}

.tosnfc .change-link:hover {
  text-decoration: none;
}

.tosnfc .change-link span {
  color: var(--tosn-accent);
  font-size: 25px;
}

/* Neutralise theme .button */
.tosnfc .button {
  all: unset;
  display: inline-block;
}


/*11/11/2025 css add*/
.tosn-nursery-content-block.tosn-nursery-enquiry-form {
  background-color: #fff !important;
}

.display-5.font-60 {
  font-size: 60px;
}

.tosnfc h2 {
  font-size: 45px;
  font-weight: 500 !important;
  line-height: 1.2;
}

.tosnfc .btn_color .pill-btn {
  font-size: 16px;
  /* width: 48% !important; */
}

.days_box .font-20 {
  font-size: 20px;
}

.days_box .font-18 {
  font-size: 18px;
}

.see_nursery {
  background-color: var(--tosn-accent) !important;
  color: var(--tosn-text) !important;
}

.summary-body .btn-accent.btn-pill {
  width: 250px !important;
  background: #41B6E6 !important;
  color: #393536 !important;
  font-size: 17px;
}

.summary-head .font-32 {
  font-size: 32px;
}

.final_bg {
  background: #9FDAF2;
  font-size: 18px;
  margin: 0 !important;
  padding: 10px;
  text-align: center;
}
.gap_2{
  gap: 20px;
}
@media (max-width:992px) {
  .display-5.font-60 {
    font-size: 40px;
	position: absolute;
	top: 0;
}
.tosnfc .btn-accent{
  min-width: 100%
}

.tosnfc .pill-btn{
	width: 48%;
    margin-right: auto;
}
.row.row-cols-1.row-cols-sm-2.g-3{
	margin: 0 auto;
}

/* .col-12.col-md-6.order-1.order-md-2{
	margin-top: 145px;
} */
.tosnfc .btn-outline-accent{
	 width: 100%;
}
.tosnfc .option-grid{
	grid-template-columns: repeat(2, 1fr);
}
.tosnfc h2{
  font-size: 30px;
}
.summary-head .font-32{
	  font-size: 18px;
  }
.tosnfc .summary-card .title{
	font-size: 16px;
  }
.tosnfc .summary-card .value {
	font-size: 16px;
}






}