/* Cross-sell callout — subtle tinted box linking a city's paired service
   (dumpster <-> toilet). Deliberately NOT primary-CTA styling so it never
   competes with the green Book Online buttons. Mirrors the .savings-callout-box
   pattern already used on the dumpster-size pages. */
.cross-sell-section {
    /* Top padding keeps the outlined CTA well clear (32px+) of any booking button
       in the preceding section, so the two never read as a button pair. */
    padding: 32px 0;
}

.cross-sell-callout {
    border: 2px solid var(--primary-green);
    border-left-width: 6px;
    background: #F3FBF6;
    border-radius: var(--radius-md, 8px);
    padding: 24px 28px;
    max-width: 960px;
    margin: 0 auto;
}

.cross-sell-callout-title {
    margin: 0 0 8px;
    color: var(--primary-green-hover, #008847);
}

.cross-sell-callout-text {
    margin: 0;
    line-height: 1.6;
}

/* EDIT 2 — make the inline body link actually look like a link. Scoped to the
   component text so it never restyles links elsewhere on the page. The button
   below lives outside .cross-sell-callout-text, so it keeps its own styling. */
.cross-sell-callout-text a {
    color: var(--primary-green);
    text-decoration: underline;
}

.cross-sell-callout--dumpster .cross-sell-callout-text a {
    color: var(--primary-blue, #1976D2);
}

/* EDIT 1 — secondary/outline CTA button under the paragraph. Reuses .btn-secondary
   (the same outlined button as "Call Now"), so it stays visually quieter than the
   solid-green booking CTAs. Auto-width centered on desktop, full-width on mobile. */
.cross-sell-callout-actions {
    margin-top: 16px;
    text-align: center;
}

@media (max-width: 480px) {
    .cross-sell-callout-cta {
        display: flex;
        width: 100%;
    }
}

/* Blue tint for the toilet -> dumpster direction, so the two blocks read as
   distinct cross-links rather than the same green component twice. */
.cross-sell-callout--dumpster {
    border-color: var(--primary-blue, #1976D2);
    background: #F0F6FD;
}

.cross-sell-callout--dumpster .cross-sell-callout-title {
    color: var(--primary-blue-hover, #1565C0);
}