/*
 * Mobile quick-contact styles.
 * Select styles 1-10 with MOBILE_CTA_STYLE in includes/config.php.
 */
.contact-details__actions {
    --contact-call: #f47721;
    --contact-chat: #25d366;
    --contact-text: #fff;
}

.contact-details__actions a {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border: 0;
    color: var(--contact-text);
    background: var(--contact-call);
    line-height: 1.1;
    text-decoration: none;
}

.contact-details__actions .contact-details__whatsapp { color: var(--contact-text); background: var(--contact-chat); }
.contact-details__icon { display: inline-grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: 50%; background: rgba(255,255,255,.18); }
.contact-details__icon svg { display: block; width: 1.05rem; height: 1.05rem; fill: currentColor; }

.contact-details__actions--style-1 { --contact-call: #f47721; --contact-chat: #25d366; }

.contact-details__actions--style-2 a { border-radius: 999px; box-shadow: 0 8px 22px rgba(4,24,35,.22); }

.contact-details__actions--style-3 { padding: .45rem; border: 1px solid rgba(255,255,255,.15); border-radius: .9rem; background: #092b3b; }
.contact-details__actions--style-3 a { border: 1px solid rgba(255,255,255,.25); background: #123f52; }
.contact-details__actions--style-3 .contact-details__whatsapp { background: #176b57; }

.contact-details__actions--style-4 a { border: 1px solid #f2c7aa; color: #c94e0b; background: #fff7f2; }
.contact-details__actions--style-4 .contact-details__whatsapp { border-color: #a9e7c0; color: #08783a; background: #f1fff6; }
.contact-details__actions--style-4 .contact-details__icon { color: #fff; background: #f47721; }
.contact-details__actions--style-4 .contact-details__whatsapp .contact-details__icon { background: #25a95a; }

.contact-details__actions--style-5 a { background: linear-gradient(135deg,#ff9a32,#ed5a18); }
.contact-details__actions--style-5 .contact-details__whatsapp { background: linear-gradient(135deg,#36dc79,#109b50); }

.contact-details__actions--style-6 { padding: .4rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1.15rem; background: #102f44; box-shadow: 0 12px 30px rgba(4,24,35,.28); }
.contact-details__actions--style-6 a { border-radius: .85rem; background: #d95d18; }
.contact-details__actions--style-6 .contact-details__whatsapp { background: #148d4b; }

.contact-details__actions--style-7 a { border: 1px solid #d8e2e5; border-bottom: 4px solid #f47721; color: #16384a; background: #fff; box-shadow: 0 4px 12px rgba(8,31,43,.08); }
.contact-details__actions--style-7 .contact-details__whatsapp { border-bottom-color: #25b95f; color: #16384a; background: #fff; }
.contact-details__actions--style-7 .contact-details__icon { color: #fff; background: #f47721; }
.contact-details__actions--style-7 .contact-details__whatsapp .contact-details__icon { background: #25b95f; }

.contact-details__actions--style-8 a { border-radius: 999px 1rem 1rem 999px; color: #a33c08; background: #ffe1cd; }
.contact-details__actions--style-8 .contact-details__whatsapp { border-radius: 1rem 999px 999px 1rem; color: #076f39; background: #cff5dc; }
.contact-details__actions--style-8 .contact-details__icon { color: #fff; background: #ee681d; }
.contact-details__actions--style-8 .contact-details__whatsapp .contact-details__icon { background: #18a653; }

.contact-details__actions--style-9 { gap: 3px; padding: 3px; background: #101417; }
.contact-details__actions--style-9 a { border-radius: 0; color: #111; background: #ffb000; text-transform: uppercase; letter-spacing: .035em; }
.contact-details__actions--style-9 .contact-details__whatsapp { color: #07170d; background: #38df71; }
.contact-details__actions--style-9 .contact-details__icon { color: #fff; background: #111; }

.contact-details__actions--style-10 { padding: .45rem; border-radius: 1.1rem; background: linear-gradient(90deg,#073e49,#07545a); }
.contact-details__actions--style-10 a { border-radius: .8rem; background: #f47422; }
.contact-details__actions--style-10 .contact-details__whatsapp { background: #14a98b; }
.contact-details__actions--style-10 .contact-details__icon { background: rgba(7,62,73,.28); }

@media (max-width: 767.98px) {
    body { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }

    .mobile-actions {
        --call: #f47721;
        --chat: #25d366;
        --panel: #fff;
        --text: #fff;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        padding: 0 0 env(safe-area-inset-bottom);
        background: var(--panel);
        box-shadow: 0 -10px 30px rgba(8, 31, 43, .2);
    }

    .mobile-actions a {
        display: flex;
        min-width: 0;
        min-height: 64px;
        align-items: center;
        justify-content: center;
        gap: .65rem;
        padding: .85rem 1rem;
        border: 0;
        color: var(--text);
        background: var(--call);
        font-size: 1rem;
        font-weight: 850;
        line-height: 1;
        text-align: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-actions a:last-child { color: var(--text); background: var(--chat); }
    .mobile-actions a:active { transform: translateY(1px); filter: brightness(.94); }
    .mobile-actions__icon { display: inline-grid; width: 2.15rem; height: 2.15rem; flex: 0 0 2.15rem; place-items: center; border-radius: 50%; background: rgba(255,255,255,.18); }
    .mobile-actions__icon svg { display: block; width: 1.15rem; height: 1.15rem; fill: currentColor; }
    .mobile-actions__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* 1: Strong brand split */
    .mobile-actions--style-1 { --call: #f47721; --chat: #25d366; }

    /* 2: Independent floating pills */
    .mobile-actions--style-2 { gap: .65rem; padding: .7rem .75rem calc(.7rem + env(safe-area-inset-bottom)); background: transparent; box-shadow: none; }
    .mobile-actions--style-2 a { min-height: 58px; border-radius: 999px; box-shadow: 0 8px 24px rgba(8,31,43,.25); }

    /* 3: Dark, restrained outline */
    .mobile-actions--style-3 { gap: .55rem; padding: .65rem .75rem calc(.65rem + env(safe-area-inset-bottom)); background: #092b3b; }
    .mobile-actions--style-3 a { min-height: 56px; border: 1px solid rgba(255,255,255,.3); border-radius: .65rem; background: #123f52; }
    .mobile-actions--style-3 a:last-child { background: #176b57; }
    .mobile-actions--style-3 .mobile-actions__icon { background: rgba(255,255,255,.1); }

    /* 4: Bright white control panel */
    .mobile-actions--style-4 { gap: .5rem; padding: .65rem .75rem calc(.65rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #dce7e8; }
    .mobile-actions--style-4 a { min-height: 58px; border: 1px solid #f2c7aa; border-radius: .85rem; color: #c94e0b; background: #fff7f2; }
    .mobile-actions--style-4 a:last-child { border-color: #a9e7c0; color: #08783a; background: #f1fff6; }
    .mobile-actions--style-4 .mobile-actions__icon { color: #fff; background: #f47721; }
    .mobile-actions--style-4 a:last-child .mobile-actions__icon { background: #25a95a; }

    /* 5: Energetic gradient */
    .mobile-actions--style-5 { gap: 2px; padding-bottom: env(safe-area-inset-bottom); background: #fff; }
    .mobile-actions--style-5 a { min-height: 66px; background: linear-gradient(135deg,#ff9a32,#ed5a18); }
    .mobile-actions--style-5 a:last-child { background: linear-gradient(135deg,#36dc79,#109b50); }
    .mobile-actions--style-5 .mobile-actions__icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }

    /* 6: Rounded dark dock */
    .mobile-actions--style-6 { right: .7rem; bottom: .65rem; left: .7rem; gap: .35rem; padding: .4rem .4rem calc(.4rem + env(safe-area-inset-bottom)); border: 1px solid rgba(255,255,255,.12); border-radius: 1.35rem; background: #102f44; box-shadow: 0 12px 36px rgba(4,24,35,.4); }
    .mobile-actions--style-6 a { min-height: 58px; border-radius: 1rem; background: #d95d18; }
    .mobile-actions--style-6 a:last-child { background: #148d4b; }

    /* 7: Minimal cards with colored edge */
    .mobile-actions--style-7 { gap: .5rem; padding: .6rem .7rem calc(.6rem + env(safe-area-inset-bottom)); background: #eef4f5; }
    .mobile-actions--style-7 a { min-height: 60px; border: 1px solid #d8e2e5; border-bottom: 4px solid #f47721; border-radius: .55rem; color: #16384a; background: #fff; box-shadow: 0 4px 12px rgba(8,31,43,.08); }
    .mobile-actions--style-7 a:last-child { border-bottom-color: #25b95f; color: #16384a; background: #fff; }
    .mobile-actions--style-7 .mobile-actions__icon { color: #fff; background: #f47721; }
    .mobile-actions--style-7 a:last-child .mobile-actions__icon { background: #25b95f; }

    /* 8: Soft capsule bar */
    .mobile-actions--style-8 { gap: .4rem; padding: .65rem .7rem calc(.65rem + env(safe-area-inset-bottom)); background: #fff9f4; }
    .mobile-actions--style-8 a { min-height: 58px; border-radius: 999px 1rem 1rem 999px; color: #a33c08; background: #ffe1cd; }
    .mobile-actions--style-8 a:last-child { border-radius: 1rem 999px 999px 1rem; color: #076f39; background: #cff5dc; }
    .mobile-actions--style-8 .mobile-actions__icon { color: #fff; background: #ee681d; }
    .mobile-actions--style-8 a:last-child .mobile-actions__icon { background: #18a653; }

    /* 9: High contrast */
    .mobile-actions--style-9 { gap: 3px; padding: 3px 3px calc(3px + env(safe-area-inset-bottom)); background: #101417; }
    .mobile-actions--style-9 a { min-height: 64px; color: #111; background: #ffb000; text-transform: uppercase; letter-spacing: .035em; }
    .mobile-actions--style-9 a:last-child { color: #07170d; background: #38df71; }
    .mobile-actions--style-9 .mobile-actions__icon { color: #fff; background: #111; }

    /* 10: Turquoise and orange */
    .mobile-actions--style-10 { gap: .55rem; padding: .7rem .75rem calc(.7rem + env(safe-area-inset-bottom)); background: linear-gradient(90deg,#073e49,#07545a); }
    .mobile-actions--style-10 a { min-height: 58px; border-radius: .9rem; color: #fff; background: #f47422; box-shadow: inset 0 1px 0 rgba(255,255,255,.24); }
    .mobile-actions--style-10 a:last-child { background: #14a98b; }
    .mobile-actions--style-10 .mobile-actions__icon { background: rgba(7,62,73,.28); }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767.98px) {
    .mobile-actions a { transition: transform .15s ease, filter .15s ease; }
}