/*
 * verify.css - Age Verify Stripe plugin styles
 * Copy your /assets/css/verify.css content here for consistent look and feel.
 */

.age-verify-stripe-container {
  max-width: 400px;
  margin: 2em auto;
  background: #fff;
  border-radius: 1em;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  padding: 2em 2em 1.5em 2em;
  font-family: inherit;
}
.age-verify-stripe-container h2 {
  margin-top: 0;
  font-size: 1.5em;
  color: #232526;
}
.age-verify-stripe-container .legal-links {
  margin-top: 1.5em;
  font-size: 0.95em;
  color: #888;
  text-align: center;
}
.age-verify-stripe-container .pipe {
  margin: 0 0.5em;
  color: #bbb;
}
#age-verify-stripe-form {
  margin-top: 1.2em;
}
#age-verify-stripe-card-element {
  margin-bottom: 1.2em;
}
#age-verify-stripe-btn {
  background: linear-gradient(90deg,#232526 0%,#414345 100%);
  color: #fff;
  border: none;
  border-radius: 0.5em;
  padding: 0.7em 1.5em;
  font-size: 1.1em;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
#age-verify-stripe-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}
#age-verify-stripe-result {
  margin-top: 1em;
  color: #c00;
  min-height: 1.2em;
}
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal-content {
  background: #fff;
  border-radius: 0.7em;
  padding: 2em 2.5em;
  box-shadow: 0 2px 16px rgba(0,0,0,0.12);
  text-align: center;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 0.7em;
  right: 1em;
  font-size: 1.5em;
  color: #888;
  cursor: pointer;
}
.modal-icon {
  font-size: 2.5em;
  color: #f5a623;
  margin-bottom: 0.5em;
}
.modal-message {
  font-size: 1.1em;
  color: #232526;
}