/**
 * Components — Contact button
 * Optional phone / URL button (issue #29). The Options step's Contact Placement
 * (#176) puts it under the quick summary, floating from the Model step onward
 * above the fixed bottom bar, or both.
 */

#wppb_wrapper .wppb-contact {
    position: fixed;
    right: var(--wppb-space-4);
    bottom: calc(var(--wppb-bottom-bar-h) + var(--wppb-space-4));
    z-index: 1020; /* below the bottom bar (1030), above page content */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--wppb-space-2);
    transition: transform 0.25s ease; /* carries the release at the foot of this file */
}

#wppb_wrapper .wppb-contact-phone,
#wppb_wrapper .wppb-contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--wppb-space-2);
    padding: var(--wppb-space-2) var(--wppb-space-4);
    border-radius: var(--wppb-radius-md);
    font-family: var(--wppb-font-family-base);
    font-size: var(--wppb-font-size-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

#wppb_wrapper .wppb-contact-phone {
    color: var(--wppb-white);
    background-color: var(--wppb-primary);
    border: 1px solid var(--wppb-primary);
}

#wppb_wrapper .wppb-contact-phone:hover,
#wppb_wrapper .wppb-contact-phone:focus-visible {
    background-color: var(--wppb-primary-hover);
    border-color: var(--wppb-primary-hover);
    color: var(--wppb-white);
    transform: translateY(-1px);
}

#wppb_wrapper .wppb-contact-phone-number {
    display: none;
}

#wppb_wrapper .wppb-contact-link {
    color: var(--wppb-primary);
    background-color: var(--wppb-white);
    border: 1px solid var(--wppb-border);
}

#wppb_wrapper .wppb-contact-link:hover,
#wppb_wrapper .wppb-contact-link:focus-visible {
    color: var(--wppb-primary-hover);
    border-color: var(--wppb-primary);
}

/* The phone number itself is only shown alongside the label at desktop widths. */
@media (min-width: 769px) {
    #wppb_wrapper .wppb-contact-phone-number {
        display: inline;
    }
}

@media (max-width: 768px) {
    #wppb_wrapper .wppb-contact {
        right: var(--wppb-space-2);
        bottom: calc(var(--wppb-bottom-bar-h) + var(--wppb-space-2));
    }

    #wppb_wrapper .wppb-contact-phone,
    #wppb_wrapper .wppb-contact-link {
        padding: var(--wppb-space-2) var(--wppb-space-3);
        font-size: var(--wppb-font-size-sm);
    }
}

/* Two-column steps: the Options column is the RIGHT half of the content column,
   and that column runs to the viewport edge at every width below
   --wppb-max-width, so a button pinned to the viewport's right edge sits on top
   of the option rows between roughly 1024px and 1440px (#133). Pinned to the
   content column's LEFT edge instead — the visualizer half, whose bottom corner
   carries no controls — and out into the gutter as soon as the viewport is wider
   than the content column. A fixed element resolves percentages against the
   viewport, so 50% is the viewport's centre line and the calc() is the column's
   left edge; max() keeps the button on the screen below that width. */
@media (min-width: 769px) {
    #wppb_wrapper .wppb-contact {
        right: auto;
        left: max(var(--wppb-space-4), calc(50% - var(--wppb-max-width) / 2 + var(--wppb-space-4)));
        align-items: flex-start;
    }
}

/* Released with the bar (see 05-components.bottom-bar.css): the button hangs in
   the same band and would keep covering the theme footer on its own. It sits a
   bar's height plus a gap above the bottom edge, so shifting it by that much
   again plus its own height clears the viewport. */
#wppb_wrapper.wppb-bar-released .wppb-contact {
    transform: translateY(calc(100% + var(--wppb-bottom-bar-h) + var(--wppb-space-4)));
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #wppb_wrapper .wppb-contact {
        transition: none;
    }
}

/* Under the quick summary (#176): the same buttons as the floating version, in
   the panel's flow below the Warranty row instead of pinned to the viewport. */
#wppb_wrapper .wppb-contact-inline {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wppb-space-2) var(--wppb-space-3);
    margin-top: var(--wppb-space-3);
    padding-top: var(--wppb-space-3);
    border-top: 1px solid var(--wppb-border);
}

#wppb_wrapper .wppb-contact-inline__label {
    font-family: var(--wppb-font-family-base);
    font-weight: 600;
}

#wppb_wrapper .wppb-contact-inline__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wppb-space-2);
}

#wppb_wrapper .wppb-contact-inline__btn {
    justify-content: center;
    min-height: 44px;
}

#wppb_wrapper .wppb-contact-inline__btn:focus-visible {
    outline: 2px solid var(--wppb-primary);
    outline-offset: 2px;
}