/* ── WDB Frontend Styles ─────────────────────────────── */
.wdb-frontend-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.wdb-widget {
    margin-bottom: 20px;
}

.wdb-widget:last-child {
    margin-bottom: 0;
}

/* Button */
.wdb-button {
    display: inline-block;
    text-decoration: none;
    transition: opacity 0.2s;
}
.wdb-button:hover {
    opacity: 0.9;
}

/* Image */
.wdb-image-wrapper img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/* Section */
.wdb-section {
    margin-bottom: 20px;
}

/* Spacer */
.wdb-spacer hr {
    border: none;
    margin: 0;
}

/* ── Device Visibility ───────────────────────────────── */
/* Desktop: > 1024px | Tablet: 768–1024px | Mobile: < 768px */

@media (max-width: 767px) {
    .wdb-show-desktop-only,
    .wdb-show-desktop-tablet {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .wdb-show-desktop-only,
    .wdb-show-mobile-only {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .wdb-show-mobile-only,
    .wdb-show-tablet-only,
    .wdb-show-tablet-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .wdb-show-mobile-only {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .wdb-show-desktop-only {
        display: none !important;
    }
}

/* Tablet only: hide on both desktop and mobile */
@media (max-width: 767px), (min-width: 1025px) {
    .wdb-show-tablet-only {
        display: none !important;
    }
}