/* Rekentool (prijsindicatie) van Amrita's Catering. Alles staat onder .rk zodat het de rest van de site niet raakt. */
.rk-section { position: relative; background: var(--cream, #faf6ee); padding: clamp(4rem, 9vw, 8rem) clamp(1.2rem, 5vw, 3rem); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; }
.wp-site-blocks { overflow-x: clip; }
.rk { max-width: 1180px; margin: 0 auto; color: var(--ink, #1d221f); }
.rk *, .rk *::before, .rk *::after { box-sizing: border-box; }
.rk-head { max-width: 720px; margin: 0 auto 2.6rem; text-align: center; }
.rk-head p.rk-lead { color: var(--muted, #5d655f); margin: 0; }
.rk-head p.rk-lead2 { margin-top: 1rem; font-size: .96rem; }

.rk-layout { display: grid; grid-template-columns: 1fr 390px; gap: 2rem; align-items: start; }
.rk-card { background: #fff; border: 1px solid rgba(200,162,81,.35); border-radius: var(--radius, 16px); padding: 1.6rem; margin-bottom: 1.2rem; }
.rk .rk-h { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; line-height: 1.2; color: var(--green, #0e3b2c); margin: 0 0 1rem; display: flex; gap: .7rem; align-items: center; }
.rk-num { width: 1.9rem; height: 1.9rem; flex: none; border-radius: 50%; background: var(--green, #0e3b2c); color: var(--gold, #c8a251); font: 600 .95rem/1 var(--sans); display: grid; place-items: center; }
.rk-help { color: var(--muted, #5d655f); font-size: .92rem; margin: .7rem 0 0; }
.rk-lead-in { color: var(--muted, #5d655f); font-size: .95rem; margin: 0 0 1rem; }

.rk-opts { display: grid; gap: .7rem; grid-template-columns: minmax(0, 1fr); }
.rk-opts.rk-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rk-opt { display: block; cursor: pointer; position: relative; min-width: 0; }
.rk-opt input { position: absolute; opacity: 0; pointer-events: none; }
.rk-opt-body { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1.5px solid #e5dfd0; border-radius: 12px; padding: .85rem 1.05rem; transition: border-color .2s, background .2s, box-shadow .2s; }
.rk-opt-body > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.rk-opt-body strong { display: block; font-weight: 600; line-height: 1.35; }
.rk-opt-body small { color: var(--muted, #5d655f); display: block; line-height: 1.4; }
.rk-price { font-family: var(--serif); font-size: 1.1rem; color: var(--green, #0e3b2c); white-space: nowrap; text-align: right; }
.rk-price small { font-family: var(--sans); font-size: .74rem; display: inline; }
.rk-price.rk-soft { font-family: var(--sans); font-size: .8rem; color: var(--muted, #5d655f); white-space: normal; max-width: 7rem; }
.rk-opt:hover .rk-opt-body { border-color: var(--gold, #c8a251); }
.rk-opt input:checked + .rk-opt-body { border-color: var(--gold, #c8a251); background: #fbf5e4; box-shadow: 0 0 0 3px rgba(200,162,81,.2); }
.rk-opt input:focus-visible + .rk-opt-body { outline: 2px solid var(--green, #0e3b2c); outline-offset: 2px; }
ul.rk-incl { margin: .45rem 0 0; padding-left: 1.1rem; color: var(--muted, #5d655f); font-size: .92rem; line-height: 1.5; }

.rk-stepper { display: inline-flex; align-items: center; border: 1.5px solid #e5dfd0; border-radius: 999px; overflow: hidden; }
.rk-stepper button { width: 3rem; height: 3rem; border: 0; background: #f6f1e4; font-size: 1.4rem; cursor: pointer; color: var(--green, #0e3b2c); }
.rk-stepper button:hover { background: var(--gold-soft, #e3c983); }
.rk-stepper input { width: 5.5rem; text-align: center; border: 0; font: inherit; font-size: 1.25rem; font-family: var(--serif); color: var(--green, #0e3b2c); background: #fff; -moz-appearance: textfield; }
.rk-stepper input::-webkit-outer-spin-button, .rk-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rk-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
.rk-chips button { border: 1px solid #e5dfd0; background: #fff; border-radius: 999px; padding: .35rem .9rem; cursor: pointer; font: inherit; font-size: .88rem; color: var(--ink, #1d221f); }
.rk-chips button:hover { border-color: var(--gold, #c8a251); }
.rk-service { margin-top: 1.1rem; background: #f6f1e4; border-radius: 12px; padding: .9rem 1.1rem; font-size: .95rem; }
.rk-service strong { display: block; color: var(--green, #0e3b2c); margin-bottom: .15rem; }
.rk-service p { margin: 0; color: var(--muted, #5d655f); }

.rk-group { border: 1.5px solid #e5dfd0; border-radius: 12px; margin-bottom: .7rem; overflow: hidden; background: #fff; }
.rk-group summary { cursor: pointer; list-style: none; padding: .85rem 1.05rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; color: var(--green, #0e3b2c); }
.rk-group summary::-webkit-details-marker { display: none; }
.rk-group summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--gold, #c8a251); margin-left: .6rem; }
.rk-group[open] summary::after { content: "\2212"; }
.rk-group summary > span:first-child { flex: 1; }
.rk-count { background: var(--gold, #c8a251); color: var(--green-deep, #082419); border-radius: 999px; font-size: .78rem; min-width: 1.5rem; padding: .1rem .5rem; text-align: center; }
.rk-count:empty { display: none; }
.rk-group .rk-opts { padding: 0 .8rem .8rem; }

.rk-own { background: #fffdf6; border: 2px dashed var(--gold, #c8a251); border-radius: var(--radius, 16px); padding: 1.5rem; margin-bottom: 1.2rem; }
.rk .rk-own h3 { font-family: var(--serif); font-weight: 500; color: var(--green, #0e3b2c); font-size: 1.25rem; margin: 0 0 .4rem; }
.rk-own > p { margin: 0 0 1rem; color: var(--muted, #5d655f); }

.rk label.rk-label { display: block; font-size: .88rem; font-weight: 600; color: var(--green, #0e3b2c); margin-bottom: .3rem; }
.rk input[type=text], .rk input[type=date], .rk input[type=number].rk-plain, .rk select, .rk textarea { width: 100%; padding: .7rem .9rem; border: 1.5px solid #e5dfd0; border-radius: 12px; font: inherit; background: #fff; color: var(--ink, #1d221f); }
.rk textarea { min-height: 6rem; resize: vertical; }
.rk input[type=text]:focus, .rk input[type=date]:focus, .rk input[type=number].rk-plain:focus, .rk select:focus, .rk textarea:focus { outline: 2px solid var(--green, #0e3b2c); outline-offset: 1px; }
.rk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.rk-form .rk-full { grid-column: 1 / -1; }

.rk-info ul { margin: 0; padding-left: 1.2rem; color: var(--muted, #5d655f); font-size: .95rem; }
.rk-info li { margin-bottom: .55rem; }
.rk-info li:last-child { margin-bottom: 0; }

.rk-summary { position: sticky; top: 90px; background: var(--green-deep, #082419); color: #fff; border-radius: var(--radius, 16px); padding: 1.6rem; }
.rk .rk-summary h3 { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin: 0 0 1rem; color: #fff; }
.rk-lines { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .95rem; }
.rk-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.rk-lines li span:first-child { color: rgba(255,255,255,.82); }
.rk-lines li span:last-child { text-align: right; white-space: nowrap; }
.rk-lines li.rk-ask span:last-child { color: var(--gold-soft, #e3c983); font-size: .85rem; white-space: normal; }
.rk-lines li.rk-promo span:first-child, .rk-lines li.rk-promo span:last-child { color: var(--gold-soft, #e3c983); font-weight: 600; }
.rk-promohint { background: rgba(200,162,81,.18); color: var(--gold-soft, #e3c983); border-radius: 10px; padding: .6rem .8rem; font-size: .88rem; margin: .9rem 0 0; line-height: 1.45; }
.rk-promohint:empty, .rk-promonote:empty { display: none; }
.rk-promonote { background: #fbf5e4; border: 1px dashed var(--gold, #c8a251); border-radius: 12px; padding: .75rem .95rem; font-size: .92rem; color: var(--green, #0e3b2c); margin: .9rem 0 0; line-height: 1.5; }
.rk-datelabel { margin-top: 1.1rem; }
.rk-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: .8rem; }
.rk-total .rk-tl { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft, #e3c983); }
.rk-total .rk-ta { font-family: var(--serif); font-size: 2.4rem; line-height: 1; }
.rk-sub { text-align: right; color: rgba(255,255,255,.72); font-size: .88rem; margin: .3rem 0 0; }
.rk-disclaimer { font-size: .82rem; color: rgba(255,255,255,.68); margin: 1rem 0; line-height: 1.55; }
.rk-btn { display: block; width: 100%; text-align: center; padding: .95rem 1.2rem; border-radius: 999px; font-weight: 600; font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 1.5px solid transparent; margin-top: .6rem; cursor: pointer; font-family: var(--sans); line-height: 1.3; }
.rk-btn.gold { background: var(--gold, #c8a251); color: var(--green-deep, #082419); }
.rk-btn.gold:hover { background: var(--gold-soft, #e3c983); }
.rk-btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.rk-btn.ghost:hover { border-color: var(--gold, #c8a251); color: var(--gold, #c8a251); }
.rk-btn.dark { background: var(--green, #0e3b2c); color: #fff; }
.rk-btn.dark:hover { background: var(--green-2, #14523c); }
.rk-btn.outline { background: transparent; color: var(--green, #0e3b2c); border-color: var(--green, #0e3b2c); }
.rk-btn.outline:hover { background: var(--green, #0e3b2c); color: #fff; }
.rk-reply { margin: 1rem 0 0; font-size: .92rem; font-weight: 600; }
.rk-summary .rk-reply { color: var(--gold-soft, #e3c983); }
.rk-actions { max-width: 420px; margin-top: 1.2rem; }
.rk-actions .rk-btn { margin-top: .6rem; }
.rk-own .rk-reply, .rk-biz .rk-reply { color: var(--green, #0e3b2c); }

.rk[data-type="biz"] #rk-calc, .rk[data-type="biz"] #rk-summary, .rk[data-type="biz"] .rk-bar { display: none; }
.rk[data-type="part"] #rk-biz { display: none; }
.rk[data-type="biz"] .rk-layout { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }

.rk-bar { display: none; }
@media (max-width: 900px) {
  .rk-layout { grid-template-columns: 1fr; }
  .rk-summary { position: static; }
  .rk-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--green-deep, #082419); color: #fff; padding: .7rem 1rem; justify-content: space-between; align-items: center; gap: 1rem; box-shadow: 0 -10px 30px -12px rgba(0,0,0,.5); transform: translateY(110%); transition: transform .25s ease; display: flex; }
  .rk-bar.rk-bar-on { transform: none; }
  .rk-bar .rk-ba { font-family: var(--serif); font-size: 1.5rem; }
  .rk-bar small { display: block; color: var(--gold-soft, #e3c983); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
  .rk-bar a { background: var(--gold, #c8a251); color: var(--green-deep, #082419); text-decoration: none; font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; padding: .75rem 1.2rem; border-radius: 999px; }
}
@media (max-width: 560px) {
  .rk-opts.rk-two, .rk-form { grid-template-columns: minmax(0, 1fr); }
  .rk-card { padding: 1.2rem; }
  .rk-price.rk-soft { max-width: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) { .rk-bar { transition: none; } }
