/* Form feedback states — overlay on top of the original style.css.
   Brand tokens: #259134 green, #C2C810 lime, #272727 dark, #FCFDFE bg,
   #E6E6E6 hairline, #e61010 error. */

/* Re-assert the HTML `hidden` attribute so it beats class-level display
   rules below (otherwise our `.form-error-banner { display: flex }` would
   override the UA stylesheet's `[hidden] { display: none }` because they
   share specificity and ours is defined later). */
[hidden] { display: none !important; }

/* ---------- error banner ---------- */
.form-error-banner {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #e61010;
    color: #7f1d1d;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: form-feedback-fade-in .25s ease-out;
}

.form-error-banner svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.form-error-banner a {
    color: #7f1d1d;
    text-decoration: underline;
}

/* ---------- button loading state ---------- */
.page-button.is-sending {
    pointer-events: none;
    opacity: .85;
    padding-left: 55px;
}

/* Hide the original consultation-icon while loading and replace with
   a spinner pseudo-element (we reuse ::before slot). */
.page-button.is-sending::before {
    background-image: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: form-feedback-spin .75s linear infinite;
}

/* ---------- success card ---------- */
.form-success {
    background: #ffffff;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    padding: 36px 32px;
    text-align: center;
    animation: form-feedback-fade-in .35s ease-out;
}

.form-success__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    background: #259134;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: form-feedback-pop .4s cubic-bezier(.34, 1.56, .64, 1);
}

.form-success__icon svg {
    width: 38px;
    height: 38px;
    color: #ffffff;
    stroke: currentColor;
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.form-success__title {
    font-size: 24px;
    font-weight: 700;
    color: #272727;
    margin: 0 0 10px;
    line-height: 1.3;
}

.form-success__text {
    font-size: 15px;
    color: #545454;
    line-height: 1.5;
    margin: 0 0 6px;
}

.form-success__text--small {
    font-size: 13px;
    color: #B4B4B4;
    margin-bottom: 24px;
}

.form-success__reset {
    background: none;
    border: none;
    color: #259134;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background .2s ease;
}

.form-success__reset:hover {
    background: #FCFDFE;
}

/* ---------- transitions ---------- */
@keyframes form-feedback-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes form-feedback-pop {
    from { transform: scale(.6); opacity: 0; }
    60%  { transform: scale(1.1); opacity: 1; }
    to   { transform: scale(1); opacity: 1; }
}

@keyframes form-feedback-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* keep the existing translateY(-50%) from the original ::before rule
   while spinning — the spin keyframe above includes it */
.page-button.is-sending::before {
    transform: translateY(-50%);
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .form-error-banner,
    .form-success,
    .form-success__icon { animation: none; }
    .page-button.is-sending::before { animation: form-feedback-spin 1.5s linear infinite; }
}

/* mobile tightening */
@media (max-width: 600px) {
    .form-success { padding: 28px 20px; }
    .form-success__icon { width: 64px; height: 64px; }
    .form-success__icon svg { width: 32px; height: 32px; }
    .form-success__title { font-size: 20px; }
}