@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --me-primary: #2F43A9;
    --me-primary-dark: #22369C;
    --me-action: #0089F7;
    --me-action-dark: #0074CC;
    --me-pink: #D4145A;
    --me-pink-light: #ECCCD9;
    --me-pink-bg: rgba(212, 20, 90, 0.11);
    --me-text: #3F3C3B;
    --me-text-light: #6B6564;
    --me-bg: #F7F1EF;
    --me-white: #FFFFFF;
    --me-success: #16A34A;
    --me-success-light: #DCFCE7;
}

* { box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; color: var(--me-text); }

.honeypot { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; z-index: -1; }

/* Progress bar */
.progress-bar { display: flex; justify-content: space-between; margin-bottom: 2rem; position: relative; padding: 0 0.25rem; }
.progress-bar::before { content: ''; position: absolute; top: 50%; left: 0.75rem; right: 0.75rem; height: 3px; background: var(--me-pink-light); transform: translateY(-50%); z-index: 0; border-radius: 2px; }
.progress-step { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.8rem; background: var(--me-pink-light); color: var(--me-text-light); position: relative; z-index: 1; transition: all 0.3s ease; flex-shrink: 0; }
.progress-step.active { background: var(--me-primary); color: #fff; box-shadow: 0 0 0 4px rgba(47, 67, 169, 0.25); }
.progress-step.completed { background: var(--me-success); color: #fff; cursor: pointer; }
.progress-step.completed:hover { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.25); }

/* Form steps */
.form-step { display: none; animation: fadeIn 0.3s ease; }
.form-step.active { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Radio/reason cards */
.radio-card, .reason-card { transition: all 0.2s ease; border: 2px solid var(--me-pink-light); border-radius: 0.75rem; cursor: pointer; }
.radio-card:hover, .reason-card:hover { transform: translateY(-2px); border-color: var(--me-primary); }
.radio-card.selected, .reason-card.selected { border-color: var(--me-primary); background: rgba(47, 67, 169, 0.06); }

.field-error { color: var(--me-pink); font-size: 0.75rem; margin-top: 0.25rem; display: none; }
.field-error.visible { display: block; }

/* Language toggle */
.lang-toggle a { transition: color 0.2s; font-weight: 500; }
.lang-toggle a:hover { color: var(--me-primary); }
.lang-toggle a.active-lang { color: var(--me-primary); font-weight: 700; border-bottom: 2px solid var(--me-primary); }

/* Form inputs */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
    border: 2px solid var(--me-pink-light) !important;
    border-radius: 0.5rem !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: #fff;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--me-primary) !important;
    box-shadow: 0 0 0 3px rgba(47, 67, 169, 0.15) !important;
    outline: none;
}

/* Buttons */
.btn-me-primary { background: var(--me-primary); color: #fff; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; transition: all 0.2s; border: none; cursor: pointer; font-family: 'Poppins', sans-serif; }
.btn-me-primary:hover { background: var(--me-primary-dark); }
.btn-me-action { background: var(--me-action); color: #fff; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; transition: all 0.2s; border: none; cursor: pointer; font-family: 'Poppins', sans-serif; }
.btn-me-action:hover { background: var(--me-action-dark); }
.btn-me-outline { background: transparent; color: var(--me-primary); padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; transition: all 0.2s; border: 2px solid var(--me-primary); cursor: pointer; font-family: 'Poppins', sans-serif; }
.btn-me-outline:hover { background: var(--me-primary); color: #fff; }

/* Mobile responsiveness */
@media (max-width: 640px) {
    .progress-step { width: 2.25rem; height: 2.25rem; font-size: 0.7rem; }
    .progress-bar::before { left: 0.5rem; right: 0.5rem; }
    .form-step { padding: 0 0.25rem; }
}

@media (max-width: 480px) {
    .progress-step { width: 2rem; height: 2rem; font-size: 0.65rem; }
}