/* Order Page Specific Styles */

/* Only add page-specific styles here that aren't part of the component library */
.order-page {
  font-family: var(--font-family-base);
}

/* Add any JavaScript-specific classes */
.order-cost__value--highlight {
  animation: highlight 0.5s ease-in-out;
}

@keyframes highlight {
  0% { background-color: rgba(42, 111, 201, 0.2); }
  100% { background-color: transparent; }
}

/* Any specific overrides for third-party integration */
/* Example: Payment form provider styling */
.payment-form-wrapper {
  margin-top: var(--order-spacing-lg);
}

/* Responsive adjustments specific to order page */
@media (max-width: 480px) {
  .order-header__title {
    font-size: calc(var(--order-font-size-xxl) * 0.8);
  }
  
  .order-header__subtitle {
    font-size: calc(var(--order-font-size-md) * 0.9);
  }
  
  .order-form__submit {
    width: 100%;
  }
}