/* 
   checkout-styles.css 
   Minimalist, secure handoff screen for Stripe styling.
*/

.checkout-body {
  background: var(--clr-bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  color: var(--clr-text);
}

.checkout-container {
  background: #fff;
  width: 100%;
  max-width: 500px;
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.checkout-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-gold), var(--clr-accent));
}

.checkout-logo {
  font-family: var(--ff-heading);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: var(--space-xl);
  color: var(--clr-text);
  letter-spacing: -0.5px;
}

.checkout-logo em {
  font-style: italic;
  color: var(--clr-primary);
}

.checkout-state {
  display: none;
  flex-direction: column;
  align-items: center;
  animation: fadeIn 0.4s ease forwards;
}

.checkout-state.active {
  display: flex;
}

.checkout-title {
  font-family: var(--ff-heading);
  font-size: var(--fs-h2);
  color: var(--clr-text);
  margin-bottom: var(--space-xs);
  font-weight: 600;
}

.checkout-desc {
  font-size: var(--fs-small);
  color: var(--clr-text-muted);
  margin-bottom: var(--space-lg);
  max-width: 380px;
}

/* Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(122,45,78,0.1);
  border-top-color: var(--clr-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-lg);
}

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

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Security Badges */
.security-badges {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--clr-border);
  width: 100%;
  justify-content: center;
}

.badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--clr-text-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Config State Specific */
.config-icon {
  color: var(--clr-gold);
  margin-bottom: var(--space-md);
}

.config-box {
  background: var(--clr-bg-alt);
  border: 1px dashed var(--clr-gold-dark);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  width: 100%;
  margin-bottom: var(--space-lg);
  text-align: left;
}

.checkout-actions {
  width: 100%;
}