/* checkout-form.css — angeglichen an karlkratz.de forms.css (Avenir, primary #21588F,
   radius 4px, padding 10px 12px, font-size 16px, focus-shadow rgba(33,88,143,0.1)). */

/* === Container === */
.checkout-container { max-width: 520px; padding: var(--space-4) var(--space-4) var(--space-8); font-family: var(--font-family-base); }

/* === Product Card === */
.checkout-container .product-card { text-align: left; padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); background: var(--card-bg, rgba(255,255,255,0.7)); border: 1px solid var(--card-border, rgba(47,101,146,0.2)); border-radius: var(--radius-lg, 8px); }
.checkout-container .product-name { text-align: left; font-size: 1.125rem; line-height: 1.3; font-weight: 700; margin: 0 0 var(--space-2) 0; color: var(--color-h1); word-break: keep-all; }
.checkout-container .product-desc { font-size: 0.875rem; color: var(--color-text-secondary); margin: 0 0 var(--space-3) 0; line-height: 1.5; }
.checkout-container .product-price-row { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-1); }
.checkout-container .product-price { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }
.checkout-container .product-price-suffix { font-size: 0.8125rem; color: var(--color-text-secondary); }

/* === Form Labels (karlkratz forms.css) === */
.checkout-container .form-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-text, #333); margin-bottom: 0.4rem; transition: color 0.2s ease; text-align: left; width: auto; line-height: 1.3; }

/* === Form Inputs (karlkratz forms.css) === */
.checkout-container .form-input { display: block; width: 100%; max-width: 100%; padding: 10px 12px; border: 1px solid var(--color-border-medium, #dee2e6); border-radius: 4px; font-size: 16px; font-family: inherit; background-color: var(--color-bg-primary, #fff); color: var(--color-text, #333); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
.checkout-container .form-input:focus { border-color: var(--color-primary, #21588F); box-shadow: 0 0 0 3px rgba(33, 88, 143, 0.1); }
.checkout-container .form-input::placeholder { color: var(--color-text-muted, #999); opacity: 1; }

/* === Select Arrow === */
.checkout-container select.form-input { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; padding-right: 40px; }

/* === Error States === */
.checkout-container .form-input.field-error,
.checkout-container .form-input[aria-invalid="true"] { border-color: var(--color-error, #dc3545); background-color: var(--color-error-bg, #f8d7da); }
.checkout-container .form-error,
.checkout-container .error-message-text { display: none; color: var(--color-error, #dc3545); font-weight: 600; font-size: 0.85rem; margin-top: 0.4rem; }
.checkout-container .form-input.field-error ~ .form-error,
.checkout-container .form-input[aria-invalid="true"] ~ .form-error { display: block; }

/* === Form Rows === */
.checkout-container .form-row { display: block; margin-bottom: var(--space-3); }
.checkout-container .form-row-half { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
.checkout-container .form-row-half:has(.form-row-zip) { grid-template-columns: 1fr 2fr; }

/* === Sections === */
.form-section { border: 0; padding: 0; margin: 0 0 var(--space-5) 0; }
.form-section-title { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 0 var(--space-1_5) 0; margin: 0 0 var(--space-3) 0; border-bottom: 1px solid var(--color-border-light, #e9ecef); width: 100%; }

/* === Required + Optional Markers === */
.req { color: var(--color-error, #dc3545); font-weight: 600; margin-left: 2px; }
.form-hint-inline { font-size: 0.75rem; font-weight: 400; color: var(--color-text-secondary); margin-left: 0.25rem; }
.form-hint { font-size: 0.75rem; margin-top: 0.25rem; color: var(--color-text-secondary); }

/* === VAT-Group hidden by default === */
.form-row-vat[hidden] { display: none !important; }

/* === Trust-Footer === */
.checkout-trust { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--color-border-light, #e9ecef); }
.trust-badge { font-size: 0.75rem; color: var(--color-text-secondary); padding: var(--space-1) var(--space-2_5); background: var(--color-bg-secondary, #f8f9fa); border-radius: var(--radius-full, 9999px); white-space: nowrap; }

/* === Mobile (Touch-Targets >= 44px, no iOS-zoom) === */
@media (max-width: 768px) {
    .checkout-container .form-input { min-height: 44px; font-size: 16px; }
}
@media (max-width: 480px) {
    .checkout-container .form-row-half { grid-template-columns: 1fr; }
    .checkout-container .product-price-row { flex-direction: column; gap: 0; }
    .checkout-trust { gap: 0.25rem; }
}

/* === High Contrast === */
@media (prefers-contrast: high) {
    .checkout-container .form-input { border-width: 2px; }
    .checkout-container .form-input:focus { border-width: 3px; outline: 2px solid var(--color-primary, #21588F); outline-offset: 2px; }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    .checkout-container .form-input,
    .checkout-container .form-label { transition: none; }
}

/* === Dark Mode (system preference, unless user chose light) === */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .checkout-container .form-input { background-color: var(--color-bg-primary); color: var(--color-text); border-color: var(--color-border-medium); }
    :root:not([data-theme="light"]) .checkout-container .form-input:focus { border-color: var(--color-primary-light, #6b9bd3); box-shadow: 0 0 0 3px rgba(107, 155, 211, 0.2); }
    :root:not([data-theme="light"]) .checkout-container select.form-input { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); }
}
[data-theme="dark"] .checkout-container .form-input { background-color: var(--color-bg-primary); color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .checkout-container .form-input:focus { border-color: var(--color-primary-light, #6b9bd3); box-shadow: 0 0 0 3px rgba(107, 155, 211, 0.2); }
[data-theme="dark"] .checkout-container select.form-input { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); }