/* Mobile-specific UX enhancements */

/* FAQ accordion on small screens */
@media (max-width: 767px) {
  .faq-grid .faq-item p {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .faq-grid .faq-item.open p {
    max-height: 500px;
  }
  .faq-grid .faq-item h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem 0;
  }
  .faq-grid .faq-item h3::after {
    content: "+";
    font-weight: 700;
    color: #64748b;
    margin-left: 0.5rem;
  }
  .faq-grid .faq-item.open h3::after {
    content: "–";
  }

  /* ============================================
     CHECKOUT PAGE MOBILE OPTIMIZATIONS
     ============================================ */

  /* Hero section - stack vertically on mobile */
  .checkout-hero {
    padding: 2rem 0 1.5rem;
  }

  .checkout-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  .checkout-title {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .checkout-subtitle {
    font-size: 1rem;
    line-height: 1.5;
    margin-top: 0.75rem;
  }

  .checkout-trust {
    margin-top: 1rem;
    flex-direction: column;
    gap: 0.5rem;
  }

  .checkout-trust-badge {
    width: 100%;
    text-align: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  .checkout-note-card {
    padding: 1rem;
    margin-top: 1rem;
  }

  .checkout-note-card h3 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
  }

  .checkout-note-card ul {
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
  }

  /* Content section - full width on mobile */
  .checkout-content {
    padding: 1.5rem 0 2rem;
  }

  .checkout-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  /* Cards - better spacing on mobile */
  .checkout-card {
    border-radius: 0.75rem;
  }

  .checkout-card-header {
    padding: 1rem;
  }

  .checkout-card-header h2 {
    font-size: 1.25rem;
  }

  .checkout-form {
    padding: 1rem;
  }

  /* Form fields - stack vertically on mobile */
  .checkout-field-row {
    grid-template-columns: 1fr !important;
    gap: 0;
    margin-bottom: 0;
  }

  .checkout-field {
    margin-bottom: 1rem;
  }

  .checkout-field label {
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
  }

  .checkout-field input,
  .checkout-field select,
  .checkout-field textarea {
    padding: 0.75rem;
    font-size: 1rem;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
  }

  .checkout-field textarea {
    min-height: 80px;
  }

  /* Consent checkbox - better mobile UX */
  .checkout-consent {
    padding: 1rem;
    margin: 1rem 0;
  }

  .checkout-consent-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .checkout-consent-row input[type="checkbox"] {
    margin-top: 0.125rem;
    min-width: 18px;
    min-height: 18px;
    flex-shrink: 0;
  }

  /* Actions - full width button */
  .checkout-actions {
    margin-top: 1.5rem;
  }

  .checkout-actions .cta-primary {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    min-height: 48px;
  }

  /* Security section - better mobile layout */
  .checkout-security {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }

  .checkout-security-item {
    padding: 1rem;
  }

  .checkout-security-title {
    font-size: 0.875rem;
  }

  .checkout-security-text {
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-top: 0.5rem;
  }

  /* Order summary - show first on mobile for better UX */
  .checkout-summary {
    order: -1; /* Show summary first on mobile */
    margin-bottom: 1.5rem;
    border: 2px solid var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
  }

  .summary-box {
    padding: 1rem;
  }

  .summary-row {
    padding: 0.75rem 0;
    font-size: 0.9375rem;
  }

  .summary-label {
    font-size: 0.875rem;
  }

  .summary-value {
    font-size: 0.9375rem;
    text-align: right;
  }

  .summary-total .summary-value {
    font-size: 1.125rem;
  }

  .summary-divider {
    margin: 0.75rem 0;
  }

  /* Legal links - better mobile spacing */
  .checkout-legal-links {
    padding: 0 1rem 1rem;
    gap: 0.75rem;
  }

  .checkout-legal-link {
    font-size: 0.8125rem;
    display: block;
    padding: 0.5rem 0;
  }

  /* Small text adjustments */
  .checkout-small {
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-top: 0.75rem;
  }

  .checkout-hint {
    font-size: 0.8125rem;
    margin-top: 0.25rem;
  }

  .checkout-muted {
    font-size: 0.8125rem;
  }

  /* Message display - better mobile visibility */
  #checkout-message {
    margin-bottom: 1rem;
  }

  #checkout-message .error-message,
  #checkout-message .success-message {
    padding: 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.5rem;
  }

  /* Container padding adjustment for mobile */
  .checkout-page .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}