/* ===== Default (light) ===== */
.curvy-header-container {
  --c-bg: #ebeef2; /* outer page background */
  --c-panel: #ffffff; /* main card & curves */

  background: var(--c-bg);
  color: var(--foreground); /* from global.css */
  position: relative;
  width: 100%;
  overflow: visible;
  border-radius: 35px;
}

/* ===== Dark (when isDark is true) ===== */
.curvy-header-container.curvy-dark {
  --c-bg: #06000b; /* outer page background */
  --c-panel: #0f0715; /* main card & curves */
}
.curvy-header-container.radius-flat {
  border-radius: 0;
}
/* bar */
.bar {
  width: 100%;
  height: 100px;
  display: flex;
}
.left-container,
.center-container,
.right-container {
  height: 100px;
  background-color: transparent;
}
.center-container {
  width: 100%;
}
.left-container {
  width: 700px;
  position: relative;
}
.right-container {
  width: 700px;
  position: relative;
}

/* curved shapes use panel color */
.left-path {
  width: 100%;
  height: 105px;
  background-color: var(--c-panel);
  border-radius: 32px 0 0;
  clip-path: polygon(0 0, 88% 0, 102% 100%, 0 100%);
}
.right-path {
  width: 100%;
  height: 105px;
  background-color: var(--c-panel);
  border-radius: 0 32px 0 0;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 96%);
}

/* decorative border images */
.right-top {
  position: absolute;
  top: -26px;
  left: 6px;
  z-index: 2;
}
.right-bottom {
  position: absolute;
  bottom: -13px;
  left: -31px;
  z-index: 10;
}
.left-top {
  position: absolute;
  top: -26px;
  right: 11px;
  z-index: 10;
}
.left-bottom {
  position: absolute;
  bottom: -14px;
  right: -29px;
  z-index: 2;
}

/* optional invert in dark if you reuse the same SVGs */
/* .curvy-header-container.curvy-dark .theme-border {
  filter: invert(1) brightness(1.2) contrast(0.95);
} */

/* main card body */
.body-container {
  background-color: var(--c-panel);
  width: 100%;
  height: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .body-container {
    padding: 1rem;
  }
}
@media (min-width: 1500px) {
  .right-top {
    position: absolute;
    top: -27px;
    left: 12px;
    z-index: 2;
  }
  .left-top {
    position: absolute;
    top: -26px;
    right: 15px;
    z-index: 10;
  }
  .right-bottom {
    position: absolute;
    bottom: -13px;
    left: -31px;
    z-index: 10;
  }
  .left-bottom {
    position: absolute;
    bottom: -14px;
    right: -33px;
    z-index: 2;
  }
}

@media (min-width: 1200px) and (max-width: 1499px) {
  .right-top {
    position: absolute;
    top: -26px;
    left: 7px;
    z-index: 2;
  }
  .left-top {
    position: absolute;
    top: -26px;
    right: 9px;
    z-index: 10;
  }
  .right-bottom {
    position: absolute;
    bottom: -13px;
    left: -30px;
    z-index: 10;
  }
  .left-bottom {
    position: absolute;
    bottom: -15px;
    right: -34px;
    z-index: 2;
  }
}