/*
 * Coachen met Sterren — horoscooptool.
 * Alles staat onder .cms-horo, zodat het WordPress-thema (Avada) er niet tussen komt en andersom.
 * Huisstijlkleuren: wit #FFFFFF, maan #FCF7F6, hemel #3B3A64, zon #E4AF66.
 */
@font-face {
  font-family: "CMS Astro Symbols";
  src: url("../vendor/cms-astro-symbols.woff2") format("woff2");
  font-display: block;
}

.cms-horo {
  --cms-wit: #ffffff;
  --cms-maan: #fcf7f6;
  --cms-hemel: #3b3a64;
  --cms-zon: #e4af66;
  --cms-zon-donker: #b7853f;      /* zon, donker genoeg voor tekst op wit */
  --cms-tekst: rgba(58, 58, 100, 0.9);   /* zelfde tekstkleur als de website */
  --cms-zacht: rgba(59, 58, 100, 0.6);
  --cms-lijn: #ebe1dc;
  --cms-harmonie: #5a74b8;
  --cms-spanning: #c0625a;
  --cms-klein: #9a93ab;
  --cms-fout: #b4443a;
  --cms-radius: 14px;
  --cms-schaduw: 0 10px 30px rgba(59, 58, 100, 0.08);
  --cms-serif: "Cormorant Garamond", Georgia, serif;
  --cms-sans: "Work Sans", Arial, Helvetica, sans-serif;
  --cms-sym: "CMS Astro Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", sans-serif;

  font-family: var(--cms-sans);
  color: var(--cms-tekst);
  line-height: 1.6;
  font-size: 16px;
  text-align: left;
}
.cms-horo { max-width: 100%; min-width: 0; }
.cms-horo *, .cms-horo *::before, .cms-horo *::after { box-sizing: border-box; }
.cms-horo .cms-wheel { max-width: 100%; }
.cms-horo h2, .cms-horo h3, .cms-horo h4 { font-family: var(--cms-serif); color: var(--cms-hemel); font-weight: 500; line-height: 1.2; margin: 0 0 .5em; letter-spacing: 0; text-transform: none; }
.cms-horo h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.cms-horo h3 { font-size: 1.45rem; margin-top: 1.6em; }
.cms-horo p { margin: 0 0 1em; }
.cms-horo a { color: var(--cms-zon-donker); }
.cms-horo .cms-sym { font-family: var(--cms-sym); font-style: normal; font-weight: 400; }
.cms-horo .cms-eyebrow { display: block; text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 600; color: var(--cms-zon-donker); margin-bottom: .5em; }
.cms-horo .cms-hint { font-size: .85rem; color: var(--cms-zacht); }
.cms-horo [hidden] { display: none !important; }

/* Knoppen */
.cms-horo .cms-btn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  background: var(--cms-zon); color: var(--cms-wit); text-decoration: none;
  padding: 13px 26px; border-radius: 4px; font: 500 .95rem/1.2 var(--cms-sans);
  transition: background .2s, transform .2s, color .2s;
}
.cms-horo .cms-btn:hover { background: var(--cms-zon-donker); transform: translateY(-1px); }
.cms-horo .cms-btn:focus-visible, .cms-horo button:focus-visible, .cms-horo input:focus-visible, .cms-horo select:focus-visible { outline: 2px solid var(--cms-hemel); outline-offset: 2px; }
.cms-horo .cms-btn.is-outline { background: transparent; color: var(--cms-hemel); box-shadow: inset 0 0 0 1.5px var(--cms-hemel); }
.cms-horo .cms-btn.is-outline:hover { background: var(--cms-hemel); color: var(--cms-wit); }
.cms-horo .cms-btn.is-small { padding: 8px 16px; font-size: .85rem; }

/* Formulier */
.cms-horo .cms-card { background: var(--cms-wit); border-radius: var(--cms-radius); box-shadow: var(--cms-schaduw); padding: clamp(20px, 4vw, 36px); }
.cms-horo .cms-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.cms-horo .cms-field { display: flex; flex-direction: column; gap: 6px; position: relative; min-width: 0; }
.cms-horo .cms-field.is-full { grid-column: 1 / -1; }
.cms-horo label, .cms-horo .cms-label { font-weight: 500; color: var(--cms-hemel); font-size: .92rem; }
.cms-horo input[type="text"], .cms-horo input[type="email"], .cms-horo input[type="date"], .cms-horo input[type="time"], .cms-horo input[type="number"], .cms-horo select {
  width: 100%; font: 400 1rem var(--cms-sans); color: var(--cms-hemel); background: var(--cms-wit);
  border: 1.5px solid var(--cms-lijn); border-radius: 8px; padding: 11px 13px; min-height: 46px; margin: 0;
  -webkit-appearance: none; appearance: none;
}
.cms-horo select { background-image: linear-gradient(45deg, transparent 50%, var(--cms-hemel) 50%), linear-gradient(135deg, var(--cms-hemel) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.cms-horo input:focus, .cms-horo select:focus { border-color: var(--cms-zon); outline: none; }
.cms-horo input:disabled { background: var(--cms-maan); color: var(--cms-zacht); }
.cms-horo .cms-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; color: var(--cms-tekst); cursor: pointer; font-size: .92rem; }
.cms-horo .cms-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--cms-hemel); flex: none; }
.cms-horo .cms-notice { background: var(--cms-maan); border-left: 3px solid var(--cms-zon); border-radius: 6px; padding: 12px 16px; font-size: .9rem; margin: 4px 0 0; }
.cms-horo .cms-notice p:last-child { margin: 0; }
.cms-horo .cms-error { color: var(--cms-fout); font-weight: 500; margin-top: 14px; min-height: 1em; }
.cms-horo .cms-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.cms-horo details.cms-advanced { margin-top: 18px; }
.cms-horo details.cms-advanced summary { cursor: pointer; color: var(--cms-hemel); font-size: .9rem; font-weight: 500; }
.cms-horo .cms-privacy { margin: 16px 0 0; }

/* Plaats zoeken */
.cms-horo .cms-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 4px; background: var(--cms-wit); border: 1.5px solid var(--cms-lijn); border-radius: 8px; box-shadow: var(--cms-schaduw); overflow: hidden; }
.cms-horo .cms-suggest button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 14px; font: 400 .95rem var(--cms-sans); color: var(--cms-hemel); cursor: pointer; border-bottom: 1px solid var(--cms-maan); }
.cms-horo .cms-suggest button small { color: var(--cms-zacht); }
.cms-horo .cms-suggest button:hover, .cms-horo .cms-suggest button.is-active { background: var(--cms-maan); }
.cms-horo .cms-place-info { font-size: .85rem; color: var(--cms-zacht); }
.cms-horo .cms-place-info.is-set { color: var(--cms-hemel); }

/* Uitkomst */
.cms-horo .cms-result { margin-top: 36px; }
.cms-horo .cms-result-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.cms-horo .cms-result-head h2 { margin: 0; }
.cms-horo .cms-meta { font-size: .9rem; color: var(--cms-zacht); }
/* Twee grote keuzeknoppen in plaats van subtiele tabbladen: ook een leek ziet dat er twee delen zijn. */
.cms-horo .cms-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 24px; scroll-margin-top: 90px; }
.cms-horo .cms-tab { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--cms-wit); border: 1.5px solid var(--cms-zon); border-radius: var(--cms-radius); padding: 14px 16px; font: 400 1rem var(--cms-sans); color: var(--cms-hemel); cursor: pointer; box-shadow: var(--cms-schaduw); transition: background .2s, color .2s; }
.cms-horo .cms-tab > .cms-sym { font-size: 1.6rem; color: var(--cms-zon-donker); line-height: 1; flex: none; }
.cms-horo .cms-tab strong { display: block; font-weight: 600; line-height: 1.25; }
.cms-horo .cms-tab small { display: block; font-size: .8rem; color: var(--cms-zacht); margin-top: 2px; }
.cms-horo .cms-tab:hover { background: var(--cms-maan); }
.cms-horo .cms-tab[aria-selected="true"] { background: var(--cms-hemel); border-color: var(--cms-hemel); color: var(--cms-wit); }
.cms-horo .cms-tab[aria-selected="true"] > .cms-sym { color: var(--cms-zon); }
.cms-horo .cms-tab[aria-selected="true"] small { color: rgba(255, 255, 255, .7); }

/* Verder lezen: direct onder Zon, Maan en Ascendant */
.cms-horo .cms-next { display: grid; gap: 8px; margin: 16px 0 4px; }
.cms-horo .cms-next-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--cms-wit); border-radius: 10px; box-shadow: var(--cms-schaduw); color: var(--cms-hemel); text-decoration: none; border: 1.5px solid transparent; }
.cms-horo .cms-next-item:hover { border-color: var(--cms-zon); }
.cms-horo .cms-next-item > .cms-sym { font-size: 1.35rem; color: var(--cms-zon-donker); width: 1.4em; text-align: center; flex: none; }
.cms-horo .cms-next-item > span:not(.cms-sym) { flex: 1; min-width: 0; }
.cms-horo .cms-next-item strong { display: block; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.cms-horo .cms-next-item small { display: block; font-size: .8rem; color: var(--cms-zacht); }
.cms-horo .cms-next-item i { font-style: normal; color: var(--cms-zon-donker); font-size: 1.1rem; }
.cms-horo .cms-next-item.is-featured { background: var(--cms-hemel); color: var(--cms-wit); }
.cms-horo .cms-next-item.is-featured > .cms-sym, .cms-horo .cms-next-item.is-featured i, .cms-horo .cms-next-item.is-featured small { color: var(--cms-zon); }
.cms-horo [data-anchor] { scroll-margin-top: 90px; }

/* Uitnodiging naar de transits, en de planeetstanden als uitklapper */
.cms-horo .cms-teaser { margin-top: 32px; background: var(--cms-wit); border-radius: var(--cms-radius); box-shadow: var(--cms-schaduw); border-top: 4px solid var(--cms-zon); padding: clamp(22px, 4vw, 34px); }
.cms-horo .cms-teaser h3 { margin-top: 0; }
.cms-horo .cms-teaser .cms-actions { margin-top: 8px; }
.cms-horo details.cms-more { margin-top: 32px; }
.cms-horo details.cms-more summary { cursor: pointer; font-family: var(--cms-serif); font-size: 1.35rem; color: var(--cms-hemel); padding: 6px 0 12px; }
.cms-horo .cms-transit-intro { max-width: 760px; }
.cms-horo .cms-premium-step { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); }
.cms-horo .cms-premium-step strong { color: var(--cms-wit); }
.cms-horo .cms-premium-after { margin: 18px 0 0; }
.cms-horo .cms-upsell { margin-top: 40px; }

.cms-horo .cms-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.cms-horo .cms-wheel-wrap { background: var(--cms-wit); border-radius: var(--cms-radius); box-shadow: var(--cms-schaduw); padding: 14px; position: sticky; top: 20px; }
.cms-horo .cms-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 4px 4px; }
.cms-horo .cms-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--cms-lijn); background: var(--cms-wit); border-radius: 999px; padding: 5px 12px; font: 400 .8rem var(--cms-sans); color: var(--cms-zacht); cursor: pointer; }
.cms-horo .cms-wheel-download { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 6px 2px; font-size: .8rem; color: var(--cms-zacht); }
.cms-horo .cms-wheel-download .cms-chip { color: var(--cms-hemel); }
.cms-horo .cms-wheel-download .cms-chip:disabled { opacity: .5; cursor: wait; }
.cms-horo .cms-chip[aria-pressed="true"] { border-color: var(--cms-hemel); color: var(--cms-hemel); background: var(--cms-maan); }

.cms-horo .cms-big3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.cms-horo .cms-big3 div { background: var(--cms-wit); border-radius: 10px; box-shadow: var(--cms-schaduw); padding: 12px; text-align: center; }
.cms-horo .cms-big3 span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cms-zacht); }
.cms-horo .cms-big3 strong { display: block; font-family: var(--cms-sym); font-size: 1.7rem; font-weight: 400; color: var(--cms-zon-donker); line-height: 1.3; }
.cms-horo .cms-big3 em { font-style: normal; color: var(--cms-hemel); font-weight: 500; }

.cms-horo .cms-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--cms-wit); border-radius: 10px; box-shadow: var(--cms-schaduw); }
.cms-horo table.cms-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 0; border: 0; }
.cms-horo .cms-table th, .cms-horo .cms-table td { padding: 8px 12px; border: 0; border-bottom: 1px solid var(--cms-maan); text-align: left; vertical-align: middle; background: none; }
.cms-horo .cms-table th { font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cms-zacht); }
.cms-horo .cms-table tr:last-child td { border-bottom: 0; }
.cms-horo .cms-table tbody tr[data-key] { cursor: default; }
.cms-horo .cms-table tbody tr.is-on td { background: var(--cms-maan); }
.cms-horo .cms-table .g { font-family: var(--cms-sym); font-size: 1.15rem; color: var(--cms-hemel); width: 1.8em; text-align: center; }
.cms-horo .cms-table .s { font-family: var(--cms-sym); color: var(--cms-zon-donker); }
.cms-horo .cms-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cms-horo .cms-table .sub th { background: var(--cms-maan); color: var(--cms-hemel); text-transform: none; letter-spacing: 0; font-size: .88rem; }
.cms-horo .cms-retro { color: var(--cms-spanning); font-family: var(--cms-sym); margin-left: 3px; }
.cms-horo .cms-asp-harmonie { color: var(--cms-harmonie); }
.cms-horo .cms-asp-spanning { color: var(--cms-spanning); }
.cms-horo .cms-asp-klein { color: var(--cms-klein); }
.cms-horo .cms-asp-neutraal { color: var(--cms-hemel); }
.cms-horo .cms-tag { display: inline-block; font-size: .72rem; padding: 1px 8px; border-radius: 999px; background: var(--cms-maan); color: var(--cms-zacht); white-space: nowrap; }
.cms-horo .cms-tag.is-now { background: var(--cms-zon); color: var(--cms-wit); }

.cms-horo .cms-balance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.cms-horo .cms-bar { display: grid; grid-template-columns: 90px minmax(0, 1fr) 22px; align-items: center; gap: 10px; font-size: .9rem; }
.cms-horo .cms-bar i { display: block; height: 8px; border-radius: 4px; background: var(--cms-maan); position: relative; overflow: hidden; }
.cms-horo .cms-bar i b { position: absolute; inset: 0 auto 0 0; background: var(--cms-zon); border-radius: 4px; }

/* Gewone bezoeker of astrologenweergave */
.cms-horo:not(.is-expert) .cms-expert { display: none !important; }
.cms-horo.is-expert .cms-simple { display: none !important; }
.cms-horo .cms-expert-switch { margin: -4px 0 14px; }
.cms-horo:not(.is-expert) .cms-transit-year-title { margin-top: 0; }

/* Duiding */
.cms-horo .cms-reading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cms-horo .cms-reading-item { background: var(--cms-wit); border-radius: var(--cms-radius); box-shadow: var(--cms-schaduw); padding: 20px 24px; transition: box-shadow .2s; }
.cms-horo .cms-reading-item.is-on { box-shadow: 0 0 0 2px var(--cms-zon), var(--cms-schaduw); }
.cms-horo .cms-reading-item h4 { font-size: 1.35rem; margin: 0 0 .4em; }
.cms-horo .cms-reading-item h4 .cms-sym { color: var(--cms-zon-donker); font-size: 1.1rem; margin-right: 4px; }
.cms-horo .cms-reading-item h4 small { font-family: var(--cms-sans); font-size: .85rem; color: var(--cms-zacht); }
.cms-horo .cms-reading-item p:last-child { margin-bottom: 0; }
.cms-horo .cms-reading { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-horo .cms-question { border-top: 1px solid var(--cms-lijn); padding-top: 12px; font-family: var(--cms-serif); font-size: 1.15rem; font-style: italic; color: var(--cms-hemel); line-height: 1.4; }
.cms-horo .cms-question span { display: block; font-family: var(--cms-sans); font-style: normal; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cms-zon-donker); font-weight: 600; margin-bottom: 4px; }

.cms-horo .cms-cta { margin: 32px 0 0; background: var(--cms-maan); border: 1.5px solid var(--cms-zon); border-radius: var(--cms-radius); padding: clamp(22px, 4vw, 36px); text-align: center; }
.cms-horo .cms-cta h3 { margin-top: 0; }
.cms-horo .cms-cta p { max-width: 640px; margin-left: auto; margin-right: auto; }
.cms-horo .cms-cta .cms-actions { justify-content: center; }
.cms-horo .cms-transit-cards { display: grid; gap: 18px; }
/* Andere transits als "trigger": titel en periode, de tekst staat in het transitrapport */
.cms-horo .cms-transit-triggers { display: grid; gap: 8px; }
.cms-horo .cms-transit-triggers > p { margin: 4px 0 2px; }
.cms-horo .cms-transit-trigger { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--cms-wit); border-radius: 10px; box-shadow: var(--cms-schaduw);
  color: var(--cms-hemel); text-decoration: none; border: 1.5px solid transparent; }
.cms-horo a.cms-transit-trigger:hover { border-color: var(--cms-zon); }
.cms-horo .cms-transit-trigger > .cms-sym { font-size: 1.4rem; color: var(--cms-zon-donker); width: 1.4em; text-align: center; flex: none; }
.cms-horo .cms-transit-trigger > span:not(.cms-sym) { flex: 1; min-width: 0; }
.cms-horo .cms-transit-trigger strong { display: block; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.cms-horo .cms-transit-trigger small { display: block; font-size: .8rem; color: var(--cms-zacht); }
.cms-horo .cms-transit-trigger i { font-style: normal; font-size: .9rem; opacity: .7; }
.cms-horo .cms-transit-card .cms-tag { margin-bottom: 8px; }
.cms-horo [data-tpremium] .cms-premium { margin-top: 32px; }

/* Bestelvenster */
.cms-modal-open, .cms-modal-open body { overflow: hidden; }
.cms-horo .cms-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(59, 58, 100, .55); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 5vh 16px; }
.cms-horo .cms-modal-box { position: relative; width: min(560px, 100%); background: var(--cms-wit); border-radius: var(--cms-radius); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); padding: clamp(22px, 4vw, 34px); }
.cms-horo .cms-modal-box h3 { margin: 0 0 2px; font-size: 1.6rem; }
.cms-horo .cms-modal-box .cms-option-price { color: var(--cms-zon-donker); margin-bottom: 10px; }
.cms-horo .cms-modal-box form { display: grid; gap: 14px; margin-top: 14px; }
.cms-horo .cms-modal-close { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 1.8rem; line-height: 1; color: var(--cms-zacht); cursor: pointer; padding: 4px 8px; }
.cms-horo .cms-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--cms-zon-donker); text-decoration: underline; cursor: pointer; }
.cms-horo .cms-terms { background: var(--cms-maan); border-radius: 8px; padding: 14px 16px; font-size: .85rem; max-height: 260px; overflow-y: auto; }
.cms-horo .cms-terms p { margin: 0 0 .7em; }

/* Uitnodiging naar de tool (onder blogberichten) */
/* Kaart: links een horoscoopcirkel op donkerblauw, rechts de uitnodiging in de maat van het artikel. */
.cms-horo.cms-invite { display: grid; grid-template-columns: 210px minmax(0, 1fr); margin: 48px 0 16px; background: var(--cms-wit); border-radius: var(--cms-radius);
  box-shadow: 0 14px 40px rgba(59, 58, 100, .10); overflow: hidden; font-size: inherit; line-height: inherit; }
.cms-horo .cms-invite-art { background: radial-gradient(circle at 50% 40%, #4a4978 0%, var(--cms-hemel) 70%); display: flex; align-items: center; justify-content: center; padding: 24px; }
.cms-horo .cms-invite-wheel { width: 100%; max-width: 170px; height: auto; display: block; }
.cms-horo .cms-invite-body { padding: clamp(24px, 3.5vw, 36px) clamp(22px, 3.5vw, 40px); }
.cms-horo .cms-invite-body .cms-eyebrow { margin-bottom: .6em; }
.cms-horo .cms-invite-title { font-family: var(--cms-serif); font-weight: 500; color: var(--cms-hemel); font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.15; margin: 0 0 .45em; }
.cms-horo.cms-invite p:not(.cms-invite-title) { font-size: 1em; margin: 0 0 1.1em; }
.cms-horo .cms-invite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.cms-horo.cms-invite a.cms-btn, .cms-horo.cms-invite a.cms-btn:hover { text-decoration: none !important; color: var(--cms-wit) !important; }
.cms-horo .cms-invite-note { font-size: .85rem; color: var(--cms-zacht); }
@media (max-width: 600px) {
  .cms-horo.cms-invite { grid-template-columns: minmax(0, 1fr); }
  .cms-horo .cms-invite-art { padding: 16px; }
  .cms-horo .cms-invite-wheel { width: 104px; }
}

/* Boek bestellen */
.cms-horo.cms-book { max-width: 640px; }
.cms-horo .cms-book-title { margin-top: 0; }
.cms-horo .cms-qty { display: flex; align-items: stretch; }
.cms-horo .cms-qty input[type="number"] { text-align: center; border-radius: 0; border-left: 0; border-right: 0; -moz-appearance: textfield; }
.cms-horo .cms-qty input::-webkit-outer-spin-button, .cms-horo .cms-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cms-horo .cms-qty-btn { flex: none; width: 46px; border: 1.5px solid var(--cms-lijn); background: var(--cms-maan); color: var(--cms-hemel); font-size: 1.3rem; cursor: pointer; }
.cms-horo .cms-qty-btn:first-child { border-radius: 8px 0 0 8px; }
.cms-horo .cms-qty-btn:last-child { border-radius: 0 8px 8px 0; }
.cms-horo .cms-book-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 22px 0 6px; padding: 14px 16px; background: var(--cms-maan); border-radius: 8px; color: var(--cms-hemel); }
.cms-horo .cms-book-total strong { font-family: var(--cms-serif); font-size: 1.7rem; font-weight: 500; color: var(--cms-zon-donker); }
.cms-horo .cms-book-checks { display: grid; gap: 12px; margin-top: 16px; }

/* Rapportpagina */
.cms-horo.cms-report { max-width: 860px; margin: 0 auto; }
.cms-horo .cms-report-head { text-align: center; margin-bottom: 24px; }
.cms-horo .cms-report-head h1 { font-family: var(--cms-serif); color: var(--cms-hemel); font-weight: 500; font-size: clamp(2rem, 5vw, 3rem); margin: 0; line-height: 1.15; }
.cms-horo .cms-report-for { font-family: var(--cms-serif); font-size: 1.5rem; color: var(--cms-zon-donker); margin: 4px 0; }
.cms-horo .cms-report-head .cms-actions { justify-content: center; }
.cms-horo .cms-report-wheel { position: static; max-width: 560px; margin: 0 auto 28px; }
.cms-horo .cms-report-intro { font-size: 1.05rem; text-align: center; max-width: 680px; margin: 0 auto 28px; }
.cms-horo .cms-report-section { margin: 0 0 30px; }
.cms-horo .cms-report-section h2 { font-size: 1.9rem; border-bottom: 1.5px solid var(--cms-lijn); padding-bottom: 6px; margin-top: 36px; }
.cms-horo .cms-report-section h2 small, .cms-horo .cms-report-section h3 small { font-family: var(--cms-sans); font-size: .9rem; color: var(--cms-zacht); }
.cms-horo .cms-report-section h3 { font-size: 1.35rem; margin-top: 1.2em; }
.cms-horo .cms-report-introtext { font-style: italic; color: var(--cms-zacht); }
.cms-horo .cms-report-chapter h2 { color: var(--cms-zon-donker); }
.cms-horo .cms-report-foot { text-align: center; margin-top: 30px; }

/* Reacties van gebruikers, boven de bestelopties */
.cms-horo .cms-reviews { margin-top: 32px; }
.cms-horo .cms-reviews h3 { margin: 0 0 14px; }
.cms-horo .cms-reviews-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; }
@media (max-width: 600px) {
  /* Telefoon: reacties naast elkaar om doorheen te vegen, in plaats van een lange lijst. */
  .cms-horo .cms-reviews-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0 -4px; }
  .cms-horo .cms-review { flex: 0 0 72%; scroll-snap-align: start; }
}
.cms-horo .cms-review { margin: 0; background: var(--cms-wit); border-radius: 12px; box-shadow: var(--cms-schaduw); padding: 18px 18px 16px; position: relative; border-top: 3px solid var(--cms-zon); }
.cms-horo .cms-review::before { content: "“"; position: absolute; top: 2px; left: 14px; font: 500 2.6rem/1 var(--cms-serif); color: var(--cms-zon); opacity: .6; }
.cms-horo .cms-review p { margin: 14px 0 0; font: italic 500 1.18rem/1.35 var(--cms-serif); color: var(--cms-hemel); }
.cms-horo .cms-reviews > .cms-hint { margin: 10px 0 0; }

/* Volledige duiding (betaald) */
.cms-horo .cms-premium { margin-top: 28px; background: var(--cms-hemel); color: rgba(255, 255, 255, .86); border-radius: var(--cms-radius); padding: clamp(22px, 4vw, 40px); }
.cms-horo .cms-premium h3 { color: var(--cms-wit); margin-top: 0; }
.cms-horo .cms-premium .cms-eyebrow { color: var(--cms-zon); }
.cms-horo .cms-premium-head { max-width: 720px; }
.cms-horo .cms-premium-list { list-style: none; margin: 18px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 8px 18px; }
.cms-horo .cms-premium-list li { padding: 8px 0 8px 22px; border-bottom: 1px solid rgba(255, 255, 255, .14); position: relative; font-size: .92rem; }
.cms-horo .cms-premium-list li::before { content: "✦"; position: absolute; left: 0; color: var(--cms-zon); }
.cms-horo .cms-premium-list .cms-sym { color: var(--cms-zon); }
.cms-horo .cms-premium-list small { color: rgba(255, 255, 255, .6); }
.cms-horo .cms-premium .cms-hint { color: rgba(255, 255, 255, .7); }
.cms-horo .cms-premium-list li.cms-premium-quarter { grid-column: 1 / -1; padding: 16px 0 4px; border-bottom: 0; color: var(--cms-zon); font-family: var(--cms-serif); font-size: 1.2rem; }
.cms-horo .cms-premium-list li.cms-premium-quarter::before { content: none; }
.cms-horo .cms-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; margin-top: 26px; align-items: stretch; }
.cms-horo .cms-option.is-featured { box-shadow: 0 0 0 1px var(--cms-zon), 0 18px 40px rgba(0, 0, 0, .25); }
.cms-horo .cms-option { position: relative; border: 1.5px solid rgba(255, 255, 255, .22); border-radius: var(--cms-radius); padding: 24px; display: flex; flex-direction: column; align-items: flex-start; }
.cms-horo .cms-option.is-featured { border-color: var(--cms-zon); background: rgba(228, 175, 102, .08); }
.cms-horo .cms-option h4 { color: var(--cms-wit); font-size: 1.4rem; margin: 0 0 4px; }
.cms-horo .cms-option-price { font-family: var(--cms-serif); font-size: 2rem; color: var(--cms-zon); line-height: 1.2; margin-bottom: 8px; }
.cms-horo .cms-option p { flex: 1; font-size: .93rem; }
.cms-horo .cms-option-badge { position: absolute; top: -12px; right: 18px; background: var(--cms-zon); color: var(--cms-wit); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.cms-horo .cms-btn.is-light { color: var(--cms-wit); box-shadow: inset 0 0 0 1.5px var(--cms-wit); }
.cms-horo .cms-btn.is-light:hover { background: var(--cms-wit); color: var(--cms-hemel); }
@media (max-width: 700px) { .cms-horo .cms-options { grid-template-columns: minmax(0, 1fr); } }

.cms-horo .cms-transit-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 18px; }
.cms-horo .cms-transit-controls .cms-field { width: auto; }

/* Horoscoopcirkel */
.cms-horo .cms-wheel { display: block; width: 100%; height: auto; font-family: var(--cms-sans); }
.cms-wheel .cms-w-bg { fill: var(--cms-wit, #fff); }
.cms-wheel .cms-w-trring { fill: var(--cms-maan, #fcf7f6); stroke: none; }
.cms-wheel .cms-w-sign { fill: var(--cms-hemel, #3b3a64); stroke: rgba(255, 255, 255, .28); stroke-width: 1; }
.cms-wheel .cms-w-signglyph { fill: var(--cms-zon, #e4af66); font-size: 25px; }
.cms-wheel .cms-w-tick { stroke: var(--cms-hemel, #3b3a64); stroke-width: .7; opacity: .55; }
.cms-wheel .cms-w-line-soft { fill: none; stroke: var(--cms-lijn, #ebe1dc); stroke-width: 1; }
.cms-wheel .cms-w-innercircle { fill: var(--cms-maan, #fcf7f6); stroke: var(--cms-hemel, #3b3a64); stroke-width: 1; }
.cms-wheel .cms-w-cusp { stroke: var(--cms-hemel, #3b3a64); stroke-width: .8; opacity: .45; }
.cms-wheel .cms-w-axis { stroke: var(--cms-hemel, #3b3a64); stroke-width: 2; }
.cms-wheel .cms-w-housenum { fill: var(--cms-hemel, #3b3a64); opacity: .55; font-size: 13px; }
.cms-wheel .cms-w-axislabel { fill: var(--cms-zon-donker, #b7853f); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.cms-wheel .cms-w-asp { stroke-width: 1.1; opacity: .75; }
.cms-wheel .cms-w-asp-strong { stroke-width: 1.9; opacity: .9; }
.cms-wheel .cms-w-asp-weak { stroke-width: .8; opacity: .55; }
.cms-wheel .cms-w-asp-harmonie { stroke: var(--cms-harmonie, #5a74b8); }
.cms-wheel .cms-w-asp-spanning { stroke: var(--cms-spanning, #c0625a); }
.cms-wheel .cms-w-asp-klein { stroke: var(--cms-klein, #9a93ab); stroke-dasharray: 5 4; }
.cms-wheel .cms-w-ptick { stroke: var(--cms-hemel, #3b3a64); stroke-width: 1.4; }
.cms-wheel .cms-w-pconnect { stroke: var(--cms-hemel, #3b3a64); stroke-width: .6; opacity: .45; }
.cms-wheel .cms-w-pglyph { fill: var(--cms-hemel, #3b3a64); font-size: 23px; }
.cms-wheel .cms-w-plabel { fill: var(--cms-hemel, #3b3a64); opacity: .7; font-size: 11.5px; }
.cms-wheel .cms-w-g-centaur .cms-w-pglyph, .cms-wheel .cms-w-g-planetoide .cms-w-pglyph { font-size: 20px; }
.cms-wheel .cms-w-g-punt .cms-w-pglyph { fill: #5f5a86; }
.cms-wheel .cms-w-transit .cms-w-pglyph { fill: var(--cms-zon-donker, #b7853f); }
.cms-wheel .cms-w-transit .cms-w-ptick { stroke: var(--cms-zon-donker, #b7853f); }
.cms-wheel.is-compact .cms-w-plabel { display: none; }
.cms-wheel.is-compact .cms-w-pglyph, .cms-wheel.is-compact .cms-w-g-centaur .cms-w-pglyph, .cms-wheel.is-compact .cms-w-g-planetoide .cms-w-pglyph { font-size: 30px; }
.cms-wheel.is-compact .cms-w-signglyph { font-size: 30px; }
.cms-wheel.is-compact .cms-w-housenum { font-size: 19px; }
.cms-wheel.is-compact .cms-w-axislabel { font-size: 17px; }
.cms-wheel .cms-w-point { cursor: default; outline: none; }
.cms-wheel.cms-w-focus .cms-w-point, .cms-wheel.cms-w-focus .cms-w-asp { opacity: .18; transition: opacity .15s; }
.cms-wheel.cms-w-focus .cms-w-point.is-on, .cms-wheel.cms-w-focus .cms-w-asp.is-on { opacity: 1; }

/* Mobiel */
@media (max-width: 960px) {
  .cms-horo .cms-layout, .cms-horo .cms-reading { grid-template-columns: minmax(0, 1fr); }
  .cms-horo .cms-wheel-wrap { position: static; }
}
@media (max-width: 600px) {
  .cms-horo .cms-form-grid { grid-template-columns: minmax(0, 1fr); }
  .cms-horo .cms-balance, .cms-horo .cms-reading { grid-template-columns: minmax(0, 1fr); }
  .cms-horo .cms-wheel-wrap { padding: 4px; }
  .cms-horo .cms-table th, .cms-horo .cms-table td { padding: 7px 8px; }
  .cms-horo .cms-big3 { gap: 6px; }
  .cms-horo .cms-big3 div { padding: 10px 4px; }
  .cms-horo .cms-big3 span { font-size: .64rem; letter-spacing: .04em; }
  .cms-horo .cms-big3 strong { font-size: 1.4rem; }
  .cms-horo .cms-big3 em { font-size: .88rem; overflow-wrap: anywhere; }
  .cms-horo .cms-reading-item { padding: 18px; }
  .cms-horo .cms-tab { padding: 12px 10px; gap: 8px; font-size: .9rem; flex-direction: column; text-align: center; }
  .cms-horo .cms-tab small { display: none; }
}

/* Afdrukken / opslaan als PDF */
@media print {
  .cms-horo .cms-no-print, .cms-horo .cms-tabs, .cms-horo .cms-toggles { display: none !important; }
  .cms-horo .cms-layout { grid-template-columns: minmax(0, 1fr); }
  .cms-horo .cms-wheel-wrap { box-shadow: none; position: static; max-width: 16cm; margin: 0 auto; break-after: page; }
  .cms-horo .cms-table-wrap, .cms-horo .cms-big3 div { box-shadow: none; border: 1px solid var(--cms-lijn); }
  .cms-horo .cms-table-wrap { overflow: visible; }
  .cms-horo tr, .cms-horo .cms-big3, .cms-horo .cms-reading-item { break-inside: avoid; }
  .cms-horo .cms-reading-item { box-shadow: none; border: 1px solid var(--cms-lijn); }
  .cms-horo .cms-expert-switch, .cms-horo .cms-premium { display: none; }
  /* Op de rapportpagina alleen het rapport afdrukken, niet de koptekst of het menu van de website. */
  body.cms-report-page * { visibility: hidden; }
  body.cms-report-page .cms-report, body.cms-report-page .cms-report * { visibility: visible; }
  body.cms-report-page .cms-report { position: absolute; left: 0; top: 0; width: 100%; max-width: none; }
  .cms-horo .cms-report-section h2 { break-after: avoid; }
  .cms-horo .cms-report-section h3, .cms-horo .cms-question { break-inside: avoid; break-after: avoid; }
  .cms-horo .cms-panel[hidden] { display: none !important; }
  .cms-horo { font-size: 10.5pt; }
}