/* ============================================================
   Rootophia Wellness Plans
   Layered on top of styles.v7.css (shared header, footer, nav,
   buttons, cards and form fields are reused). All classes are
   wp- prefixed so nothing else on the site is affected.
   ============================================================ */

:root {
  --wp-cream: #fff8ee;
  --wp-silver: #b6bcc6;
  --wp-silver-bg: #f3f4f7;
  --wp-silver-ink: #565c66;
  --wp-gold: #e0a800;
  --wp-gold-bg: #fffaf0;
  --wp-gold-ink: #8a6400;
  --wp-plat: #94a0b3;
  --wp-plat-bg: #f5f7fb;
  --wp-plat-ink: #4a5568;
  --wp-save-bg: #e9f7ef;
  --wp-save-ink: #1c7c43;
  --wp-navy: #25334a;
  --wp-pink: #f6d7df;
}

/* Hero ------------------------------------------------------ */
.wp-hero {
  background:
    radial-gradient(900px 460px at 10% -20%, rgba(255,255,255,0.35), transparent 60%),
    linear-gradient(135deg, #ff9839 0%, #f57c00 55%, #e26a00 100%);
  color: #fff;
  padding: 66px 0 60px;
  text-align: center;
}
.wp-hero__badge {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.55);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
  backdrop-filter: blur(6px);
}
.wp-hero h1 {
  margin: 0 auto 12px;
  font-size: clamp(30px, 5vw, 52px);
  letter-spacing: -0.5px;
  line-height: 1.08;
  text-wrap: balance;
}
.wp-hero__sub {
  font-size: clamp(16px, 1.7vw, 20px);
  max-width: 52ch;
  margin: 0 auto 16px;
  opacity: 0.97;
}
.wp-hero__intro {
  max-width: 64ch;
  margin: 0 auto 24px;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.95;
}
.wp-hero__cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.wp-hero .button.wp-heroBtn {
  background: #fff;
  color: var(--orange-deep, #e26a00);
  font-weight: 800;
  padding: 13px 20px;
}
.wp-hero .button.wp-heroBtn:hover { background: var(--wp-cream); }

/* Info box (availability) ----------------------------------- */
.wp-infobox {
  max-width: 900px;
  margin: 22px auto 0;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.55;
  backdrop-filter: blur(6px);
}
/* Standalone info note used within the page body */
.wp-note {
  background: var(--wp-cream);
  border: 1px solid #ffe6c2;
  border-left: 5px solid var(--orange);
  border-radius: 14px;
  padding: 16px 20px;
  color: rgba(0,0,0,0.75);
  line-height: 1.6;
}
.wp-note strong { color: var(--ink); }

/* Collection sections --------------------------------------- */
.wp-collection {
  position: relative;
  padding: 70px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(245,124,0,0.08), transparent 24%),
    #fffdf9;
}
.wp-collection:nth-of-type(even) {
  background:
    radial-gradient(circle at 92% 8%, rgba(246,215,223,0.55), transparent 25%),
    #fff8ee;
}
.wp-collection + .wp-collection { border-top: 1px solid rgba(226,106,0,0.12); }
.wp-collection__head { text-align: center; max-width: 64ch; margin: 0 auto 34px; }
.wp-collection__head h2 {
  margin: 4px 0 8px;
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing: -0.3px;
  color: var(--wp-navy);
}
.wp-collection__sub {
  font-weight: 800;
  color: var(--orange-deep, #e26a00);
  letter-spacing: 0.3px;
  margin: 0 0 8px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.wp-collection__desc { color: var(--ink); opacity: 0.75; margin: 0 auto; max-width: 58ch; }
.wp-ic { font-style: normal; }

/* scroll offset for sticky header anchors */
.wp-anchor { scroll-margin-top: 84px; }

/* Plan grid + cards ----------------------------------------- */
.wp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) { .wp-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

.wp-plan {
  position: relative;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 24px;
  padding: 30px 24px 26px;
  box-shadow: 0 14px 34px rgba(31,41,55,0.11);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.wp-plan::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -72px;
  bottom: -78px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.045;
  pointer-events: none;
}
.wp-plan:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(31,41,55,0.16); }
.wp-plan--silver   { border: 2px solid var(--wp-silver); border-top-width: 8px; color: var(--wp-silver-ink); }
.wp-plan--gold     { border: 2px solid var(--wp-gold); border-top-width: 8px; color: var(--wp-gold-ink); background: linear-gradient(155deg, #fff7dc 0%, #fff 58%); }
.wp-plan--platinum { border: 2px solid var(--wp-plat); border-top-width: 8px; color: var(--wp-plat-ink); background: linear-gradient(155deg, #e9edf5 0%, #fff 58%); }

/* Gold = most popular, slightly more prominent */
.wp-plan--featured {
  box-shadow: 0 22px 52px rgba(224,168,0,0.28);
  border-color: rgba(224,168,0,0.5);
}
@media (min-width: 901px) {
  .wp-plan--featured { transform: scale(1.035); z-index: 2; }
}

.wp-plan__badge {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.wp-plan--silver   .wp-plan__badge { background: var(--wp-silver-bg); color: var(--wp-silver-ink); }
.wp-plan--gold     .wp-plan__badge { background: #fdeec2; color: var(--wp-gold-ink); }
.wp-plan--platinum .wp-plan__badge { background: #e7ebf2; color: var(--wp-plat-ink); }

.wp-plan__tier {
  font-size: 13px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase;
  color: currentColor; margin-bottom: 4px;
}
.wp-plan__name { margin: 0 0 12px; font-size: 21px; letter-spacing: -0.2px; color: var(--wp-navy); }

.wp-plan__price { font-size: 46px; font-weight: 900; line-height: 1; color: var(--wp-navy); letter-spacing: -1.5px; }
.wp-plan__price .wp-plan__per { font-size: 13px; font-weight: 700; color: rgba(0,0,0,0.5); }
.wp-plan__value { margin: 8px 0 2px; font-size: 13.5px; color: rgba(0,0,0,0.55); }
.wp-plan__value s { color: rgba(0,0,0,0.45); }
.wp-plan__save {
  display: inline-block;
  background: var(--wp-save-bg);
  color: var(--wp-save-ink);
  font-weight: 800;
  font-size: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  margin: 4px 0 14px;
}
.wp-plan__limited {
  position: absolute;
  top: 16px; right: 16px;
  background: #fff3e0;
  color: #b45309;
  border: 1px solid #f6c88a;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 9px;
  border-radius: 999px;
}

.wp-plan__list { list-style: none; margin: 0 0 18px; padding: 0; }
.wp-plan__list li {
  position: relative;
  padding: 8px 0 8px 26px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(0,0,0,0.8);
  border-top: 1px solid rgba(0,0,0,0.06);
}
.wp-plan__list li:first-child { border-top: 0; }
.wp-plan__list .wp-plan__groom {
  margin: 6px 0;
  padding: 11px 12px 11px 38px;
  border: 1px solid rgba(226,106,0,0.22);
  border-radius: 12px;
  background: #fff8ee;
  color: #9a4800;
  font-weight: 900;
}
.wp-plan__list .wp-plan__groom::before { left: 12px; top: 11px; content: "✂"; }
.wp-plan__list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 8px;
  color: var(--orange);
  font-weight: 900;
  font-size: 13px;
}
.wp-plan__valid { font-size: 12.5px; color: rgba(0,0,0,0.55); font-weight: 700; }

.wp-plan .wp-choose {
  margin-top: auto;
  width: 100%;
  text-align: center;
  background: var(--orange);
  color: #fff;
  border: 0;
  font-weight: 800;
}
.wp-plan .wp-choose:hover { background: var(--orange-deep, #c95d00); }
.wp-plan--gold .wp-choose { background: var(--wp-gold-ink); }
.wp-plan--gold .wp-choose:hover { background: #6f5000; }

/* Credit list two-column ------------------------------------ */
.wp-credit-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 16px;
}
@media (max-width: 760px) { .wp-credit-cols { grid-template-columns: 1fr; } }
.wp-credit-cols .card h3 { margin-top: 0; }
.wp-tick, .wp-x {
  list-style: none; padding: 0; margin: 8px 0 0;
}
.wp-tick li, .wp-x li { position: relative; padding: 6px 0 6px 26px; color: rgba(0,0,0,0.8); }
.wp-tick li::before { content: "✓"; position: absolute; left: 0; color: var(--wp-save-ink); font-weight: 900; }
.wp-x li::before { content: "•"; position: absolute; left: 4px; color: var(--orange); font-weight: 900; }
.wp-example {
  background: var(--wp-cream);
  border: 1px solid #ffe6c2;
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 12px;
  font-size: 14.5px;
}

/* Accordions (terms / FAQ) ---------------------------------- */
.wp-acc {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(31,41,55,0.05);
}
.wp-acc > summary {
  list-style: none; cursor: pointer;
  padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-weight: 800; font-size: 16px; color: var(--ink);
}
.wp-acc > summary::-webkit-details-marker { display: none; }
.wp-acc > summary .wp-chev { color: var(--orange); transition: transform 0.2s ease; flex: 0 0 auto; }
.wp-acc[open] > summary .wp-chev { transform: rotate(180deg); }
.wp-acc__body { padding: 0 18px 18px; }
.wp-acc__body p { color: rgba(0,0,0,0.75); line-height: 1.65; margin: 0 0 10px; }
.wp-acc__body ul { margin: 0; padding-left: 20px; color: rgba(0,0,0,0.75); line-height: 1.6; }
.wp-acc__body ul li { margin-bottom: 8px; }

/* Existing daycare-only deals -------------------------------- */
.wp-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}
@media (max-width: 760px) { .wp-mini-grid { grid-template-columns: 1fr; } }
.wp-mini {
  background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px;
  padding: 16px; box-shadow: 0 4px 14px rgba(31,41,55,0.05);
}
.wp-mini h3 { margin: 0 0 4px; font-size: 16px; }
.wp-mini .wp-mini-price { font-weight: 800; color: var(--orange-deep, #e26a00); }

/* Purchase / enquiry form ----------------------------------- */
.wp-formwrap {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(31,41,55,0.10);
  padding: 28px;
  max-width: 860px;
  margin: 0 auto;
}
.wp-fieldset {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 14px;
  padding: 16px 18px 6px;
  margin: 0 0 18px;
}
.wp-fieldset > legend { font-weight: 800; padding: 0 6px; color: var(--ink); }
.wp-error { color: #a5281b; font-size: 12.5px; font-weight: 700; margin-top: 5px; display: none; }
.wp-error.is-shown { display: block; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: #c0392b !important; background: #fff6f5 !important;
}
.wp-formstatus { display: none; margin-top: 14px; padding: 14px 16px; border-radius: 12px; font-weight: 700; }
.wp-formstatus.is-error { display: block; background: #fdecea; border: 1px solid #f5c6c0; color: #a5281b; }
.wp-success {
  display: none; text-align: center;
  background: #fff; border: 1px solid #ffe6c2; border-radius: 22px;
  box-shadow: 0 14px 36px rgba(31,41,55,0.10);
  padding: 40px 28px; max-width: 720px; margin: 0 auto;
}
.wp-success.is-shown { display: block; }
.wp-success h3 { margin: 6px 0 12px; font-size: 24px; }
.wp-success p { color: rgba(0,0,0,0.72); max-width: 52ch; margin: 0 auto 16px; line-height: 1.65; }
.wp-spin {
  width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,0.5); border-top-color: #fff;
  border-radius: 50%; animation: wpspin 0.7s linear infinite; display: inline-block; vertical-align: -3px; margin-right: 6px;
}
@keyframes wpspin { to { transform: rotate(360deg); } }

/* Sticky mobile CTA ----------------------------------------- */
.wp-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96);
  border-top: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
}
.wp-sticky a {
  display: block; text-align: center;
  background: var(--orange); color: #fff; border: 0;
  border-radius: 999px; padding: 14px; font-weight: 800;
  box-shadow: 0 8px 20px rgba(245,124,0,0.3);
}
@media (max-width: 760px) {
  .wp-sticky.is-visible { display: block; }
  body.wp-page { padding-bottom: 78px; }
}

/* Final CTA -------------------------------------------------- */
.wp-final {
  background: linear-gradient(135deg, #f57c00 0%, #e26a00 100%);
  color: #fff; text-align: center; padding: 64px 0 72px;
}
.wp-final h2 { margin: 0 auto 12px; font-size: clamp(26px, 3.4vw, 40px); max-width: 22ch; }
.wp-final p { max-width: 58ch; margin: 0 auto 24px; font-size: 17px; opacity: 0.96; }
.wp-final .wp-hero__cta .button { padding: 13px 20px; font-weight: 800; }
.wp-final .button.wp-heroBtn { background: #fff; color: var(--orange-deep, #e26a00); }

/* Reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wp-plan, .wp-plan--featured { transform: none; transition: none; }
  .wp-chev, .wp-spin { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}