/**
 * Comfort Club banner — extracted from frontend.php in Phase 3 PR 13.
 *
 * Markup is rendered alongside the related wp_footer hook in
 * frontend.php; only the <style> block was extracted here.
 */

    .hales-cc-banner {
        padding: 24px 0;
        background: linear-gradient(135deg, #011635 0%, #042452 100%);
    }
    .hales-cc-banner__inner {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }
    .hales-cc-banner__icon {
        font-size: 36px;
        flex-shrink: 0;
    }
    .hales-cc-banner__text {
        flex: 1;
        min-width: 200px;
    }
    .hales-cc-banner__text strong {
        display: block;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 4px;
    }
    .hales-cc-banner__text span {
        font-size: 14px;
        color: rgba(255,255,255,0.75);
        line-height: 1.4;
    }
    .hales-cc-banner__actions {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-shrink: 0;
    }
    .hales-cc-banner__phone {
        color: rgba(255,255,255,0.8);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        /* HAC-012: enforce 44px tap-target height on this phone CTA.
           Was rendering at ~108x24 on mobile — far below WCAG/HIG min,
           and this is a primary phone link in the Comfort Club banner. */
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 6px 4px;
    }
    .hales-cc-banner__phone:hover {
        color: #d4af37;
    }
    @media (max-width: 767px) {
        .hales-cc-banner__inner {
            flex-direction: column;
            text-align: center;
        }
        .hales-cc-banner__actions {
            width: 100%;
            flex-direction: column;
        }
        .hales-cc-banner__actions .btn {
            width: 100%;
            text-align: center;
        }
    }