.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
/**
 * HappyDivi VB module-picker icon "chip" mechanism — REUSABLE ACROSS PLUGINS.
 *
 * Targets Divi's own "Add Module" picker UI (app-window chrome), not the
 * rendered form/module output.
 *
 * IMPORTANT — scoping (this was a real bug in an earlier version of this
 * file): every rule below is scoped to `[value^="PREFIX"]`, matching ONLY
 * button elements whose `value` attribute starts with this plugin's own
 * module-name prefix. An earlier version used bare, unscoped selectors
 * (`.et-vb-module-picker-option svg { fill: ... !important }`) — with
 * `!important` that applied to and overrode the color/sizing of EVERY OTHER
 * module in the picker too (Divi's own built-in modules, any other
 * third-party plugin's modules), not just ours. Never remove the
 * `[value^="..."]` scoping from these rules.
 *
 * Config point — the ONLY thing that changes when copying this file into a
 * different HappyDivi plugin: the prefix string below. Everything else
 * (colors, per-module details) is supplied separately via CSS custom
 * properties in the per-module block at the bottom of this file, so a NEW
 * module WITHIN the same plugin (same prefix) never requires touching this
 * file again — only copying the small per-module block.
 *   happydivi-form's own modules are "happydivi-form/form" and
 *   "happydivi-form/form-field" → prefix "happydivi-form/".
 *   The shared "HappyDivi" folder button's value is the bare folder name
 *   ("happydivi", no slash) so it's matched by its own exact-value selector.
 *
 * HOW TO REUSE IN ANOTHER PLUGIN:
 *   1. Copy this entire file into that plugin's own CSS.
 *   2. Change EVERY `[value^="happydivi-form/"]` below to that plugin's own
 *      module-name prefix (e.g. happydivi-gallery's module is
 *      "happydivi/gallery", so its prefix would be "happydivi/gallery" or,
 *      if it registers more than one module later, whatever their shared
 *      prefix is).
 *   3. Import it from that plugin's own VB-loaded stylesheet.
 *   4. Add ONE small block per module/folder, following the template at the
 *      bottom of this file — copy it, change the [value="..."] /
 *      .et-vb-icon--xxx selectors, pick colors. Nothing else.
 *
 * Selector-to-icon-key mapping reminder: Divi derives the icon wrapper's
 * class from the icon map key by replacing "/" with "-" — e.g. icon key
 * "happydivi-form/form" → class "et-vb-icon--happydivi-form-form".
 *
 * Divi's own base rule (`.et-vb-module-picker-option svg { fill: var(--dark-gray) }`)
 * has the SAME CSS specificity as a plain ".et-vb-icon--xxx svg" selector —
 * whichever loads last would otherwise win, unreliably. Nesting every
 * selector under the scoped `[value^="..."]` button selector (extra
 * specificity) fixes that properly; `!important` on `fill` is added too as a
 * deliberate, narrow belt-and-braces against that one specific rule — safe
 * here ONLY because the selector is properly scoped to our own buttons.
 *
 * @since 1.25.0
 */

.et-vb-module-picker-option[value^="happydivi-form/"],
.et-vb-module-picker-option[value="happydivi"] {
    background: var(--hdf-picker-bg, transparent);
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.et-vb-module-picker-option[value^="happydivi-form/"]:hover,
.et-vb-module-picker-option[value="happydivi"]:hover {
    background: var(--hdf-picker-bg-hover, var(--hdf-picker-bg, transparent));
}

.et-vb-module-picker-option[value^="happydivi-form/"] .et-vb-icon,
.et-vb-module-picker-option[value="happydivi"] .et-vb-icon {
    background: var(--hdf-picker-icon-bg, transparent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.et-vb-module-picker-option[value^="happydivi-form/"]:hover .et-vb-icon,
.et-vb-module-picker-option[value="happydivi"]:hover .et-vb-icon {
    background: var(--hdf-picker-icon-bg-hover, var(--hdf-picker-icon-bg, transparent));
}

.et-vb-module-picker-option[value^="happydivi-form/"] .et-vb-icon svg,
.et-vb-module-picker-option[value="happydivi"] .et-vb-icon svg {
    width: 60%;
    height: 60%;
    fill: var(--hdf-picker-icon-fill, currentColor) !important;
    transition: fill 0.15s ease;
}

.et-vb-module-picker-option[value^="happydivi-form/"]:hover .et-vb-icon svg,
.et-vb-module-picker-option[value="happydivi"]:hover .et-vb-icon svg {
    fill: var(--hdf-picker-icon-fill-hover, var(--hdf-picker-icon-fill, currentColor)) !important;
}

/* =========================================================================
   PER-MODULE TEMPLATE — copy this block once per module/folder button.
   CSS custom properties cascade from the [value="..."] selector down into
   the scoped rules above automatically, so this is the ONLY thing that
   changes when adding a module WITHIN this same plugin (same prefix).

.et-vb-module-picker-option[value="happydivi-form/your-new-module"] {
    --hdf-picker-bg: #f6f7fe;
    --hdf-picker-bg-hover: #eef0fe;
    --hdf-picker-icon-bg: #dde1fb;
    --hdf-picker-icon-bg-hover: #5b6af0;
    --hdf-picker-icon-fill: #4a56d1;
    --hdf-picker-icon-fill-hover: #ffffff;
}
   ========================================================================= */

/* =========================================================================
   HappyDivi Form — Frontend stylesheet
   All selectors start with .hdf- or #hdf- (never leak outside the form).

   Everything visual is driven by CSS custom properties (design tokens) on
   .hdf-form-wrap. The Divi 5 Design tab overrides these tokens per-form via
   an inline \3c style> block — so nothing here uses hard-coded values that would
   block a user's design. Never add inline design styles in PHP/JSX; set tokens.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Design Tokens (premium baseline)
   ------------------------------------------------------------------------- */
.hdf-form-wrap {
    --hdf-field-bg:           #ffffff;
    --hdf-field-color:        #1a1a2e;
    --hdf-field-placeholder:  #a0a4b8;
    --hdf-field-border-width: 1.5px;
    --hdf-field-border-style: solid;
    --hdf-field-border-color: #e2e4ea;
    --hdf-field-border-hover: #c8cde0;
    --hdf-field-radius:       6px;
    --hdf-field-padding-v:    13px;
    --hdf-field-padding-h:    18px;
    /* Field Icon (optional, decorative). Color falls back to the surrounding
       text color and size to the field's own font size, so an icon looks
       deliberate before any Design tab value is set. The Design tab writes
       --hdf-field-icon-color / --hdf-field-icon-size inline on the icon. */
    --hdf-field-icon-color:   currentColor;
    --hdf-field-icon-size:    1em;
    --hdf-field-icon-gap:     0.45em;
    --hdf-field-font-size:    15px;
    --hdf-field-font-family:  inherit;
    --hdf-field-min-height:   50px;
    --hdf-field-shadow:       0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.04);
    --hdf-field-focus-color:  #5b6af0;
    --hdf-field-focus-shadow: 0 0 0 4px rgba(91, 106, 240, 0.12), 0 0 0 1px rgba(91, 106, 240, 0.25);
    --hdf-field-focus-bg:     #fafbff;
    --hdf-field-error-color:  #e53e3e;
    --hdf-field-error-bg:     #fffafa;

    --hdf-label-color:        #1e293b;
    --hdf-label-font-size:    14px;
    --hdf-label-font-weight:  600;
    --hdf-label-gap:          10px;

    --hdf-required-color:     #e53e3e;

    --hdf-help-color:         #88909e;
    --hdf-help-font-size:     12.5px;

    --hdf-accent:             #5b6af0;
    --hdf-track-empty:        #e8ebf2;

    --hdf-btn-bg:             linear-gradient(135deg, #5b6af0 0%, #4f5de0 100%);
    --hdf-btn-color:          #ffffff;
    --hdf-btn-hover-bg:       linear-gradient(135deg, #4f5de0 0%, #3d4bc7 100%);
    /* Upload button gets its OWN solid-color token rather than sharing the
       submit button's gradient: a Design-tab "Background Color" control can
       only ever set a plain background-color, and a gradient background-image
       would keep painting over any solid color it picks. */
    --hdf-upload-btn-bg:      var(--hdf-accent);
    --hdf-upload-btn-hover-bg:#4f5de0;
    --hdf-btn-font-size:      15px;
    --hdf-btn-font-weight:    600;
    --hdf-btn-padding-v:      14px;
    --hdf-btn-padding-h:      32px;
    --hdf-btn-radius:         6px;
    --hdf-btn-border:         none;
    --hdf-btn-shadow:         0 2px 4px rgba(91, 106, 240, 0.15), 0 4px 14px rgba(91, 106, 240, 0.25);
    --hdf-btn-shadow-hover:   0 4px 8px rgba(91, 106, 240, 0.22), 0 8px 24px rgba(91, 106, 240, 0.35);

    --hdf-success-bg:         #f0fdf6;
    --hdf-success-color:      #11643c;
    --hdf-success-border:     #86efb4;
    --hdf-error-banner-bg:    #fef2f2;
    --hdf-error-banner-color: #991b1b;
    --hdf-error-banner-border:#fca5a5;

    --hdf-form-gap:           22px;
    --hdf-field-wrap-gap:     8px;

    --hdf-rating-color:       #f5a623;
    --hdf-rating-hover-color: var(--hdf-rating-color);
    --hdf-rating-empty:       #dde1e8;
    --hdf-rating-size:        32px;
    --hdf-rating-gap:         8px;

    /* Motion — one consistent language for hover / focus / active / checked. */
    --hdf-ease:               cubic-bezier(0.4, 0, 0.2, 1);   /* standard */
    --hdf-ease-out:           cubic-bezier(0.16, 1, 0.3, 1);  /* gentle decelerate */
    --hdf-spring:             cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot */
    --hdf-dur-fast:           0.12s;
    --hdf-dur:                0.2s;
    --hdf-dur-slow:           0.32s;

    /* Form container card — override or zero-out via the Design tab */
    --hdf-form-bg:            transparent;
    --hdf-form-padding:       0px;
    --hdf-form-radius:        0px;
    --hdf-form-shadow:        none;
}

/* -------------------------------------------------------------------------
   Form wrapper & title
   Card properties default to "off" (transparent/no padding) so the form
   blends into whatever Divi section it sits in. Users opt into the card
   look via the Design tab (which sets the --hdf-form-* tokens).
   ------------------------------------------------------------------------- */
.hdf-form-wrap {
    width: 100%;
    box-sizing: border-box;
    background:     var(--hdf-form-bg);
    padding:        var(--hdf-form-padding);
    border-radius:  var(--hdf-form-radius);
    box-shadow:     var(--hdf-form-shadow);
}

.hdf-form-title {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hdf-label-color);
    font-family: var(--hdf-field-font-family);
    letter-spacing: -0.02em;
}

.hdf-form-subtitle {
    margin: 0 0 var(--hdf-form-gap);
    font-size: 0.925rem;
    color: var(--hdf-help-color);
    font-family: var(--hdf-field-font-family);
    line-height: 1.5;
}

/* When a title exists, add breathing room before the fields. */
.hdf-form-title + .hdf-form,
.hdf-form-title + .hdf-form-subtitle {
    margin-top: 0;
}
.hdf-form-title {
    margin-bottom: var(--hdf-form-gap);
}

.hdf-form {
    width: 100%;
    box-sizing: border-box;
}

.hdf-fields-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hdf-form-gap);
}

/* -------------------------------------------------------------------------
   Field wrappers & width system
   ------------------------------------------------------------------------- */
.hdf-field-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--hdf-field-wrap-gap);
    box-sizing: border-box;
    width: 100%;
}

/* Frontend: .hdf-field-wrap is the direct flex child of .hdf-fields-wrap */
.hdf-width-full    { width: 100%; }
.hdf-width-half    { width: calc(50% - (var(--hdf-form-gap) / 2)); }
.hdf-width-third   { width: calc(33.333% - (var(--hdf-form-gap) * 2 / 3)); }
.hdf-width-quarter { width: calc(25% - (var(--hdf-form-gap) * 3 / 4)); }

/*
 * VB: edit.jsx uses useEffect to push hdf-width-* onto the .et_pb_module
 * wrapper (the actual flex child inside .hdf-fields-wrap). These rules then
 * size that wrapper and force the inner .hdf-field-wrap to fill it at 100%.
 */
.hdf-fields-wrap .et_pb_module.hdf-width-half  {
    width: calc(50% - (var(--hdf-form-gap) / 2));
}
.hdf-fields-wrap .et_pb_module.hdf-width-third {
    width: calc(33.333% - (var(--hdf-form-gap) * 2 / 3));
}
.hdf-fields-wrap .et_pb_module.hdf-width-quarter {
    width: calc(25% - (var(--hdf-form-gap) * 3 / 4));
}

.hdf-fields-wrap .et_pb_module .hdf-field-wrap { width: 100%; }

@media (max-width: 640px) {
    .hdf-width-half,
    .hdf-width-third,
    .hdf-width-quarter {
        width: 100%;
    }

    .hdf-fields-wrap .et_pb_module.hdf-width-half,
    .hdf-fields-wrap .et_pb_module.hdf-width-third,
    .hdf-fields-wrap .et_pb_module.hdf-width-quarter {
        width: 100%;
    }
}

/* -------------------------------------------------------------------------
   Labels
   ------------------------------------------------------------------------- */
.hdf-label {
    display: block;
    color:          var(--hdf-label-color);
    font-size:      var(--hdf-label-font-size);
    font-weight:    var(--hdf-label-font-weight);
    font-family:    var(--hdf-field-font-family);
    line-height:    1.4;
    letter-spacing: -0.006em;
    cursor: pointer;
    transition: color var(--hdf-dur-fast) var(--hdf-ease);
}

.hdf-required-indicator {
    color: var(--hdf-required-color);
    margin-inline-start: 2px;
    font-weight: 500;
}

/*
 * Required marker when a field has NO label. The asterisk normally lives on the
 * label; without one we float a small marker in the field's top-right corner so
 * "required" is still signalled. The placeholder stays clean (no asterisk in it),
 * and the input keeps `required` + `aria-required` for validation / a11y.
 */
.hdf-field-wrap.hdf-required.hdf-no-label {
    position: relative;
}
.hdf-field-wrap.hdf-required.hdf-no-label::after {
    content: '*';
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    color: var(--hdf-required-color);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}
/* Toggle already fills the top-right corner with its switch — no corner marker. */
.hdf-field-wrap.hdf-field-toggle.hdf-required.hdf-no-label::after {
    content: none;
}

/* -------------------------------------------------------------------------
   Composite fields (Name)
   ------------------------------------------------------------------------- */
.hdf-name-parts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hdf-form-gap);
}

.hdf-name-part {
    display: flex;
    flex-direction: column;
    gap: var(--hdf-field-wrap-gap);
    flex: 1 1 0;
    min-width: 120px;
}

.hdf-name-part-label {
    display: block;
    color:          var(--hdf-label-color);
    font-size:      var(--hdf-label-font-size);
    font-weight:    var(--hdf-label-font-weight);
    font-family:    var(--hdf-field-font-family);
    line-height:    1.4;
}

/* Prefix/Suffix (Extended format) are short; give them less room than
   First/Middle/Last so the row reads naturally instead of five equal columns. */
.hdf-name-parts--extended .hdf-name-part--prefix,
.hdf-name-parts--extended .hdf-name-part--suffix {
    flex: 0 1 90px;
}

@media (max-width: 640px) {
    .hdf-name-parts {
        flex-direction: column;
    }
    .hdf-name-parts--extended .hdf-name-part--prefix,
    .hdf-name-parts--extended .hdf-name-part--suffix {
        flex: 1 1 auto;
    }
}

/* -------------------------------------------------------------------------
   Composite fields (Address)
   Grid: Address Line 1 and Line 2 span the full width; City/State and
   Postal/Country each pair into one row. RTL needs no special handling -
   grid columns reverse automatically under dir="rtl", like flex already does
   for the Name parts above.
   ------------------------------------------------------------------------- */
.hdf-address-parts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--hdf-form-gap);
}

.hdf-address-part {
    display: flex;
    flex-direction: column;
    gap: var(--hdf-field-wrap-gap);
    min-width: 0; /* lets a long option/value shrink inside the grid track */
}

.hdf-address-part--line1,
.hdf-address-part--line2 {
    grid-column: 1 / -1;
}

.hdf-address-part-label {
    display: block;
    color:       var(--hdf-label-color);
    font-size:   var(--hdf-label-font-size);
    font-weight: var(--hdf-label-font-weight);
    font-family: var(--hdf-field-font-family);
    line-height: 1.4;
}

/* Address Line 2: native <details>/<summary> disclosure, no JavaScript
   required. The marker is removed in every engine and replaced with a "+"
   prefix via ::before, so it reads as a link rather than a native toggle. */
.hdf-address-part--line2 {
    grid-column: 1 / -1;
}

.hdf-address-line2-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: var(--hdf-accent);
    font-size: var(--hdf-label-font-size);
    font-family: var(--hdf-field-font-family);
    list-style: none;
    user-select: none;
}
.hdf-address-line2-toggle::-webkit-details-marker { display: none; }
.hdf-address-line2-toggle::marker                 { content: ''; }
.hdf-address-line2-toggle::before {
    content: '+';
    font-weight: 600;
}
.hdf-address-line2-toggle:hover { text-decoration: underline; }

.hdf-address-line2-body {
    display: flex;
    flex-direction: column;
    gap: var(--hdf-field-wrap-gap);
    margin-top: var(--hdf-field-wrap-gap);
}

@media (max-width: 640px) {
    .hdf-address-parts {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------
   Section Break
   ------------------------------------------------------------------------- */
.hdf-section-heading {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color:       var(--hdf-label-color);
    font-family: var(--hdf-field-font-family);
    line-height: 1.3;
}

.hdf-section-subtext {
    margin: 0;
    font-size:   var(--hdf-help-font-size);
    color:       var(--hdf-help-color);
    font-family: var(--hdf-field-font-family);
    line-height: 1.5;
}

.hdf-section-divider {
    width: 100%;
    border: none;
    border-top: var(--hdf-field-border-width) var(--hdf-field-border-style) var(--hdf-field-border-color);
    margin: 4px 0 0;
}

/* -------------------------------------------------------------------------
   Inputs, textareas, selects
   ------------------------------------------------------------------------- */
/*
 * Scoped under .hdf-form-wrap (specificity 0,2,0) so these beat theme/Divi base
 * rules like `input[type=text] { padding: 2px }` (0,1,1). No !important — the
 * Design tab's generated CSS is module-scoped and still overrides these.
 */
.hdf-form-wrap .hdf-input,
.hdf-form-wrap .hdf-textarea,
.hdf-form-wrap .hdf-select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height:       var(--hdf-field-min-height);
    background-color: var(--hdf-field-bg);
    color:            var(--hdf-field-color);
    font-size:        var(--hdf-field-font-size);
    font-family:      var(--hdf-field-font-family);
    padding:          var(--hdf-field-padding-v) var(--hdf-field-padding-h);
    border-width:     var(--hdf-field-border-width);
    border-style:     var(--hdf-field-border-style);
    border-color:     var(--hdf-field-border-color);
    border-radius:    var(--hdf-field-radius);
    box-shadow:       var(--hdf-field-shadow);
    line-height:      1.5;
    transition:       border-color var(--hdf-dur) var(--hdf-ease), box-shadow var(--hdf-dur) var(--hdf-ease), background-color var(--hdf-dur) var(--hdf-ease), transform var(--hdf-dur-fast) var(--hdf-ease);
    appearance:       none;
    -webkit-appearance: none;
    outline: none;
}

.hdf-form-wrap .hdf-input:hover,
.hdf-form-wrap .hdf-textarea:hover,
.hdf-form-wrap .hdf-select:hover {
    border-color: var(--hdf-field-border-hover);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.hdf-input::placeholder,
.hdf-textarea::placeholder {
    color: var(--hdf-field-placeholder);
    opacity: 1;
}

.hdf-form-wrap .hdf-input:focus,
.hdf-form-wrap .hdf-textarea:focus,
.hdf-form-wrap .hdf-select:focus {
    border-color: var(--hdf-field-focus-color);
    box-shadow:   var(--hdf-field-focus-shadow);
    background-color: var(--hdf-field-focus-bg);
    /* Focus text falls back to the normal field text when the Brand token is unset. */
    color: var(--hdf-field-focus-text, var(--hdf-field-color));
    transform: translateY(-1px);
}

.hdf-form-wrap .hdf-textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}

.hdf-form-wrap .hdf-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath fill=%27%236b7280%27 d=%27M1 1l5 5 5-5%27 stroke=%27%236b7280%27 stroke-width=%270.5%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

/* -------------------------------------------------------------------------
   Enhanced select (searchable + multi-select chips)
   ------------------------------------------------------------------------- */
.hdf-select--native-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.hdf-select-wrap {
    position: relative;
    width: 100%;
}

.hdf-select-control {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    min-height:       var(--hdf-field-min-height);
    background-color: var(--hdf-field-bg);
    color:            var(--hdf-field-color);
    font-size:        var(--hdf-field-font-size);
    font-family:      var(--hdf-field-font-family);
    padding:          var(--hdf-field-padding-v) var(--hdf-field-padding-h);
    border-width:     var(--hdf-field-border-width);
    border-style:     var(--hdf-field-border-style);
    border-color:     var(--hdf-field-border-color);
    border-radius:    var(--hdf-field-radius);
    box-shadow:       var(--hdf-field-shadow);
    cursor: pointer;
    transition:       border-color var(--hdf-dur) var(--hdf-ease), box-shadow var(--hdf-dur) var(--hdf-ease);
}

.hdf-select-control:hover {
    border-color: var(--hdf-field-border-hover);
}

.hdf-select-wrap--open .hdf-select-control {
    border-color: var(--hdf-field-focus-color);
    box-shadow:   var(--hdf-field-focus-shadow);
}

.hdf-select-display {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    line-height: 1.5;
    min-width: 0;
    overflow: hidden;
}

.hdf-select-display--placeholder,
.hdf-select-placeholder {
    color: var(--hdf-field-placeholder);
}

.hdf-select-arrow {
    flex-shrink: 0;
    width: 12px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath fill=%27%236b7280%27 d=%27M1 1l5 5 5-5%27 stroke=%27%236b7280%27 stroke-width=%270.5%27/%3E%3C/svg%3E") no-repeat center;
    transition: transform var(--hdf-dur) var(--hdf-ease);
}

.hdf-select-wrap--open .hdf-select-arrow {
    transform: rotate(180deg);
}

.hdf-select-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 10px;
    background: var(--hdf-accent, #5b6af0);
    color: #fff;
    border-radius: 6px;
    font-size: 0.86em;
    line-height: 1.5;
}

.hdf-select-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--hdf-dur-fast) var(--hdf-ease);
}

.hdf-select-chip-remove:hover {
    background: rgba(255, 255, 255, 0.38);
}

.hdf-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--hdf-field-bg);
    border: 1px solid var(--hdf-field-border-color);
    border-radius: var(--hdf-field-radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    animation: hdf-other-reveal var(--hdf-dur) var(--hdf-ease-out);
}

/* Scoped under .hdf-form-wrap (0-2-0) to beat Divi's input[type=text] (0-1-1),
   whose padding:2px would otherwise slide the text under the search icon. */
.hdf-form-wrap .hdf-select-search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px 11px 40px;
    border: none;
    border-bottom: 1px solid var(--hdf-field-border-color);
    border-radius: 0;
    font-size: var(--hdf-field-font-size);
    font-family: var(--hdf-field-font-family);
    color: var(--hdf-field-color);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236b7280%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2711%27 cy=%2711%27 r=%278%27/%3E%3Cpath d=%27m21 21-4.3-4.3%27/%3E%3C/svg%3E") no-repeat 14px center;
    outline: none;
}

/* Scoped under .hdf-form-wrap + ul to beat Divi's theme list styling
   (.et-l--body ul { list-style: disc; padding: 0 0 23px 1em }). */
.hdf-form-wrap ul.hdf-select-options {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 260px;
    overflow-y: auto;
    line-height: normal;
}

.hdf-form-wrap ul.hdf-select-options > li {
    list-style: none;
    margin: 0;
    text-indent: 0;
}

.hdf-form-wrap ul.hdf-select-options > li::marker {
    content: "";
}

.hdf-select-group {
    padding: 10px 12px 4px;
    font-size: 0.74em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hdf-field-placeholder);
}

.hdf-form-wrap ul.hdf-select-options > li.hdf-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--hdf-field-color);
    font-size: var(--hdf-field-font-size);
    line-height: 1.4;
    transition: background var(--hdf-dur-fast) var(--hdf-ease), color var(--hdf-dur-fast) var(--hdf-ease);
}

.hdf-select-option:hover,
.hdf-select-option--active {
    background: rgba(91, 106, 240, 0.08);
}

.hdf-select-option--selected {
    background: rgba(91, 106, 240, 0.12);
    color: var(--hdf-accent, #5b6af0);
    font-weight: 600;
}

/* Checkmark on the right for the chosen option (flex, not float). */
.hdf-select-option--selected::after {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%235b6af0%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") no-repeat center;
}

.hdf-select-empty {
    padding: 14px;
    text-align: center;
    color: var(--hdf-field-placeholder);
    font-size: 0.9em;
}

/* -------------------------------------------------------------------------
   Calculated field (live total)
   ------------------------------------------------------------------------- */
.hdf-calc-field {
    display: flex;
    align-items: center;
    min-height: var(--hdf-field-min-height);
    padding: var(--hdf-field-padding-v) var(--hdf-field-padding-h);
    background: linear-gradient(0deg, rgba(91, 106, 240, 0.06), rgba(91, 106, 240, 0.06)), var(--hdf-field-bg);
    border: var(--hdf-field-border-width) var(--hdf-field-border-style) var(--hdf-field-border-color);
    border-radius: var(--hdf-field-radius);
    box-shadow: var(--hdf-field-shadow);
}

.hdf-calc-display {
    font-size: calc(var(--hdf-field-font-size) * 1.25);
    font-family: var(--hdf-field-font-family);
    font-weight: 700;
    color: var(--hdf-accent, #5b6af0);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------
   Prefix / suffix adornments
   ------------------------------------------------------------------------- */
.hdf-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.hdf-input-group .hdf-input {
    border-radius: 0;
    flex: 1;
    min-width: 0;
}

.hdf-input-group > .hdf-input:first-child { border-start-start-radius: var(--hdf-field-radius); border-end-start-radius: var(--hdf-field-radius); }
.hdf-input-group > .hdf-input:last-child  { border-start-end-radius: var(--hdf-field-radius); border-end-end-radius: var(--hdf-field-radius); }

.hdf-adornment {
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: rgba(91, 106, 240, 0.06);
    color: var(--hdf-field-placeholder);
    font-size: var(--hdf-field-font-size);
    font-family: var(--hdf-field-font-family);
    white-space: nowrap;
    border: var(--hdf-field-border-width) var(--hdf-field-border-style) var(--hdf-field-border-color);
}

/* .hdf-input-group is display:flex, so under inherited direction:rtl its
   children (prefix, input, suffix) already visually reorder on their own —
   these logical corner/border properties just need to keep following
   whichever box ends up on the "start" (first in DOM) vs "end" (last in
   DOM) side, which is exactly what start/end (rather than left/right)
   corners mean. */
.hdf-adornment--prefix {
    border-inline-end: none;
    border-start-start-radius: var(--hdf-field-radius);
    border-end-start-radius: var(--hdf-field-radius);
}

.hdf-adornment--suffix {
    border-inline-start: none;
    border-start-end-radius: var(--hdf-field-radius);
    border-end-end-radius: var(--hdf-field-radius);
}

/* -------------------------------------------------------------------------
   Field Icon (optional, decorative; Pro)

   Two placements share one element:
     .hdf-field-icon--label  sits inline before the label/legend text.
     --left / --right        sit INSIDE the input's own box.

   The inside placements are positioned against .hdf-input-icon-wrap, which
   wraps ONLY the icon + the control. That is deliberate: the wrap is exactly
   the input's box, so an icon still lands inside the field when a prefix/suffix
   adornment makes the surrounding .hdf-input-group wider than the input. The
   two features are separate layers (adornment attached outside, icon inside)
   and can be used together on the same side.

   Nothing here depends on placeholder text; the icon is positioned against the
   box, so it renders identically with or without a placeholder.
   ------------------------------------------------------------------------- */
.hdf-field-icon {
    color: var(--hdf-field-icon-color, currentColor);
    font-size: var(--hdf-field-icon-size, 1em);
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    flex: none;
}

/* Label placement: inline with the label/legend/heading text. */
.hdf-field-icon--label {
    display: inline-block;
    margin-inline-end: var(--hdf-field-icon-gap);
    vertical-align: baseline;
}

/* Inside placements: the wrap is the input's own box. */
.hdf-input-icon-wrap {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
}

.hdf-input-icon-wrap > .hdf-input,
.hdf-input-icon-wrap > .hdf-textarea,
.hdf-input-icon-wrap > .hdf-select {
    flex: 1;
    min-width: 0;
}

/* Keep the group's rounded outer corners when the control is wrapped (the
   existing rules target a control that is a DIRECT child of the group). */
.hdf-input-group > .hdf-input-icon-wrap:first-child > .hdf-input,
.hdf-input-group > .hdf-input-icon-wrap:first-child > .hdf-textarea,
.hdf-input-group > .hdf-input-icon-wrap:first-child > .hdf-select {
    border-start-start-radius: var(--hdf-field-radius);
    border-end-start-radius: var(--hdf-field-radius);
}

.hdf-input-group > .hdf-input-icon-wrap:last-child > .hdf-input,
.hdf-input-group > .hdf-input-icon-wrap:last-child > .hdf-textarea,
.hdf-input-group > .hdf-input-icon-wrap:last-child > .hdf-select {
    border-start-end-radius: var(--hdf-field-radius);
    border-end-end-radius: var(--hdf-field-radius);
}

/* inset-inline-* rather than left/right, so a leading icon follows the reading
   direction and lands on the correct edge under RTL automatically. */
.hdf-input-icon-wrap > .hdf-field-icon--left,
.hdf-input-icon-wrap > .hdf-field-icon--right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

.hdf-input-icon-wrap > .hdf-field-icon--left  { inset-inline-start: var(--hdf-field-padding-h); }
.hdf-input-icon-wrap > .hdf-field-icon--right { inset-inline-end:   var(--hdf-field-padding-h); }

/* Inset the control's text so a value or placeholder never runs under the
   glyph. The class lives on the group and is emitted together with the icon,
   so the padding can never be left behind when the icon is not rendered. */
.hdf-has-field-icon--left .hdf-input,
.hdf-has-field-icon--left .hdf-textarea,
.hdf-has-field-icon--left .hdf-select {
    padding-inline-start: calc(var(--hdf-field-padding-h) + var(--hdf-field-icon-size, 1em) + var(--hdf-field-icon-gap));
}

.hdf-has-field-icon--right .hdf-input,
.hdf-has-field-icon--right .hdf-textarea,
.hdf-has-field-icon--right .hdf-select {
    padding-inline-end: calc(var(--hdf-field-padding-h) + var(--hdf-field-icon-size, 1em) + var(--hdf-field-icon-gap));
}

/* A textarea is multi-line, so centering the icon vertically would park it in
   the middle of the box; align it to the first line instead. */
.hdf-input-icon-wrap:has(> .hdf-textarea) > .hdf-field-icon--left,
.hdf-input-icon-wrap:has(> .hdf-textarea) > .hdf-field-icon--right {
    top: var(--hdf-field-padding-v);
    transform: none;
}

/* -------------------------------------------------------------------------
   Character / word counter
   ------------------------------------------------------------------------- */
.hdf-counter {
    margin-top: 6px;
    font-size: 0.82em;
    color: var(--hdf-field-placeholder);
    text-align: end;
    line-height: 1.3;
    transition: color var(--hdf-dur-fast) var(--hdf-ease);
}

/* Shared row for help text + counter — AbstractField::buildFieldMeta() only
   wraps them together when BOTH are present for a field (text/textarea with
   a counter enabled). Without this they render as two separate stacked
   block elements (counter div, then help span), which visibly gaps them
   onto their own lines instead of sharing one. Each child's own margin-top
   is reset to 0 here since the row itself carries that spacing instead. */
.hdf-field-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
}
.hdf-field-meta .hdf-help-text {
    margin-top: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.hdf-field-meta .hdf-counter {
    margin-top: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.hdf-counter--limit {
    color: var(--hdf-error-color, #e5484d);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   Number stepper
   ------------------------------------------------------------------------- */
.hdf-stepper {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.hdf-stepper .hdf-input,
.hdf-stepper .hdf-number-input {
    border-radius: 0;
    text-align: center;
    flex: 1;
    min-width: 0;
    /* Hide native spinners — the buttons replace them. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.hdf-stepper .hdf-number-input::-webkit-outer-spin-button,
.hdf-stepper .hdf-number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hdf-stepper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    flex-shrink: 0;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    color: var(--hdf-field-color);
    background: rgba(91, 106, 240, 0.06);
    border: var(--hdf-field-border-width) var(--hdf-field-border-style) var(--hdf-field-border-color);
    cursor: pointer;
    transition: background var(--hdf-dur-fast) var(--hdf-ease);
}

.hdf-stepper-btn:hover {
    background: rgba(91, 106, 240, 0.14);
}

.hdf-stepper-down {
    border-inline-end: none;
    border-start-start-radius: var(--hdf-field-radius);
    border-end-start-radius: var(--hdf-field-radius);
}

.hdf-stepper-up {
    border-inline-start: none;
    border-start-end-radius: var(--hdf-field-radius);
    border-end-end-radius: var(--hdf-field-radius);
}

/* -------------------------------------------------------------------------
   Checkbox & radio groups
   ------------------------------------------------------------------------- */
.hdf-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.hdf-legend {
    color:       var(--hdf-label-color);
    font-size:   var(--hdf-label-font-size);
    font-weight: var(--hdf-label-font-weight);
    font-family: var(--hdf-field-font-family);
    margin-bottom: 10px;
    display: block;
    letter-spacing: -0.004em;
}

.hdf-checkbox-group,
.hdf-radio-group {
    display: flex;
    flex-direction: column;
    /* Divi's Group Layout design control (divi/layout) always emits gap as
       column-gap/row-gap: var(--horizontal-gap)/var(--vertical-gap) rather
       than a literal value — these vars are declared on this same selector
       only when the admin sets a gap, so the fallback keeps today's default
       when unconfigured. */
    gap: var(--vertical-gap, 10px) var(--horizontal-gap, 10px);
}

/* Inline layout: options flow in a wrapping row instead of stacking. */
.hdf-checkbox-group.hdf-options-inline,
.hdf-radio-group.hdf-options-inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--vertical-gap, 8px) var(--horizontal-gap, 22px);
}
.hdf-options-inline .hdf-checkbox-item,
.hdf-options-inline .hdf-radio-item {
    flex: 0 0 auto;
    margin: 0;
}

/* Grid layout mode ("Layout Mode: Grid" in the Group Layout design panel).
   Divi's Layout Style component generates --column-count/grid-template-*
   correctly but never emits `display: grid` itself for third-party modules
   (see feedback_divi5_layout_group_display_mechanism memory) — this modifier
   class, driven by CheckboxField/RadioField reading the same decoration
   value directly, is what actually switches display. */
.hdf-checkbox-group.hdf-options-grid,
.hdf-radio-group.hdf-options-grid {
    display: grid;
}

.hdf-checkbox-item,
.hdf-radio-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    margin: 0 -10px;
    transition: background var(--hdf-dur-fast) var(--hdf-ease);
}

.hdf-checkbox-item:hover,
.hdf-radio-item:hover {
    background: rgba(91, 106, 240, 0.04);
}

/* "Other" toggle — a plain option, same <label> flat markup as every other
   option, so it inherits Item Background/Border/Box-Shadow/Sizing/Checked
   State/Hover/Font styling identically with zero extra CSS. It sits inline
   with the rest of the group wherever the Group Layout control places it.
   The companion "please specify" text field is NOT nested inside it — see
   AbstractField::buildOtherText() — it's a sibling rendered after the whole
   options group, so it's just a normal full-width .hdf-input, completely
   unaffected by whatever flex/grid layout (direction, wrap, column count)
   the Group Layout Design control applies to the options group. Nesting it
   inside the group previously meant Divi's own generated layout CSS (e.g.
   flex-wrap: nowrap) could trap or squeeze it into a single narrow cell. */
.hdf-other-text {
    margin-top: 10px;
    animation: hdf-other-reveal var(--hdf-dur) var(--hdf-ease-out);
}

.hdf-other-text[hidden] {
    display: none;
}

@keyframes hdf-other-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Radio "cards" — pick-a-plan / pick-a-product layout */
.hdf-radio-group.hdf-radio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.hdf-radio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 18px 16px;
    margin: 0;
    background: var(--hdf-field-bg);
    border: 2px solid var(--hdf-field-border-color);
    border-radius: var(--hdf-field-radius);
    cursor: pointer;
    transition: border-color var(--hdf-dur) var(--hdf-ease), box-shadow var(--hdf-dur) var(--hdf-ease), transform var(--hdf-dur-fast) var(--hdf-ease);
}

.hdf-radio-card:hover {
    border-color: var(--hdf-field-border-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* The real input's full hidden-but-accessible treatment comes from the
   general .hdf-radio rule below (cards mode's input carries that class
   too) — no cards-specific override needed. */
.hdf-radio-card:has(.hdf-radio-card-input:checked) {
    border-color: var(--hdf-accent, #5b6af0);
    box-shadow: 0 0 0 3px rgba(91, 106, 240, 0.16);
}

.hdf-radio-card:has(.hdf-radio-card-input:focus-visible) {
    outline: 2px solid var(--hdf-accent, #5b6af0);
    outline-offset: 2px;
}

.hdf-radio-card-media {
    display: block;
    width: 100%;
}

.hdf-radio-card-media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: contain;
    border-radius: calc(var(--hdf-field-radius) - 2px);
}

.hdf-radio-card-label {
    font-size: var(--hdf-field-font-size);
    font-family: var(--hdf-field-font-family);
    font-weight: 600;
    color: var(--hdf-label-color);
    line-height: 1.4;
}

.hdf-checkbox-item .hdf-option-text,
.hdf-radio-item .hdf-option-text {
    color:       var(--hdf-label-color);
    font-size:   var(--hdf-field-font-size);
    font-family: var(--hdf-field-font-family);
    cursor: pointer;
    line-height: 1.5;
    flex: 1;
}

/* The real input: kept in the DOM, focusable, screen-reader-operable —
   visually replaced by .hdf-checkbox-box/.hdf-radio-box (its next sibling).
   Not display:none/visibility:hidden, which would drop it from the
   accessibility tree and break keyboard operation. appearance:none is
   defensive (some forced-colors/high-contrast modes still paint a native
   affordance through opacity/clip tricks). */
.hdf-checkbox,
.hdf-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

/* The decorative box — what visitors actually see. Flex-centers its ::before
   glyph so the checkmark/dot (default or a custom Icon-control glyph) is
   always dead-center regardless of the glyph's own rendered size. */
.hdf-checkbox-box,
.hdf-radio-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    width:  20px;
    height: 20px;
    border: 1.5px solid var(--hdf-field-border-color);
    background: var(--hdf-field-bg);
    cursor: pointer;
    transition: background var(--hdf-dur-fast) var(--hdf-ease), border-color var(--hdf-dur-fast) var(--hdf-ease), box-shadow var(--hdf-dur-fast) var(--hdf-ease), transform var(--hdf-dur-fast) var(--hdf-ease);
}

.hdf-checkbox-box { border-radius: 5px; }
.hdf-radio-box    { border-radius: 50%; }

/* Checked state: filled with the "Checked Color" tint (falls back to the
   shared brand accent), plus a default checkmark/dot glyph. This default is
   what an admin sees with NO Icon control configured. Divi's Icon control
   (divi/icon) targets this exact ::before selector, but only emits the
   properties an admin actually touches: content/font-family/font-weight are
   always emitted (picking a glyph is mandatory), while color/font-size are
   only emitted if explicitly set. Because of that, this default MUST be a
   plain text glyph — never a hand-drawn border/transform/absolute-position
   shape. A geometry property left here (position/width/height/border/
   transform) is NOT reset by Divi's rule and leaks straight through onto
   whatever glyph the admin picks, corrupting it instead of being replaced.
   Centering comes from the parent's flex box above, not hardcoded offsets,
   so it holds for both this default and any custom glyph. */
.hdf-checkbox:checked + .hdf-checkbox-box,
.hdf-radio:checked + .hdf-radio-box {
    background: var(--hdf-checkbox-accent, var(--hdf-radio-accent, var(--hdf-accent)));
    border-color: var(--hdf-checkbox-accent, var(--hdf-radio-accent, var(--hdf-accent)));
}

.hdf-checkbox:checked + .hdf-checkbox-box::before,
.hdf-radio:checked + .hdf-radio-box::before {
    line-height: 1;
    font-style: normal;
    color: #fff;
}

.hdf-checkbox:checked + .hdf-checkbox-box::before {
    content: "\2713";
    font-size: 13px;
    font-weight: 700;
}

.hdf-radio:checked + .hdf-radio-box::before {
    content: "\25CF";
    font-size: 10px;
}

.hdf-checkbox-item:hover .hdf-checkbox-box,
.hdf-radio-item:hover .hdf-radio-box {
    border-color: var(--hdf-field-border-hover);
}

.hdf-checkbox:focus-visible + .hdf-checkbox-box,
.hdf-radio:focus-visible + .hdf-radio-box {
    box-shadow: var(--hdf-field-focus-shadow);
}

.hdf-checkbox:active + .hdf-checkbox-box,
.hdf-radio:active + .hdf-radio-box {
    transform: scale(0.9);
}

/* -------------------------------------------------------------------------
   Accept (legal consent) field
   ------------------------------------------------------------------------- */
.hdf-accept-wrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.hdf-accept-checkbox {
    flex-shrink: 0;
    margin-top: 3px;
    width:  18px;
    height: 18px;
    accent-color: var(--hdf-accent);
    cursor: pointer;
}

.hdf-accept-label {
    color:     var(--hdf-label-color);
    font-size: var(--hdf-field-font-size);
    font-family: var(--hdf-field-font-family);
    cursor: pointer;
    line-height: 1.5;
}

.hdf-accept-label a {
    color: var(--hdf-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity var(--hdf-dur-fast) var(--hdf-ease), text-underline-offset var(--hdf-dur-fast) var(--hdf-ease);
}

.hdf-accept-label a:hover {
    opacity: 0.8;
    text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Help text
   ------------------------------------------------------------------------- */
.hdf-help-text {
    display: block;
    color:     var(--hdf-help-color);
    font-size: var(--hdf-help-font-size);
    line-height: 1.5;
    font-family: var(--hdf-field-font-family);
    margin-top: 2px;
}

/* -------------------------------------------------------------------------
   Email typo suggestion ("Did you mean name@gmail.com?")
   ------------------------------------------------------------------------- */
.hdf-email-suggestion {
    display:     block;
    margin-top:  5px;
    font-size:   var(--hdf-help-font-size);
    font-family: var(--hdf-field-font-family);
    color:       var(--hdf-help-color);
    line-height: 1.4;
    animation:   hdf-message-in var(--hdf-dur) var(--hdf-ease-out);
}

.hdf-email-suggestion-fix {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--hdf-accent);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity var(--hdf-dur-fast) var(--hdf-ease);
}

.hdf-email-suggestion-fix:hover {
    opacity: 0.8;
}

.hdf-email-suggestion-fix:focus-visible {
    outline: 2px solid var(--hdf-field-focus-color);
    outline-offset: 2px;
    border-radius: 2px;
}

/* -------------------------------------------------------------------------
   Error messages (per-field)
   ------------------------------------------------------------------------- */
.hdf-field-error {
    display: block;
    color:     var(--hdf-field-error-color);
    font-size: var(--hdf-help-font-size);
    font-family: var(--hdf-field-font-family);
    line-height: 1.4;
    min-height: 0;
    font-weight: 500;
}

.hdf-field-error:empty {
    display: none;
}

/* Fields in error state. Scoped to the control's OWN class (not a
   .hdf-field-wrap ancestor selector): a composite field (Name/Address) has
   several independent controls sharing one wrap, and only the specific
   control that actually failed validation carries this class, so a sibling
   part that's still valid is never painted red just because it shares a
   wrapper (see index.js showFieldError()/clearFieldState()). */
.hdf-input.hdf-has-error,
.hdf-textarea.hdf-has-error,
.hdf-select.hdf-has-error {
    border-color: var(--hdf-field-error-color);
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.08);
    background-color: var(--hdf-field-error-bg);
}

.hdf-field-wrap.hdf-has-error .hdf-fieldset {
    outline: 1.5px solid var(--hdf-field-error-color);
    outline-offset: 6px;
    border-radius: 4px;
}

/* -------------------------------------------------------------------------
   Valid (positive) state — set by live validation after a field checks out.
   Green border everywhere; a check icon on single-line text inputs (not the
   select, which already carries the dropdown arrow, nor number, whose spinner
   sits on the right).
   ------------------------------------------------------------------------- */
.hdf-input.hdf-valid,
.hdf-textarea.hdf-valid,
.hdf-select.hdf-valid {
    border-color: var(--hdf-success-color);
}

.hdf-input.hdf-valid:not(.hdf-number-input) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2311643c%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%2720 6 9 17 4 12%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* -------------------------------------------------------------------------
   International phone widget (built by hdf-intl-phone.js)
   The wrapper looks like a single field; the inner input is stripped of its
   own chrome. Country button (flag + dial) sits on the left with a searchable
   dropdown.
   ------------------------------------------------------------------------- */
.hdf-intl-tel {
    display:          flex;
    align-items:      stretch;
    position:         relative;
    width:            100%;
    box-sizing:       border-box;
    background-color: var(--hdf-field-bg);
    border:           var(--hdf-field-border-width) var(--hdf-field-border-style) var(--hdf-field-border-color);
    border-radius:    var(--hdf-field-radius);
    box-shadow:       var(--hdf-field-shadow);
    min-height:       var(--hdf-field-min-height);
    transition:       border-color var(--hdf-dur) var(--hdf-ease), box-shadow var(--hdf-dur) var(--hdf-ease);
}

.hdf-intl-tel:hover { border-color: var(--hdf-field-border-hover); }

.hdf-intl-tel:focus-within {
    border-color:     var(--hdf-field-focus-color);
    box-shadow:       var(--hdf-field-focus-shadow);
    background-color: var(--hdf-field-focus-bg);
}

/* Inner input loses its own border/shadow — the wrapper carries the look. */
.hdf-form-wrap .hdf-intl-tel .hdf-input {
    border:        0;
    box-shadow:    none;
    background:    transparent;
    min-height:    0;
    border-radius: 0;
    flex:          1;
}
.hdf-form-wrap .hdf-intl-tel .hdf-input:focus,
.hdf-form-wrap .hdf-intl-tel .hdf-input:hover {
    border:     0;
    box-shadow: none;
    background: transparent;
    transform:  none;
}

/* Wrapper reflects the field's error / valid state. */
.hdf-field-wrap.hdf-has-error .hdf-intl-tel { border-color: var(--hdf-field-error-color); }
.hdf-field-wrap.hdf-valid     .hdf-intl-tel { border-color: var(--hdf-success-color); }

.hdf-intl-country-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       0 12px;
    border:        0;
    border-right:  1px solid var(--hdf-field-border-color);
    border-radius: var(--hdf-field-radius) 0 0 var(--hdf-field-radius);
    background:    transparent;
    cursor:        pointer;
    font:          inherit;
    color:         var(--hdf-field-color);
    white-space:   nowrap;
    transition:    background var(--hdf-dur-fast) var(--hdf-ease);
}
.hdf-intl-country-btn:hover { background: rgba(0, 0, 0, 0.03); }

.hdf-intl-flag { font-size: 1.15em; line-height: 1; }
.hdf-intl-dial { font-weight: 600; font-size: 0.95em; }
.hdf-intl-caret {
    width:  0;
    height: 0;
    border-left:  4px solid transparent;
    border-right: 4px solid transparent;
    border-top:   5px solid var(--hdf-help-color);
    margin-inline-start: 2px;
}

.hdf-intl-dropdown {
    position:      absolute;
    top:           calc(100% + 4px);
    left:          0;
    z-index:       30;
    width:         320px;
    max-width:     90vw;
    background:    #ffffff;
    border:        1px solid var(--hdf-field-border-color);
    border-radius: var(--hdf-field-radius);
    box-shadow:    0 8px 28px rgba(16, 24, 40, 0.14);
    overflow:      hidden;
    animation:     hdf-message-in var(--hdf-dur) var(--hdf-ease-out);
}

.hdf-intl-search {
    width:         100%;
    box-sizing:    border-box;
    border:        0;
    border-bottom: 1px solid var(--hdf-field-border-color);
    padding:       10px 14px;
    font:          inherit;
    outline:       none;
}

.hdf-intl-list {
    list-style: none;
    margin:     0;
    padding:    4px;
    max-height: 260px;
    overflow-y: auto;
}

.hdf-intl-option {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       8px 10px;
    border-radius: 6px;
    cursor:        pointer;
    font-size:     14px;
}
.hdf-intl-option:hover,
.hdf-intl-option--active { background: rgba(91, 106, 240, 0.08); }
.hdf-intl-option .hdf-intl-name { flex: 1; color: var(--hdf-field-color); }
.hdf-intl-option .hdf-intl-dial { color: var(--hdf-help-color); font-weight: 500; }

/* -------------------------------------------------------------------------
   Submit button
   ------------------------------------------------------------------------- */
/* Submit row — now a flex item inside .hdf-fields-wrap so it can sit inline. */
.hdf-submit-wrap {
    width: 100%; /* stacked default: own row */
    margin-top: calc(var(--hdf-form-gap) / 2);
    box-sizing: border-box;
}

/* Button alignment within its row (button is inline-flex, so align via the wrap). */
.hdf-submit-wrap.hdf-align-center { text-align: center; }
.hdf-submit-wrap.hdf-align-right  { text-align: right; }

/* Button width within its row. */
.hdf-submit-w-full  .hdf-submit-btn { width: 100%; }
.hdf-submit-w-half  .hdf-submit-btn { width: 50%; }
.hdf-submit-w-third .hdf-submit-btn { width: 33.333%; }
/* hdf-submit-w-auto = content width (default) */

/* -------------------------------------------------------------------------
   Inline form layout — fields + button share one row, stacking on mobile.
   Great for newsletter-style forms. align-items:flex-end lines the button up
   with the inputs even when fields carry labels above them.
   ------------------------------------------------------------------------- */
.hdf-form--inline .hdf-fields-wrap {
    flex-wrap:   nowrap;
    align-items: flex-end;
}

/* Fields grow to share the row; their column widths are ignored inline. */
.hdf-form--inline .hdf-fields-wrap > .et_pb_module,
.hdf-form--inline .hdf-fields-wrap > .hdf-field-wrap {
    flex:      1 1 0;
    width:     auto;
    min-width: 0;
}

/* Button hugs its content at the end of the row. */
.hdf-form--inline .hdf-submit-wrap {
    flex:       0 0 auto;
    width:      auto;
    margin-top: 0;
}
.hdf-form--inline .hdf-submit-btn { width: auto; }

@media (max-width: 640px) {
    .hdf-form--inline .hdf-fields-wrap {
        flex-wrap: wrap;
    }
    .hdf-form--inline .hdf-fields-wrap > .et_pb_module,
    .hdf-form--inline .hdf-fields-wrap > .hdf-field-wrap,
    .hdf-form--inline .hdf-submit-wrap {
        flex-basis: 100%;
        width:      100%;
    }
}

/* -------------------------------------------------------------------------
   Submit button icon (Divi icon-picker glyph rendered with the icon font).
   ------------------------------------------------------------------------- */
.hdf-btn-icon {
    display:     inline-flex;
    align-items: center;
    line-height: 1;
    font-size:   1.1em;
    /* font-family + weight are set inline from the chosen icon's font. */
    transition:  opacity var(--hdf-dur) var(--hdf-ease), max-width var(--hdf-dur-slow) var(--hdf-ease), margin var(--hdf-dur-slow) var(--hdf-ease);
}

/* "Show on hover only": icon is collapsed until the button is hovered/focused. */
.hdf-submit-btn.hdf-btn-icon-hover .hdf-btn-icon {
    opacity:   0;
    max-width: 0;
    overflow:  hidden;
}
.hdf-submit-btn.hdf-btn-icon-hover:hover .hdf-btn-icon,
.hdf-submit-btn.hdf-btn-icon-hover:focus-visible .hdf-btn-icon {
    opacity:   1;
    max-width: 2em;
}

.hdf-submit-btn {
    display:      inline-flex;
    align-items:  center;
    justify-content: center;
    gap:          10px;
    min-height:   var(--hdf-field-min-height);
    background:   var(--hdf-btn-bg);
    color:        var(--hdf-btn-color);
    font-size:    var(--hdf-btn-font-size);
    font-weight:  var(--hdf-btn-font-weight);
    font-family:  var(--hdf-field-font-family);
    letter-spacing: 0.01em;
    padding:      var(--hdf-btn-padding-v) var(--hdf-btn-padding-h);
    border:       var(--hdf-btn-border);
    border-radius: var(--hdf-btn-radius);
    box-shadow:   var(--hdf-btn-shadow);
    cursor:       pointer;
    /* NOTE: no `background` here — gradients can't tween, so the hover gradient
       is faded in via ::before instead (opacity animates smoothly). */
    transition:   box-shadow var(--hdf-dur) var(--hdf-ease), transform var(--hdf-dur) var(--hdf-ease), color var(--hdf-dur) var(--hdf-ease), opacity var(--hdf-dur) var(--hdf-ease);
    line-height:  1.5;
    position:     relative;
    overflow:     hidden;
}

/* Hover gradient sits on top of the base and fades in — smooth both ways. */
.hdf-submit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hdf-btn-hover-bg);
    opacity: 0;
    transition: opacity var(--hdf-dur) var(--hdf-ease);
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

/* Keep the label / icon / spinner above the ::before overlay. */
.hdf-submit-btn > * {
    position: relative;
    z-index: 1;
}

.hdf-submit-btn:hover {
    /* Hover text falls back to the normal button text when the Brand token is unset. */
    color:      var(--hdf-btn-color-hover, var(--hdf-btn-color));
    box-shadow: var(--hdf-btn-shadow-hover);
    transform:  translateY(-2px);
}

.hdf-submit-btn:hover::before {
    opacity: 1;
}

.hdf-submit-btn:active {
    transform:  translateY(0);
    box-shadow: var(--hdf-btn-shadow);
    transition: transform var(--hdf-dur-fast) var(--hdf-ease);
}

.hdf-submit-btn:focus-visible {
    outline: 3px solid var(--hdf-field-focus-color);
    outline-offset: 3px;
}

.hdf-submit-btn[disabled],
.hdf-submit-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    filter: grayscale(15%);
}

/* -------------------------------------------------------------------------
   Spinner (shown during submission)
   ------------------------------------------------------------------------- */
.hdf-btn-spinner {
    display: none;
    width:  18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hdf-spin 0.65s linear infinite;
}

@keyframes hdf-spin {
    to { transform: rotate(360deg); }
}

.hdf-form.hdf-submitting .hdf-btn-spinner {
    display: inline-block;
}

.hdf-form.hdf-submitting .hdf-submit-btn {
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   CAPTCHA widget — reserve space matching each provider's rendered widget
   size BEFORE its (lazy-loaded, per PERF-03) vendor script ever runs, so the
   widget popping in doesn't push the submit button / rest of the page down
   (a real, measurable CLS contributor — unlike the message banners below,
   which only ever appear after a user-initiated submit and are therefore
   excluded from the Core Web Vitals CLS window entirely).
   ------------------------------------------------------------------------- */
.hdf-captcha-wrap {
    margin-top: var(10px, --hdf-form-gap);
}
/* Default "normal" widget sizes per provider: hCaptcha renders at 78px tall,
   Turnstile at 65px; reserving the wrong one leaves a visible gap (or a
   pop-in jump) once the real widget renders. */
.hdf-captcha-wrap[data-hdf-captcha-provider="hcaptcha"] {
    min-height: 78px;
}
/* Turnstile's "Invisible"/"Non-interactive" Appearance Modes deliberately
   render nothing until a challenge is actually needed (that's the point of
   choosing them); reserving 65px unconditionally would leave a permanent
   empty gap for those modes, so only the default "Managed" (always-visible)
   mode reserves space. */
.hdf-captcha-wrap[data-hdf-captcha-provider="turnstile"]:not([data-hdf-turnstile-appearance]),
.hdf-captcha-wrap[data-hdf-captcha-provider="turnstile"][data-hdf-turnstile-appearance="always"] {
    min-height: 65px;
}

/* -------------------------------------------------------------------------
   Form-level messages (success / error banner)
   ------------------------------------------------------------------------- */
.hdf-form-message {
    display: none;
    width: 100%;
    padding: 16px 20px;
    border-radius: var(--hdf-field-radius);
    font-size: var(--hdf-field-font-size);
    font-family: var(--hdf-field-font-family);
    line-height: 1.5;
    box-sizing: border-box;
    margin-top: var(--hdf-form-gap);
    border: 1.5px solid transparent;
    font-weight: 500;
}

.hdf-form-message:not([hidden]) {
    display: block;
    animation: hdf-message-in var(--hdf-dur-slow) var(--hdf-ease-out);
}

@keyframes hdf-message-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hdf-success-message {
    background: var(--hdf-success-bg);
    color:      var(--hdf-success-color);
    border-color: var(--hdf-success-border);
}

/* Rich content inside the success message — the admin can author links,
   bold, lists and line breaks (sanitised server-side via wp_kses_post).
   Scoped so these never leak outside the message box. */
.hdf-success-message a {
    color: var(--hdf-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.hdf-success-message p {
    margin: 0 0 0.6em;
}
.hdf-success-message p:last-child {
    margin-bottom: 0;
}
.hdf-success-message ul,
.hdf-success-message ol {
    margin: 0.4em 0;
    padding-inline-start: 1.4em;
}
.hdf-success-message li {
    margin: 0.15em 0;
}
.hdf-success-message strong { font-weight: 700; }
.hdf-success-message em     { font-style: italic; }

.hdf-error-message {
    background: var(--hdf-error-banner-bg);
    color:      var(--hdf-error-banner-color);
    border-color: var(--hdf-error-banner-border);
}

/* -------------------------------------------------------------------------
   Honeypot — visually hidden, never show to real users
   ------------------------------------------------------------------------- */
.hdf-hp-field {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* =========================================================================
   v1.5 Interactive field types
   ========================================================================= */

/* -------------------------------------------------------------------------
   Rating (star) field
   Stars are rendered max→1 in DOM; flex-direction:row-reverse displays them
   1→max visually. The ~ sibling selector fills stars leftward from the
   checked input in DOM = fills stars leftward in visual order.
   ------------------------------------------------------------------------- */
.hdf-rating {
    display:         flex;
    flex-direction:  row-reverse;
    justify-content: flex-end;
    gap:             var(--hdf-rating-gap);
    position:        relative;
}

/* Visually hide radio inputs but keep them accessible (screen readers + keyboard). */
.hdf-rating-input {
    position:     absolute;
    width:        1px;
    height:       1px;
    overflow:     hidden;
    clip:         rect(0, 0, 0, 0);
    clip-path:    inset(50%);
    white-space:  nowrap;
    pointer-events: none;
}

.hdf-rating-star {
    display:     inline-flex;
    cursor:      pointer;
    color:       var(--hdf-rating-empty);
    font-size:   var(--hdf-rating-size);
    line-height: 1;
    transition:  color var(--hdf-dur) var(--hdf-ease), transform var(--hdf-dur) var(--hdf-spring), filter var(--hdf-dur-fast) var(--hdf-ease);
    user-select: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
}

.hdf-rating-star:hover {
    transform: scale(1.18);
    filter: drop-shadow(0 2px 6px rgba(245, 166, 35, 0.35));
}

.hdf-rating-star svg {
    width:  var(--hdf-rating-size);
    height: var(--hdf-rating-size);
    fill:   currentColor;
    display: block;
    pointer-events: none;
    transition: fill var(--hdf-dur-fast) var(--hdf-ease);
}

/* Selected: fill checked star and all stars after it in DOM (= before it visually) */
.hdf-rating-input:checked ~ .hdf-rating-star {
    color: var(--hdf-rating-color);
    filter: drop-shadow(0 1px 3px rgba(245, 166, 35, 0.25));
}

/* Hover: temporarily clear all, then fill from hovered star leftward visually */
.hdf-rating:hover .hdf-rating-star {
    color: var(--hdf-rating-empty);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
}
.hdf-rating:hover .hdf-rating-star:hover,
.hdf-rating:hover .hdf-rating-star:hover ~ .hdf-rating-star {
    color: var(--hdf-rating-hover-color);
    filter: drop-shadow(0 2px 6px rgba(245, 166, 35, 0.35));
}

/* Keyboard focus ring on the label when its paired radio has focus */
.hdf-rating-input:focus-visible + .hdf-rating-star {
    outline:        3px solid var(--hdf-field-focus-color);
    outline-offset: 3px;
    border-radius:  3px;
}

/* -------------------------------------------------------------------------
   Half-star mode (.hdf-rating--half)
   Each star is TWO half-width labels: the left half is the ".5" value, the
   right half the whole value (DOM: full(n) then half(n-0.5); row-reverse puts
   the half to the left of its full). Only GEOMETRY changes here; the color,
   :checked ~ fill, hover-preview, and focus rules above already act per label,
   so a half selection fills exactly the right set of halves with no extra
   colour rules. Each label clips a full-size star SVG to show one half.
   ------------------------------------------------------------------------- */
.hdf-rating--half {
    gap: 0; /* the two halves of one star must be flush; spacing added per star below */
}

.hdf-rating--half .hdf-rating-star {
    width:    calc(var(--hdf-rating-size) / 2);
    overflow: hidden;
}

/* Keep the SVG at full star width so half the label clips it, not shrinks it. */
.hdf-rating--half .hdf-rating-star svg {
    flex: 0 0 auto;
}

/* Left half of a star shows the SVG's left side; right half its right side. */
.hdf-rating--half .hdf-rating-star--half {
    justify-content: flex-start;
}
.hdf-rating--half .hdf-rating-star--full {
    justify-content:   flex-end;
    margin-inline-end: var(--hdf-rating-gap); /* space between whole stars (RTL-safe) */
}

/* A per-half zoom would scale half a star oddly; keep the colour preview only. */
.hdf-rating--half .hdf-rating-star:hover {
    transform: none;
}

/* Error state */
.hdf-field-wrap.hdf-has-error .hdf-rating {
    outline:        1.5px solid var(--hdf-field-error-color);
    outline-offset: 6px;
    border-radius:  4px;
}

/* -------------------------------------------------------------------------
   Slider field
   Layout: value badge (right-aligned header) → filled track → min/max footer.
   The filled portion is driven by --hdf-slider-percent, set by hdf-interactive.js
   (and by the VB preview) as the user drags. Prefix/suffix live on the badge.
   ------------------------------------------------------------------------- */
.hdf-slider-wrap {
    width: 100%;
}

.hdf-slider-header {
    display:         flex;
    justify-content: flex-end;
    margin-bottom:   10px;
}

.hdf-slider-value {
    display:       inline-block;
    min-width:     56px;
    max-width:     100%;
    text-align:    center;
    font-size:     13px;
    font-weight:   700;
    color:         #ffffff;
    background:    var(--hdf-slider-value-bg, var(--hdf-accent));
    padding:       5px 16px;
    border-radius: 6px;
    box-shadow:    0 3px 10px rgba(91, 106, 240, 0.35);
    letter-spacing: 0.02em;
    line-height:   1.35;
    word-break:    break-word;
}

.hdf-slider-input {
    display:    block;
    width:      100%;
    height:     8px;
    margin:     4px 0;
    cursor:     pointer;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(
        to right,
        var(--hdf-accent) 0%,
        var(--hdf-accent) var(--hdf-slider-percent, 0%),
        var(--hdf-track-empty) var(--hdf-slider-percent, 0%),
        var(--hdf-track-empty) 100%
    );
    border-radius: 6px;
    outline:    none;
    transition: background var(--hdf-dur-fast) var(--hdf-ease);
}

/* Chromium / WebKit thumb */
.hdf-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:        24px;
    height:       24px;
    border-radius: 50%;
    background:   #ffffff;
    border:       3px solid var(--hdf-accent);
    cursor:       pointer;
    box-shadow:   0 2px 8px rgba(91, 106, 240, 0.3), 0 1px 2px rgba(0, 0, 0, 0.08);
    transition:   transform var(--hdf-dur-fast) var(--hdf-ease), box-shadow var(--hdf-dur-fast) var(--hdf-ease);
}
.hdf-slider-input::-webkit-slider-thumb:hover {
    transform:  scale(1.15);
    box-shadow: 0 3px 14px rgba(91, 106, 240, 0.45), 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Firefox — track + progress + thumb */
.hdf-slider-input::-moz-range-track {
    height: 8px;
    border-radius: 6px;
    background: var(--hdf-track-empty);
}
.hdf-slider-input::-moz-range-progress {
    height: 8px;
    border-radius: 6px;
    background: var(--hdf-accent);
}
.hdf-slider-input::-moz-range-thumb {
    width:        24px;
    height:       24px;
    border-radius: 50%;
    background:   #ffffff;
    border:       3px solid var(--hdf-accent);
    cursor:       pointer;
    box-shadow:   0 2px 8px rgba(91, 106, 240, 0.3), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.hdf-slider-input:focus-visible {
    box-shadow: 0 0 0 4px rgba(91, 106, 240, 0.18);
}

.hdf-slider-footer {
    display:         flex;
    justify-content: space-between;
    margin-top:      8px;
}

.hdf-slider-min,
.hdf-slider-max {
    font-size:   11.5px;
    font-weight: 500;
    color:       var(--hdf-help-color);
    white-space: nowrap;
}

/* Error state */
.hdf-field-wrap.hdf-has-error .hdf-slider-input {
    background: #fecaca;
}

/* -------------------------------------------------------------------------
   Toggle (yes/no) field
   Row layout: [label — fills remaining space] [state text + switch pill].
   A hidden input + checkbox pattern ensures FormData always has a value.
   CSS-only switch visual state — no JS needed for the pill/thumb animation.
   ------------------------------------------------------------------------- */
.hdf-toggle-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             18px;
    min-height:      50px;
    padding:         4px 0;
}

.hdf-toggle-row > .hdf-label {
    flex:          1;
    margin-bottom: 0;
    cursor:        pointer;
}

.hdf-toggle-control {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-shrink: 0;
    margin-inline-start: auto; /* keeps the switch end-aligned even with no label */
}

.hdf-toggle-state {
    font-size:   13px;
    font-weight: 600;
    color:       var(--hdf-help-color);
    min-width:   32px;
    text-align:  end;
    letter-spacing: 0.01em;
    transition:  color var(--hdf-dur) var(--hdf-ease);
}

.hdf-toggle {
    position:   relative;
    display:    inline-block;
    flex-shrink: 0;
    cursor:     pointer;
}

.hdf-toggle-input {
    position:      absolute;
    opacity:       0;
    width:         0;
    height:        0;
    pointer-events: none;
}

.hdf-toggle-switch {
    display:       block;
    width:         50px;
    height:        28px;
    background:    #d1d5e0;
    border-radius: 14px;
    box-shadow:    inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition:    background var(--hdf-dur) var(--hdf-ease), box-shadow var(--hdf-dur) var(--hdf-ease);
    position:      relative;
}

.hdf-toggle-switch::after {
    content:       '';
    position:      absolute;
    top:           3px;
    inset-inline-start: 3px;
    width:         22px;
    height:        22px;
    background:    #ffffff;
    border-radius: 50%;
    box-shadow:    0 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.04);
    transition:    transform var(--hdf-dur-slow) var(--hdf-spring), box-shadow var(--hdf-dur) var(--hdf-ease);
}

.hdf-toggle-input:checked + .hdf-toggle-switch {
    background: var(--hdf-accent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 4px rgba(91, 106, 240, 0.1);
}
.hdf-toggle-input:checked + .hdf-toggle-switch::after {
    transform: translateX(22px);
    box-shadow: 0 2px 6px rgba(91, 106, 240, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.hdf-toggle-input:focus-visible + .hdf-toggle-switch {
    outline:        3px solid var(--hdf-field-focus-color);
    outline-offset: 3px;
}

.hdf-toggle:hover .hdf-toggle-switch {
    filter: brightness(0.94);
}

/* Error state */
.hdf-field-wrap.hdf-has-error .hdf-toggle-switch {
    outline:        1.5px solid var(--hdf-field-error-color);
    outline-offset: 4px;
}

/* =========================================================================
   Visual Builder preview only
   These classes are added by edit.jsx to the VB canvas preview. They never
   ship in the frontend HTML, so keeping them here is harmless.
   ========================================================================= */
.hdf-vb-field {
    position: relative;
    opacity:  0.92;
}

.hdf-vb-conditional-badge {
    position:       absolute;
    top:            6px;
    right:          6px;
    background:     #7c3aed;
    color:          #ffffff;
    font-size:      10px;
    font-weight:    600;
    line-height:    1;
    padding:        3px 7px;
    border-radius:  5px;
    letter-spacing: 0.03em;
    pointer-events: none;
    z-index:        2;
}

.hdf-vb-hidden-note {
    background:   #f3f4f6;
    color:        #6b7280;
    font-size:    12px;
    padding:      8px 12px;
    border-radius: 8px;
    border:       1px dashed #d1d5db;
}

.hdf-vb-duplicate-id-warning {
    background:    #fef2f2;
    color:         #b91c1c;
    font-size:     12px;
    font-weight:   600;
    line-height:   1.5;
    padding:       8px 12px;
    border-radius: 8px;
    border:        1px solid #fca5a5;
    margin-bottom: 8px;
}

.hdf-vb-dt-preview-label {
    font-size:  11px;
    color:      #8a96a8;
    margin-top: 8px;
    margin-bottom: 6px;
    font-style: italic;
}

.hdf-vb-dt-preview {
    /* .flatpickr-calendar.inline already sets position:relative — this is
       an ALWAYS-VISIBLE static block in the VB canvas, never an absolutely
       positioned popup, so it needs no top/left offset math of its own. */
    margin: 0;
}

/* =========================================================================
   File upload field
   ========================================================================= */
.hdf-file-upload {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hdf-file-upload-btn {
    align-self: flex-start;
    background: var(--hdf-upload-btn-bg);
    color: var(--hdf-btn-color);
    border: var(--hdf-btn-border);
    border-radius: var(--hdf-btn-radius);
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
}

.hdf-file-upload-btn:hover {
    background: var(--hdf-upload-btn-hover-bg);
}

.hdf-file-upload-idle {
    font-size: 12px;
    opacity: 0.7;
}

/* Drag-and-drop dropzone — an alternative to the button above (Upload Style:
   Dropzone), never rendered alongside it. The whole box is both the click
   target and the drop target. */
.hdf-file-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 20px;
    text-align: center;
    background: var(--hdf-field-bg);
    border: 1.5px dashed var(--hdf-field-border-color);
    border-radius: var(--hdf-field-radius);
    cursor: pointer;
    transition: border-color var(--hdf-dur) var(--hdf-ease), background-color var(--hdf-dur) var(--hdf-ease);
}

.hdf-file-dropzone:hover {
    border-color: var(--hdf-field-border-hover);
}

.hdf-file-dropzone:focus-visible {
    outline: none;
    box-shadow: var(--hdf-field-focus-shadow);
}

/* Active while a file is being dragged over the box — reuses the shared
   accent/focus tokens rather than a dedicated Design-tab control, matching
   how focus states elsewhere in the form already signal "this is active". */
.hdf-file-dropzone--active {
    border-color: var(--hdf-accent, var(--hdf-field-focus-color));
    background: var(--hdf-field-focus-bg);
}

/* Icon default fallback: a plain text glyph, centered via flex on the
   dropzone itself, colored/sized only via color/font-size/font-weight —
   never position/border/transform. Any geometry baked in here would leak
   straight through once an admin configures a custom Icon glyph (the exact
   bug already found and fixed on the checkbox/radio checkmark this same
   codebase uses), since Divi's Icon control only ever overrides
   content/font-family/font-weight, not geometry. */
.hdf-file-dropzone-icon::before {
    content: "\21E7";
    display: block;
    line-height: 1;
    font-style: normal;
    font-size: 28px;
    font-weight: 400;
    color: var(--hdf-field-placeholder);
}

.hdf-file-dropzone-heading {
    font-size: var(--hdf-field-font-size);
    font-family: var(--hdf-field-font-family);
    font-weight: 700;
    color: var(--hdf-label-color);
}

.hdf-file-dropzone-helper {
    font-size: var(--hdf-help-font-size);
    font-family: var(--hdf-field-font-family);
    color: var(--hdf-help-color);
}

.hdf-file-upload-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hdf-file-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: var(--hdf-field-border-width) var(--hdf-field-border-style) var(--hdf-field-border-color);
    border-radius: 4px;
    font-size: 13px;
}

.hdf-file-chip-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hdf-file-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--hdf-field-error-color);
}

.hdf-file-chip--error {
    border-color: var(--hdf-field-error-color);
    color: var(--hdf-field-error-color);
}

.hdf-file-chip--uploading {
    opacity: 0.7;
}

/* =========================================================================
   Date/Time picker field — complete custom design system

   Every visual property is driven by a CSS custom property (--hdf-dt-*),
   set inline per-field from the curated "Date/Time Picker Design" controls
   (see DateTimeField::buildDesignCssVars()) — never raw generated selectors
   per flatpickr sub-element. This intentionally replaces piecemeal overrides
   of flatpickr's own stylesheet: flatpickr's layout has hard assumptions
   (percentage-based day grid, a JS-forced inline width recomputed on every
   render, hardcoded per-element colors) that fight arbitrary CSS overrides
   in ways that are each individually fixable but collectively become
   whack-a-mole. Every rule below is written so ANY combination of variable
   values renders correctly — no combination can break the grid, hide days,
   or leave text uncentered, because the layout itself (CSS Grid throughout,
   flexbox centering, content-box sizing) no longer depends on flatpickr's
   own assumptions to begin with.

   Unset variables fall back to a value derived from the site's own brand
   colors (--hdf-field-focus-color etc.), so an untouched field still looks
   fully polished, not "default flatpickr".
   ========================================================================= */
.hdf-datetime-input {
    cursor: pointer;
}

.flatpickr-calendar {
    background: var(--hdf-dt-bg, #ffffff);
    color: var(--hdf-dt-text, #33475b);
    font-family: inherit;
    border: var(--hdf-dt-border-width, 1px) solid var(--hdf-dt-border-color, #e3e8ef);
    border-radius: var(--hdf-dt-radius, 10px);
    box-shadow: var(--hdf-dt-shadow, 0 6px 20px rgba(0, 0, 0, .10));
    padding: 12px;
    /* flatpickr's own JS force-writes an inline width on this element on
       every render, computed from the day grid's natural content size —
       content-box means our padding/border always expand the box outward
       instead of shrinking that JS-computed content area, so any padding
       or border value is safe at any size. */
    box-sizing: content-box !important;
}

/* Header: month/year row + weekday-name row */
.flatpickr-months,
.flatpickr-weekdays {
    background: var(--hdf-dt-header-bg, transparent);
}
.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
span.flatpickr-weekday,
.flatpickr-prev-month,
.flatpickr-next-month {
    color: var(--hdf-dt-header-text, inherit);
}
.flatpickr-prev-month svg path,
.flatpickr-next-month svg path {
    fill: currentColor;
}

/* The month/year <select>'s own OPEN dropdown popup is largely OS/browser
   rendered — flatpickr's default CSS gives it a transparent background
   with `color: inherit`, so its readability depends entirely on whatever
   theme color the Header Text control happens to be, breaking badly for
   light-on-dark themes. This isn't a themeable control (an options popup
   isn't part of the calendar's own visual surface) — just fixed, safe,
   always-legible colors regardless of the header's own color choice. */
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: #ffffff;
    color: #33475b;
}

/* Day grid — CSS Grid with 7 fixed tracks, never percentage math. A cell's
   own margin/gap only shrinks its rendered box within its own fixed track,
   so it can never push a cell onto the next row or overflow the container,
   unlike flatpickr's own flex-based 14.2857%-per-cell layout. */
.dayContainer {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: var(--hdf-dt-cell-gap, 2px);
    justify-items: center;
    align-items: center;
}

.flatpickr-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hdf-dt-cell-size, 39px);
    height: var(--hdf-dt-cell-size, 39px);
    max-width: none;
    line-height: normal;
    border: 2px solid transparent;
    border-radius: var(--hdf-dt-cell-radius, 999px);
    color: inherit;
    transition: background-color .12s ease, color .12s ease;
}

.flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):hover {
    background: rgba(0, 0, 0, .06);
}

.flatpickr-day.today {
    border-color: var(--hdf-dt-accent, var(--hdf-field-focus-color, #2ea3f2));
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--hdf-dt-accent, var(--hdf-field-focus-color, #2ea3f2));
    border-color: var(--hdf-dt-accent, var(--hdf-field-focus-color, #2ea3f2));
    color: #ffffff;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed {
    color: var(--hdf-dt-disabled-text, rgba(0, 0, 0, .25));
    background: transparent;
    cursor: default;
}

/* Week number column — flatpickr reuses the .flatpickr-day class here too,
   so these selectors must match/exceed its own specificity (adding `span`)
   to reliably win; it's excluded from every day-cell rule above by scope
   (.dayContainer never contains .flatpickr-weeks, a separate sibling). */
.flatpickr-weekwrapper .flatpickr-weeks {
    box-shadow: none;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
    color: var(--hdf-dt-week-text, rgba(0, 0, 0, .3));
    background: transparent;
    cursor: default;
}

/* Time inputs */
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm,
.flatpickr-time-separator {
    color: inherit;
}

/* VB canvas mock only (not the real frontend flatpickr instance): the mock's
   time row is plain <span> text, not flatpickr's real <input>/.numInputWrapper
   elements, so neither flatpickr's own CSS nor the ".flatpickr-time input"
   rule above ever matches it — without this it renders as tiny unstyled
   default text. Scoped to .hdf-vb-dt-preview only. */
.hdf-vb-dt-preview .flatpickr-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 135%;
    font-weight: 300;
}
.hdf-vb-dt-preview .flatpickr-time .flatpickr-am-pm {
    margin-left: 6px;
    font-weight: 700;
}

/* RTL — flatpickr ships NO native rtl support at all (verified directly
   against its own source: no `rtl` option anywhere in its JS, no [dir=rtl]
   selector anywhere in its CSS). This is built entirely ourselves, scoped to
   the .hdf-dt-rtl class hdf-datetime.js applies directly to the calendar
   element — not an inherited [dir="rtl"] ancestor selector, since popup mode
   appends the calendar to <body>, outside this field's own DOM subtree.
   `direction: rtl` is inherited and is enough on its own to reverse
   .flatpickr-weekdays (flex) and .dayContainer (grid) child order — only the
   prev/next arrows need an explicit swap, since they're absolutely
   positioned with literal left/right offsets that `direction` doesn't touch.

   flatpickr's own base rule doubles the class selector
   (.flatpickr-prev-month.flatpickr-prev-month) purely to buy extra
   specificity: (0,3,0) vs. a plain ".hdf-dt-rtl .flatpickr-prev-month"'s
   (0,2,0). Confirmed live (real generated markup + matched-rules panel):
   without matching that specificity, the base `right:0` (higher specificity)
   wins over our `right:auto` while our `left:0` still applies (different
   property, no conflict) — pinning BOTH left:0 AND right:0 on the SAME
   element at once. With no explicit width, that stretches the arrow span
   across the whole calendar, which is what looked like a "collapsed" icon.
   Doubling the class here matches flatpickr's own specificity so our value
   actually replaces the base one instead of merely adding to it. */
.hdf-dt-rtl {
    direction: rtl;
}
.hdf-dt-rtl .flatpickr-prev-month.flatpickr-prev-month {
    left: auto;
    right: 0;
}
.hdf-dt-rtl .flatpickr-next-month.flatpickr-next-month {
    right: auto;
    left: 0;
}
.hdf-dt-rtl .flatpickr-prev-month svg,
.hdf-dt-rtl .flatpickr-next-month svg {
    transform: scaleX(-1);
}

/* Minor mirroring polish — the year/hour/minute spinner arrows and the
   week-number column's divider line are also absolute-positioned/box-shadow
   offsets that `direction` doesn't touch on their own. */
.hdf-dt-rtl .numInputWrapper span.arrowUp,
.hdf-dt-rtl .numInputWrapper span.arrowDown {
    right: auto;
    left: 0;
}
.hdf-dt-rtl .flatpickr-weekwrapper .flatpickr-weeks {
    box-shadow: -1px 0 0 #e6e6e6;
}

/* =========================================================================
   RTL — form-wide (rest of the form, not the flatpickr calendar above).
   Most of the form flips for free just by converting the properties above to
   logical ones (margin-inline-*, border-*-*-radius, text-align: end, etc.) —
   `dir` on .hdf-form-wrap (set by FormRenderer::renderShell()) is enough on
   its own. Only the handful of properties below genuinely can't be expressed
   logically and need an explicit [dir="rtl"] override:
     - background-position with pixel offsets (no broadly-supported logical
       equivalent yet).
     - transform: translateX() — a literal geometric offset, not direction-
       aware at all, regardless of any inset-inline-* used for its resting
       position.
   ========================================================================= */
.hdf-form-wrap[dir="rtl"] .hdf-select {
    background-position: left 14px center;
    padding-right: 0;
    padding-left: 40px;
}
.hdf-form-wrap[dir="rtl"] .hdf-input.hdf-valid:not(.hdf-number-input) {
    background-position: left 14px center;
    padding-right: 0;
    padding-left: 40px;
}
.hdf-form-wrap[dir="rtl"] .hdf-toggle-input:checked + .hdf-toggle-switch::after {
    transform: translateX(-22px);
}

/* =========================================================================
   Reduced motion — honor the OS/browser preference. Keep instant state
   changes (color/border still swap) but drop movement, scaling, and easing.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .hdf-form-wrap *,
    .hdf-form-wrap *::before,
    .hdf-form-wrap *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* Cancel the transforms so nothing shifts/scales on interaction. */
    .hdf-input:focus,
    .hdf-textarea:focus,
    .hdf-select:focus,
    .hdf-submit-btn:hover,
    .hdf-submit-btn:active,
    .hdf-rating-star:hover,
    .hdf-checkbox:active,
    .hdf-radio:active,
    .hdf-slider-input::-webkit-slider-thumb:hover {
        transform: none !important;
    }
}

/* =========================================================================
   Divi VB module-picker icon styling — NOT part of the rendered form. This
   targets Divi's own "Add Module" picker UI (app-window chrome); it lives in
   this stylesheet only because it's already registered with
   enqueue_app_window:true (Divi5Adapter::registerVbAssets()), the one
   context this picker actually renders in.

   The generic chip/hover/fill MECHANISM lives in a separate, reusable file
   (divi-5/visual-builder/css/vb-picker-icons.css — copy that whole file into
   any other HappyDivi plugin as-is, see its own header for instructions).
   Everything below is JUST our own module's 6 color values — nothing else
   should ever need to change here when adding another icon.
   ========================================================================= */

.et-vb-module-picker-option[value="happydivi-form/form"],
.et-vb-module-picker-option[value="happydivi-form/form-field"],
.et-vb-module-picker-option[value="happydivi"] {
    --hdf-picker-bg: #f6f7fe;
    --hdf-picker-bg-hover: #eef0fe;
    --hdf-picker-icon-bg: #dde1fb;
    --hdf-picker-icon-bg-hover: #5b6af0;
    --hdf-picker-icon-fill: #4a56d1;
    --hdf-picker-icon-fill-hover: #ffffff;
}