/* Modal Scoped Styles */
.ymca-campaign-root {
  /* Overlay */
  &.modal-overlay,
  .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition:
      background-color 0.3s ease,
      backdrop-filter 0.3s ease,
      -webkit-backdrop-filter 0.3s ease;
    padding: 16px;
  }

  &.modal-overlay.modal-open,
  .modal-overlay.modal-open {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* Panel */
  .modal-panel {
    position: relative;
    width: 100%;
    max-width: 740px;
    max-height: calc(100dvh - 32px);
    background-color: var(--color-light, #f7f7f7);
    border-radius: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    transition:
      opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  &.modal-open .modal-panel,
  .modal-open .modal-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* Close button */
  .modal-close {
    position: sticky;
    top: 12px;
    float: right;
    margin-right: 12px;
    z-index: 1;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background-color: var(--color-white, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--color-dark, #1d1d1e);
    font-size: 20px;
    line-height: 1;
  }

  .modal-close:hover {
    background-color: var(--color-primary, #ed353a);
    color: var(--color-white, #fff) !important;
    transform: rotate(90deg);
  }
}

body.modal-locked {
  overflow: hidden;
}

@media (max-width: 480px) {
  .ymca-campaign-root {
    &.modal-overlay,
    .modal-overlay {
      padding: 8px;
    }

    .modal-panel {
      max-height: calc(100dvh - 16px);
      border-radius: 12px;
    }
  }
}