/* Real-workspace previews for Cofibit, using authentic native cafe screenshots. */
.cofibit-public .cofibit-preview-rotator { aspect-ratio: 1200 / 520; }
.cofibit-public .cofibit-preview-slide {
    display: grid; grid-template-columns: .9fr 1.4fr; align-items: center;
    gap: 28px; padding: 36px; background: linear-gradient(135deg, #FFFFFF, #F0EBF3);
    color: #422E59; box-sizing: border-box;
}
.cofibit-public .cofibit-preview-copy { min-width: 0; }
.cofibit-public .cofibit-preview-logo { object-fit: contain; width: 104px; height: 82px; margin-bottom: 12px; }
.cofibit-public .cofibit-preview-copy h2 { color: #422E59; font-size: clamp(1.3rem, 2.3vw, 2.2rem); font-weight: 900; line-height: 1.6; }
.cofibit-public .cofibit-preview-copy p { color: #675772; line-height: 1.9; font-size: .98rem; }
.cofibit-public .cofibit-preview-copy small { display: block; color: #786D80; font-size: .72rem; line-height: 1.7; }
.cofibit-public .cofibit-preview-screen { min-width: 0; overflow: hidden; border: 7px solid #422E59; border-radius: 18px; background: white; box-shadow: 0 18px 32px rgba(66,46,89,.13); }
.cofibit-public .cofibit-preview-screen img { width: 100%; height: auto; display: block; }
.cofibit-public .payment-banner-progress::before { background: #9D7DAE; }
.cofibit-public .cofibit-rotator-toggle { margin-top: 8px; background: white; color: #422E59; border: 1px solid #D8CEE0; font-size: .75rem; min-height: 38px; }
.cofibit-public .payment-banner-card.is-paused .payment-banner-progress::before { animation-play-state: paused; }
@media(max-width: 991px) {
    .cofibit-public .cofibit-preview-slide { padding: 20px; gap: 16px; }
    .cofibit-public .cofibit-preview-logo { width: 80px; height: 54px; margin-bottom: 5px; }
    .cofibit-public .cofibit-preview-copy p { font-size: .86rem; }
}
@media(max-width: 600px) {
    .cofibit-public .cofibit-preview-rotator { aspect-ratio: auto; height: 510px; }
    .cofibit-public .cofibit-preview-slide { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; padding: 20px; gap: 18px; }
    .cofibit-public .cofibit-preview-copy h2 { font-size: 1.3rem; }
    .cofibit-public .cofibit-preview-screen { align-self: start; border-width: 5px; }
}
@media(prefers-reduced-motion: reduce) {
    .cofibit-public .payment-options-banner { transition: none; }
    .cofibit-public .payment-banner-progress::before { animation: none; }
}