/**
 * Solera Store Checkout - Main Styles
 *
 * Global CSS variables, layout, typography, and color scheme
 *
 * ⚠️  IMPORTANT: All styles are scoped to .solera-* classes ONLY.
 * Global HTML selectors (html, body, *, p, div, etc.) have been
 * INTENTIONALLY REMOVED to prevent breaking the WordPress theme.
 * Do NOT add unscoped element styles or site-wide styling will break.
 *
 * @package SoleraCheckout
 */

:root {
  /* Solera Brand Colors */
  --solera-jacarta: #32245e;
  --solera-jacarta-800: #191230;
  --solera-blue: #194FA1;
  --solera-white: #ffffff;
  --solera-sun: #feb032;
  --solera-smoke: #f9f9f9;
  --solera-shark: #1b1e24;
  --solera-mako-base: #444854;
  --solera-cobalt-500: #2169D9;
  --solera-cobalt-50: #EBF3FD;
  --solera-eminence: #68368B;
  --solera-gold: #F8BC04;
  --solera-silver: #9AA0A6;
  --solera-bronze: #CD7F32;

  /* Spacing System (8px base unit) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --line-height-base: 1.5;

  /* Layout */
  --header-height: 72px;
  --container-max-width: 1200px;
  --grid-gap: var(--space-lg);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Borders */
  --border-color: #e5e7eb;
  --border-radius: 4px;
  --border-radius-lg: 8px;

  /* Transitions */
  --transition-base: all 0.2s ease;
  --transition-slow: all 0.3s ease;
}

/* Main Wrapper */
.solera-checkout-wrapper {
  background-color: var(--solera-white);
  padding: var(--space-xl) var(--space-lg);
  min-height: calc(100vh - var(--header-height));
}

/* Container */
.solera-checkout-container {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--grid-gap);
  max-width: var(--container-max-width);
  margin: 0 auto;
}

/* Left Column - Step Content */
.solera-checkout-left {
  padding: var(--space-lg);
  background-color: var(--solera-white);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
}

/* Right Column - Summary & Info */
.solera-checkout-right {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}

/* Step Content */
.solera-step-content {
  margin: var(--space-xl) 0;
}

/* Step Visibility Control (Visual Steps without URL change) */
.solera-step-hidden {
  display: none !important;
}

/* Navigation Buttons */
.solera-checkout-nav {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-lg);
}

/* Form Layout */
.solera-form {
  display: flex;
  flex-direction: column;
}

.solera-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.solera-form-row.solera-form-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.solera-form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-lg);
}

.solera-form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--solera-shark);
  font-size: var(--font-size-sm);
}

.solera-form-field input,
.solera-form-field select,
.solera-form-field textarea {
  width: 100%;
  padding: var(--space-md);
  font-size: var(--font-size-base);
  font-family: inherit;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: var(--transition-base);
  appearance: none;
}

.solera-form-field input:focus,
.solera-form-field select:focus,
.solera-form-field textarea:focus {
  outline: none;
  border-color: var(--solera-blue);
  box-shadow: 0 0 0 3px rgba(25, 79, 161, 0.1);
}

.solera-form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231b1e24' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  padding-right: calc(var(--space-md) + var(--space-lg));
}

.solera-form-field.has-error input,
.solera-form-field.has-error select {
  border-color: #ef4444;
}

.solera-form-field.has-error .error-message {
  color: #ef4444;
  font-size: 12px;
  margin-top: var(--space-xs);
}

/* Checkboxes & Radio Buttons */
.solera-form-checkbox label {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  font-weight: 500;
  cursor: pointer;
}

.solera-form-checkbox input {
  width: auto;
  margin-right: var(--space-md);
  margin-top: 2px;
  cursor: pointer;
}

.solera-form-note {
  font-size: var(--font-size-sm);
  color: var(--solera-mako-base);
  margin-bottom: 0;
}

/* Card Component */
.solera-card {
  background-color: var(--solera-white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.solera-card:hover {
  box-shadow: var(--shadow-md);
}

.solera-card-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  font-weight: 600;
  color: var(--solera-blue);
  font-size: var(--font-size-lg);
}

.solera-card-body {
  font-size: var(--font-size-base);
}

.solera-card-footer {
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-md);
  margin-top: var(--space-md);
}

/* Disclaimer */
.solera-disclaimer {
  background-color: var(--solera-cobalt-50);
  border-left: 4px solid var(--solera-blue);
  padding: var(--space-md);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  margin: var(--space-lg) 0;
}

.solera-disclaimer p {
  margin-bottom: 0;
}

/* Links */
.solera-link-edit {
  display: inline-block;
  font-size: var(--font-size-sm);
  color: var(--solera-blue);
  margin-top: var(--space-sm);
}

/* Utility Classes */
.solera-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}