/* ==========================================================================
   POLY Cleaning — global sticky footer CTA
   A compact, right aligned bottom panel that appears once the hero has
   scrolled past. The `is-visible` and `is-collapsed` classes are driven by
   assets/js/poly-sticky-cta.js.
   ========================================================================== */

.poly-stickybar {
    --sb-gutter: clamp(12px, 5.2vw, 72px);

    position: fixed;
    inset: auto 0 0;
    z-index: 950;
    display: flex;
    justify-content: flex-end;
    padding-inline: var(--sb-gutter);
    font-family: "DM Sans", system-ui, -apple-system, sans-serif;
    /* The strip spans the viewport so the panel can sit on its right edge;
       only the panel and its handle take clicks. */
    pointer-events: none;
    /* Parked below the fold until the hero is out of view. */
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .55s cubic-bezier(.16,1,.3,1), visibility .55s;
}

.poly-stickybar.is-visible {
    transform: translateY(0);
    visibility: visible;
}

/* Collapsed: the panel slides back out, the handle stays on the viewport edge. */
.poly-stickybar.is-visible.is-collapsed {
    transform: translateY(100%);
}

/* ----------------------------------------------------------------- handle */

.poly-stickybar__toggle {
    position: absolute;
    right: var(--sb-gutter);
    bottom: 100%;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 5px 11px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid #E2E7F1;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 -8px 24px -20px rgba(11, 17, 48, .7);
    color: #2A3355;
    font-family: inherit;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.4;
    pointer-events: auto;
    cursor: pointer;
}

.poly-stickybar__toggle:hover { color: var(--poly-brand, #39439B); }

.poly-stickybar__chevron {
    width: 13px;
    height: 13px;
    flex: none;
    transform: rotate(180deg);
    transition: transform .4s cubic-bezier(.16,1,.3,1);
}

.poly-stickybar.is-collapsed .poly-stickybar__chevron { transform: rotate(0deg); }

/* ------------------------------------------------------------------ panel */

.poly-stickybar__body {
    pointer-events: auto;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid #E2E7F1;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -18px 44px -32px rgba(11, 17, 48, .85);
}

.poly-stickybar__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------------ brand */

.poly-stickybar__brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding-inline-end: 4px;
    text-decoration: none;
}

.poly-stickybar__logo {
    width: auto;
    height: 30px;
    object-fit: contain;
}

.poly-stickybar__wordmark {
    font-family: "SUSE", "DM Sans", sans-serif;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #10173A;
}

/* ------------------------------------------------------------------ links */

.poly-stickybar__link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: none;
    padding: .45rem .85rem;
    background: transparent;
    border: 1px solid #CBD3E4;
    border-radius: 4px;
    color: #10173A;
    text-decoration: none;
    transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

.poly-stickybar__link:hover {
    background: var(--poly-brand, #39439B);
    border-color: var(--poly-brand, #39439B);
    color: #fff;
}

.poly-stickybar__link--whatsapp:hover {
    background: #25D366;
    border-color: #25D366;
}

.poly-stickybar__icon {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--poly-brand, #39439B);
    transition: color .3s ease;
}

.poly-stickybar__link--whatsapp .poly-stickybar__icon { color: #25D366; }
.poly-stickybar__link:hover .poly-stickybar__icon { color: #fff; }

.poly-stickybar__link-text {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.2;
}

/* The eyebrow stays for screen readers; the bar itself runs on one line. */
.poly-stickybar__link-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* -------------------------------------------------------------------- cta */

.poly-stickybar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    flex: none;
    padding: .55rem 1.05rem;
    background: var(--poly-brand, #39439B);
    border: 1px solid var(--poly-brand, #39439B);
    border-radius: 4px;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .3s ease, border-color .3s ease;
}

.poly-stickybar__cta:hover {
    background: var(--poly-brand-700, #2C3480);
    border-color: var(--poly-brand-700, #2C3480);
    color: #fff;
}

.poly-stickybar__cta-arrow {
    width: 15px;
    height: 15px;
    flex: none;
    transition: transform .35s cubic-bezier(.16,1,.3,1);
}

.poly-stickybar__cta:hover .poly-stickybar__cta-arrow { transform: translateX(3px); }

.poly-stickybar :focus-visible {
    outline: 2px solid var(--poly-brand, #39439B);
    outline-offset: 3px;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
    .poly-stickybar__brand { display: none; }
}

@media (max-width: 640px) {
    /* Too little room to float: the panel takes the full width again. */
    .poly-stickybar { --sb-gutter: 0px; }

    .poly-stickybar__toggle { right: 14px; }

    .poly-stickybar__body {
        flex: 1 1 auto;
        border-inline: 0;
        border-radius: 0;
    }

    .poly-stickybar__inner { padding-inline: 12px; }

    /* Phone and WhatsApp shrink to icon buttons so the quote CTA keeps its
       full label, which is the action the bar exists for. */
    .poly-stickybar__link {
        width: 42px;
        height: 42px;
        padding: 0;
        justify-content: center;
    }

    .poly-stickybar__link-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .poly-stickybar__icon { width: 19px; height: 19px; }

    .poly-stickybar__cta {
        flex: 1 1 auto;
        padding-inline: 1rem;
        text-align: center;
    }
}

@media (max-width: 380px) {
    .poly-stickybar__cta-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .poly-stickybar,
    .poly-stickybar__chevron,
    .poly-stickybar__cta-arrow { transition-duration: .001ms !important; }
}

/* Printing a page should never carry the floating bar. */
@media print {
    .poly-stickybar { display: none; }
}
