/* KVK Module Test Workbench v5.7.7 / shared layer v3.9.236
   Promotion date layout, single-calendar hardening and KVK low-glare form fill.
   Scope: Coupon, Offer, Banner and Combo Ad across all current/future Trades.
   Business values, save handlers, exact 48-hour window and production data are untouched. */
:root{
  --kvk-promo-control-fill-v39236:#eaf4f6;
  --kvk-promo-control-fill-2-v39236:#edf7f2;
  --kvk-promo-control-line-v39236:#a9c8d3;
  --kvk-promo-control-focus-v39236:#2563eb;
  --kvk-promo-calendar-fill-v39236:#dcecf2;
  --kvk-promo-calendar-fill-2-v39236:#e4f3eb;
}

/* The native datetime input remains available to showPicker(), but can never occupy a visible grid cell. */
html body input.promo-date-picker-v39235,
html body input[data-promo-date-picker-v39235="true"]{
  position:fixed!important;
  left:-10000px!important;
  right:auto!important;
  top:0!important;
  bottom:auto!important;
  width:1px!important;
  min-width:1px!important;
  max-width:1px!important;
  height:1px!important;
  min-height:1px!important;
  max-height:1px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
  z-index:-1!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  box-shadow:none!important;
}
html body input.promo-date-picker-v39235::-webkit-calendar-picker-indicator,
html body input[data-promo-date-picker-v39235="true"]::-webkit-calendar-picker-indicator{
  display:none!important;
  width:0!important;
  height:0!important;
  opacity:0!important;
}

/* One readable text field plus one visible calendar button. */
html body .promo-date-input-row-v39235{
  grid-template-columns:minmax(235px,1fr) 44px!important;
  gap:8px!important;
}
html body .promo-date-display-v39235{
  min-width:235px!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}
html body .promo-date-picker-button-v39235{
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:42px!important;
  margin:0!important;
  border:1px solid var(--kvk-promo-control-line-v39236)!important;
  background:linear-gradient(145deg,var(--kvk-promo-calendar-fill-v39236),var(--kvk-promo-calendar-fill-2-v39236))!important;
  color:#173b5f!important;
  box-shadow:none!important;
}
html body .promo-date-picker-button-v39235:hover{
  border-color:#79a9bd!important;
  background:linear-gradient(145deg,#d4e8ef,#dcefe5)!important;
}

/* Replace pure-white Promotion controls with the existing KVK blue-green low-glare family. */
html body :is(#couponForm,#offerForm,#bannerForm,#comboAdFormV39225)
  :is(input:not([type="hidden"]),select,textarea){
  background-color:var(--kvk-promo-control-fill-v39236)!important;
  background-image:linear-gradient(145deg,var(--kvk-promo-control-fill-v39236),var(--kvk-promo-control-fill-2-v39236))!important;
  border-color:var(--kvk-promo-control-line-v39236)!important;
  color:#17324a!important;
}
html body :is(#couponForm,#offerForm,#bannerForm,#comboAdFormV39225)
  :is(input:not([type="hidden"]),select,textarea):focus{
  border-color:var(--kvk-promo-control-focus-v39236)!important;
  box-shadow:0 0 0 2px rgba(37,99,235,.13)!important;
  outline:none!important;
}
html body :is(#couponForm,#offerForm,#bannerForm,#comboAdFormV39225)
  :is(input,textarea)::placeholder{color:#667f8d!important;opacity:1!important}

/* Coupon uses a deliberate four-column grid so date text never gets a narrow legacy column. */
html body #couponForm.promo-form-layout-v39236{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:start!important;
}
html body #couponForm .promo-code-field-v39236,
html body #couponForm .promo-title-field-v39236{grid-column:span 2!important}
html body #couponForm .promo-discount-type-field-v39236,
html body #couponForm .promo-discount-value-field-v39236{grid-column:span 1!important}
html body #couponForm .promo-cart-field-v39236{grid-column:span 2!important}
html body #couponForm .coupon-audience-v39194{grid-column:span 2!important}
html body #couponForm .coupon-target-v39194{grid-column:span 2!important}
html body #couponForm [data-promo-date-control-v39235="startAt"]{grid-column:1 / span 2!important}
html body #couponForm [data-promo-date-control-v39235="endAt"]{grid-column:3 / span 2!important}
html body #couponForm .full{grid-column:1 / -1!important}

/* Other Promotion forms retain their two-column working while guaranteeing complete date text. */
html body :is(#offerForm,#bannerForm,#comboAdFormV39225) .promo-date-field-v39235{
  min-width:280px!important;
}

@media(max-width:980px){
  html body #couponForm.promo-form-layout-v39236{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body #couponForm :is(.promo-code-field-v39236,.promo-title-field-v39236,.promo-discount-type-field-v39236,.promo-discount-value-field-v39236,.promo-cart-field-v39236,.coupon-audience-v39194,.coupon-target-v39194,[data-promo-date-control-v39235="startAt"],[data-promo-date-control-v39235="endAt"]){grid-column:span 1!important}
  html body #couponForm .full{grid-column:1 / -1!important}
}
@media(max-width:680px){
  html body #couponForm.promo-form-layout-v39236,
  html body :is(#offerForm,#bannerForm,#comboAdFormV39225){grid-template-columns:minmax(0,1fr)!important}
  html body #couponForm :is(.promo-code-field-v39236,.promo-title-field-v39236,.promo-discount-type-field-v39236,.promo-discount-value-field-v39236,.promo-cart-field-v39236,.coupon-audience-v39194,.coupon-target-v39194,[data-promo-date-control-v39235="startAt"],[data-promo-date-control-v39235="endAt"],.full){grid-column:1!important}
  html body .promo-date-input-row-v39235{grid-template-columns:minmax(0,1fr) 44px!important}
  html body .promo-date-display-v39235{min-width:0!important;font-size:13px!important}
  html body :is(#offerForm,#bannerForm,#comboAdFormV39225) .promo-date-field-v39235{min-width:0!important}
}

/* Validation remains visually stronger than the theme fill. */
html body [data-promo-date-valid-v39235="false"] .promo-date-display-v39235{
  border-color:#dc2626!important;
  box-shadow:0 0 0 2px rgba(220,38,38,.13)!important;
}

@media print{
  html body :is(#couponForm,#offerForm,#bannerForm,#comboAdFormV39225)
    :is(input:not([type="hidden"]),select,textarea){background:#fff!important;background-image:none!important;color:#000!important}
  html body .promo-date-picker-button-v39235{display:none!important}
}