/**
 * Component: Checkout Modal
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Story 2.1: Payment Intent & Checkout Modal Foundation
 * Mobile-first responsive design for checkout flow.
 */

/* ============================================================================
   CHECKOUT MODAL
   ============================================================================ */

.c-checkout-modal {
  z-index: 9800;
}

.c-checkout-modal .modal-content {
  max-width: 480px;
  width: 100%;
}

.c-checkout-modal-body {
  padding: 0;
}

/* ============================================================================
   HEADER
   ============================================================================ */

.c-checkout-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.c-checkout-header h2 {
  margin: 0;
  font-size: var(--font-size-xl);
  color: var(--text-primary);
}

.c-checkout-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-base);
}

.c-checkout-total-amount {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--primary-color);
}

/* ============================================================================
   LOADING STATE
   ============================================================================ */

.c-checkout-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  gap: var(--spacing-md);
  min-height: 200px;
}

.c-checkout-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: c-checkout-spin 1s linear infinite;
}

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

.c-checkout-loading p {
  color: var(--text-secondary);
  margin: 0;
}

/* ============================================================================
   ERROR STATE (Story 2.3 - Enhanced)
   ============================================================================ */

.c-checkout-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  gap: var(--spacing-md);
  text-align: center;
  min-height: 250px;
}

.c-checkout-error-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--error-bg, rgba(220, 53, 69, 0.1));
}

.c-checkout-error .material-icons {
  font-size: 40px;
  color: var(--error-color);
}

.c-checkout-error-title {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  font-weight: 600;
}

.c-checkout-error-message {
  color: var(--text-secondary);
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}

.c-checkout-error-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  width: 100%;
  max-width: 280px;
}

.c-checkout-error-actions .btn {
  width: 100%;
}

/* Bank decline - card icon */
.c-checkout-error--bank-decline .c-checkout-error-icon {
  background: var(--error-bg, rgba(220, 53, 69, 0.1));
}

.c-checkout-error--bank-decline .material-icons {
  color: var(--error-color);
}

/* Technical error - warning icon */
.c-checkout-error--technical .c-checkout-error-icon {
  background: var(--warning-bg, rgba(255, 193, 7, 0.1));
}

.c-checkout-error--technical .material-icons {
  color: var(--warning-color, #ffc107);
}

/* Rate limited - schedule icon */
.c-checkout-error--rate-limited .c-checkout-error-icon {
  background: var(--info-bg, rgba(13, 110, 253, 0.1));
}

.c-checkout-error--rate-limited .material-icons {
  color: var(--info-color, #0d6efd);
}

/* ============================================================================
   COOLDOWN TIMER (Story 2.3 - AC5)
   ============================================================================ */

.c-checkout-cooldown {
  margin-top: var(--spacing-md);
  text-align: center;
}

.c-checkout-cooldown p {
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
}

.c-checkout-cooldown-timer {
  display: inline-block;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--info-color, #0d6efd);
  font-variant-numeric: tabular-nums;
  min-width: 60px;
}

/* ============================================================================
   PAYMENT FORM
   ============================================================================ */

.c-checkout-form {
  padding: var(--spacing-lg);
}

.c-checkout-form-group {
  margin-bottom: var(--spacing-lg);
}

.c-checkout-form-group label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.c-checkout-form-group input[type="text"],
.c-checkout-form-group input[type="email"],
.c-checkout-form-group input[type="tel"] {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-color);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.c-checkout-form-group input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.c-checkout-form-group input::placeholder {
  color: var(--text-muted);
}

/* Two-column row for expiry and CVV */
.c-checkout-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.c-checkout-form-group--half {
  margin-bottom: 0;
}

/* ============================================================================
   HOSTED FIELD CONTAINERS
   ============================================================================ */

.c-checkout-hosted-field {
  height: 48px;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-color);
  display: flex;
  align-items: center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.c-checkout-hosted-field:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.c-checkout-hosted-field.is-invalid {
  border-color: var(--error-color);
}

.c-checkout-hosted-field.is-valid {
  border-color: var(--success-color);
}

/* Placeholder styling for stub/dev mode */
.c-checkout-hosted-field-placeholder {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}

/* ============================================================================
   VALIDATION ERRORS
   ============================================================================ */

.c-checkout-validation-errors {
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-md);
  background: var(--error-bg);
  border: 1px solid var(--error-color);
  border-radius: var(--radius-md);
  color: var(--error-color);
  font-size: var(--font-size-sm);
}

/* ============================================================================
   CONSENT CHECKBOX (Privacy Policy & Terms of Service)
   ============================================================================ */

.c-checkout-consent {
  margin-bottom: var(--spacing-lg);
}

.c-checkout-consent-label {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  position: relative;
}

/* Hide native checkbox, use custom checkmark */
.c-checkout-consent-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.c-checkout-consent-checkmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-color);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  margin-top: 1px;
}

.c-checkout-consent-checkmark::after {
  content: '';
  display: none;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.c-checkout-consent-input:checked + .c-checkout-consent-checkmark {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.c-checkout-consent-input:checked + .c-checkout-consent-checkmark::after {
  display: block;
}

.c-checkout-consent-input:focus-visible + .c-checkout-consent-checkmark {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.c-checkout-consent-input[aria-invalid="true"] + .c-checkout-consent-checkmark {
  border-color: var(--error-color);
}

.c-checkout-consent-text {
  flex: 1;
}

.c-checkout-consent-text a {
  color: var(--primary-color);
  text-decoration: underline;
  font-weight: 500;
}

.c-checkout-consent-text a:hover {
  text-decoration: none;
}

.c-checkout-consent-text a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 2px;
}

.c-checkout-consent-error {
  margin: var(--spacing-xs) 0 0 0;
  padding: 0 0 0 calc(20px + var(--spacing-sm));
  color: var(--error-color);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

/* ============================================================================
   PHONE INPUT GROUP
   ============================================================================ */

.c-checkout-phone-group {
  margin-bottom: var(--spacing-md);
}

.c-checkout-phone-group input[type="tel"] {
  direction: ltr; /* Phone numbers always LTR */
}

/* ============================================================================
   OPT-INS CONTAINER
   ============================================================================ */

.c-checkout-optins {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.c-checkout-optins .c-checkout-consent {
  margin-bottom: 0;
}

/* ============================================================================
   SUBMIT BUTTON
   ============================================================================ */

.c-checkout-submit {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.c-checkout-submit:hover:not(:disabled) {
  background: var(--primary-dark);
}

.c-checkout-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.c-checkout-submit .material-icons {
  font-size: 20px;
}

/* ============================================================================
   SECURITY NOTICE
   ============================================================================ */

.c-checkout-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.c-checkout-security .material-icons {
  font-size: 16px;
  color: var(--success-color);
}

/* ============================================================================
   SUCCESS STATE
   ============================================================================ */

.c-checkout-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  gap: var(--spacing-md);
  text-align: center;
  min-height: 250px;
}

.c-checkout-success .material-icons {
  font-size: 64px;
  color: var(--success-color);
  animation: c-checkout-success-pop 0.5s ease-out;
}

@keyframes c-checkout-success-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.c-checkout-success h3 {
  margin: 0;
  font-size: var(--font-size-xl);
  color: var(--text-primary);
}

.c-checkout-success p {
  margin: 0;
  color: var(--text-secondary);
}

.c-checkout-success .btn {
  margin-top: var(--spacing-md);
  min-width: 150px;
}

/* Success details rows (Story 2.8 - base class for RTL support) */
.c-checkout-success-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
  max-width: 280px;
  margin-top: var(--spacing-sm);
}

.c-checkout-success-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.c-checkout-success-value {
  font-weight: 600;
  color: var(--text-primary);
}

/* ============================================================================
   MOBILE RESPONSIVE
   ============================================================================ */

@media (max-width: 480px) {
  .c-checkout-modal .modal-content {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  .c-checkout-modal {
    padding: 0;
  }

  .c-checkout-header {
    padding: var(--spacing-md);
  }

  .c-checkout-form {
    padding: var(--spacing-md);
  }

  .c-checkout-form-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .c-checkout-form-group--half {
    margin-bottom: var(--spacing-lg);
  }

  .c-checkout-form-group--half:last-child {
    margin-bottom: 0;
  }
}

/* ============================================================================
   DARK THEME
   ============================================================================ */

.dark-theme .c-checkout-header {
  border-bottom-color: var(--border-color);
}

.dark-theme .c-checkout-hosted-field {
  background: var(--surface-elevated);
  border-color: var(--border-color);
}

.dark-theme .c-checkout-form-group input {
  background: var(--surface-elevated);
  border-color: var(--border-color);
}

.dark-theme .c-checkout-consent-checkmark {
  background: var(--surface-elevated);
  border-color: var(--border-color);
}

.dark-theme .c-checkout-phone-group input[type="tel"] {
  background: var(--surface-elevated);
  border-color: var(--border-color);
}

/* ============================================================================
   RTL SUPPORT (Hebrew)
   ============================================================================ */

[dir="rtl"] .c-checkout-security {
  flex-direction: row-reverse;
}

[dir="rtl"] .c-checkout-submit {
  flex-direction: row-reverse;
}

/* ============================================================================
   RTL SUPPORT FOR ERROR STATE (Story 2.3)
   ============================================================================ */

[dir="rtl"] .c-checkout-error-message {
  direction: rtl;
}

[dir="rtl"] .c-checkout-cooldown {
  direction: rtl;
}

[dir="rtl"] .c-checkout-error-actions {
  direction: rtl;
}

/* ============================================================================
   APPLE PAY BUTTON (Story 2.4 - Task 8)
   ============================================================================ */

.c-checkout-apple-pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  background-color: #000;
  border: none;
  border-radius: var(--radius-md, 8px);
  color: #fff;
  font-size: var(--font-size-base, 16px);
  font-weight: 500;
  cursor: pointer;
  margin-top: var(--spacing-sm, 12px);
  transition: opacity var(--transition-fast, 0.15s ease);
}

.c-checkout-apple-pay-btn:hover:not(:disabled) {
  opacity: 0.85;
}

.c-checkout-apple-pay-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Apple Pay logo using inline SVG data URI (Apple's required black button with white logo) */
.c-checkout-apple-pay-logo {
  width: 40px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 165.521 105.965'%3E%3Cpath fill='%23fff' d='M150.698 0H14.823C6.636 0 0 6.636 0 14.823v76.319c0 8.187 6.636 14.823 14.823 14.823h135.875c8.187 0 14.823-6.636 14.823-14.823V14.823C165.521 6.636 158.885 0 150.698 0zm-.262 90.873c0 5.291-4.313 9.604-9.604 9.604H24.689c-5.291 0-9.604-4.313-9.604-9.604V15.092c0-5.291 4.313-9.604 9.604-9.604h116.143c5.291 0 9.604 4.313 9.604 9.604v75.781z'/%3E%3Cpath fill='%23fff' d='M43.508 27.139c1.469-1.837 2.469-4.408 2.203-6.979-2.122.082-4.693 1.406-6.224 3.184-1.366 1.571-2.571 4.081-2.244 6.489 2.366.184 4.796-1.201 6.265-2.694zm2.163 3.592c-3.449-.204-6.387 1.959-8.021 1.959-1.632 0-4.163-1.856-6.857-1.805-3.531.051-6.775 2.051-8.591 5.214-3.673 6.367-1.010 15.806 2.622 21.010 1.745 2.581 3.816 5.448 6.571 5.346 2.612-.102 3.632-1.704 6.806-1.704 3.184 0 4.102 1.704 6.857 1.653 2.836-.051 4.622-2.622 6.367-5.214 1.988-2.988 2.806-5.877 2.857-6.030-.061-.041-5.479-2.102-5.530-8.346-.051-5.204 4.265-7.703 4.459-7.855-2.459-3.632-6.254-4.030-7.540-4.228zm21.612-3.694h9.519c6.468 0 10.774 4.081 10.774 10.242 0 6.162-4.448 10.304-11.060 10.304h-6.223v10.671h-3.010V27.037zm3.010 17.561h5.346c4.489 0 7.050-2.387 7.050-6.724 0-4.337-2.561-6.693-7.039-6.693h-5.357v13.417zm16.234 8.080c0-4.031 3.091-6.509 8.570-6.795l6.315-.306v-1.775c0-2.561-1.724-4.091-4.601-4.091-2.724 0-4.408 1.316-4.826 3.387h-2.806c.214-3.469 3.326-6.264 7.775-6.264 4.540 0 7.448 2.632 7.448 6.775v14.050h-2.857v-3.571h-.061c-.867 2.408-3.296 3.857-5.999 3.857-3.755 0-6.958-2.316-6.958-5.267zm14.885-1.673v-1.744l-5.683.306c-2.836.184-4.438 1.418-4.438 3.418 0 2.040 1.652 3.388 4.183 3.388 3.286 0 5.938-2.224 5.938-5.368zm7.509 15.040v-2.418c.255.051.806.082 1.102.082 1.571 0 2.428-.663 2.948-2.367l.316-.999-7.050-19.515h3.163l5.469 17.295h.061l5.469-17.295h3.091l-7.315 20.383c-1.673 4.683-3.612 6.182-7.672 6.182-.296 0-.867-.031-1.582-.092v-.256z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ============================================================================
   RTL SUPPORT FOR APPLE PAY (Story 2.4)
   ============================================================================ */

[dir="rtl"] .c-checkout-apple-pay-btn {
  flex-direction: row-reverse;
}

/* ============================================================================
   GOOGLE PAY BUTTON (Story 2.5 - Task 7)
   ============================================================================ */

.c-checkout-google-pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  background-color: #fff;
  border: 1px solid #dadce0;
  border-radius: var(--radius-md, 8px);
  color: #3c4043;
  font-size: var(--font-size-base, 16px);
  font-weight: 500;
  cursor: pointer;
  margin-top: var(--spacing-sm, 12px);
  transition: background-color var(--transition-fast, 0.15s ease),
              border-color var(--transition-fast, 0.15s ease);
}

.c-checkout-google-pay-btn:hover:not(:disabled) {
  background-color: #f8f9fa;
  border-color: #dadce0;
}

.c-checkout-google-pay-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Google Pay logo using official Google Pay branding SVG */
.c-checkout-google-pay-logo {
  width: 41px;
  height: 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 17'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%234285F4' d='M19.526 2.635v4.083h2.518c.6 0 1.096-.202 1.488-.605.403-.402.605-.882.605-1.437 0-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0 5.52v4.736h-1.504V1.198h3.99c1.013 0 1.873.337 2.582 1.012.72.675 1.08 1.497 1.08 2.466 0 .991-.36 1.819-1.08 2.482-.697.665-1.559.997-2.583.997h-2.485z'/%3E%3Cpath fill='%23EA4335' d='M27.194 10.442c0 .392.166.718.499.98.332.26.722.391 1.168.391.633 0 1.196-.234 1.692-.701.497-.469.745-1.019.745-1.65-.469-.37-1.123-.555-1.962-.555-.61 0-1.12.148-1.528.442-.409.294-.614.678-.614 1.093zm-.024-4.453l1.36-.118c.544 0 .966.155 1.264.467.299.31.448.71.448 1.199v5.354h-1.418v-.91h-.043c-.499.728-1.182 1.093-2.05 1.093-.675 0-1.236-.202-1.683-.605-.447-.404-.67-.91-.67-1.52 0-.675.252-1.204.757-1.586.506-.383 1.18-.575 2.025-.575.706 0 1.29.118 1.75.354v-.247c0-.392-.166-.724-.498-.997-.332-.272-.72-.409-1.165-.409-.675 0-1.209.285-1.603.854l-1.309-.822c.574-.86 1.423-1.29 2.548-1.29l.287-.242z'/%3E%3Cpath fill='%23FBBC04' d='M36.827 6.172l-4.386 10.07h-1.518l1.626-3.472-2.881-6.598h1.6l1.946 4.728h.043l1.893-4.728z'/%3E%3Cpath fill='%234285F4' d='M12.148.5c.908 0 1.732.298 2.414.893l-1.103 1.104c-.403-.373-.903-.56-1.31-.56-1.366 0-2.382 1.088-2.382 2.478 0 1.39 1.016 2.478 2.381 2.478.904 0 1.434-.363 1.769-.697.274-.275.454-.672.527-1.214h-2.296V3.545h3.738c.04.202.063.412.063.633 0 1.063-.291 2.381-1.227 3.317-.912.957-2.074 1.468-3.574 1.468-2.817 0-5.186-2.295-5.186-5.112S5.33.739 8.148.739c1.178 0 2.162.432 2.926 1.151l-1.103 1.104c-.541-.513-1.271-.77-1.823-.77-1.658 0-2.955 1.335-2.955 2.991 0 1.656 1.297 2.99 2.955 2.99.795 0 1.414-.266 1.823-.651.335-.316.557-.769.644-1.387H8.148V3.731h4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Dark theme Google Pay button */
.dark-theme .c-checkout-google-pay-btn {
  background-color: #fff;
  color: #3c4043;
  border-color: #dadce0;
}

.dark-theme .c-checkout-google-pay-btn:hover:not(:disabled) {
  background-color: #f8f9fa;
}

/* ============================================================================
   RTL SUPPORT FOR GOOGLE PAY (Story 2.5)
   ============================================================================ */

[dir="rtl"] .c-checkout-google-pay-btn {
  flex-direction: row-reverse;
}

/* ============================================================================
   REHYDRATING STATE (Story 2.6 - Task 6)
   ============================================================================ */

.c-checkout-rehydrating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  gap: var(--spacing-md);
  min-height: 200px;
}

.c-checkout-rehydrating .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: c-checkout-spin 1s linear infinite;
}

.c-checkout-rehydrating p {
  color: var(--text-secondary);
  margin: 0;
  text-align: center;
}

/* ============================================================================
   TIMEOUT STATE (Story 2.6 - AC5)
   ============================================================================ */

.c-checkout-timeout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  gap: var(--spacing-md);
  text-align: center;
  min-height: 280px;
}

.c-checkout-timeout-icon {
  font-size: 64px;
  color: var(--warning-color, #ffc107);
}

.c-checkout-timeout h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  max-width: 300px;
  line-height: 1.4;
}

.c-checkout-timeout-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  width: 100%;
  max-width: 280px;
}

.c-checkout-timeout-actions .btn {
  width: 100%;
}

/* ============================================================================
   RTL SUPPORT FOR REHYDRATION (Story 2.6)
   ============================================================================ */

[dir="rtl"] .c-checkout-rehydrating p {
  direction: rtl;
}

[dir="rtl"] .c-checkout-timeout h3 {
  direction: rtl;
}

[dir="rtl"] .c-checkout-timeout-actions {
  direction: rtl;
}

/* ============================================================================
   GRACEFUL DEGRADATION STATE (Story 2.7 - AC2)
   ============================================================================ */

.c-checkout-degradation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  gap: var(--spacing-md);
  text-align: center;
  min-height: 280px;
}

.c-checkout-degradation-icon {
  font-size: 64px;
  color: var(--warning-color, #ffc107);
}

.c-checkout-degradation h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  max-width: 300px;
  line-height: 1.4;
}

.c-checkout-degradation p {
  margin: 0;
  color: var(--text-secondary);
  max-width: 300px;
  line-height: 1.5;
}

.c-checkout-degradation .btn {
  margin-top: var(--spacing-sm);
  min-width: 260px;
}

.c-checkout-degradation .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================================
   RTL SUPPORT FOR GRACEFUL DEGRADATION (Story 2.7)
   ============================================================================ */

[dir="rtl"] .c-checkout-degradation h3 {
  direction: rtl;
}

[dir="rtl"] .c-checkout-degradation p {
  direction: rtl;
}

/* ============================================================================
   RTL SUPPORT FOR CONSENT CHECKBOX
   ============================================================================ */

[dir="rtl"] .c-checkout-consent-label {
  flex-direction: row-reverse;
}

[dir="rtl"] .c-checkout-consent-error {
  padding: 0 calc(20px + var(--spacing-sm)) 0 0;
  text-align: right;
}

/* RTL for phone input - keep phone numbers LTR */
[dir="rtl"] .c-checkout-phone-group input[type="tel"] {
  direction: ltr;
  text-align: right;
}

/* RTL for opt-ins labels */
[dir="rtl"] .c-checkout-optins .c-checkout-consent-label {
  flex-direction: row-reverse;
}

/* ============================================================================
   RTL SUPPORT FOR CHECKOUT FORM (Story 2.8 - AC2)
   ============================================================================ */

/* Header text alignment */
[dir="rtl"] .c-checkout-header {
  text-align: right;
}

[dir="rtl"] .c-checkout-header h2 {
  text-align: right;
}

/* Summary row - flip order */
[dir="rtl"] .c-checkout-summary {
  flex-direction: row-reverse;
}

/* Form labels */
[dir="rtl"] .c-checkout-form-group label {
  text-align: right;
}

/* Form inputs - RTL text alignment */
[dir="rtl"] .c-checkout-form-group input[type="text"],
[dir="rtl"] .c-checkout-form-group input[type="email"],
[dir="rtl"] .c-checkout-form-group input[type="tel"] {
  text-align: right;
  direction: rtl;
}

/* Hosted field containers */
[dir="rtl"] .c-checkout-hosted-field {
  direction: ltr; /* Card numbers stay LTR */
  text-align: left;
}

/* Validation errors */
[dir="rtl"] .c-checkout-validation-errors {
  text-align: right;
  direction: rtl;
}

/* Loading state */
[dir="rtl"] .c-checkout-loading p {
  direction: rtl;
}

/* ============================================================================
   RTL SUPPORT FOR SUCCESS SCREEN (Story 2.8 - AC2)
   ============================================================================ */

[dir="rtl"] .c-checkout-success h3 {
  direction: rtl;
}

[dir="rtl"] .c-checkout-success p {
  direction: rtl;
}

/* Success details rows - flip label/value order */
[dir="rtl"] .c-checkout-success-row {
  flex-direction: row-reverse;
}

[dir="rtl"] .c-checkout-success-row span {
  text-align: right;
}

/* Keep card last4 LTR (numbers should read left-to-right) */
[dir="rtl"] #checkout-success-card-last4 {
  direction: ltr;
  unicode-bidi: embed;
}

/* Keep order number LTR */
[dir="rtl"] #checkout-success-order-number {
  direction: ltr;
  unicode-bidi: embed;
}

/* Keep amount LTR for consistency */
[dir="rtl"] #checkout-success-amount {
  direction: ltr;
  unicode-bidi: embed;
}

/* ============================================================================
   FORCED COLORS (Windows High Contrast Mode)
   ============================================================================ */

@media (forced-colors: active) {
  .c-checkout-hosted-field {
    border: 1px solid ButtonText;
  }

  .c-checkout-hosted-field.is-invalid {
    border-color: LinkText;
  }

  .c-checkout-hosted-field.is-valid {
    border-color: ButtonText;
  }

  .c-checkout-submit {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .c-checkout-submit:disabled {
    opacity: 1;
    color: GrayText;
    border-color: GrayText;
  }

  .c-checkout-validation-errors {
    border: 2px solid LinkText;
  }

  .c-checkout-apple-pay-btn,
  .c-checkout-google-pay-btn {
    border: 1px solid ButtonText;
  }

  .c-checkout-error-icon {
    border: 2px solid ButtonText;
  }

  .c-checkout-consent-checkmark {
    border: 2px solid ButtonText;
    forced-color-adjust: none;
  }

  .c-checkout-consent-input:checked + .c-checkout-consent-checkmark {
    background-color: Highlight;
    border-color: Highlight;
  }

  .c-checkout-consent-text a {
    color: LinkText;
  }

  .c-checkout-phone-group input[type="tel"] {
    border: 1px solid ButtonText;
  }

  .c-checkout-phone-group input[type="tel"][aria-invalid="true"] {
    border-color: LinkText;
  }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .c-checkout-phone-group input[type="tel"],
  .c-checkout-consent-checkmark {
    transition: none;
  }
}