.ssp-popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin-bottom: 16px;
  position: relative;
}

#ssp-popup-title {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 700;
  font-size: 1.18rem;
  color: #262626;
  letter-spacing: 0.01em;
  padding: 0 32px 0 12px;
  user-select: none;
}

#ssp-close {
    position: absolute;
    right: 0px;
    cursor: pointer;
    font-size: 32px;
    color: #b5b5b5;
    font-weight: 700;
    background: none;
    border: none;
    z-index: 2;
    transition: color 0.19s, transform 0.22s;
    padding: 0;
}
#ssp-close:hover {
  color: #000;
  transform: scale(1.16) rotate(7deg);
}
/* Overlay popup covers the whole screen */
#ssp-popup {
  position: fixed !important;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto; /* fallback for older browsers */
  background: rgba(20,20,20,0.40);
}

.ssp-popup-inner {
  max-height: 100vh;   /* So user can scroll content on mobile */
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 48px #0a0a0a22;
  padding: 32px 18px;
  width: 96vw;
  max-width: 450px;
  transform: translateY(40px);
  transition: all 0.4s cubic-bezier(.37,1.2,.59,1) 0s;
  will-change: opacity,transform;
  margin: 28px 0;
}

/* On smaller screens, less padding */
@media (max-width: 600px) {
  .ssp-popup-inner {
    padding: 30px 20px 50px 20px;
    width: 100vw;
    max-width: 99vw;
  }
}


/* Fade-in-up when active */
#ssp-popup.ssp-visible .ssp-popup-inner {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#ssp-popup.ssp-fadeout .ssp-popup-inner {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.37s cubic-bezier(.37,1.2,.59,1);
}

.ssp-hidden { display: none !important; }


/* ----- Modern fields & button styles ----- */
#ssp-form input, #ssp-form select {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 8px 13px;
    border-radius: 11px;
    border: 1.4px solid #e2e7ed;
    font-size: 16px;
    background: #fafbfc;
    transition: border-color .22s, box-shadow .21s;
    outline: none;
    font-weight: 400;
}
#ssp-form input:focus,
#ssp-form select:focus {
  border-color: #eb2c70;
  box-shadow: 0 2px 12px rgba(235,44,112,0.07);
  background: #fff;
}
#ssp-form select {
  cursor: pointer;
  appearance: none;
  background: #fafbfc url('data:image/svg+xml;utf8,<svg fill="gray" height="18" viewBox="0 0 20 20" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M7.293 7.293a1 1 0 011.414 0L10 8.586l1.293-1.293a1 1 0 111.414 1.414l-2 2a1 1 0 01-1.414 0l-2-2a1 1 0 010-1.414z"/></svg>') no-repeat right 12px center/18px 18px;
}

#ssp-form button[type="submit"] {
  background: #fff;
  border: 2px solid #eb2c70;
  color: #eb2c70;
  font-size: 1.10rem;
  border-radius: 10px;
  padding: 12px 0;
  width: 100%;
  font-weight: 700;
  letter-spacing: .02em;
  margin-top: 4px;
  transition: background .15s, color .18s, box-shadow .2s;
  box-shadow: 0 2px 11px rgba(235,44,112,0.08);
  cursor: pointer;
}
#ssp-form button[type="submit"]:hover {
  background: #eb2c70;
  color: #fff;
  box-shadow: 0 4px 19px rgba(235,44,112,0.15);
}

.ssp-btn-spinner {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 22px;
  height: 22px;
}

.ssp-btn-spinner:after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #eb2c70;
  border-color: #eb2c70 #eb2c70 #eb2c70 transparent;
  animation: ssp-spin 0.8s linear infinite;
}

@keyframes ssp-spin {
  100% { transform: rotate(360deg); }
}

#ssp-form button[disabled] {
  opacity: 0.62;
  cursor: not-allowed;
}


/* Stripe Payment Element - match look */
#ssp-payment-element {
  margin: 22px 0 6px 0;
}
#ssp-payment-element .__PrivateStripeElement,
#ssp-payment-element .__PrivateStripeElement iframe {
  background: #fafbfc !important;
  border-radius: 10px !important;
  border: 1.4px solid #e2e7ed !important;
  margin-bottom: 14px !important;
}

/* Optional: Mobile adjustments */
@media (max-width: 480px) {
  .ssp-popup-inner {
    padding: 30px 20px 50px 20px;
    max-width: 100vw;
    border-radius: 0px;
  }
  #ssp-close { right: 9px; }
}