/* Product contact is secondary to purchase. Every channel keeps a 44px target. */
.ritter-ai-product-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(var(--ritter-ai-product-contact-channels, 3), 2.75rem);
    align-items: center;
    min-height: 3rem;
    column-gap: 0.125rem;
    margin: 0.5rem 0 0.75rem;
    color: var(--bs-body-color, #2b3136);
}

.ritter-ai-product-contact__intro {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.ritter-ai-product-contact__label,
.ritter-ai-product-contact__short-label {
    white-space: nowrap;
}

.ritter-ai-product-contact__short-label {
    display: none;
}

.ritter-ai-product-contact__portraits {
    display: inline-flex;
    flex: 0 0 auto;
    padding-left: 0.75rem;
}

.ritter-ai-product-contact__portrait {
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 auto;
    margin-left: -0.75rem;
    object-fit: cover;
    border: 2px solid var(--bs-body-bg, #fff);
    border-radius: 50%;
}

.ritter-ai-product-contact__action,
.ritter-ai-product-contact .ritter-ai-product-contact__mail-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem !important;
    height: 2.75rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0;
    color: inherit;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    text-decoration: none;
    cursor: pointer;
}

.ritter-ai-product-contact__action:hover,
.ritter-ai-product-contact .ritter-ai-product-contact__mail-trigger:hover {
    color: inherit;
    background-color: var(--bs-tertiary-bg, #f5f6f7);
}

.ritter-ai-product-contact__action:focus-visible,
.ritter-ai-product-contact .ritter-ai-product-contact__mail-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
    box-shadow: none;
}

.ritter-ai-product-contact__icon,
.ritter-ai-product-contact .ritter-ai-product-contact__mail-trigger::before {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    -webkit-mask: var(--ritter-ai-product-contact-icon) center / contain no-repeat;
    mask: var(--ritter-ai-product-contact-icon) center / contain no-repeat;
}

.ritter-ai-product-contact__action--phone {
    --ritter-ai-product-contact-icon: url('icons/phone.svg');
}

.ritter-ai-product-contact__action--whatsapp,
.ritter-ai-product-contact__action--whatsapp:hover {
    --ritter-ai-product-contact-icon: url('icons/whatsapp.svg');
    color: #138846;
}

.ritter-ai-product-contact__mail {
    min-width: 0;
}

/* The shared renderer retains its accessible text and modal behavior. Only
   this plugin's opener becomes an envelope; other forms keep their buttons. */
.ritter-ai-product-contact .ritter-ai-product-contact__mail-trigger {
    --ritter-ai-product-contact-icon: url('icons/envelope.svg');
    font-size: 0;
    line-height: 0;
}

.ritter-ai-product-contact .ritter-ai-product-contact__mail-trigger::before {
    content: '';
}

.ritter-ai-product-contact .ritter-ai-product-contact__mail-trigger[hidden] {
    display: none !important;
}

/* Without JavaScript the native details fallback expands across the whole
   row. The form must never be constrained to the envelope's 44px column. */
.ritter-ai-product-contact__mail:has(details[open]:not(.is-enhanced)) {
    grid-column: 1 / -1;
}

.ritter-ai-product-contact__mail:has(details[open]:not(.is-enhanced)) .ritter-ai-product-contact__mail-trigger {
    display: flex;
    margin-left: auto;
}

@media (max-width: 575px) {
    .ritter-ai-product-contact__portrait {
        width: 3rem;
        height: 3rem;
    }
}

@media (max-width: 400px) {
    .ritter-ai-product-contact__label {
        display: none;
    }

    .ritter-ai-product-contact__short-label {
        display: inline;
    }
}