/* Clone-only rules (not from the live site). Keep this file small; every rule is explained. */

/* Elementor popups are rendered into a hidden store until opened (components/Tree.tsx); `hidden` already hides it,
   this guards against any site rule that sets display on its children. */
[data-ff-popup-store] { display: none !important; }

/* ---- Form states: live rules, verbatim. They only apply after a submit, so the used-CSS crawl (which never submits
   anything) could not collect them. Sources: elementor/assets/css/frontend.min.css, elementor-pro/assets/css/
   widget-form.min.css, jeg-elementor-kit/assets/css/elements/main.css. ---- */
.elementor-error .elementor-field{border-color:#d9534f}
.elementor-error .help-inline{color:#d9534f;font-size:.9em}
.elementor-message{font-size:1em;line-height:1;margin:10px 0}
.elementor-message:before{content:"\e90e";display:inline-block;font-family:eicons;font-style:normal;font-weight:400;margin-inline-end:5px;vertical-align:middle}
.elementor-message.elementor-message-danger{color:#d9534f}
.elementor-message.elementor-message-danger:before{content:"\e87f"}
.elementor-message.form-message-success{color:#5cb85c}
.elementor-button .elementor-form-spinner{order:3}
.elementor-message-svg:before{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMSIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDE0IDExIj48cGF0aCBmaWxsPSIjMDA4YTIwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljc1IDguMTUgMS42IDUgLjU1IDYuMDVsNC4yIDQuMiA5LTlMMTIuNy4yeiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");background-position:50%;background-repeat:no-repeat;content:"";height:1em;width:1em}
.jeg-elementor-kit.jkit-mailchimp .jkit-mailchimp-message.success{display:block;color:var(--jkit-success-border-color);background-color:var(--jkit-success-bg-color);border:var(--jkit-success-border-color)}

/* ---- ENHANCEMENTS.md E-1: visible sending spinner. Elementor's spinner is a Font Awesome icon (fa-spinner), but the
   live site doesn't load Font Awesome, so it renders nothing; draw it as a ring in the button's text colour. The Jeg
   Kit newsletter has no loader on the live site; its button gets the same ring while sending. ---- */
.elementor-form-spinner .fa-spinner,
.jkit-mailchimp-waiting .jkit-mailchimp-submit::after {
  display: inline-block; width: 1em; height: 1em; box-sizing: border-box; vertical-align: -0.15em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ff-spin 0.7s linear infinite;
}
.jkit-mailchimp-waiting .jkit-mailchimp-submit::after { content: ""; margin-inline-start: 8px; }
.jkit-mailchimp-waiting .jkit-mailchimp-submit, .elementor-form-waiting .elementor-button { cursor: wait; }
@keyframes ff-spin { to { transform: rotate(360deg); } }

/* Spam honeypot fields (components/forms/*): never visible. */
.ff-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

/* ---- ENHANCEMENTS.md E-4: phone fields with a country dial-code picker (components/forms/PhoneField.tsx). The code box
   carries the field's own Elementor classes, so it gets the same border, background, radius, size and typography as
   the inputs; a transparent native <select> sits on top of the short "GB +44" label for keyboard/screen-reader use. ---- */
.ff-phone { display: flex; gap: 8px; width: 100%; align-items: stretch; }
.ff-phone .ff-phone__code.elementor-field-textual { position: relative; flex: 0 0 auto; width: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.ff-phone__code::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; }
.ff-phone__select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.ff-phone__code:focus-within { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); outline: 2px solid #009241; outline-offset: 1px; }
.ff-phone > input[type="tel"] { flex: 1 1 auto; min-width: 0; }
/* Error state on both boxes (the page sheets set the field border with higher specificity). */
.elementor-error .ff-phone .elementor-field.elementor-field-textual { border-color: #d9534f !important; }

/* ---- ENHANCEMENTS.md E-5: Elementor's error-message icon is an `eicons` font glyph, but the live site never loads the
   eicons font, so it shows as an empty box. Hidden; the message text is unchanged. ---- */
.elementor-message.elementor-message-danger:before { content: none; }