/* Adande "Build Your Own" — modernise pass. Additive restyle onto the existing
   Tiny-Slider/Bootstrap step configurator, aligned to the new product-page design.
   Colours/typography/cards/buttons only — no layout/positioning the slider relies on. */

.page-template-single-page-build-your-own-adande {
  --byo-ink: #0f2b33;
  --byo-teal: #0C4A5E;
  --byo-accent: #00aeef;
  --byo-line: #e3edf0;
  --byo-bg: #f6fbfc;
  --byo-radius: 16px;
  --byo-shadow: 0 18px 40px -24px rgba(12, 74, 94, .45);
}

.page-template-single-page-build-your-own-adande {
  color: var(--byo-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Hero */
.page-template-single-page-build-your-own-adande .hero {
  background: linear-gradient(135deg, #eef8fb 0%, #ffffff 60%);
  border-bottom: 1px solid var(--byo-line);
}
.page-template-single-page-build-your-own-adande .hero h1 {
  color: var(--byo-teal) !important;
  font-weight: 800;
  letter-spacing: -.02em;
}
.page-template-single-page-build-your-own-adande .hero p { font-size: 1.075rem; color: #47606a; max-width: 46ch; }

/* Step sections — gentle alternating tint + rhythm */
.page-template-single-page-build-your-own-adande [class^="step-"],
.page-template-single-page-build-your-own-adande [class*=" step-"] { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.page-template-single-page-build-your-own-adande [class*="step-"]:nth-of-type(even) { background: var(--byo-bg); }

/* Step headings with the accent rule (reuses the theme .bl-5 hook) */
.page-template-single-page-build-your-own-adande h2 {
  font-weight: 800; letter-spacing: -.01em; color: var(--byo-teal);
  padding-left: 14px; border-left: 4px solid var(--byo-accent); line-height: 1.2;
}
.page-template-single-page-build-your-own-adande h2 + p { color: #5a727b; margin-top: .5rem; }

/* Option / model cards */
.page-template-single-page-build-your-own-adande .model-slide,
.page-template-single-page-build-your-own-adande [class$="-slide"] > div {
  background: #fff; border: 1px solid var(--byo-line); border-radius: var(--byo-radius);
  padding: 18px; margin: 8px; text-align: center; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor: pointer; height: 100%;
}
.page-template-single-page-build-your-own-adande .model-slide:hover,
.page-template-single-page-build-your-own-adande [class$="-slide"] > div:hover {
  transform: translateY(-3px); box-shadow: var(--byo-shadow); border-color: #bfe6f2;
}
.page-template-single-page-build-your-own-adande .model-slide.selected,
.page-template-single-page-build-your-own-adande .selected > div,
.page-template-single-page-build-your-own-adande [aria-selected="true"] {
  border-color: var(--byo-accent); box-shadow: 0 0 0 3px rgba(0, 174, 239, .18);
}
.page-template-single-page-build-your-own-adande .model-unit-img,
.page-template-single-page-build-your-own-adande .model-slide img { border-radius: 10px; max-width: 100%; height: auto; margin-bottom: 12px; }
.page-template-single-page-build-your-own-adande .model-slide h3,
.page-template-single-page-build-your-own-adande [class$="-slide"] h3 { font-weight: 700; font-size: 1.15rem; color: var(--byo-ink); margin: 0 0 2px; }
.page-template-single-page-build-your-own-adande .model-slide p,
.page-template-single-page-build-your-own-adande [class$="-slide"] p { color: #6a828b; font-size: .9rem; margin: 0; }

/* Slider arrows -> circular modern buttons */
.page-template-single-page-build-your-own-adande [class*="prev-slide"] button,
.page-template-single-page-build-your-own-adande [class*="next-slide"] button {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--byo-line);
  background: #fff; box-shadow: 0 6px 16px -10px rgba(12, 74, 94, .5); display: inline-flex;
  align-items: center; justify-content: center; padding: 0; transition: background .15s, border-color .15s, transform .15s;
}
.page-template-single-page-build-your-own-adande [class*="prev-slide"] button:hover,
.page-template-single-page-build-your-own-adande [class*="next-slide"] button:hover { background: var(--byo-teal); border-color: var(--byo-teal); transform: scale(1.05); }
.page-template-single-page-build-your-own-adande [class*="prev-slide"] button svg,
.page-template-single-page-build-your-own-adande [class*="next-slide"] button svg { width: 18px; height: 18px; fill: var(--byo-teal); transition: fill .15s; }
.page-template-single-page-build-your-own-adande [class*="prev-slide"] button:hover svg,
.page-template-single-page-build-your-own-adande [class*="next-slide"] button:hover svg { fill: #fff; }

/* Buttons / CTAs + form controls */
.page-template-single-page-build-your-own-adande .btn,
.page-template-single-page-build-your-own-adande button[type="submit"] {
  border-radius: 12px; font-weight: 700; padding: .7rem 1.5rem; border: 0;
  background: var(--byo-teal); color: #fff; transition: background .15s, transform .15s;
}
.page-template-single-page-build-your-own-adande .btn:hover,
.page-template-single-page-build-your-own-adande button[type="submit"]:hover { background: #0a3d4d; transform: translateY(-1px); }
.page-template-single-page-build-your-own-adande select,
.page-template-single-page-build-your-own-adande input[type="text"],
.page-template-single-page-build-your-own-adande input[type="email"],
.page-template-single-page-build-your-own-adande textarea {
  border: 1px solid var(--byo-line); border-radius: 10px; padding: .6rem .8rem;
}
.page-template-single-page-build-your-own-adande select:focus,
.page-template-single-page-build-your-own-adande input:focus,
.page-template-single-page-build-your-own-adande textarea:focus { outline: none; border-color: var(--byo-accent); box-shadow: 0 0 0 3px rgba(0, 174, 239, .15); }