/**
 * Curve Overlays for Elementor
 *
 * Overlay mode preserves the original color-block behavior.
 * Extend mode draws the current container color outside its own edge
 * without moving either section.
 * Cutout mode masks the selected container itself so the real content
 * behind it can show through the curved edge.
 */

:is(.coe-enabled-yes, .coe-curve-overlay) {
  position: relative;
  isolation: isolate;
}

/*
 * Curve Layer
 *
 * Legacy elements without a layer class retain the original
 * above-content behavior through the --coe-layer-index fallback of 10.
 *
 * isolation:isolate keeps a negative-z-index curve inside the
 * container's stacking context, so Behind Content remains visible
 * above the container background but below its content.
 */
:is(.coe-enabled-yes, .coe-curve-overlay).coe-layer-above {
  --coe-layer-index: 10;
}

:is(.coe-enabled-yes, .coe-curve-overlay).coe-layer-behind {
  --coe-layer-index: -1;
}

:is(.coe-enabled-yes.coe-clip-overflow-yes, .coe-curve-overlay.coe-clip-overflow) {
  overflow: hidden;
}

/* =========================================================
 * OVERLAY MODE
 *
 * :not(.coe-mode-extend) deliberately preserves the existing
 * behavior for content saved before the Curve Method control
 * was introduced.
 * ========================================================= */

/* ---------------------------------------------------------
 * Single-edge overlays
 * --------------------------------------------------------- */

:is(.coe-enabled-yes, .coe-curve-overlay):not(.coe-mode-extend).coe-position-top.coe-slot-before::before,
:is(.coe-enabled-yes, .coe-curve-overlay):not(.coe-mode-extend).coe-position-top.coe-slot-after::after,
:is(.coe-enabled-yes, .coe-curve-overlay):not(.coe-mode-extend).coe-position-bottom.coe-slot-before::before,
:is(.coe-enabled-yes, .coe-curve-overlay):not(.coe-mode-extend).coe-position-bottom.coe-slot-after::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: var(--coe-layer-index, 10);
  display: block;
  width: var(--coe-curve-width, 110%);
  height: var(--coe-curve-depth, 80px);
  box-sizing: border-box;
  background-color: var(--coe-curve-color, #ffffff);
  pointer-events: none;
  transform: translateX(-50%);
}

/* Explicitly reset the opposite edge so switching Top/Bottom works reliably. */
:is(.coe-enabled-yes, .coe-curve-overlay):not(.coe-mode-extend).coe-position-top.coe-slot-before::before,
:is(.coe-enabled-yes, .coe-curve-overlay):not(.coe-mode-extend).coe-position-top.coe-slot-after::after {
  top: var(--coe-curve-offset, -1px);
  bottom: auto;
  border-radius:
    0 0
    calc(50% - var(--coe-curve-bias, 0%))
    calc(50% + var(--coe-curve-bias, 0%))
    /
    0 0 100% 100%;
}

:is(.coe-enabled-yes, .coe-curve-overlay):not(.coe-mode-extend).coe-position-bottom.coe-slot-before::before,
:is(.coe-enabled-yes, .coe-curve-overlay):not(.coe-mode-extend).coe-position-bottom.coe-slot-after::after {
  top: auto;
  bottom: var(--coe-curve-offset, -1px);
  border-radius:
    calc(50% + var(--coe-curve-bias, 0%))
    calc(50% - var(--coe-curve-bias, 0%))
    0 0
    /
    100% 100% 0 0;
}

:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line):not(.coe-mode-extend).coe-position-top.coe-slot-before::before,
:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line):not(.coe-mode-extend).coe-position-top.coe-slot-after::after {
  border-bottom: var(--coe-line-width, 6px) solid var(--coe-line-color, #d4af37);
}

:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line):not(.coe-mode-extend).coe-position-bottom.coe-slot-before::before,
:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line):not(.coe-mode-extend).coe-position-bottom.coe-slot-after::after {
  border-top: var(--coe-line-width, 6px) solid var(--coe-line-color, #d4af37);
}

/* ---------------------------------------------------------
 * Both-edge overlays
 *
 * ::before is reserved for the top curve.
 * ::after is reserved for the bottom curve.
 * --------------------------------------------------------- */

:is(.coe-enabled-yes, .coe-curve-overlay):not(.coe-mode-extend).coe-position-both::before,
:is(.coe-enabled-yes, .coe-curve-overlay):not(.coe-mode-extend).coe-position-both::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: var(--coe-layer-index, 10);
  display: block;
  box-sizing: border-box;
  pointer-events: none;
  transform: translateX(-50%);
}

:is(.coe-enabled-yes, .coe-curve-overlay):not(.coe-mode-extend).coe-position-both::before {
  top: var(--coe-curve-offset, -1px);
  bottom: auto;
  width: var(--coe-curve-width, 110%);
  height: var(--coe-curve-depth, 80px);
  background-color: var(--coe-curve-color, #ffffff);
  border-radius:
    0 0
    calc(50% - var(--coe-curve-bias, 0%))
    calc(50% + var(--coe-curve-bias, 0%))
    /
    0 0 100% 100%;
}

:is(.coe-enabled-yes, .coe-curve-overlay):not(.coe-mode-extend).coe-position-both::after {
  top: auto;
  bottom: var(--coe-bottom-curve-offset, var(--coe-curve-offset, -1px));
  width: var(--coe-bottom-curve-width, var(--coe-curve-width, 110%));
  height: var(--coe-bottom-curve-depth, var(--coe-curve-depth, 80px));
  background-color: var(--coe-bottom-curve-color, var(--coe-curve-color, #ffffff));
  border-radius:
    calc(50% + var(--coe-bottom-curve-bias, var(--coe-curve-bias, 0%)))
    calc(50% - var(--coe-bottom-curve-bias, var(--coe-curve-bias, 0%)))
    0 0
    /
    100% 100% 0 0;
}

:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line):not(.coe-mode-extend).coe-position-both::before {
  border-bottom: var(--coe-line-width, 6px) solid var(--coe-line-color, #d4af37);
}

:is(.coe-enabled-yes.coe-bottom-has-line-yes, .coe-curve-overlay.coe-bottom-has-line):not(.coe-mode-extend).coe-position-both::after {
  border-top: var(--coe-bottom-line-width, var(--coe-line-width, 6px)) solid var(--coe-bottom-line-color, var(--coe-line-color, #d4af37));
}

/* =========================================================
 * EXTEND CURRENT COLOR MODE
 *
 * Pure CSS renderer. No injected DOM or JavaScript is required,
 * so Elementor can preview changes live just like Overlay mode.
 *
 * Top Extend:
 *   The selected container color rises into the preceding section.
 *   The center remains the deepest point of the preceding section,
 *   so real background artwork above remains visible.
 *
 * Bottom Extend:
 *   The selected container color extends downward into the next
 *   section.
 * ========================================================= */

:is(.coe-enabled-yes, .coe-curve-overlay).coe-mode-extend {
  /*
   * Extend deliberately paints outside the container.
   * This must override the optional Clip Overflow setting.
   */
  overflow: visible !important;
  z-index: var(--coe-layer-index, 10);
}

/* ---------------------------------------------------------
 * Shared single-edge geometry
 * --------------------------------------------------------- */

:is(.coe-enabled-yes, .coe-curve-overlay).coe-mode-extend.coe-position-top.coe-slot-before::before,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-mode-extend.coe-position-top.coe-slot-after::after,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-mode-extend.coe-position-bottom.coe-slot-before::before,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-mode-extend.coe-position-bottom.coe-slot-after::after {
  content: "";
  position: absolute;
  left: 0;
  z-index: var(--coe-layer-index, 10);
  display: block;
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center top;
  pointer-events: none;
}

/* ---------------------------------------------------------
 * Single-edge TOP extension
 *
 * The radial gradient is transparent inside the ellipse and uses
 * the current curve color outside it. This creates a concave top
 * boundary while keeping the real preceding section visible.
 * --------------------------------------------------------- */

:is(.coe-enabled-yes, .coe-curve-overlay).coe-mode-extend.coe-position-top.coe-slot-before::before,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-mode-extend.coe-position-top.coe-slot-after::after {
  top: calc(0px - var(--coe-curve-depth, 80px) + var(--coe-curve-offset, -1px));
  bottom: auto;
  height: var(--coe-curve-depth, 80px);

  background-image:
    radial-gradient(
      ellipse 50% var(--coe-curve-depth, 80px) at calc(50% + var(--coe-curve-bias, 0%)) 0%,
      transparent 0 99.5%,
      var(--coe-curve-color, #ffffff) 100%
    );

  background-size: var(--coe-curve-width, 110%) 100%;
}

/*
 * Decorative top line.
 *
 * Two matching ellipses are layered:
 * - the gold ellipse uses the requested curve depth;
 * - the color ellipse is deeper by the requested line thickness.
 *
 * The exposed band between them is the decorative line.
 */
:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line).coe-mode-extend.coe-position-top.coe-slot-before::before,
:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line).coe-mode-extend.coe-position-top.coe-slot-after::after {
  height: calc(var(--coe-curve-depth, 80px) + var(--coe-line-width, 6px));

  background-image:
    radial-gradient(
      ellipse 50% calc(var(--coe-curve-depth, 80px) + var(--coe-line-width, 6px)) at calc(50% + var(--coe-curve-bias, 0%)) 0%,
      transparent 0 99.5%,
      var(--coe-curve-color, #ffffff) 100%
    ),
    radial-gradient(
      ellipse 50% var(--coe-curve-depth, 80px) at calc(50% + var(--coe-curve-bias, 0%)) 0%,
      transparent 0 99.5%,
      var(--coe-line-color, #d4af37) 100%
    );
}

/* ---------------------------------------------------------
 * Single-edge BOTTOM extension
 *
 * Here the ellipse itself is filled with the selected container
 * color. That lets the current section extend downward while the
 * area outside the curve remains the real next section.
 * --------------------------------------------------------- */

:is(.coe-enabled-yes, .coe-curve-overlay).coe-mode-extend.coe-position-bottom.coe-slot-before::before,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-mode-extend.coe-position-bottom.coe-slot-after::after {
  top: auto;
  bottom: calc(0px - var(--coe-curve-depth, 80px) + var(--coe-curve-offset, -1px));
  height: var(--coe-curve-depth, 80px);

  background-image:
    radial-gradient(
      ellipse 50% var(--coe-curve-depth, 80px) at calc(50% + var(--coe-curve-bias, 0%)) 0%,
      var(--coe-curve-color, #ffffff) 0 99.5%,
      transparent 100%
    );

  background-size: var(--coe-curve-width, 110%) 100%;
}

/* Decorative bottom line. */
:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line).coe-mode-extend.coe-position-bottom.coe-slot-before::before,
:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line).coe-mode-extend.coe-position-bottom.coe-slot-after::after {
  height: calc(var(--coe-curve-depth, 80px) + var(--coe-line-width, 6px));

  background-image:
    radial-gradient(
      ellipse 50% var(--coe-curve-depth, 80px) at calc(50% + var(--coe-curve-bias, 0%)) 0%,
      var(--coe-curve-color, #ffffff) 0 99.5%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 50% calc(var(--coe-curve-depth, 80px) + var(--coe-line-width, 6px)) at calc(50% + var(--coe-curve-bias, 0%)) 0%,
      var(--coe-line-color, #d4af37) 0 99.5%,
      transparent 100%
    );
}

/* ---------------------------------------------------------
 * BOTH edges
 *
 * ::before = top
 * ::after  = bottom
 * --------------------------------------------------------- */

:is(.coe-enabled-yes, .coe-curve-overlay).coe-mode-extend.coe-position-both::before,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-mode-extend.coe-position-both::after {
  content: "";
  position: absolute;
  left: 0;
  z-index: var(--coe-layer-index, 10);
  display: block;
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center top;
  pointer-events: none;
}

/* Both-mode top curve. */
:is(.coe-enabled-yes, .coe-curve-overlay).coe-mode-extend.coe-position-both::before {
  top: calc(0px - var(--coe-curve-depth, 80px) + var(--coe-curve-offset, -1px));
  bottom: auto;
  height: var(--coe-curve-depth, 80px);

  background-image:
    radial-gradient(
      ellipse 50% var(--coe-curve-depth, 80px) at calc(50% + var(--coe-curve-bias, 0%)) 0%,
      transparent 0 99.5%,
      var(--coe-curve-color, #ffffff) 100%
    );

  background-size: var(--coe-curve-width, 110%) 100%;
}

:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line).coe-mode-extend.coe-position-both::before {
  height: calc(var(--coe-curve-depth, 80px) + var(--coe-line-width, 6px));

  background-image:
    radial-gradient(
      ellipse 50% calc(var(--coe-curve-depth, 80px) + var(--coe-line-width, 6px)) at calc(50% + var(--coe-curve-bias, 0%)) 0%,
      transparent 0 99.5%,
      var(--coe-curve-color, #ffffff) 100%
    ),
    radial-gradient(
      ellipse 50% var(--coe-curve-depth, 80px) at calc(50% + var(--coe-curve-bias, 0%)) 0%,
      transparent 0 99.5%,
      var(--coe-line-color, #d4af37) 100%
    );
}

/* Both-mode bottom curve uses the independent bottom controls. */
:is(.coe-enabled-yes, .coe-curve-overlay).coe-mode-extend.coe-position-both::after {
  top: auto;
  bottom: calc(
    0px
    - var(--coe-bottom-curve-depth, var(--coe-curve-depth, 80px))
    + var(--coe-bottom-curve-offset, var(--coe-curve-offset, -1px))
  );

  height: var(--coe-bottom-curve-depth, var(--coe-curve-depth, 80px));

  background-image:
    radial-gradient(
      ellipse 50% var(--coe-bottom-curve-depth, var(--coe-curve-depth, 80px)) at calc(50% + var(--coe-bottom-curve-bias, var(--coe-curve-bias, 0%))) 0%,
      var(--coe-bottom-curve-color, var(--coe-curve-color, #ffffff)) 0 99.5%,
      transparent 100%
    );

  background-size:
    var(--coe-bottom-curve-width, var(--coe-curve-width, 110%)) 100%;
}

:is(.coe-enabled-yes.coe-bottom-has-line-yes, .coe-curve-overlay.coe-bottom-has-line).coe-mode-extend.coe-position-both::after {
  height: calc(
    var(--coe-bottom-curve-depth, var(--coe-curve-depth, 80px))
    + var(--coe-bottom-line-width, var(--coe-line-width, 6px))
  );

  background-image:
    radial-gradient(
      ellipse 50% var(--coe-bottom-curve-depth, var(--coe-curve-depth, 80px)) at calc(50% + var(--coe-bottom-curve-bias, var(--coe-curve-bias, 0%))) 0%,
      var(--coe-bottom-curve-color, var(--coe-curve-color, #ffffff)) 0 99.5%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 50% calc(
        var(--coe-bottom-curve-depth, var(--coe-curve-depth, 80px))
        + var(--coe-bottom-line-width, var(--coe-line-width, 6px))
      ) at calc(50% + var(--coe-bottom-curve-bias, var(--coe-curve-bias, 0%))) 0%,
      var(--coe-bottom-line-color, var(--coe-line-color, #d4af37)) 0 99.5%,
      transparent 100%
    );
}


/* =========================================================
 * BIDIRECTIONAL BEND
 *
 * Opt-in renderer. Existing curve rendering remains untouched
 * unless .coe-bidirectional-yes is present.
 *
 * Curve Bend:
 *   +100% = U / center down
 *      0% = flat
 *   -100% = ∩ / center up
 * ========================================================= */

:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes.coe-position-top.coe-slot-before::before,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes.coe-position-top.coe-slot-after::after,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes.coe-position-bottom.coe-slot-before::before,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes.coe-position-bottom.coe-slot-after::after,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes.coe-position-both::before,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes.coe-position-both::after {
  content: "";
  position: absolute;
  left: 0;
  z-index: var(--coe-layer-index, 10);
  display: block;
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  background-repeat: no-repeat, no-repeat;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  transform: none;
}

/* Overlay: top. Positive = U; negative = ∩. */
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes:not(.coe-mode-extend).coe-position-top.coe-slot-before::before,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes:not(.coe-mode-extend).coe-position-top.coe-slot-after::after,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes:not(.coe-mode-extend).coe-position-both::before {
  --coe-bend-u: max(var(--coe-curve-bend, 0%), 0%);
  --coe-bend-n: max(calc(0% - var(--coe-curve-bend, 0%)), 0%);
  top: var(--coe-curve-offset, -1px);
  bottom: auto;
  height: var(--coe-curve-depth, 80px);
  background-image:
    radial-gradient(ellipse 50% 100% at calc(50% + var(--coe-curve-bias, 0%)) 0%, var(--coe-curve-color, #ffffff) 0 99.5%, transparent 100%),
    radial-gradient(ellipse 50% 100% at calc(50% + var(--coe-curve-bias, 0%)) 100%, transparent 0 99.5%, var(--coe-curve-color, #ffffff) 100%);
  background-position: center top, center top;
  background-size:
    var(--coe-curve-width, 110%) var(--coe-bend-u),
    var(--coe-curve-width, 110%) var(--coe-bend-n);
  filter: none;
}

:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line).coe-bidirectional-yes:not(.coe-mode-extend).coe-position-top.coe-slot-before::before,
:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line).coe-bidirectional-yes:not(.coe-mode-extend).coe-position-top.coe-slot-after::after,
:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line).coe-bidirectional-yes:not(.coe-mode-extend).coe-position-both::before {
  filter: drop-shadow(0 var(--coe-line-width, 6px) 0 var(--coe-line-color, #d4af37));
}

/* Overlay: bottom. Positive = U; negative = ∩. */
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes:not(.coe-mode-extend).coe-position-bottom.coe-slot-before::before,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes:not(.coe-mode-extend).coe-position-bottom.coe-slot-after::after {
  --coe-bend-u: max(var(--coe-curve-bend, 0%), 0%);
  --coe-bend-n: max(calc(0% - var(--coe-curve-bend, 0%)), 0%);
  top: auto;
  bottom: var(--coe-curve-offset, -1px);
  height: var(--coe-curve-depth, 80px);
  background-image:
    radial-gradient(ellipse 50% 100% at calc(50% + var(--coe-curve-bias, 0%)) 0%, transparent 0 99.5%, var(--coe-curve-color, #ffffff) 100%),
    radial-gradient(ellipse 50% 100% at calc(50% + var(--coe-curve-bias, 0%)) 100%, var(--coe-curve-color, #ffffff) 0 99.5%, transparent 100%);
  background-position: center bottom, center bottom;
  background-size:
    var(--coe-curve-width, 110%) var(--coe-bend-u),
    var(--coe-curve-width, 110%) var(--coe-bend-n);
  filter: none;
}

:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line).coe-bidirectional-yes:not(.coe-mode-extend).coe-position-bottom.coe-slot-before::before,
:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line).coe-bidirectional-yes:not(.coe-mode-extend).coe-position-bottom.coe-slot-after::after {
  filter: drop-shadow(0 calc(0px - var(--coe-line-width, 6px)) 0 var(--coe-line-color, #d4af37));
}

/* Overlay: both-mode bottom uses independent controls. */
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes:not(.coe-mode-extend).coe-position-both::after {
  --coe-bottom-bend-u: max(var(--coe-bottom-curve-bend, var(--coe-curve-bend, 0%)), 0%);
  --coe-bottom-bend-n: max(calc(0% - var(--coe-bottom-curve-bend, var(--coe-curve-bend, 0%))), 0%);
  top: auto;
  bottom: var(--coe-bottom-curve-offset, var(--coe-curve-offset, -1px));
  height: var(--coe-bottom-curve-depth, var(--coe-curve-depth, 80px));
  background-image:
    radial-gradient(ellipse 50% 100% at calc(50% + var(--coe-bottom-curve-bias, var(--coe-curve-bias, 0%))) 0%, transparent 0 99.5%, var(--coe-bottom-curve-color, var(--coe-curve-color, #ffffff)) 100%),
    radial-gradient(ellipse 50% 100% at calc(50% + var(--coe-bottom-curve-bias, var(--coe-curve-bias, 0%))) 100%, var(--coe-bottom-curve-color, var(--coe-curve-color, #ffffff)) 0 99.5%, transparent 100%);
  background-position: center bottom, center bottom;
  background-size:
    var(--coe-bottom-curve-width, var(--coe-curve-width, 110%)) var(--coe-bottom-bend-u),
    var(--coe-bottom-curve-width, var(--coe-curve-width, 110%)) var(--coe-bottom-bend-n);
  filter: none;
}

:is(.coe-enabled-yes.coe-bottom-has-line-yes, .coe-curve-overlay.coe-bottom-has-line).coe-bidirectional-yes:not(.coe-mode-extend).coe-position-both::after {
  filter: drop-shadow(0 calc(0px - var(--coe-bottom-line-width, var(--coe-line-width, 6px))) 0 var(--coe-bottom-line-color, var(--coe-line-color, #d4af37)));
}

/* Extend: top. Positive = U; negative = ∩. */
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes.coe-mode-extend.coe-position-top.coe-slot-before::before,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes.coe-mode-extend.coe-position-top.coe-slot-after::after,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes.coe-mode-extend.coe-position-both::before {
  --coe-bend-u: max(var(--coe-curve-bend, 0%), 0%);
  --coe-bend-n: max(calc(0% - var(--coe-curve-bend, 0%)), 0%);
  top: calc(0px - var(--coe-curve-depth, 80px) + var(--coe-curve-offset, -1px));
  bottom: auto;
  height: var(--coe-curve-depth, 80px);
  background-image:
    radial-gradient(ellipse 50% 100% at calc(50% + var(--coe-curve-bias, 0%)) 0%, transparent 0 99.5%, var(--coe-curve-color, #ffffff) 100%),
    radial-gradient(ellipse 50% 100% at calc(50% + var(--coe-curve-bias, 0%)) 100%, var(--coe-curve-color, #ffffff) 0 99.5%, transparent 100%);
  background-position: center bottom, center bottom;
  background-size:
    var(--coe-curve-width, 110%) var(--coe-bend-u),
    var(--coe-curve-width, 110%) var(--coe-bend-n);
  filter: none;
}

:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line).coe-bidirectional-yes.coe-mode-extend.coe-position-top.coe-slot-before::before,
:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line).coe-bidirectional-yes.coe-mode-extend.coe-position-top.coe-slot-after::after,
:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line).coe-bidirectional-yes.coe-mode-extend.coe-position-both::before {
  filter: drop-shadow(0 calc(0px - var(--coe-line-width, 6px)) 0 var(--coe-line-color, #d4af37));
}

/* Extend: bottom. Positive = U; negative = ∩. */
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes.coe-mode-extend.coe-position-bottom.coe-slot-before::before,
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes.coe-mode-extend.coe-position-bottom.coe-slot-after::after {
  --coe-bend-u: max(var(--coe-curve-bend, 0%), 0%);
  --coe-bend-n: max(calc(0% - var(--coe-curve-bend, 0%)), 0%);
  top: auto;
  bottom: calc(0px - var(--coe-curve-depth, 80px) + var(--coe-curve-offset, -1px));
  height: var(--coe-curve-depth, 80px);
  background-image:
    radial-gradient(ellipse 50% 100% at calc(50% + var(--coe-curve-bias, 0%)) 0%, var(--coe-curve-color, #ffffff) 0 99.5%, transparent 100%),
    radial-gradient(ellipse 50% 100% at calc(50% + var(--coe-curve-bias, 0%)) 100%, transparent 0 99.5%, var(--coe-curve-color, #ffffff) 100%);
  background-position: center top, center top;
  background-size:
    var(--coe-curve-width, 110%) var(--coe-bend-u),
    var(--coe-curve-width, 110%) var(--coe-bend-n);
  filter: none;
}

:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line).coe-bidirectional-yes.coe-mode-extend.coe-position-bottom.coe-slot-before::before,
:is(.coe-enabled-yes.coe-has-line-yes, .coe-curve-overlay.coe-has-line).coe-bidirectional-yes.coe-mode-extend.coe-position-bottom.coe-slot-after::after {
  filter: drop-shadow(0 var(--coe-line-width, 6px) 0 var(--coe-line-color, #d4af37));
}

/* Extend: both-mode bottom uses independent controls. */
:is(.coe-enabled-yes, .coe-curve-overlay).coe-bidirectional-yes.coe-mode-extend.coe-position-both::after {
  --coe-bottom-bend-u: max(var(--coe-bottom-curve-bend, var(--coe-curve-bend, 0%)), 0%);
  --coe-bottom-bend-n: max(calc(0% - var(--coe-bottom-curve-bend, var(--coe-curve-bend, 0%))), 0%);
  top: auto;
  bottom: calc(0px - var(--coe-bottom-curve-depth, var(--coe-curve-depth, 80px)) + var(--coe-bottom-curve-offset, var(--coe-curve-offset, -1px)));
  height: var(--coe-bottom-curve-depth, var(--coe-curve-depth, 80px));
  background-image:
    radial-gradient(ellipse 50% 100% at calc(50% + var(--coe-bottom-curve-bias, var(--coe-curve-bias, 0%))) 0%, var(--coe-bottom-curve-color, var(--coe-curve-color, #ffffff)) 0 99.5%, transparent 100%),
    radial-gradient(ellipse 50% 100% at calc(50% + var(--coe-bottom-curve-bias, var(--coe-curve-bias, 0%))) 100%, transparent 0 99.5%, var(--coe-bottom-curve-color, var(--coe-curve-color, #ffffff)) 100%);
  background-position: center top, center top;
  background-size:
    var(--coe-bottom-curve-width, var(--coe-curve-width, 110%)) var(--coe-bottom-bend-u),
    var(--coe-bottom-curve-width, var(--coe-curve-width, 110%)) var(--coe-bottom-bend-n);
  filter: none;
}

:is(.coe-enabled-yes.coe-bottom-has-line-yes, .coe-curve-overlay.coe-bottom-has-line).coe-bidirectional-yes.coe-mode-extend.coe-position-both::after {
  filter: drop-shadow(0 var(--coe-bottom-line-width, var(--coe-line-width, 6px)) 0 var(--coe-bottom-line-color, var(--coe-line-color, #d4af37)));
}