:root {
    --dop-teal-900: #0b4f4c;
    --dop-teal-700: #0f766e;
    --dop-teal-600: #14867d;
    --dop-teal-100: #ccfbf1;
    --dop-aqua-50: #f0fdfa;
    --dop-amber-400: #ffc93c;
    --dop-amber-500: #f5b700;
    --dop-amber-700: #7a5300;
    --dop-sold-bg: #eae5da;
    --dop-sold-text: #9a9184;
    --dop-red-500: #e0473a;
    --dop-green-600: #1f9d55;
    --dop-ink: #16302e;
}

/* BUGFIX (v0.9.11): verberg de browser-eigen spinner-pijltjes op elk
   number-input op pagina's waar dit bestand laadt (productpagina, winkel-
   wagen, afrekenen) - aantallen/prijzen (o.a. de zoek-/random-/van-tot-
   velden hieronder bij .dop-grid-controls) kunnen daardoor alleen nog
   bewust getypt worden. Zie ook assets/js/frontend-grid.js voor de bijbehorende
   fix die voorkomt dat scrollen over zo'n veld de waarde verandert. */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}

.dop-app {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--dop-ink);
    background: var(--dop-aqua-50);
    border: 1px solid var(--dop-teal-100);
    border-radius: 18px;
    padding: 24px clamp(14px, 4vw, 32px) 30px;
}

/* Tabbladen: alle drie ALTIJD zichtbaar, geen hover-afhankelijkheid */
.dop-tabs { display: flex; gap: 6px; background: #fff; border: 1px solid var(--dop-teal-100);
    border-radius: 999px; padding: 5px; width: fit-content; margin-bottom: 18px; }
.dop-tab { border: none; background: transparent; padding: 8px 18px; border-radius: 999px;
    font-weight: 700; color: var(--dop-teal-700); cursor: pointer; font-size: 0.95rem; }
.dop-tab.active { background: var(--dop-teal-700); color: #fff; }
.dop-panel[hidden] { display: none; }

.dop-grid-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.dop-grid-controls input[type=number] { width: 90px; border: 2px solid var(--dop-teal-100); border-radius: 8px; padding: 6px 10px; }
.dop-panel[data-panel="range"] label { display: block; margin-bottom: 10px; font-weight: 600; }
.dop-panel[data-panel="range"] label input { display: block; margin-top: 4px; }

/* Nummers: expliciete tekstkleur + rand, ALTIJD zichtbaar, niet pas bij hover */
.dop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 7px; margin: 12px 0; }
.dop-chip {
    aspect-ratio: 1; border-radius: 10px; border: 2px solid var(--dop-teal-600);
    background: #fff; color: var(--dop-teal-900); font-weight: 700; font-size: 0.9rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform .1s ease;
}
.dop-chip:hover:not(.dop-sold) { transform: translateY(-2px); }
.dop-chip.dop-selected { background: var(--dop-amber-400); border-color: var(--dop-amber-500); color: var(--dop-amber-700); }
.dop-chip.dop-sold { background: var(--dop-sold-bg); border-color: var(--dop-sold-bg); color: var(--dop-sold-text); cursor: not-allowed; }
.dop-chip.dop-reserved { background: #fde68a; border-color: #f5b700; color: #7a5300; cursor: not-allowed; opacity: 0.85; }
.dop-chip.dop-missing { background: #fff; border-color: var(--dop-red-500); color: var(--dop-red-500); cursor: not-allowed; position: relative; }
.dop-chip.dop-missing::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(to top right, transparent calc(50% - 1.5px), var(--dop-red-500) calc(50% - 1.5px), var(--dop-red-500) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(to top left, transparent calc(50% - 1.5px), var(--dop-red-500) calc(50% - 1.5px), var(--dop-red-500) calc(50% + 1.5px), transparent calc(50% + 1.5px));
    border-radius: 50%; }
.dop-chip.dop-special { outline: 3px solid var(--dop-red-500); outline-offset: 2px; }

.dop-selection { margin-top: 16px; border-top: 1px solid var(--dop-teal-100); padding-top: 12px; }
.dop-selection h4 { color: var(--dop-teal-900); font-size: 1rem; }
.dop-sel-row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--dop-aqua-50); }
.dop-remove-btn {
    background: #fff; color: var(--dop-red-500); border: 2px solid var(--dop-red-500);
    border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 0.82rem; cursor: pointer;
}
.dop-remove-btn:hover { background: var(--dop-red-500); color: #fff; }
.dop-info-icon { color: var(--dop-teal-700); font-weight: 700; font-size: 0.78rem; cursor: pointer; text-decoration: underline dotted; }
.dop-giftpool-explain { background: var(--dop-teal-100); border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; }

#dop-range-result { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#dop-range-result p { flex-basis: 100%; margin: 4px 0; }
#dop-range-result button { flex: 1 1 0; min-width: 180px; }
.dop-targets { display: flex; gap: 14px; margin: 10px 0; font-size: 0.85rem; }
.dop-target { padding: 5px 12px; border: 1px solid var(--dop-teal-100); border-radius: 999px; background: #fff; }

.dop-submit-btn, #dop-confirm-btn {
    background: var(--dop-amber-400); color: var(--dop-amber-700); border: none;
    padding: 12px 26px; border-radius: 999px; font-weight: 800; font-size: 1rem; cursor: pointer;
}
.dop-submit-btn:hover, #dop-confirm-btn:hover { background: var(--dop-amber-500); }
.dop-submit-btn:active, #dop-confirm-btn:active, .dop-tab:active, .dop-chip:active:not(.dop-sold):not(.dop-reserved) { transform: scale(0.96); filter: brightness(0.92); }
#dop-confirm-btn:disabled { opacity: .55; cursor: not-allowed; }

.dop-giftpool-signup input, .dop-giftpool-claim input { display: block; width: 100%; max-width: 320px;
    margin-top: 4px; border: 2px solid var(--dop-teal-100); border-radius: 8px; padding: 8px 10px; }

.dop-cart-qty { font-weight: 700; margin-right: 8px; }
.dop-choose-more { font-size: 0.85rem; }

/* Duidelijk afgebakend vak voor "meer dan één code", op zowel de winkelwagen-
   als de checkout-pagina - was eerst een kaal vinkje zonder opmaak.
   FIX (v0.9.11): op de winkelwagenpagina stonden het invoerveld/de knop niet
   netjes onder elkaar (klant stuurde een screenshot) - oorzaak: dit blok
   rendert via woocommerce_cart_coupon BINNEN WooCommerce's eigen
   <div class="coupon">, waar het thema/woocommerce.css ".input-text" en
   ".button" daar regelmatig als smalle, naast-elkaar-drijvende (float/inline)
   elementen stylen voor de normale "Waardebon"-rij. Omdat niet met zekerheid
   te zeggen is welke regel van welk thema dit precies doet (geen live omgeving
   om tegen te testen), hieronder bewust met !important een eigen, altijd-
   blokvormige layout afgedwongen - de enige plek in dit plugin waar
   !important gebruikt wordt, specifiek om dit onafhankelijk van onbekende
   thema-CSS te maken. Zie ook render_coupon_box() in class-dop-checkout.php:
   het invoerveld heeft daarom ook bewust geen class="input-text" meer. */
.dop-extra-coupons-box { clear: both !important; float: none !important; display: block !important; width: 100% !important; box-sizing: border-box !important; background: #fff; border: 2px solid var(--dop-teal-100); border-radius: 12px; padding: 14px 16px; margin: 14px 0; }
.dop-extra-coupons-box p:first-child { margin-top: 0; margin-bottom: 0; }
.dop-extra-coupons-toggle { font-weight: 700; color: var(--dop-teal-900); cursor: pointer; }
.dop-extra-coupons-fields { clear: both !important; float: none !important; display: block !important; width: 100% !important; box-sizing: border-box !important; margin-top: 10px; }
.dop-extra-coupons-fields label { clear: both !important; float: none !important; display: block !important; width: auto !important; font-weight: 600; margin: 0 0 4px; }
.dop-extra-coupons-fields input[type=text] { clear: both !important; float: none !important; display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: 360px; height: auto !important; border: 2px solid var(--dop-teal-100); border-radius: 8px; padding: 8px 10px; margin: 0 0 8px; }
.dop-extra-coupons-fields .description { clear: both !important; float: none !important; display: block !important; width: auto !important; font-size: 0.85rem; color: #555; margin: 0 0 8px; }
.dop-extra-coupons-fields .button,
.dop-extra-coupons-fields button[type=submit] { clear: both !important; float: none !important; display: inline-block !important; width: auto !important; margin: 4px 0 0 !important; }

/* Best-effort: dwingt de "Gekozen nummers"-regel in de winkelwagen op een eigen regel
   i.p.v. direct achter het label, ongeacht classic- of blok-gebaseerde winkelwagen. */
.woocommerce-cart-form .variation dt,
.woocommerce-cart-form .variation dd,
.wc-block-cart-item dl.wc-block-components-product-metadata dt,
.wc-block-cart-item dl.wc-block-components-product-metadata dd { display: block; margin: 0; }
.wc-block-cart-item dl.wc-block-components-product-metadata dd { margin-bottom: 6px; }

/* FAQ-shortcode ([dop_faq]) - accordion op basis van native <details>/<summary>,
   bewust zonder JavaScript. Categorie-niveau en vraag-niveau krijgen elk een
   eigen uiterlijk zodat het verschil in hiërarchie duidelijk blijft. */
.dop-faq-category { background: #fff; border: 2px solid var(--dop-teal-100); border-radius: 12px; padding: 4px 16px; margin: 0 0 12px; }
.dop-faq-category > summary { font-weight: 700; font-size: 1.1rem; color: var(--dop-teal-900); cursor: pointer; padding: 12px 0; list-style: none; }
.dop-faq-category > summary::-webkit-details-marker { display: none; }
.dop-faq-category > summary::before { content: "▸"; display: inline-block; width: 1.2em; color: var(--dop-amber-500); }
.dop-faq-category[open] > summary::before { content: "▾"; }
.dop-faq-category-body { padding: 0 0 10px; }
.dop-faq-item { border-top: 1px solid var(--dop-teal-100); padding: 8px 0; }
.dop-faq-item summary { font-weight: 600; cursor: pointer; list-style: none; }
.dop-faq-item summary::-webkit-details-marker { display: none; }
.dop-faq-item summary::before { content: "＋"; display: inline-block; width: 1.4em; color: var(--dop-teal-600); }
.dop-faq-item[open] summary::before { content: "－"; }
.dop-faq-item p { margin: 8px 0 4px 1.4em; }
.dop-faq-appendix-heading { margin-top: 28px; }
.dop-faq-appendix { background: var(--dop-aqua-50); border: 1px solid var(--dop-teal-100); border-radius: 10px; padding: 14px 18px; margin: 0 0 16px; }
.dop-faq-appendix h4 { margin-top: 0; color: var(--dop-teal-900); }
.dop-faq-subsection { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--dop-teal-100); }
.dop-faq-subsection h5 { margin: 0 0 6px; }
.dop-faq-back { font-size: 0.85rem; margin-bottom: 0; }

.dop-winners-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
.dop-winners-table th { background: var(--dop-teal-700); color: #fff; text-align: left; padding: 8px 12px; }
.dop-winners-table td { padding: 8px 12px; border-bottom: 1px solid var(--dop-teal-100); }

.dop-flying { position: fixed; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: var(--dop-amber-400); color: var(--dop-amber-700); font-weight: 700; font-size: 0.9rem;
    pointer-events: none; z-index: 9999; }
.dop-flying-gift { background: var(--dop-teal-600); color: #fff; }

.dop-cancelled-notice { background: #fff7ed; border: 1px solid #fdba74; border-radius: 14px; padding: 20px; text-align: center; }
.dop-cancelled-notice h3 { color: #9a3412; margin-top: 0; }

.dop-action-banner { background: #fffbeb; border: 2px solid var(--dop-amber-400); border-radius: 12px; padding: 14px 18px; margin: 0 0 16px; }
.dop-action-banner strong { display: block; color: var(--dop-amber-700); font-size: 1.1em; margin-bottom: 4px; }
.dop-action-banner p { margin: 0; }

.dop-progress-wrap p { font-weight: 700; color: var(--dop-teal-900); margin-bottom: 6px; }
.dop-progress-bar { background: var(--dop-teal-100); border-radius: 999px; height: 14px; overflow: hidden; }
.dop-progress-fill { background: var(--dop-amber-400); height: 100%; border-radius: 999px; transition: width .4s ease; }

.dop-stats-wrap { display: flex; flex-wrap: wrap; gap: 12px; }
.dop-stat-box { background: #fff; border: 1px solid var(--dop-teal-100); border-radius: 12px; padding: 14px 18px; text-align: left; }
.dop-stat-box strong { color: var(--dop-teal-700); font-size: 1.15em; }

.dop-prizes-table { border-collapse: collapse; width: 100%; }
.dop-prizes-table th, .dop-prizes-table td { border: 1px solid var(--dop-teal-100); padding: 8px 12px; text-align: left; }
.dop-prizes-table th { background: var(--dop-aqua-50); }

/* Winacties (v0.9.15) */
.dop-win { max-width: 640px; margin: 1em 0; }
.dop-win-title { margin-top: 0; }
.dop-win input[type=text], .dop-win input[type=email] { display: block; width: 100%; max-width: 360px; }
.dop-win-terms { margin: 1em 0; }
.dop-win-message { font-weight: 600; }

/* Automatisch toewijzen (v0.9.17) */
.dop-auto { max-width: 520px; }
.dop-auto-avail { font-weight: 700; color: var(--dop-teal-900); }
.dop-auto-form input[type=number] { width: 7em; }
.dop-auto-msg { font-weight: 600; min-height: 1.4em; }
.dop-auto-soldout { color: var(--dop-teal-900); }
.dop-auto-numbers { background: var(--dop-teal-100); border-radius: 8px; padding: 4px 16px; margin: 1em 0; }

/* Grid-maximum en overschakelen (v0.9.19) */
.dop-phase-notice { margin: 0 0 1em; padding: .8em 1em; border-left: 5px solid #1d4e9e; background: #e8f1ff; border-radius: 4px; }
.dop-phase-notice p { margin: 0; }
.dop-phase-warn { border-left-color: #f5b700; background: #fff6d6; }
.dop-comp-code { border-left: 5px solid #ffc93c; background: #fffbe6; padding: .8em 1em; margin-bottom: 1em; }