/* ============================================================
   KARAM CONTACT MODAL — FRONTEND
   ------------------------------------------------------------
   Self-contained: every brand token is read from the theme
   (--ks-*) with a hard-coded fallback, so the plugin renders
   correctly even if the WPCode style snippet is disabled.

   The modal is rendered in wp_footer — OUTSIDE .elementor —
   so the theme's Elementor-scoped input/button overrides do
   not reach it. Everything the form needs is re-declared here
   under .kscm-* scope, matching the editorial system 1:1.

   Z-index map (shared with the theme snippet):
     header 50 · newsletter FAB 9990 · contact FAB 9991 · modal 9999
   ============================================================ */

/* ─── 0. LOCAL TOKENS ───────────────────────────────────── */
.kscm-fab,
.kscm-root {
  --_slate:       var(--ks-slate, #778DAA);
  --_slate-deep:  var(--ks-slate-deep, #5C7592);
  --_slate-soft:  var(--ks-slate-soft, rgba(119, 141, 170, 0.12));
  --_cream:       var(--ks-cream, #F4ECDC);
  --_cream-warm:  var(--ks-cream-warm, #FBF6EA);
  --_gold:        var(--kscm-accent, var(--ks-gold, #B89C5E));
  --_gold-deep:   var(--ks-gold-deep, #A0854A);
  --_ink:         var(--ks-ink, #342C2C);
  --_text:        var(--ks-text, #475569);
  --_text-soft:   var(--ks-text-soft, #64748B);
  --_surface:     var(--ks-surface, #FFFFFF);
  --_border:      var(--ks-border, #E5E0D4);

  --_error:       var(--ks-error, #C0392B);
  --_error-bg:    var(--ks-error-bg, #FDF1EF);
  --_success:     var(--ks-success, #3E7C5B);
  --_success-bg:  var(--ks-success-bg, #EFF7F2);

  --_ease-out:    var(--ks-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --_ease-soft:   var(--ks-ease-soft, cubic-bezier(0.25, 0.46, 0.45, 0.94));
  --_ease-spring: var(--ks-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  --_fast:        var(--ks-fast, 180ms);
  --_base:        var(--ks-base, 320ms);
  --_slow:        var(--ks-slow, 560ms);

  --_radius-sm:   var(--ks-radius-sm, 4px);
  --_radius-md:   var(--ks-radius-md, 6px);
  --_radius-lg:   var(--ks-radius-lg, 8px);

  --_shadow-lg:   var(--ks-shadow-lg,
                    0 4px 8px rgba(52, 44, 44, 0.05),
                    0 24px 48px -12px rgba(119, 141, 170, 0.22),
                    0 0 0 1px rgba(119, 141, 170, 0.06));

  font-family: "Futura", "Cairo", sans-serif;
  box-sizing: border-box;
}

.kscm-fab *, .kscm-fab *::before, .kscm-fab *::after,
.kscm-root *, .kscm-root *::before, .kscm-root *::after {
  box-sizing: inherit;
}


/* ============================================================
   1. FLOATING ACTION BUTTON — bottom-left envelope
   Slate body / gold on hover, so it reads as a sibling of the
   gold newsletter FAB rather than a duplicate of it.
   ============================================================ */

.kscm-fab {
  position: fixed;
  bottom: var(--kscm-offset-y, 26px);
  z-index: 9991;

  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  min-width: 56px;
  padding: 0 16px;
  margin: 0;

  background-color: var(--_slate);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  cursor: pointer;

  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;

  box-shadow:
    0 6px 18px rgba(119, 141, 170, 0.38),
    0 2px 4px rgba(52, 44, 44, 0.08);

  /* hidden until JS reveals it (configurable delay) */
  opacity: 0;
  transform: translateY(20px) scale(0.92);
  pointer-events: none;
  visibility: hidden;

  transition:
    opacity          var(--_base) var(--_ease-out),
    transform        var(--_base) var(--_ease-spring),
    background-color var(--_fast) var(--_ease-out),
    box-shadow       var(--_base) var(--_ease-out),
    visibility 0s linear var(--_base);
}

.kscm-fab--left  { left:  var(--kscm-offset-x, 26px); }
.kscm-fab--right { right: var(--kscm-offset-x, 26px); }

.kscm-fab.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity          var(--_base) var(--_ease-out),
    transform        var(--_base) var(--_ease-spring),
    background-color var(--_fast) var(--_ease-out),
    box-shadow       var(--_base) var(--_ease-out),
    visibility 0s linear 0s;
}

/* Periodic gentle nudge — quieter than the newsletter FAB's
   continuous bounce so the two never compete for attention. */
.kscm-fab.is-visible:not(.is-open) {
  animation: kscm-nudge 7s var(--_ease-soft) 3s infinite;
}

@keyframes kscm-nudge {
  0%, 8%, 100% { transform: translateY(0); }
  2%           { transform: translateY(-5px); }
  5%           { transform: translateY(0); }
  6.5%         { transform: translateY(-2px); }
}

/* When another FAB (newsletter) occupies the same corner,
   JS adds .is-stacked — we simply sit above it. */
.kscm-fab.is-stacked {
  bottom: calc(var(--kscm-offset-y, 26px) + 64px);
}

/* Hover / focus — gold takeover */
.kscm-fab:hover,
.kscm-fab:focus-visible {
  background-color: var(--_gold);
  box-shadow:
    0 12px 28px rgba(184, 156, 94, 0.46),
    0 2px 6px rgba(52, 44, 44, 0.10);
  animation-play-state: paused;
  outline: none;
}

.kscm-fab:focus-visible {
  box-shadow:
    0 12px 28px rgba(184, 156, 94, 0.46),
    0 0 0 4px rgba(184, 156, 94, 0.30);
}

.kscm-fab:active {
  transform: translateY(2px) scale(0.97);
  transition-duration: 80ms;
}

/* Icon — envelope ⇄ X cross-fade/rotate when the modal opens */
.kscm-fab__icon {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}

.kscm-fab__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition:
    opacity   var(--_base) var(--_ease-out),
    transform var(--_base) var(--_ease-spring);
}

.kscm-fab__svg--close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

.kscm-fab.is-open .kscm-fab__svg--mail {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

.kscm-fab.is-open .kscm-fab__svg--close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Label — three modes (hover / always / never) */
.kscm-fab__label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-inline-start: 0;
  transition:
    max-width var(--_slow) var(--_ease-out),
    opacity   var(--_base) var(--_ease-out),
    margin    var(--_slow) var(--_ease-out);
}

.kscm-fab--label-always .kscm-fab__label,
.kscm-fab--label-hover:hover .kscm-fab__label,
.kscm-fab--label-hover:focus-visible .kscm-fab__label {
  max-width: 220px;
  opacity: 1;
  margin-inline-start: 10px;
}

.kscm-fab--label-never .kscm-fab__label {
  display: none;
}

/* Soft expanding pulse ring (toggleable in settings) */
.kscm-fab--pulse.is-visible:not(.is-open)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(119, 141, 170, 0.55);
  animation: kscm-pulse 3s var(--_ease-out) infinite;
  pointer-events: none;
}

.kscm-fab--pulse:hover::after {
  animation-play-state: paused;
}

@keyframes kscm-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(119, 141, 170, 0.45); }
  60%  { box-shadow: 0 0 0 16px rgba(119, 141, 170, 0); }
  100% { box-shadow: 0 0 0 0    rgba(119, 141, 170, 0); }
}

/* Device visibility */
@media (min-width: 768px) { .kscm-fab.kscm-hide-desktop { display: none; } }
@media (max-width: 767px) { .kscm-fab.kscm-hide-mobile  { display: none; } }


/* ============================================================
   2. MODAL — overlay + editorial letter panel
   ============================================================ */

.kscm-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.kscm-root[hidden] { display: none; }

/* Dark slate-ink veil with a whisper of blur */
.kscm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(52, 44, 44, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--_base) var(--_ease-out);
}

.kscm-root.is-open .kscm-overlay { opacity: 1; }

/* The letter */
.kscm-dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: min(86vh, 860px);
  overflow-y: auto;
  overscroll-behavior: contain;

  background: var(--_surface);
  border-radius: var(--_radius-lg);
  box-shadow: var(--_shadow-lg);
  padding: 40px 44px 38px;

  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition:
    opacity   var(--_base) var(--_ease-out),
    transform var(--_slow) var(--_ease-spring);
}

.kscm-root.is-open .kscm-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.kscm-root.is-closing .kscm-overlay { opacity: 0; }
.kscm-root.is-closing .kscm-dialog {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition:
    opacity   var(--_fast) var(--_ease-soft),
    transform var(--_fast) var(--_ease-soft);
}

/* Signature: the flowing slate→gold ribbon from the card system,
   always alive along the top edge of the letter. */
.kscm-dialog__ribbon {
  content: "";
  position: sticky;
  top: -40px; /* counter the dialog padding so it hugs the edge while scrolling */
  display: block;
  height: 3px;
  margin: -40px -44px 34px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--_slate) 20%,
    var(--_gold) 50%,
    var(--_slate) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: kscm-ribbon-flow 4s linear infinite;
  z-index: 3;
}

@keyframes kscm-ribbon-flow {
  0%   { background-position:   0% 0%; }
  100% { background-position: 200% 0%; }
}

/* Close button */
.kscm-close {
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--_text-soft);
  cursor: pointer;
  transition:
    background-color var(--_fast) var(--_ease-out),
    color            var(--_fast) var(--_ease-out),
    transform        var(--_base) var(--_ease-spring);
  z-index: 4;
}

.kscm-close svg { width: 18px; height: 18px; }

.kscm-close:hover,
.kscm-close:focus-visible {
  background-color: var(--_cream);
  color: var(--_ink);
  transform: rotate(90deg);
  outline: none;
}

.kscm-close:focus-visible {
  box-shadow: 0 0 0 3px var(--_slate-soft);
}

/* Header */
.kscm-header { margin-bottom: 26px; }

.kscm-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--_gold);
}

[dir="rtl"] .kscm-eyebrow { letter-spacing: 0.04em; }

.kscm-title {
  margin: 0 0 10px;
  font-size: clamp(24px, 4vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--_ink);
}

.kscm-subtitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--_text-soft);
  max-width: 46ch;
}

/* Header elements drift in after the panel lands */
.kscm-root.is-open .kscm-eyebrow,
.kscm-root.is-open .kscm-title,
.kscm-root.is-open .kscm-subtitle {
  animation: kscm-rise 600ms var(--_ease-out) both;
}

.kscm-root.is-open .kscm-title    { animation-delay: 70ms; }
.kscm-root.is-open .kscm-subtitle { animation-delay: 140ms; }

@keyframes kscm-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   3. THE CF7 FORM INSIDE THE MODAL
   Re-creates the theme's editorial input system under .kscm-
   scope, for both .contact-form-en and .contact-form-ar.
   ============================================================ */

/* The form's own big title duplicates the modal header — hide it. */
.kscm-body .contact-title { display: none; }

.kscm-body .wpcf7-form p { margin: 0 0 16px; }

/* Three-column row → responsive grid */
.kscm-body .contact-form-en .row,
.kscm-body .contact-form-ar .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.kscm-body .row .col p { margin: 0; }

@media (max-width: 640px) {
  .kscm-body .contact-form-en .row,
  .kscm-body .contact-form-ar .row {
    grid-template-columns: 1fr;
  }
}

/* Field wrap + the theme's centred gold focus underline */
.kscm-body .wpcf7-form-control-wrap {
  position: relative;
  display: block;
}

.kscm-body .wpcf7-form-control-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--_gold);
  transition: width var(--_base) var(--_ease-out);
  pointer-events: none;
  border-radius: 1px;
}

.kscm-body .wpcf7-form-control-wrap:focus-within::after { width: 60%; }

/* Inputs — filled cream, slate focus ring */
.kscm-body input[type="text"],
.kscm-body input[type="email"],
.kscm-body input[type="tel"],
.kscm-body input[type="url"],
.kscm-body textarea,
.kscm-body select {
  display: block;
  width: 100%;
  background-color: var(--_cream);
  border: 1px solid transparent;
  border-radius: var(--_radius-sm);
  padding: 13px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--_text);
  outline: none;
  transition:
    background-color var(--_fast) var(--_ease-out),
    border-color     var(--_fast) var(--_ease-out),
    box-shadow       var(--_base) var(--_ease-out);
}

.kscm-body textarea {
  min-height: 130px;
  resize: vertical;
}

.kscm-body input:hover,
.kscm-body textarea:hover {
  background-color: var(--_cream-warm);
}

.kscm-body input:focus,
.kscm-body textarea:focus,
.kscm-body select:focus {
  background-color: var(--_surface);
  border-color: var(--_slate);
  box-shadow: 0 0 0 4px var(--_slate-soft);
}

.kscm-body input::placeholder,
.kscm-body textarea::placeholder {
  color: var(--_text-soft);
  opacity: 0.85;
  transition: opacity var(--_fast) var(--_ease-out);
}

.kscm-body input:focus::placeholder,
.kscm-body textarea:focus::placeholder { opacity: 0.5; }

/* Stagger the fields in on open */
.kscm-root.is-open .kscm-body .wpcf7-form > * > p,
.kscm-root.is-open .kscm-body .wpcf7-form .row .col {
  animation: kscm-rise 560ms var(--_ease-out) both;
}

.kscm-root.is-open .kscm-body .row .col:nth-child(1) { animation-delay: 180ms; }
.kscm-root.is-open .kscm-body .row .col:nth-child(2) { animation-delay: 240ms; }
.kscm-root.is-open .kscm-body .row .col:nth-child(3) { animation-delay: 300ms; }
.kscm-root.is-open .kscm-body .wpcf7-form > * > p:nth-of-type(1) { animation-delay: 360ms; }
.kscm-root.is-open .kscm-body .wpcf7-form > * > p:nth-of-type(2) { animation-delay: 420ms; }
.kscm-root.is-open .kscm-body .wpcf7-form > * > p:nth-of-type(3) { animation-delay: 480ms; }

/* Submit — gold primary with the theme's shimmer sweep */
.kscm-body input[type="submit"].wpcf7-submit {
  position: relative;
  overflow: hidden;
  width: auto;
  min-width: 180px;
  background-color: var(--_gold);
  color: #FFFFFF;
  border: none;
  border-radius: var(--_radius-sm);
  padding: 14px 32px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 12px rgba(184, 156, 94, 0.22);
  transition:
    background-color var(--_fast) var(--_ease-out),
    box-shadow       var(--_base) var(--_ease-out),
    transform        var(--_fast) var(--_ease-out);
}

.kscm-body input[type="submit"].wpcf7-submit:hover {
  background-color: var(--_gold-deep);
  transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.04), 0 10px 24px rgba(184, 156, 94, 0.32);
}

.kscm-body input[type="submit"].wpcf7-submit:active {
  transform: translateY(0);
  transition-duration: 80ms;
}

.kscm-body input[type="submit"].wpcf7-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(184, 156, 94, 0.30);
}

.kscm-body form.submitting input[type="submit"].wpcf7-submit {
  opacity: 0.7;
  pointer-events: none;
}

.kscm-body .wpcf7-spinner {
  margin: 0 10px;
  background-color: var(--_cream);
}


/* ============================================================
   4. VALIDATION — inline errors, shake, CF7 response output
   ============================================================ */

.kscm-body .kscm-field-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--_error);
  animation: kscm-rise 280ms var(--_ease-out) both;
}

.kscm-body .is-invalid input,
.kscm-body .is-invalid textarea,
.kscm-body input.kscm-invalid,
.kscm-body textarea.kscm-invalid {
  background-color: var(--_error-bg);
  border-color: var(--_error);
  box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.10);
}

/* CF7's own per-field tip (server-side fallback) */
.kscm-body .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--_error);
}

/* Don't show CF7's tip and ours at the same time */
.kscm-body .kscm-field-error + .wpcf7-not-valid-tip,
.kscm-body .is-invalid .wpcf7-not-valid-tip { display: none; }

/* Shake the whole form when a submit attempt fails validation */
.kscm-body .wpcf7-form.kscm-shake {
  animation: kscm-shake 480ms var(--_ease-soft);
}

@keyframes kscm-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(3px); }
}

/* CF7 response banner.
   Defensive: CF7 prints the banner element even before submission. Hide it
   while it is empty or while the form is in its init/submitting/resetting
   states so no blank cream bar renders under the submit button. */
.kscm-body .wpcf7-response-output:empty,
.kscm-body .wpcf7-form.init       .wpcf7-response-output,
.kscm-body .wpcf7-form.submitting .wpcf7-response-output,
.kscm-body .wpcf7-form.resetting  .wpcf7-response-output {
  display: none;
}

.kscm-body .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--_border);
  border-radius: var(--_radius-sm);
  font-size: 14px;
  line-height: 1.55;
  color: var(--_text);
  background: var(--_cream-warm);
}

.kscm-body .wpcf7-form.invalid .wpcf7-response-output,
.kscm-body .wpcf7-form.failed  .wpcf7-response-output,
.kscm-body .wpcf7-form.aborted .wpcf7-response-output,
.kscm-body .wpcf7-form.spam    .wpcf7-response-output {
  border-color: var(--_error);
  background-color: var(--_error-bg);
  color: var(--_error);
}

.kscm-body .wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--_success);
  background-color: var(--_success-bg);
  color: var(--_success);
}

/* While CF7 initialises (.no-js), hide nothing — it degrades to a
   normal POST form, which still works inside the modal. */


/* ============================================================
   5. SUCCESS STATE — drawn check + headline
   ============================================================ */

.kscm-success {
  text-align: center;
  padding: 26px 8px 14px;
}

.kscm-success[hidden] { display: none; }

.kscm-success__badge {
  display: inline-grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin-bottom: 18px;
}

.kscm-success__badge svg { width: 100%; height: 100%; }

.kscm-success__ring {
  stroke: var(--_success);
  stroke-width: 2.5;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: kscm-draw 700ms var(--_ease-out) 120ms forwards;
}

.kscm-success__check {
  stroke: var(--_success);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: kscm-draw 460ms var(--_ease-out) 640ms forwards;
}

@keyframes kscm-draw { to { stroke-dashoffset: 0; } }

.kscm-success__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: var(--_ink);
  animation: kscm-rise 500ms var(--_ease-out) 300ms both;
}

.kscm-success__text {
  margin: 0 auto;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--_text-soft);
  animation: kscm-rise 500ms var(--_ease-out) 420ms both;
}


/* ============================================================
   6. RTL (Arabic)
   ============================================================ */

.kscm-root[dir="rtl"] { font-family: "Cairo", "Futura", sans-serif; }
.kscm-root[dir="rtl"] .kscm-title,
.kscm-root[dir="rtl"] .kscm-subtitle,
.kscm-root[dir="rtl"] .kscm-eyebrow { text-align: right; }
.kscm-root[dir="rtl"] .kscm-body input,
.kscm-root[dir="rtl"] .kscm-body textarea { text-align: right; }
/* inset-inline-end on .kscm-close already mirrors automatically */


/* ============================================================
   7. BODY SCROLL LOCK + SMALL SCREENS
   ============================================================ */

body.kscm-modal-open {
  overflow: hidden;
  /* JS sets --kscm-scrollbar-w so the page doesn't jump */
  padding-right: var(--kscm-scrollbar-w, 0px);
}

@media (max-width: 640px) {
  .kscm-root { padding: 0; align-items: flex-end; }

  .kscm-dialog {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--_radius-lg) var(--_radius-lg) 0 0;
    padding: 30px 22px 26px;
    transform: translateY(100%);
  }

  .kscm-dialog__ribbon {
    top: -30px;
    margin: -30px -22px 26px;
  }

  .kscm-root.is-open .kscm-dialog { transform: translateY(0); }
  .kscm-root.is-closing .kscm-dialog { transform: translateY(40%); }

  .kscm-fab {
    height: 52px;
    min-width: 52px;
    bottom: calc(var(--kscm-offset-y, 26px) - 8px);
  }

  .kscm-fab--left  { left:  16px; }
  .kscm-fab--right { right: 16px; }

  .kscm-fab.is-stacked {
    bottom: calc(var(--kscm-offset-y, 26px) + 52px);
  }
}


/* ============================================================
   8. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .kscm-fab,
  .kscm-fab *,
  .kscm-fab::after,
  .kscm-dialog,
  .kscm-dialog__ribbon,
  .kscm-overlay,
  .kscm-root.is-open .kscm-eyebrow,
  .kscm-root.is-open .kscm-title,
  .kscm-root.is-open .kscm-subtitle,
  .kscm-root.is-open .kscm-body .wpcf7-form > * > p,
  .kscm-root.is-open .kscm-body .wpcf7-form .row .col,
  .kscm-success__ring,
  .kscm-success__check,
  .kscm-success__title,
  .kscm-success__text {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .kscm-success__ring,
  .kscm-success__check { stroke-dashoffset: 0; }

  .kscm-root.is-open .kscm-body .wpcf7-form > * > p,
  .kscm-root.is-open .kscm-body .wpcf7-form .row .col,
  .kscm-root.is-open .kscm-eyebrow,
  .kscm-root.is-open .kscm-title,
  .kscm-root.is-open .kscm-subtitle { opacity: 1; transform: none; }
}