/* Formulaires - Style Shopify - Electro World Checkout */

/* Champs de formulaire - Style Shopify épuré */
.ew-checkout-container .ew-field,
.ew-checkout-container .form-row {
    margin-bottom: var(--ew-spacing-md) !important;
    position: relative !important;
}

.ew-checkout-container .ew-field label,
.ew-checkout-container .form-row label {
    display: block !important;
    margin-bottom: var(--ew-spacing-xs) !important;
    font-weight: 500 !important;
    color: var(--ew-text) !important;
    font-size: var(--ew-text-sm) !important;
    line-height: 1.4 !important;
}

/* Inputs avec style Shopify moderne */
.ew-checkout-container .ew-field input,
.ew-checkout-container .ew-field select,
.ew-checkout-container .ew-field textarea,
.ew-checkout-container .form-row input,
.ew-checkout-container .form-row select,
.ew-checkout-container .form-row textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid var(--ew-border) !important;
    border-radius: var(--ew-radius) !important;
    font-size: var(--ew-text-md) !important;
    font-family: var(--ew-font) !important;
    color: var(--ew-text) !important;
    background: var(--ew-bg) !important;
    transition: var(--ew-transition) !important;
    line-height: 1.4 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Focus state - Style Shopify avec bordure colorée */
.ew-checkout-container .ew-field input:focus,
.ew-checkout-container .ew-field select:focus,
.ew-checkout-container .ew-field textarea:focus,
.ew-checkout-container .form-row input:focus,
.ew-checkout-container .form-row select:focus,
.ew-checkout-container .form-row textarea:focus {
    outline: none !important;
    border-color: var(--ew-border-focus) !important;
    box-shadow: 0 0 0 2px var(--ew-primary-light) !important;
}

/* Placeholder styling */
.ew-checkout-container .ew-field input::placeholder,
.ew-checkout-container .form-row input::placeholder {
    color: var(--ew-text-muted) !important;
    opacity: 1 !important;
}

/* Layout en grille pour les champs côte à côte */
.ew-field-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--ew-spacing-md) !important;
}

/* Select custom styling */
.ew-checkout-container select {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjI5MyAyLjI5M0MxMC42ODM0IDEuOTAyNiAxMS4zMTY2IDEuOTAyNiAxMS43MDcxIDIuMjkzQzEyLjA5NzYgMi42ODM1IDEyLjA5NzYgMy4zMTY3IDExLjcwNzEgMy43MDcyTDYuNzA3MTEgOC43MDcyQzYuMzE2NjYgOS4wOTc3IDUuNjgzMzQgOS4wOTc3IDUuMjkyODkgOC43MDcyTDAuMjkyODkzIDMuNzA3MkMtMC4wOTc2NTY4IDMuMzE2NyAtMC4wOTc2NTY4IDIuNjgzNSAwLjI5Mjg5MyAyLjI5M0MwLjY4MzQ0MiAxLjkwMjYgMS4zMTY1OCAxLjkwMjYgMS43MDcxMSAyLjI5M0w2IDYuNTg1OUwxMC4yOTMgMi4yOTNaIiBmaWxsPSIjNjY2NjY2Ii8+PC9zdmc+") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    padding-right: 40px !important;
}

/* États des champs */
.ew-checkout-container .ew-field input.error,
.ew-checkout-container .ew-field select.error,
.ew-checkout-container .form-row input.error,
.ew-checkout-container .form-row select.error {
    border-color: var(--ew-error) !important;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.1) !important;
}

.ew-checkout-container .ew-field input.valid,
.ew-checkout-container .form-row input.valid {
    border-color: var(--ew-success) !important;
    box-shadow: 0 0 0 2px rgba(0, 168, 89, 0.1) !important;
}

/* Checkboxes - Style Shopify moderne */
.ew-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--ew-spacing-sm) !important;
    cursor: pointer !important;
    margin: var(--ew-spacing-md) 0 !important;
    font-size: var(--ew-text-sm) !important;
    line-height: 1.4 !important;
}

.ew-checkbox input[type="checkbox"] {
    display: none !important;
}

.ew-checkbox .checkmark {
    width: 18px !important;
    height: 18px !important;
    border: 1px solid var(--ew-border) !important;
    border-radius: var(--ew-radius-small) !important;
    background: var(--ew-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--ew-transition) !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
}

.ew-checkbox input[type="checkbox"]:checked + .checkmark {
    background: var(--ew-primary) !important;
    border-color: var(--ew-primary) !important;
}

.ew-checkbox input[type="checkbox"]:checked + .checkmark::after {
    content: "✓" !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.ew-checkbox:hover .checkmark {
    border-color: var(--ew-primary) !important;
}

/* Checkboxes spéciales (termes et conditions) */
.ew-terms-checkbox {
    margin-top: var(--ew-spacing-lg) !important;
    padding: var(--ew-spacing-md) !important;
    background: var(--ew-bg-light) !important;
    border-radius: var(--ew-radius) !important;
    border: 1px solid var(--ew-border) !important;
}

.ew-terms-checkbox a {
    color: var(--ew-primary) !important;
    text-decoration: underline !important;
}

.ew-terms-checkbox a:hover {
    color: var(--ew-primary-hover) !important;
}

/* Messages d'erreur de champ */
.ew-field-error {
    display: block !important;
    color: var(--ew-error) !important;
    font-size: var(--ew-text-xs) !important;
    margin-top: var(--ew-spacing-xs) !important;
    line-height: 1.3 !important;
}

/* Responsive formulaires */
@media (max-width: 600px) {
    .ew-field-row {
        grid-template-columns: 1fr !important;
        gap: var(--ew-spacing-sm) !important;
    }

    .ew-checkout-container .ew-field input,
    .ew-checkout-container .ew-field select,
    .ew-checkout-container .form-row input,
    .ew-checkout-container .form-row select {
        padding: 14px 16px !important; /* Plus grand pour mobile */
        font-size: 16px !important; /* Éviter le zoom sur iOS */
    }

    .ew-checkbox {
        margin: var(--ew-spacing-sm) 0 !important;
    }
}