/* ==========================================================================
   business-products-responsive.css
   Full responsive fixes for: resources/views/frontend/business/business-products.blade.php
   Sections covered: SIDEBAR (filters) + PRODUCT LISTING (cards + pagination)
   Breakpoints: 1440 / 1024 / 768 / 425 / 375 / 320
   Load this file AFTER business-products.css so these rules win.
   ========================================================================== */

/* --------------------------------------------------------------------
   0. BASE / SHARED (applies at every size, sets the mobile-first floor)
   -------------------------------------------------------------------- */
.bp-page-section .container {
    width: 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
}

.sidebar,
.listing-wrapper {
    width: 100%;
}

.sidebar .card {
    margin-bottom: 16px;
}

.sidebar .card-body {
    padding: 15px;
}

.sidebar .card-title {
    font-size: 15px;
}

/* View Mode toggle */
.bvm-toggle-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.bvm-toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}

/* View By buttons */
.view-options {
    display: flex;
    gap: 8px;
    width: 100%;
}

.view-btn {
    flex: 1 1 0;
    min-width: 0;
}

.view-btn-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.view-label {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Search */
.bp-search-wrap {
    position: relative;
    width: 100%;
}

.bp-search-wrap input {
    width: 100%;
    box-sizing: border-box;
}

/* Sort */
.bp-sort-select {
    width: 100%;
    box-sizing: border-box;
}

/* Price range: 2 inputs side by side that wrap on small screens */
.bp-page-section .col-lg-3 .row-price,
.sidebar [class*="Price Range"] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Product card (list view) — base mobile-first: stacked */
.bp-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 5px;
    overflow: hidden;
    border-radius: 12px;
}

.bp-card-image-wrap {
    position: relative;
    width: 100%;
}

.bp-card-img,
.bp-card-no-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.bp-card-no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bp-card-body {
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
}

.bp-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

.bp-product-title {
    font-size: 16px;
    margin: 0;
    flex: 1 1 60%;
    word-break: break-word;
}

.bp-category-tag {
    font-size: 11px;
    white-space: nowrap;
}

.bp-shop-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.bp-shop-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-rating-text {
    margin-left: auto;
    white-space: nowrap;
}

.bp-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.bp-price {
    font-size: 18px;
    font-weight: 700;
}

.bp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
}

.bp-action-row {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.bp-reserve-btn-card {
    flex: 1 1 auto;
    min-width: 120px;
    text-align: center;
}

/* Pagination */
.pagination-list {
    flex-wrap: wrap;
    row-gap: 8px;
}

/* --------------------------------------------------------------------
   1. ≥1440px — Large desktop
   -------------------------------------------------------------------- */
@media (min-width: 1440px) {
    .bp-page-section .container {
        max-width: 1440px;
    }

    .bp-card {
        flex-direction: row;
        align-items: stretch;
    }

    .bp-card-image-wrap {
        width: 260px;
        flex: 0 0 260px;
    }

    .bp-card-img,
    .bp-card-no-image {
        height: 100%;
        min-height: 200px;
    }

    .bp-card-body {
        flex: 1 1 auto;
        padding: 20px;
    }

    .bp-product-title {
        font-size: 18px;
    }

    .bp-price {
        font-size: 20px;
    }
}

/* --------------------------------------------------------------------
   2. 1024px – 1439px — Small desktop / large laptop
   -------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1439.98px) {
    .bp-page-section .container {
        max-width: 980px;
    }

    .bp-card {
        flex-direction: row;
        align-items: stretch;
    }

    .bp-card-image-wrap {
        width: 220px;
        flex: 0 0 220px;
    }

    .bp-card-img,
    .bp-card-no-image {
        height: 100%;
        min-height: 180px;
    }

    .bp-card-body {
        flex: 1 1 auto;
        padding: 16px;
    }

    .view-label {
        font-size: 10px;
    }
}

/* --------------------------------------------------------------------
   3. 768px – 1023px — Tablet
   Bootstrap's col-lg-3 / col-lg-9 only kick in at ≥992px, so this range
   sits right at that edge — force sidebar full width, listing full width,
   and keep product cards stacked (image on top) so they don't get too
   squeezed inside a 3-col rail.
   -------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {

    .col-lg-3,
    .col-lg-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .sidebar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .view-options{
        display: grid;
        grid-template-columns: repeat(8, 1fr);
    }

    .sidebar .card {
        flex: 1 1 calc(50% - 6px);
        margin-bottom: 0;
    }

    .bp-card {
        flex-direction: row;
    }

    .bp-card-image-wrap {
        width: 200px;
        flex: 0 0 200px;
    }

    .bp-card-img,
    .bp-card-no-image {
        height: 100%;
        min-height: 160px;
    }

    .bp-product-title {
        font-size: 15px;
    }

    .bp-price {
        font-size: 17px;
    }
}

/* --------------------------------------------------------------------
   4. 426px – 767px — Large phone / small tablet
   -------------------------------------------------------------------- */
@media (min-width: 426px) and (max-width: 767.98px) {

    .col-lg-3,
    .col-lg-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .sidebar .card-body {
        padding: 14px;
    }

    .view-options {
        gap: 6px;
    }

    .view-label {
        font-size: 10px;
    }

    .bp-card {
        flex-direction: column;
    }

    .bp-card-image-wrap {
        width: 100%;
    }

    .bp-card-img,
    .bp-card-no-image {
        height: 190px;
    }

    .bp-card-body {
        padding: 12px;
    }

    .bp-product-title {
        font-size: 15px;
    }

    .bp-category-tag {
        font-size: 10px;
    }

    .bp-price {
        font-size: 16px;
    }

    .bp-meta {
        font-size: 11px;
        gap: 8px;
    }

    .bp-reserve-btn-card {
        flex: 1 1 100%;
    }

    .bp-view-btn-card-icon {
        width: 28px;
        height: 28px;
    }
}

/* --------------------------------------------------------------------
   5. 376px – 425px — Standard mobile
   -------------------------------------------------------------------- */
@media (min-width: 376px) and (max-width: 425.98px) {
    .bp-page-section .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .bvm-toggle-label {
        justify-content: center;
    }

    #bvm-business-label,
    #bvm-products-label {
        font-size: 12px;
    }

    .view-options {
        gap: 5px;
    }

    .view-btn-inner i {
        font-size: 14px;
    }

    .view-label {
        font-size: 9px;
    }

    .bp-card {
        flex-direction: column;
    }

    .bp-card-img,
    .bp-card-no-image {
        height: 170px;
    }

    .bp-card-body {
        padding: 12px;
    }

    .bp-card-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .bp-product-title {
        font-size: 14.5px;
    }

    .bp-category-tag {
        align-self: flex-start;
    }

    .bp-price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .bp-price {
        font-size: 16px;
    }

    .bp-meta {
        width: 100%;
        justify-content: space-between;
        font-size: 11px;
    }

    .bp-action-row {
        flex-direction: row;
    }

    .bp-reserve-btn-card {
        flex: 1 1 auto;
        font-size: 13px;
        padding: 8px 10px;
    }

    .pagination-list .page-link {
        padding: 6px 10px;
        font-size: 13px;
    }
}

/* --------------------------------------------------------------------
   6. 321px – 375px — Small mobile (iPhone SE / 12 mini class)
   -------------------------------------------------------------------- */
@media (min-width: 321px) and (max-width: 375.98px) {
    .bp-page-section .container {
        padding-left: 8px;
        padding-right: 8px;
    }

    .sidebar .card-body {
        padding: 12px;
    }

    .sidebar .card-title {
        font-size: 14px;
    }

    .view-options {
        gap: 4px;
    }

    .view-btn-inner i {
        font-size: 13px;
    }

    .view-label {
        font-size: 8.5px;
    }

    .bp-card-img,
    .bp-card-no-image {
        height: 150px;
    }

    .bp-card-body {
        padding: 10px;
    }

    .bp-product-title {
        font-size: 14px;
    }

    .bp-category-tag {
        font-size: 9px;
        padding: 2px 6px;
    }

    .bp-shop-row {
        font-size: 12px;
    }

    .bp-rating-text {
        margin-left: 0;
        width: 100%;
    }

    .bp-price {
        font-size: 15px;
    }

    .bp-meta {
        font-size: 10.5px;
        gap: 6px;
    }

    .bp-meta-item {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .bp-action-row {
        gap: 8px;
    }

    .bp-reserve-btn-card {
        font-size: 12.5px;
        padding: 7px 8px;
    }

    .bp-view-btn-card-icon {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .pagination-list {
        gap: 2px;
    }

    .pagination-list .page-link {
        padding: 5px 9px;
        font-size: 12.5px;
    }
}

/* --------------------------------------------------------------------
   7. ≤320px — Extra small mobile
   -------------------------------------------------------------------- */
@media (max-width: 320.98px) {
    .bp-page-section .container {
        padding-left: 6px;
        padding-right: 6px;
    }

    .sidebar .card-body {
        padding: 10px;
    }

    .sidebar .card-title {
        font-size: 13px;
    }

    .bvm-toggle-label {
        flex-direction: column;
        gap: 6px;
    }

    #bvm-business-label,
    #bvm-products-label {
        font-size: 11px;
    }

    .view-options {
        flex-wrap: wrap;
    }

    .view-btn {
        flex: 1 1 30%;
    }

    .view-btn-inner i {
        font-size: 12px;
    }

    .view-label {
        font-size: 8px;
    }

    .bp-card {
        margin-bottom: 14px;
    }

    .bp-card-img,
    .bp-card-no-image {
        height: 140px;
    }

    .bp-card-body {
        padding: 8px;
    }

    .bp-product-title {
        font-size: 13px;
    }

    .bp-category-tag {
        font-size: 8.5px;
        padding: 2px 5px;
    }

    .bp-shop-row {
        font-size: 11px;
        gap: 4px;
    }

    .bp-rating-text {
        margin-left: 0;
        width: 100%;
    }

    .bp-price-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .bp-price {
        font-size: 14px;
    }

    .bp-meta {
        flex-direction: column;
        gap: 4px;
        font-size: 10px;
    }

    .bp-action-row {
        flex-direction: column;
        align-items: stretch;
    }

    .bp-reserve-btn-card {
        width: 100%;
        font-size: 12px;
        padding: 7px;
    }

    .bp-view-btn-card-icon {
        align-self: center;
        width: 24px;
        height: 24px;
        font-size: 11px;
        margin-top: 6px;
    }

    .pagination-list .page-link {
        padding: 4px 8px;
        font-size: 12px;
    }
}

/* ===== COVER RESPONSIVE ===== */
@media (max-width: 991px) {
    .bp-cover-img {
        height: 260px;
    }
    .bp-cover-name {
        font-size: 18px;
    }
    .bp-cover-logo {
        width: 90px;
        height: 90px;
        margin-top: -45px;
    }
    .bp-cover-rank strong {
        font-size: 16px;
    }
    .bp-cover-stats {
        gap: 16px;
    }
    .bp-cover-stats span {
        font-size: 12px;
    }
}
@media (max-width: 767px) {
    .bp-cover-img {
        height: 200px;
    }
    .bp-cover-actions {
        bottom: 12px;
        right: 12px;
        gap: 6px;
    }
    .bp-cover-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    .bp-profile-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 8px 0 16px;
    }
    .bp-profile-left {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
    }
    .bp-cover-rank {
        font-size: 12px;
        line-height: 1.15;
        text-align: center;
        background: #f1f5f9;
        padding: 5px 8px;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
        flex-shrink: 0;
        min-width: 44px;
    }
    .bp-cover-rank strong {
        display: block;
        font-size: 15px;
        font-weight: 800;
        color: #0f172a;
    }
    .bp-cover-logo {
        width: 72px;
        height: 72px;
        margin-top: -36px;
        flex-shrink: 0;
        border-width: 3px;
    }
    .bp-cover-details {
        flex: 1;
        min-width: 0;
    }
    .bp-cover-title-row {
        gap: 4px 8px;
    }
    .bp-cover-name {
        font-size: 16px;
        line-height: 1.25;
        word-break: break-word;
    }
    .bp-cover-verified {
        font-size: 11px;
        white-space: nowrap;
    }
    .bp-cover-meta {
        flex-wrap: wrap;
        gap: 4px 8px;
        margin-top: 2px;
    }
    .bp-cover-location {
        font-size: 12px;
    }
    .bp-cover-rating {
        font-size: 11px;
    }
    .bp-cover-stats {
        width: 100%;
        margin-left: 0;
        justify-content: space-around;
        padding: 8px 12px;
        background: #f8fafc;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        box-sizing: border-box;
    }
    .bp-cover-stats span {
        font-size: 12px;
    }
}
@media (max-width: 480px) {
    .bp-cover-img {
        height: 170px;
    }
    .bp-cover-actions {
        bottom: 8px;
        right: 8px;
        gap: 6px;
    }
    .bp-cover-btn {
        padding: 5px 10px;
        font-size: 11px;
    }
    .bp-profile-left {
        gap: 8px;
    }
    .bp-cover-rank {
        padding: 4px 6px;
        min-width: 38px;
        font-size: 11px;
    }
    .bp-cover-rank strong {
        font-size: 14px;
    }
    .bp-cover-logo {
        width: 64px;
        height: 64px;
        margin-top: -32px;
    }
    .bp-cover-name {
        font-size: 14px;
    }
    .bp-cover-stats {
        padding: 6px 8px;
        gap: 8px;
    }
    .bp-cover-stats span {
        font-size: 11px;
    }
}