/**
 * Email domain suggestions (S11 / X100). Brand look comes from each theme's
 * own tokens (--color-*), with neutral fallbacks, so Gait, Aigner, It's Luxury
 * and Options each render it in their own colours from one stylesheet.
 */
.tlg-es-list {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    z-index: 40;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #d2d2d7);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.tlg-es-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    color: var(--color-fg, #1d1d1f);
}

.tlg-es-row[aria-selected="true"],
.tlg-es-row:hover {
    background: var(--color-surface-2, #f2f2f4);
}

.tlg-es-mean {
    font-weight: 600;
    color: var(--color-warning, #9a5b00);
}

.tlg-es-addr {
    direction: ltr;
    unicode-bidi: isolate;
    word-break: break-all;
}

.tlg-es-addr b {
    font-weight: 600;
}

.tlg-es-fix {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff7e6;
    border: 1px solid #f5c26b;
    color: var(--color-fg, #1d1d1f);
    font-size: 15px;
    line-height: 1.4;
}

.tlg-es-fix__text {
    margin: 0;
}

.tlg-es-fix__text .tlg-es-addr {
    font-weight: 600;
}

.tlg-es-fix__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.tlg-es-btn {
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.tlg-es-btn--use {
    border: 0;
    background: var(--color-action, #2f6fe0);
    color: var(--color-action-fg, #fff);
}

.tlg-es-btn--keep {
    border: 1px solid var(--color-border, #d2d2d7);
    background: transparent;
    color: var(--color-fg, #1d1d1f);
}

@media (prefers-reduced-motion: no-preference) {
    .tlg-es-list,
    .tlg-es-fix {
        animation: tlg-es-in 0.12s ease-out;
    }

    @keyframes tlg-es-in {
        from { opacity: 0; transform: translateY(-3px); }
        to { opacity: 1; transform: none; }
    }
}

/* The wrapper the list anchors to, for fields that have no positioned
   parent of their own (pre-order interest forms, the staff counter email). */
.tlg-es-wrap {
    position: relative;
}