/* Berekenknop en indicatieve prijs in het Gravity Forms-formulier. Erft zoveel mogelijk van het thema. */
.tomodoro-calc { margin-top: 1.5em; }
.tomodoro-calc__actions { display: flex; flex-wrap: wrap; gap: .75em; align-items: stretch; }
.tomodoro-calc .tomodoro-calc__button { flex: 1 1 12em; margin: 0; cursor: pointer; }
.tomodoro-calc .tomodoro-calc__submit { flex: 1 1 12em; display: flex; }
.tomodoro-calc .tomodoro-calc__submit > * { flex: 1; width: 100%; margin: 0; }
.tomodoro-calc .tomodoro-calc__button { background: #1d2327; color: #fff; border: 1px solid #1d2327; }
.tomodoro-calc .tomodoro-calc__button:hover { filter: brightness(.92); }
.tomodoro-calc .tomodoro-calc__button[disabled] { opacity: .6; cursor: wait; }
.tomodoro-calc__result { margin-top: 1.25em; }
.tomodoro-calc__message { margin: 0; }
.tomodoro-calc__result.is-error .tomodoro-calc__message { color: #b32d2e; }
/* Adressuggesties: hangen aan <body>, dus "body" voor de selectors om de stijl van het thema voor div/span te overschrijven */
body .tomodoro-suggest { position: fixed; z-index: 2147483647; box-sizing: border-box; margin: 0; padding: 4px 0 0; background: #fff !important; color: #1c1c1c; border: 1px solid #c5a572 !important; border-radius: 2px; box-shadow: 0 14px 34px -10px rgba(70, 52, 20, .28), 0 2px 6px rgba(70, 52, 20, .08); overflow: hidden; font-family: Poppins, sans-serif; font-size: 15px; line-height: 1.35; text-align: left; transform-origin: top center; animation: tomodoro-suggest-in .18s cubic-bezier(.22, .61, .36, 1) both; }
body .tomodoro-suggest[hidden] { display: none !important; }
body .tomodoro-suggest__item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "pin main" "pin sec"; column-gap: 12px; align-items: center; align-content: center; min-height: 52px; box-sizing: border-box; margin: 0 4px; padding: 8px 12px 8px 10px; border-radius: 2px; cursor: pointer; transition: background-color .12s ease; }
body .tomodoro-suggest__item + .tomodoro-suggest__item { margin-top: 1px; }
body .tomodoro-suggest__item + .tomodoro-suggest__item::after { content: ""; position: absolute; top: -1px; left: 54px; right: 12px; height: 1px; background: #f0eadf; }
body .tomodoro-suggest__item::before { content: ""; grid-area: pin; width: 32px; height: 32px; border-radius: 50%; background: #f7f2e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a572' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11.5a6.5 6.5 0 0 1 13 0C18.5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E") center / 18px 18px no-repeat; transition: background-color .12s ease; }
body .tomodoro-suggest__item.is-active { background: #faf6ee; }
body .tomodoro-suggest__item.is-active::before { background-color: #c5a572; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11.5a6.5 6.5 0 0 1 13 0C18.5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E"); }
body .tomodoro-suggest__item.is-active + .tomodoro-suggest__item::after,
body .tomodoro-suggest__item + .tomodoro-suggest__item.is-active::after { background: transparent; }
body .tomodoro-suggest__main { grid-area: main; display: block; overflow: hidden; color: #1c1c1c; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
body .tomodoro-suggest__secondary { grid-area: sec; display: block; overflow: hidden; margin-top: 1px; color: #7a7a7a; font-size: 13px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
body .tomodoro-suggest__credit { display: block; margin: 4px 0 0; padding: 6px 14px; background: #fbf9f4; border-top: 1px solid #f0eadf; color: #6f6a60; font-size: 11px; line-height: 1.4; letter-spacing: .02em; text-align: right; }
@keyframes tomodoro-suggest-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.gform_wrapper .tomodoro-addr { position: relative !important; display: block !important; }
.gform_wrapper .tomodoro-addr > textarea { display: block; width: 100%; box-sizing: border-box; padding-left: 2.75em !important; padding-right: 2.75em !important; resize: none !important; overflow: hidden !important; }
.gform_wrapper .tomodoro-addr__icon { position: absolute !important; left: .85em; top: 0; height: var(--tomo-h, 48px); display: flex; align-items: center; pointer-events: none; color: #9a9a9a; transition: color .15s ease; }
.gform_wrapper .tomodoro-addr:focus-within .tomodoro-addr__icon { color: #c5a572; }
.gform_wrapper .tomodoro-addr__clear { position: absolute !important; right: .65em; top: 0; height: var(--tomo-h, 48px); width: auto; min-height: 0; margin: 0; padding: 0 .25em; display: flex; align-items: center; appearance: none; background: none !important; border: 0 !important; box-shadow: none !important; color: inherit; opacity: .35 !important; cursor: pointer; transition: opacity .15s ease; }
.gform_wrapper .tomodoro-addr__clear:hover,
.gform_wrapper .tomodoro-addr__clear:focus-visible { opacity: .8 !important; }
.gform_wrapper .tomodoro-addr__clear[hidden] { display: none; }
.tomodoro-time__orig { display: none !important; }
.gform_wrapper .tomodoro-time > input { display: block; width: 100%; box-sizing: border-box; }
body .tomodoro-suggest--time { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0; scrollbar-width: thin; scrollbar-color: #d9c9a8 transparent; }
body .tomodoro-suggest--time .tomodoro-suggest__item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; min-height: 40px; padding: 6px 14px; }
body .tomodoro-suggest--time .tomodoro-suggest__item::before { display: none !important; }
body .tomodoro-suggest--time .tomodoro-suggest__item + .tomodoro-suggest__item::after { left: 14px; }
body .tomodoro-suggest--time .tomodoro-suggest__main { font-variant-numeric: tabular-nums; font-weight: 500; }
body .tomodoro-suggest--time .tomodoro-suggest__item.is-selected .tomodoro-suggest__main { color: #9c7a3c; font-weight: 700; }
/* Formulier in een Elementor-popup: de popup zelf blijft binnen het scherm (rekening houdend met de adminbalk) en scrolt intern.
   Het blokkeren van de pagina erachter staat in de popup-instellingen van Elementor ("Disable Page Scrolling"). */
.elementor-popup-modal:has(.gform_wrapper) .dialog-message { max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)) !important; max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)) !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.elementor-popup-modal .gform_wrapper { padding-bottom: 12px !important; }
.tomodoro-calc__contact { display: inline-block; margin-top: .75em; text-decoration: none; text-align: center; cursor: pointer; }

/* De klasse staat voor de selectors om de stijl van het thema voor koppen en tabellen te overschrijven */
.tomodoro-calc .tomodoro-calc__box { border: 1px solid rgba(0, 0, 0, .15); border-radius: 6px; padding: 1.25em 1.5em; background: transparent; }
.tomodoro-calc .tomodoro-calc__title { margin: 0 0 .75em; padding: 0; font-family: inherit; font-size: 1.1em; font-weight: 600; letter-spacing: normal; text-transform: none; line-height: 1.3; }
.tomodoro-calc .tomodoro-calc__table { width: 100%; margin: 0; border: 0; border-collapse: collapse; background: transparent; }
.tomodoro-calc .tomodoro-calc__table tr,
.tomodoro-calc .tomodoro-calc__table td { background: transparent; border: 0; }
.tomodoro-calc .tomodoro-calc__table td { padding: .6em 0; vertical-align: top; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.tomodoro-calc .tomodoro-calc__amount { text-align: right; white-space: nowrap; padding-left: 1em; }
.tomodoro-calc__name { display: block; font-weight: 600; }
.tomodoro-calc__sub { display: block; font-size: .85em; opacity: .75; }
.tomodoro-calc .tomodoro-calc__table tfoot td { padding: .45em 0; }
.tomodoro-calc .tomodoro-calc__table tfoot tr:first-child td { border-top: 2px solid rgba(0, 0, 0, .2); }
.tomodoro-calc .tomodoro-calc__table tfoot td { border-bottom: 0; }
.tomodoro-calc .tomodoro-calc__total td { font-weight: 700; font-size: 1.1em; padding-top: .7em; }
.tomodoro-calc__notes { margin: .75em 0 0 1.2em; padding: 0; font-size: .9em; }
.tomodoro-calc__attribution { margin: .75em 0 0; font-size: .8em; opacity: .7; }
.tomodoro-calc__disclaimer { margin: .75em 0 0; font-size: .85em; opacity: .8; line-height: 1.5; }

/* De verzendknop verschijnt pas na een berekening (enkel als het script draait) */
.tomodoro-calc.is-js:not(.is-ready) .tomodoro-calc__submit { display: none; }

.tomodoro-next-filled:hover { filter: brightness(.92); }

/* Wachtscherm met de pasta-animatie */
.tomodoro-calc .tomodoro-calc__loading { display: flex; flex-direction: column; align-items: center; padding: 1em 0 .5em; text-align: center; }
.tomodoro-calc .tomodoro-calc__loading svg { width: 190px; max-width: 70%; height: auto; overflow: visible; }
.tomodoro-calc .tomodoro-calc__loading .tomodoro-calc__message { margin-top: .5em; opacity: .8; }

/* Zachte overgangen tussen de stappen */
@keyframes tomodoro-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tomodoro-row { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tomodoro-fade { from { opacity: 0; } to { opacity: 1; } }

.gform_wrapper.tomodoro-enter .gform_body,
.gform_wrapper.tomodoro-enter .gform_page_fields { animation: tomodoro-in .45s cubic-bezier(.22, .61, .36, 1) both; }
.gform_wrapper.tomodoro-enter .gform_page_footer,
.gform_wrapper.tomodoro-enter .gform_footer { animation: tomodoro-in .45s cubic-bezier(.22, .61, .36, 1) .08s both; }

form.tomodoro-leaving .gform_body,
form.tomodoro-leaving .gform_page_fields { opacity: .35; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease; }
form.tomodoro-leaving { pointer-events: none; }

/* De prijs: eerst het kader, dan de regels na elkaar, dan de totalen */
.tomodoro-calc .tomodoro-calc__box { animation: tomodoro-fade .4s ease both; }
.tomodoro-calc .tomodoro-calc__table tbody tr { animation: tomodoro-row .45s cubic-bezier(.22, .61, .36, 1) both; }
.tomodoro-calc .tomodoro-calc__table tbody tr:nth-child(1) { animation-delay: .10s; }
.tomodoro-calc .tomodoro-calc__table tbody tr:nth-child(2) { animation-delay: .18s; }
.tomodoro-calc .tomodoro-calc__table tbody tr:nth-child(3) { animation-delay: .26s; }
.tomodoro-calc .tomodoro-calc__table tbody tr:nth-child(4) { animation-delay: .34s; }
.tomodoro-calc .tomodoro-calc__table tbody tr:nth-child(5) { animation-delay: .42s; }
.tomodoro-calc .tomodoro-calc__table tbody tr:nth-child(n+6) { animation-delay: .50s; }
.tomodoro-calc .tomodoro-calc__table tfoot tr { animation: tomodoro-row .45s ease .55s both; }
.tomodoro-calc .tomodoro-calc__notes,
.tomodoro-calc .tomodoro-calc__attribution,
.tomodoro-calc .tomodoro-calc__disclaimer { animation: tomodoro-fade .5s ease .7s both; }
.tomodoro-calc .tomodoro-calc__loading { animation: tomodoro-fade .3s ease both; }

/* De verzendknop verschijnt zacht na de berekening */
.tomodoro-calc.is-js.is-ready .tomodoro-calc__submit { animation: tomodoro-fade .4s ease .2s both; }

@media (prefers-reduced-motion: reduce) {
    .gform_wrapper.tomodoro-enter .gform_body,
    .gform_wrapper.tomodoro-enter .gform_page_fields,
    .gform_wrapper.tomodoro-enter .gform_page_footer,
    .gform_wrapper.tomodoro-enter .gform_footer,
    .tomodoro-calc .tomodoro-calc__box,
    .tomodoro-calc .tomodoro-calc__table tbody tr,
    .tomodoro-calc .tomodoro-calc__table tfoot tr,
    .tomodoro-calc .tomodoro-calc__notes,
    .tomodoro-calc .tomodoro-calc__attribution,
    .tomodoro-calc .tomodoro-calc__disclaimer,
    .tomodoro-calc .tomodoro-calc__loading,
    .tomodoro-calc.is-js.is-ready .tomodoro-calc__submit,
    body .tomodoro-suggest { animation: none; }
    body .tomodoro-suggest__item,
    body .tomodoro-suggest__item::before { transition: none; }
    form.tomodoro-leaving .gform_body,
    form.tomodoro-leaving .gform_page_fields { transition: none; transform: none; }
}

/* Bij het verzenden: een scherm over het formulier met de pasta-animatie, zodat de klant weet dat het loopt */
.gform_wrapper.tomodoro-sending-host { position: relative; }
.tomodoro-sending { position: absolute; inset: 0; min-height: 280px; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; padding: 1.5em; text-align: center; background: rgba(255, 255, 255, .94); animation: tomodoro-fade .3s ease both; }
.tomodoro-sending svg { width: 190px; max-width: 60%; height: auto; overflow: visible; }
.tomodoro-sending__text { margin: 0; font-size: 1.05em; }