/* Canonical Upload image-picker button, shared without changing Upload behavior. */
.watobe-bright-action,
.upload-primary-btn,
.start-cta-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  min-height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(134, 231, 255, 0.55);
  background: linear-gradient(180deg, #6393CE 0%, #9ED1DD 100%);
  padding: 12px 18px;
  font-size: 17px;
  font-weight: 700;
  color: #002535;
  letter-spacing: 0.01em;
  box-shadow: 0 16px 34px rgba(26, 83, 162, 0.4), 0 0 0 1px rgba(134, 228, 255, 0.22) inset;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.watobe-bright-action::before,
.upload-primary-btn::before,
.watobe-bright-action::after,
.upload-primary-btn::after,
.start-cta-btn::before,
.start-cta-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.watobe-bright-action::before,
.upload-primary-btn::before,
.start-cta-btn::before {
  inset: 1px 1px auto 1px;
  height: 48%;
  border-radius: 12px 12px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0));
}

.watobe-bright-action::after,
.upload-primary-btn::after,
.start-cta-btn::after {
  left: -22%;
  top: -32%;
  width: 34%;
  height: 165%;
  transform: rotate(16deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(184, 248, 255, 0.56), rgba(255, 255, 255, 0));
  opacity: 0;
}

.watobe-bright-action:hover:not(:disabled),
.upload-primary-btn:hover,
.watobe-bright-action:focus-visible:not(:disabled),
.upload-primary-btn:focus-visible,
.start-cta-btn:hover:not(:disabled),
.start-cta-btn:focus-visible:not(:disabled) {
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.04);
  border-color: rgba(154, 236, 255, 0.78);
  box-shadow: 0 20px 34px rgba(20, 70, 139, 0.44), 0 0 0 1px rgba(161, 233, 255, 0.35) inset;
  outline: none;
}

.watobe-bright-action:active:not(:disabled),
.upload-primary-btn:active,
.start-cta-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.995);
  box-shadow: 0 10px 18px rgba(21, 70, 140, 0.32), 0 0 0 1px rgba(156, 225, 248, 0.2) inset;
}