/*
 * SOPHRA INNOVA APARTMENT WI-FI
 * Help Center Professional Contact Component — V3
 *
 * One consolidated phone-support card.
 * Separate high-contrast email-support card.
 * Icon-only action affordances.
 * Desktop browser, mobile browser and standalone PWA.
 */

.help-support-contacts.help-support-contacts-v3 {
    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(0, 1fr);
    gap: 16px;
    margin-top: 28px;
}

.help-contact-card-v3 {
    box-sizing: border-box;
    min-width: 0;
    border-radius: 24px;
}

.help-call-card-v3 {
    padding: 20px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #ff9d43 0%,
            #f36a25 52%,
            #e9541d 100%
        );
    border:
        1px solid
        rgba(255, 255, 255, 0.28);
    box-shadow:
        0 16px 34px
        rgba(211, 84, 29, 0.19);
}

.help-contact-card-heading-v3 {
    display: grid;
    gap: 3px;
    margin-bottom: 14px;
}

.help-contact-card-kicker-v3 {
    display: block;
    font-size: 0.69rem;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: 0.12em;
    color: currentColor;
    opacity: 0.82;
}

.help-contact-card-heading-v3 > strong {
    color: #ffffff;
    font-size: 1.08rem;
    line-height: 1.25;
    font-weight: 850;
}

.help-contact-card-heading-v3 > small {
    color:
        rgba(
            255,
            255,
            255,
            0.82
        );
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 600;
}

.help-contact-phone-list-v3 {
    display: grid;
    gap: 10px;
}

.help-contact-row-v3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    min-height: 64px;
    padding:
        10px
        11px
        10px
        17px;

    color: #ffffff;
    text-decoration: none;

    border-radius: 17px;

    background:
        rgba(
            255,
            255,
            255,
            0.13
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.22
        );

    transition:
        transform 160ms ease,
        background 160ms ease,
        border-color 160ms ease;

    -webkit-tap-highlight-color:
        transparent;
}

.help-contact-row-v3:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.19
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.34
        );
}

.help-contact-row-v3:active {
    transform: scale(0.992);
}

.help-contact-row-v3:focus-visible,
.help-email-card-v3:focus-visible {
    outline:
        3px solid
        rgba(
            249,
            111,
            46,
            0.28
        );

    outline-offset: 3px;
}

.help-contact-detail-v3 {
    min-width: 0;

    color: #ffffff;

    font-size:
        clamp(
            1rem,
            2vw,
            1.1rem
        );

    line-height: 1.2;
    font-weight: 850;
    letter-spacing: -0.015em;
}

.help-contact-action-icon-v3 {
    display: inline-flex;
    flex: 0 0 auto;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    color: #ffffff;

    border-radius: 14px;

    background:
        rgba(
            255,
            255,
            255,
            0.15
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.26
        );

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.14
        );
}

.help-contact-action-icon-v3 svg {
    display: block;
    width: 22px;
    height: 22px;
}

.help-email-card-v3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    min-height: 100%;
    padding: 20px;

    color: #172033;
    text-decoration: none;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fff8f3 100%
        );

    border:
        1px solid
        rgba(
            231,
            100,
            41,
            0.20
        );

    box-shadow:
        0 14px 30px
        rgba(
            38,
            49,
            67,
            0.08
        );

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;

    -webkit-tap-highlight-color:
        transparent;
}

.help-email-card-v3:hover {
    border-color:
        rgba(
            231,
            100,
            41,
            0.36
        );

    box-shadow:
        0 17px 34px
        rgba(
            38,
            49,
            67,
            0.11
        );
}

.help-email-card-v3:active {
    transform: scale(0.992);
}

.help-email-copy-v3 {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.help-email-copy-v3
.help-contact-card-kicker-v3 {
    color: #b74c1f;
    opacity: 1;
}

.help-contact-email-address-v3 {
    display: block;

    min-width: 0;
    max-width: 100%;

    color: #172033;

    font-size:
        clamp(
            0.94rem,
            2vw,
            1.04rem
        );

    line-height: 1.35;
    font-weight: 850;
    letter-spacing: -0.018em;

    overflow-wrap: anywhere;
    word-break: normal;
}

.help-email-copy-v3 > small {
    color: #697386;
    font-size: 0.8rem;
    line-height: 1.35;
    font-weight: 650;
}

.help-email-action-icon-v3 {
    color: #e7652f;
    background: #fff0e7;

    border-color:
        rgba(
            231,
            101,
            47,
            0.22
        );

    box-shadow: none;
}

@media (max-width: 760px) {
    .help-support-contacts.help-support-contacts-v3 {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 14px;
        margin-top: 24px;
    }

    .help-email-card-v3 {
        min-height: auto;
    }
}

@media (max-width: 520px) {
    .help-call-card-v3,
    .help-email-card-v3 {
        border-radius: 21px;
    }

    .help-call-card-v3 {
        padding: 16px;
    }

    .help-contact-row-v3 {
        min-height: 62px;

        padding:
            9px
            9px
            9px
            15px;

        border-radius: 16px;
    }

    .help-contact-detail-v3 {
        font-size: 1rem;
    }

    .help-contact-action-icon-v3 {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .help-email-card-v3 {
        padding: 17px;
    }
}

@media (max-width: 370px) {
    .help-contact-row-v3 {
        gap: 10px;
    }

    .help-contact-detail-v3 {
        font-size: 0.93rem;
    }

    .help-contact-action-icon-v3 {
        width: 40px;
        height: 40px;
    }

    .help-contact-email-address-v3 {
        font-size: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .help-contact-row-v3,
    .help-email-card-v3 {
        transition: none;
    }
}