/**
 * WebWynk Stripe Pay — Frontend Payment Form CSS
 * Brand Colors: #001c64 (Navy) | #0070e0 (Blue Highlight) | Black & White
 * Typography: 'DM Sans', sans-serif
 * Standards: Mobile-First, Apple HIG Touch Targets (44px min), Safe Area Insets
 */

/* ─── CSS Variables ──────────────────────────────────────────────────────── */
:root {
  --wwsp-navy:          #001c64;
  --wwsp-navy-dark:     #001340;
  --wwsp-blue:          #0070e0;
  --wwsp-blue-dark:     #0058b8;
  --wwsp-blue-light:    #eef5fc;
  --wwsp-white:         #ffffff;
  --wwsp-surface:       #ffffff;
  --wwsp-surface-subtle:#f8fafc;
  --wwsp-text:          #0f172a;
  --wwsp-text-muted:    #64748b;
  --wwsp-border:        #e2e8f0;
  --wwsp-border-focus:  #0070e0;
  --wwsp-success:       #12b76a;
  --wwsp-success-bg:    #ecfdf5;
  --wwsp-danger:        #ef4444;
  --wwsp-danger-bg:     #fef2f2;
  --wwsp-warning:       #f59e0b;
  --wwsp-warning-bg:    #fffbeb;

  --wwsp-radius-sm:     8px;
  --wwsp-radius-md:     12px;
  --wwsp-radius-lg:     20px;
  --wwsp-radius-pill:   9999px;

  --wwsp-shadow-card:   0 10px 30px -5px rgba(0, 28, 100, 0.08), 0 20px 40px -15px rgba(0, 112, 224, 0.06);
  --wwsp-shadow-input:  0 1px 2px rgba(0, 0, 0, 0.05);
  --wwsp-shadow-focus:  0 0 0 3px rgba(0, 112, 224, 0.18);

  --wwsp-font:          'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --wwsp-transition:    all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Base Scoped Reset ─────────────────────────────────────────────────── */
#wwsp-payment-page,
#wwsp-payment-page * {
  box-sizing: border-box !important;
  font-family: var(--wwsp-font);
  -webkit-tap-highlight-color: transparent;
}

#wwsp-payment-page {
  width: 100%;
  max-width: 510px;
  margin: 16px auto;
  padding: 0 14px;
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}

/* ─── Card Container ─────────────────────────────────────────────────────── */
#wwsp-form-card,
.wwsp-form-card {
  background: var(--wwsp-surface);
  border: 1px solid var(--wwsp-border);
  border-radius: var(--wwsp-radius-lg);
  box-shadow: var(--wwsp-shadow-card);
  overflow: hidden;
  position: relative;
  transition: var(--wwsp-transition);
}

/* Dark Theme Variant */
.wwsp-form-card--dark {
  --wwsp-surface: #0b1329;
  --wwsp-surface-subtle: #111e3e;
  --wwsp-text: #f8fafc;
  --wwsp-text-muted: #94a3b8;
  --wwsp-border: #1e293b;
  background: var(--wwsp-surface);
  color: var(--wwsp-text);
  border-color: var(--wwsp-border);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
}

/* ─── Header ────────────────────────────────────────────────────────────── */
#wwsp-form-header,
.wwsp-form-header {
  background: linear-gradient(135deg, #001c64 0%, #003282 50%, #0070e0 100%);
  padding: 16px 20px;
  color: #ffffff;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.wwsp-form-header__content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.wwsp-form-header__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wwsp-form-header__titles {
  flex: 1;
  min-width: 0;
}

.wwsp-form-header-title {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem) !important;
  font-weight: 700 !important;
  margin: 0 0 3px !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
}

.wwsp-form-header-subtitle {
  font-size: clamp(0.78rem, 1.8vw, 0.85rem) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

/* ─── Test Mode Banner ───────────────────────────────────────────────────── */
#wwsp-test-mode-bar,
.wwsp-test-mode-bar {
  background: #fffbeb !important;
  border-bottom: 1px solid #fef3c7 !important;
  color: #92400e !important;
  padding: 10px 20px !important;
  font-size: 12.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.wwsp-test-mode-bar code {
  background: rgba(0, 0, 0, 0.06) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-family: monospace !important;
  color: #78350f !important;
}

/* ─── Form Body ─────────────────────────────────────────────────────────── */
#wwsp-form-body,
.wwsp-form-body {
  padding: 20px 22px;
}

@media (max-width: 480px) {
  #wwsp-form-body {
    padding: 16px 14px;
  }
}

/* ─── Amount & Currency Layout ───────────────────────────────────────────── */
#wwsp-amount-wrapper,
.wwsp-amount-wrapper {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  align-items: flex-start;
}

@media (max-width: 480px) {
  #wwsp-amount-wrapper {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .wwsp-amount-group {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .wwsp-currency-group {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
}

.wwsp-amount-group {
  flex: 1 1 65%;
  width: 100%;
}

.wwsp-currency-group {
  flex: 0 0 35%;
  min-width: 130px;
}

/* ─── Form Controls ──────────────────────────────────────────────────────── */
.wwsp-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wwsp-form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--wwsp-text);
  margin-bottom: 2px;
}

.wwsp-required-star {
  color: var(--wwsp-danger);
  margin-left: 2px;
}

/* ─── Amount Field (Flex Container with dynamic prefix) ──────────────────── */
.wwsp-amount-field {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 46px !important;
  background: var(--wwsp-surface) !important;
  border: 1.5px solid var(--wwsp-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--wwsp-shadow-input) !important;
  transition: var(--wwsp-transition) !important;
  overflow: hidden !important;
}

.wwsp-amount-field:focus-within {
  border-color: var(--wwsp-border-focus) !important;
  box-shadow: var(--wwsp-shadow-focus) !important;
}

.wwsp-form-card--dark .wwsp-amount-field {
  background: var(--wwsp-surface-subtle) !important;
  border-color: var(--wwsp-border) !important;
}

.wwsp-amount-symbol {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px 0 14px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--wwsp-navy) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  user-select: none !important;
  line-height: 1 !important;
}

.wwsp-form-card--dark .wwsp-amount-symbol {
  color: var(--wwsp-blue) !important;
}

.wwsp-amount-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 8px 12px 8px 4px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--wwsp-text) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -moz-appearance: textfield !important;
}

.wwsp-amount-input::-webkit-outer-spin-button,
.wwsp-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.wwsp-amount-input:focus {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.wwsp-select-wrapper {
  position: relative;
  width: 100%;
}

.wwsp-form-select {
  width: 100% !important;
  height: 46px !important;
  padding: 8px 32px 8px 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--wwsp-text) !important;
  background: var(--wwsp-surface) !important;
  border: 1.5px solid var(--wwsp-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--wwsp-shadow-input) !important;
  outline: none !important;
  cursor: pointer !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  transition: var(--wwsp-transition) !important;
}

.wwsp-form-select:focus {
  border-color: var(--wwsp-border-focus) !important;
  box-shadow: var(--wwsp-shadow-focus) !important;
}

.wwsp-form-error {
  font-size: 12px;
  color: var(--wwsp-danger);
  margin-top: 3px;
}

/* ─── Customer Row (100% Full Width Stack on All Devices) ────────────────── */
.wwsp-customer-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  margin-bottom: 14px !important;
}

.wwsp-name-group,
.wwsp-email-group {
  width: 100% !important;
  min-width: 100% !important;
  margin-bottom: 0 !important;
}

.wwsp-name-field-wrap,
.wwsp-email-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100% !important;
}

.wwsp-field-icon {
  position: absolute;
  left: 14px;
  font-size: 15px;
  color: var(--wwsp-text-muted);
  pointer-events: none;
  z-index: 2;
  line-height: 1;
}

.wwsp-name-input,
.wwsp-email-input {
  width: 100% !important;
  height: 46px !important;
  padding: 8px 14px 8px 38px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--wwsp-text) !important;
  background: var(--wwsp-surface) !important;
  border: 1.5px solid var(--wwsp-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--wwsp-shadow-input) !important;
  outline: none !important;
  transition: var(--wwsp-transition) !important;
}

.wwsp-name-input:focus,
.wwsp-email-input:focus {
  border-color: var(--wwsp-border-focus) !important;
  box-shadow: var(--wwsp-shadow-focus) !important;
}

.wwsp-form-card--dark .wwsp-name-input,
.wwsp-form-card--dark .wwsp-email-input {
  background: var(--wwsp-surface-subtle) !important;
  border-color: var(--wwsp-border) !important;
  color: var(--wwsp-text) !important;
}

/* ─── Quick Amount Buttons ───────────────────────────────────────────────── */
.wwsp-quick-amounts-section {
  margin-bottom: 14px;
}

.wwsp-quick-amounts-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--wwsp-text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wwsp-quick-amounts-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

#wwsp-payment-page button.wwsp-quick-btn,
.wwsp-quick-btn {
  width: 100% !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 8px 12px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  outline: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  text-decoration: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#wwsp-payment-page button.wwsp-quick-btn:hover,
.wwsp-quick-btn:hover {
  background: #eff6ff !important;
  border-color: #0070e0 !important;
  color: #0070e0 !important;
  transform: translateY(-1px) !important;
}

#wwsp-payment-page button.wwsp-quick-btn--active,
.wwsp-quick-btn--active {
  background: #0070e0 !important;
  border-color: #0070e0 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 112, 224, 0.3) !important;
  font-weight: 700 !important;
  transform: none !important;
}

.wwsp-form-card--dark #wwsp-payment-page button.wwsp-quick-btn,
.wwsp-form-card--dark .wwsp-quick-btn {
  background: #111e3e !important;
  border-color: #1e293b !important;
  color: #f8fafc !important;
}

.wwsp-form-card--dark #wwsp-payment-page button.wwsp-quick-btn--active,
.wwsp-form-card--dark .wwsp-quick-btn--active {
  background: #0070e0 !important;
  border-color: #0070e0 !important;
  color: #ffffff !important;
}

/* ─── Divider ────────────────────────────────────────────────────────────── */
.wwsp-divider {
  position: relative;
  text-align: center;
  margin: 22px 0 20px;
}

.wwsp-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--wwsp-border);
  z-index: 1;
}

.wwsp-divider__text {
  position: relative;
  background: var(--wwsp-surface);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wwsp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 2;
}

/* ─── Stripe Elements Containers ─────────────────────────────────────────── */
.wwsp-element-mount {
  margin-bottom: 18px;
  min-height: 48px;
}

.wwsp-address-section {
  margin-bottom: 18px;
}

/* Skeleton Loading while Stripe Elements Mount */
.wwsp-element-skeleton {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wwsp-skeleton-line {
  height: 44px;
  border-radius: var(--wwsp-radius-md);
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: wwspSkeletonLoading 1.5s infinite;
}

.wwsp-skeleton-line--short {
  width: 60%;
  height: 38px;
}

@keyframes wwspSkeletonLoading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Error Banner ───────────────────────────────────────────────────────── */
.wwsp-error-banner {
  background: var(--wwsp-danger-bg);
  border: 1px solid #fecaca;
  border-radius: var(--wwsp-radius-md);
  padding: 12px 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  animation: wwspSlideDown 0.25s ease-out forwards;
}

.wwsp-error-banner__content {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  color: #991b1b;
  line-height: 1.4;
}

.wwsp-error-dismiss {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #991b1b;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.7;
}

.wwsp-error-dismiss:hover {
  opacity: 1;
}

@keyframes wwspSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Submit Button ──────────────────────────────────────────────────────── */
.wwsp-submit-wrapper {
  margin-top: 22px !important;
  padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
}

#wwsp-payment-page button.wwsp-submit-btn,
.wwsp-submit-btn {
  width: 100% !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 14px 24px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0070e0 0%, #0058b8 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  outline: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 4px 14px rgba(0, 112, 224, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#wwsp-payment-page button.wwsp-submit-btn:hover:not(:disabled),
.wwsp-submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0058b8 0%, #004494 100%) !important;
  box-shadow: 0 6px 20px rgba(0, 112, 224, 0.45) !important;
  transform: translateY(-1.5px) !important;
  color: #ffffff !important;
}

#wwsp-payment-page button.wwsp-submit-btn:active:not(:disabled),
.wwsp-submit-btn:active:not(:disabled) {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(0, 112, 224, 0.3) !important;
}

#wwsp-payment-page button.wwsp-submit-btn:disabled,
.wwsp-submit-btn:disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.wwsp-submit-spinner {
  width: 18px !important;
  height: 18px !important;
  border: 2.5px solid rgba(255, 255, 255, 0.3) !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: wwspSpin 0.75s linear infinite !important;
}

@keyframes wwspSpin {
  to { transform: rotate(360deg); }
}

/* ─── Stripe Badge Footer ────────────────────────────────────────────────── */
.wwsp-stripe-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 18px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--wwsp-text-muted) !important;
}

.wwsp-stripe-badge svg {
  color: var(--wwsp-blue) !important;
}

/* ─── Success Panel ──────────────────────────────────────────────────────── */
.wwsp-success-panel {
  text-align: center !important;
  padding: 32px 16px 16px !important;
  animation: wwspSuccessPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

.wwsp-success-icon {
  margin-bottom: 16px !important;
  display: inline-flex !important;
}

.wwsp-success-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #001c64 !important;
  margin: 0 0 8px !important;
}

.wwsp-form-card--dark .wwsp-success-title {
  color: #ffffff !important;
}

.wwsp-success-body {
  font-size: 14.5px !important;
  color: var(--wwsp-text-muted) !important;
  margin: 0 0 24px !important;
}

.wwsp-success-details {
  background: var(--wwsp-surface-subtle) !important;
  border: 1px solid var(--wwsp-border) !important;
  border-radius: var(--wwsp-radius-md) !important;
  padding: 16px !important;
  margin-bottom: 24px !important;
  text-align: left !important;
}

.wwsp-success-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 0 !important;
  font-size: 13.5px !important;
}

.wwsp-success-value {
  font-size: 15px !important;
  color: #001c64 !important;
  font-weight: 700 !important;
}

.wwsp-form-card--dark .wwsp-success-value {
  color: var(--wwsp-blue) !important;
}

.wwsp-success-ref {
  font-family: monospace !important;
  background: rgba(0, 0, 0, 0.05) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

.wwsp-success-footer {
  margin-top: 16px !important;
}

#wwsp-payment-page button.wwsp-btn--secondary,
.wwsp-btn--secondary {
  background: #ffffff !important;
  color: #0070e0 !important;
  border: 1.5px solid #0070e0 !important;
  border-radius: 10px !important;
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#wwsp-payment-page button.wwsp-btn--secondary:hover,
.wwsp-btn--secondary:hover {
  background: #eff6ff !important;
  border-color: #0058b8 !important;
  color: #0058b8 !important;
}

@keyframes wwspSuccessPop {
  0% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

/* ─── Utilities ──────────────────────────────────────────────────────────── */
.wwsp-is-hidden {
  display: none !important;
}

/* ─── Mobile Responsiveness (320px - 640px) ──────────────────────────────── */
@media (max-width: 640px) {
  #wwsp-payment-page {
    padding: 0 10px !important;
    margin: 12px auto !important;
  }

  #wwsp-form-header,
  .wwsp-form-header {
    padding: 16px 16px !important;
    align-items: center !important;
  }

  .wwsp-form-header-title {
    font-size: 1.15rem !important;
  }

  .wwsp-form-header-subtitle {
    font-size: 0.78rem !important;
  }

  #wwsp-form-body,
  .wwsp-form-body {
    padding: 18px 14px !important;
  }

  .wwsp-amount-wrapper {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .wwsp-currency-group {
    width: 100% !important;
  }

  .wwsp-quick-amounts-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  #wwsp-payment-page button.wwsp-quick-btn,
  .wwsp-quick-btn {
    height: 42px !important;
    min-height: 42px !important;
    padding: 6px 4px !important;
    font-size: 14px !important;
  }

  #wwsp-payment-page button.wwsp-submit-btn,
  .wwsp-submit-btn {
    height: 50px !important;
    min-height: 50px !important;
    font-size: 15.5px !important;
  }
}