/* "Did you mean rahul@gmail.com?" suggestion chip shown under email fields.
   The chip floats (absolute) so the field group keeps its height and the
   absolutely-positioned icons inside it never shift. */

.email-suggest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.4rem 0.55rem 0.4rem 0.7rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: #0b0a88;
    background: linear-gradient(90deg, rgba(85, 209, 203, 0.18), rgba(85, 209, 203, 0.07));
    border: 1px solid rgba(85, 209, 203, 0.45);
    border-left: 3px solid #3bb8b2;
    border-radius: 10px;
    animation: emailSuggestIn 0.22s ease-out;
    text-align: left;
}

.email-suggest[hidden] {
    display: none;
}

/* Floats under the field; the script reserves the matching bottom margin. */
.email-suggest--float {
    position: absolute;
    top: calc(100% + 6px);
    left: auto;
    right: 0;
    z-index: 40;
    /* Full field width when there is room, otherwise exactly as wide as the
       text needs — growing leftwards so it never spills out of the panel. */
    min-width: 100%;
    width: max-content;
    max-width: min(26rem, calc(100vw - 3rem));
    box-shadow: 0 10px 24px rgba(11, 10, 136, 0.14);
}

@keyframes emailSuggestIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.email-suggest__text {
    flex: 1 1 11rem;
    min-width: 0;
    overflow-wrap: break-word;
}

.email-suggest__use {
    flex: 0 0 auto;
    padding: 0.25rem 0.75rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    background: #0b0a88;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.email-suggest__use:hover,
.email-suggest__use:focus-visible {
    background: #3bb8b2;
    color: #0b0a88;
    transform: translateY(-1px);
}

.email-suggest__dismiss {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-left: auto;
    padding: 0;
    font-size: 0.7rem;
    color: #0b0a88;
    background: rgba(11, 10, 136, 0.08);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.email-suggest__dismiss:hover {
    color: #fff;
    background: #0b0a88;
}

.email-suggest__use:focus-visible,
.email-suggest__dismiss:focus-visible {
    outline: 3px solid rgba(85, 209, 203, 0.7);
    outline-offset: 2px;
}

/* Dark surfaces (hero / CTA panels) keep the chip readable. */
.faq-hero .email-suggest,
.career-hero .email-suggest {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.4);
    border-left-color: #55d1cb;
}

.faq-hero .email-suggest__use,
.career-hero .email-suggest__use {
    color: #0b0a88;
    background: #55d1cb;
}

.faq-hero .email-suggest__dismiss,
.career-hero .email-suggest__dismiss {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 575px) {
    .email-suggest {
        font-size: 0.75rem;
        padding: 0.4rem 0.5rem 0.4rem 0.6rem;
    }

    /* Match the field exactly so the pill always stays inside the form column. */
    .email-suggest--float {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .email-suggest__use {
        padding: 0.22rem 0.5rem;
        font-size: 0.75rem;
    }

    .email-suggest__dismiss {
        width: 1.25rem;
        height: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .email-suggest {
        animation: none;
    }

    .email-suggest__use,
    .email-suggest__dismiss {
        transition: none;
    }
}