/* ============================================================
   Responsive Fixes — Planeta Aquarela
   ============================================================ */

/* ----------------------------------------------------------
   Navbar logo
   ---------------------------------------------------------- */
.site-logo {
    width: auto;
    height: 60px;
    display: block;
    transition: height 0.2s ease;
}

@media (min-width: 576px) {
    .site-logo {
        height: 80px;
    }
}

@media (min-width: 992px) {
    .site-logo {
        height: 120px;
    }
}

/* Logo inside offcanvas mobile menu */
.offcanvas-header .site-logo {
    height: 44px;
}

/* ----------------------------------------------------------
   Footer logo
   ---------------------------------------------------------- */
.footer-logo {
    width: auto;
    max-width: 180px;
    height: auto;
    max-height: 90px;
    object-fit: contain;
    display: block;
}

/* ----------------------------------------------------------
   Admin sidebar logo
   ---------------------------------------------------------- */
.admin-sidebar-logo {
    width: 100%;
    max-width: 140px;
    height: auto;
    object-fit: contain;
}

/* ----------------------------------------------------------
   Payment method icons (MB Way / Multibanco / Transferência)
   ---------------------------------------------------------- */
.payment-icon {
    height: 26px;
    width: auto;
    max-width: 70px;
    object-fit: contain;
    vertical-align: middle;
    margin-left: 8px;
}

/* ----------------------------------------------------------
   Scheduler calendar — fluid height instead of fixed 768px
   ---------------------------------------------------------- */
.scheduler-responsive {
    height: clamp(420px, 65vh, 768px);
}

/* ----------------------------------------------------------
   Full-page loaders — avoid occupying 100vh inside dialogs
   ---------------------------------------------------------- */
.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    width: 100%;
}

/* ----------------------------------------------------------
   BackOffice DataGrids — horizontal scroll on small screens
   ---------------------------------------------------------- */
.card-body .rz-data-grid {
    overflow-x: auto;
}

/* ----------------------------------------------------------
   Shop sidebar — stack nicely on mobile
   ---------------------------------------------------------- */
@media (max-width: 991.98px) {
    .shop-sidebar {
        margin-top: 2rem;
        border-top: 1px solid #dee2e6;
        padding-top: 1.5rem;
    }
}

/* ----------------------------------------------------------
   Generic: ensure images never overflow their container
   ---------------------------------------------------------- */
img {
    max-width: 100%;
}

/* ----------------------------------------------------------
   Form rows — prevent horizontal overflow on xs screens
   ---------------------------------------------------------- */
@media (max-width: 575.98px) {
    .row.gx-md-8,
    .row.gx-xl-12 {
        --bs-gutter-x: 0.75rem;
    }
}

/* ----------------------------------------------------------
   Radzen form fields — full width on xs
   ---------------------------------------------------------- */
@media (max-width: 575.98px) {
    .rz-form-field {
        width: 100% !important;
    }
}