/* =====================================================================
 *  Business Carousel Pro — Frontend Stylesheet
 *  Premium card-carousel design with CSS custom properties for theming.
 *  Version: 1.0.0
 * ===================================================================== */

/* ── Design Tokens ──────────────────────────────────────────────────── */
:root {
    --bcp-accent:         #3b82f6;
    --bcp-accent-hover:   #2563eb;
    --bcp-accent-light:   rgba(59, 130, 246, 0.08);
    --bcp-card-bg:        #ffffff;
    --bcp-card-radius:    12px;
    --bcp-shadow:         0 2px 12px rgba(0, 0, 0, 0.08);
    --bcp-shadow-hover:   0 8px 30px rgba(0, 0, 0, 0.12);
    --bcp-shadow-nav:     0 2px 14px rgba(0, 0, 0, 0.10);
    --bcp-text:           #1f2937;
    --bcp-text-light:     #6b7280;
    --bcp-text-lighter:   #9ca3af;
    --bcp-star:           #f59e0b;
    --bcp-border:         #e5e7eb;
    --bcp-heart:          #ef4444;
    --bcp-badge-green:    #22c55e;
    --bcp-placeholder-a:  #e0e7ff;
    --bcp-placeholder-b:  #c7d2fe;
    --bcp-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                          Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
                          sans-serif;
    --bcp-transition:     0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --bcp-transition-fast:0.2s ease;
}

/* ── Keyframes ──────────────────────────────────────────────────────── */
@keyframes bcpFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bcpPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.2); }
}

@keyframes bcpShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── Wrapper ────────────────────────────────────────────────────────── */
.bcp-carousel-wrapper {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 54px 48px;
    font-family: var(--bcp-font);
    box-sizing: border-box;
}

.bcp-carousel-wrapper *,
.bcp-carousel-wrapper *::before,
.bcp-carousel-wrapper *::after {
    box-sizing: border-box;
}

/* ── No results ─────────────────────────────────────────────────────── */
.bcp-no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--bcp-text-light);
    font-size: 15px;
    font-family: var(--bcp-font);
}

/* ── Swiper overrides ───────────────────────────────────────────────── */
.bcp-swiper {
    overflow: hidden;
    padding: 4px 0 8px;          /* space for card hover lift shadow */
}

.bcp-swiper .swiper-slide {
    height: auto;                /* equal-height cards handled by flex */
    animation: bcpFadeInUp 0.5s ease both;
}

/* staggered entrance for visible slides */
.bcp-swiper .swiper-slide:nth-child(1)  { animation-delay: 0s;   }
.bcp-swiper .swiper-slide:nth-child(2)  { animation-delay: 0.08s; }
.bcp-swiper .swiper-slide:nth-child(3)  { animation-delay: 0.16s; }
.bcp-swiper .swiper-slide:nth-child(4)  { animation-delay: 0.24s; }
.bcp-swiper .swiper-slide:nth-child(5)  { animation-delay: 0.32s; }

/* ── Card ───────────────────────────────────────────────────────────── */
.bcp-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bcp-card-bg);
    border-radius: var(--bcp-card-radius);
    box-shadow: var(--bcp-shadow);
    overflow: hidden;
    transition: transform var(--bcp-transition),
                box-shadow var(--bcp-transition);
    will-change: transform;
}

.bcp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bcp-shadow-hover);
}

/* ── Card Image ─────────────────────────────────────────────────────── */
.bcp-card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bcp-placeholder-a), var(--bcp-placeholder-b));
    flex-shrink: 0;
}

.bcp-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--bcp-transition);
}

.bcp-card:hover .bcp-card-image img {
    transform: scale(1.05);
}

/* Placeholder gradient when no thumbnail */
.bcp-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        var(--bcp-placeholder-a) 0%,
        var(--bcp-placeholder-b) 50%,
        var(--bcp-placeholder-a) 100%
    );
    background-size: 200% 100%;
    animation: bcpShimmer 3s ease infinite;
}

/* ── Badge ──────────────────────────────────────────────────────────── */
.bcp-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--bcp-badge-green);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* ── Wishlist Heart ─────────────────────────────────────────────────── */
.bcp-wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: var(--bcp-text-light);
    cursor: pointer;
    transition: transform var(--bcp-transition-fast),
                background var(--bcp-transition-fast),
                color var(--bcp-transition-fast);
    padding: 0;
    outline: none;
}

.bcp-wishlist:hover {
    transform: scale(1.12);
    background: #ffffff;
    color: var(--bcp-heart);
}

.bcp-wishlist:focus-visible {
    box-shadow: 0 0 0 3px var(--bcp-accent-light),
                0 2px 8px rgba(0, 0, 0, 0.12);
}

.bcp-wishlist.active {
    color: var(--bcp-heart);
    background: #ffffff;
}

.bcp-wishlist.active svg {
    fill: var(--bcp-heart);
    animation: bcpPulse 0.4s ease;
}

/* ── Card Body ──────────────────────────────────────────────────────── */
.bcp-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 20px 20px;
}

/* ── Title ──────────────────────────────────────────────────────────── */
.bcp-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--bcp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Meta (rating row) ──────────────────────────────────────────────── */
.bcp-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--bcp-text-light);
    margin-bottom: 6px;
    line-height: 1.4;
}

.bcp-star {
    color: var(--bcp-star);
    font-size: 15px;
    line-height: 1;
}

.bcp-rating {
    font-weight: 600;
    color: var(--bcp-text);
}

.bcp-reviews {
    color: var(--bcp-text-lighter);
}

.bcp-dot {
    margin: 0 2px;
    color: var(--bcp-text-lighter);
}

.bcp-cuisine {
    color: var(--bcp-text-light);
}

/* ── Location ───────────────────────────────────────────────────────── */
.bcp-location {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    color: var(--bcp-text-light);
    margin-bottom: 6px;
    line-height: 1.45;
}

.bcp-location svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--bcp-text-lighter);
}

.bcp-location span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Price ───────────────────────────────────────────────────────────── */
.bcp-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--bcp-text);
    margin-bottom: 10px;
    line-height: 1.4;
}

/* ── Feature Tags ───────────────────────────────────────────────────── */
.bcp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.bcp-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--bcp-text-light);
    padding: 4px 10px;
    border: 1px solid var(--bcp-border);
    border-radius: 20px;
    line-height: 1.4;
    transition: border-color var(--bcp-transition-fast),
                background var(--bcp-transition-fast);
    white-space: nowrap;
}

.bcp-tag:hover {
    border-color: var(--bcp-text-lighter);
    background: rgba(0, 0, 0, 0.02);
}

.bcp-tag-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Actions ────────────────────────────────────────────────────────── */
.bcp-actions {
    display: flex;
    gap: 10px;
    border-top: 1px solid var(--bcp-border);
    padding-top: 16px;
    margin-top: auto;                       /* push to bottom of flex card */
}

.bcp-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    cursor: pointer;
    transition: all var(--bcp-transition-fast);
    white-space: nowrap;
}

.bcp-btn:focus-visible {
    outline: 2px solid var(--bcp-accent);
    outline-offset: 2px;
}

/* View Details — outlined */
.bcp-btn-details {
    border: 1px solid var(--bcp-border);
    background: var(--bcp-card-bg);
    color: var(--bcp-text);
}

.bcp-btn-details:hover {
    border-color: var(--bcp-accent);
    color: var(--bcp-accent);
    background: var(--bcp-accent-light);
}

/* Call — solid blue */
.bcp-btn-call {
    border: 1px solid transparent;
    background: var(--bcp-accent);
    color: #ffffff;
}

.bcp-btn-call:hover {
    background: var(--bcp-accent-hover);
    color: #ffffff;
}

.bcp-btn-call svg {
    flex-shrink: 0;
}

/* ── Navigation Arrows ──────────────────────────────────────────────── */
.bcp-nav-prev,
.bcp-nav-next {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 20px));  /* offset for pagination space */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--bcp-card-bg);
    box-shadow: var(--bcp-shadow-nav);
    color: var(--bcp-text);
    cursor: pointer;
    transition: transform var(--bcp-transition-fast),
                box-shadow var(--bcp-transition-fast),
                background var(--bcp-transition-fast);
    padding: 0;
    outline: none;
}

.bcp-nav-prev { left: 0; }
.bcp-nav-next { right: 0; }

.bcp-nav-prev:hover,
.bcp-nav-next:hover {
    transform: translateY(calc(-50% - 20px)) scale(1.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
    background: var(--bcp-accent);
    color: #ffffff;
}

.bcp-nav-prev:focus-visible,
.bcp-nav-next:focus-visible {
    box-shadow: 0 0 0 3px var(--bcp-accent-light),
                var(--bcp-shadow-nav);
}

.bcp-nav-prev.swiper-button-disabled,
.bcp-nav-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* ── Pagination ─────────────────────────────────────────────────────── */
.bcp-pagination {
    text-align: center;
    margin-top: 20px;
    position: relative;
    bottom: auto !important;
}

.bcp-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--bcp-border);
    opacity: 1;
    margin: 0 5px !important;
    transition: all var(--bcp-transition-fast);
    border-radius: 4px;
}

.bcp-pagination .swiper-pagination-bullet-active {
    width: 24px;
    background: var(--bcp-accent);
}

/* =====================================================================
 *  Responsive
 * ===================================================================== */

/* ── Tablets & small laptops ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .bcp-carousel-wrapper {
        padding: 10px 48px 44px;
    }
}

/* ── Tablets portrait ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .bcp-carousel-wrapper {
        padding: 8px 42px 40px;
    }

    .bcp-card-image {
        height: 180px;
    }

    .bcp-title {
        font-size: 16px;
    }

    .bcp-meta {
        font-size: 13px;
    }

    .bcp-card-body {
        padding: 14px 16px 16px;
    }

    .bcp-btn {
        padding: 9px 12px;
        font-size: 13px;
    }

    .bcp-nav-prev,
    .bcp-nav-next {
        width: 38px;
        height: 38px;
    }

    .bcp-nav-prev svg,
    .bcp-nav-next svg {
        width: 17px;
        height: 17px;
    }
}

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .bcp-carousel-wrapper {
        padding: 6px 8px 36px;
    }

    .bcp-card-image {
        height: 170px;
    }

    .bcp-title {
        font-size: 15px;
    }

    .bcp-location {
        font-size: 12px;
    }

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

    .bcp-tags {
        gap: 6px;
        margin-bottom: 12px;
    }

    .bcp-tag {
        padding: 3px 8px;
        font-size: 11px;
    }

    .bcp-actions {
        padding-top: 12px;
    }

    .bcp-btn {
        padding: 8px 10px;
        font-size: 12px;
        border-radius: 6px;
    }

    /* Hide arrow buttons on mobile — swipe is primary interaction */
    .bcp-nav-prev,
    .bcp-nav-next {
        display: none;
    }
}

/* ── Print ────────────────────────────────────────────────────────── */
@media print {
    .bcp-carousel-wrapper {
        padding: 0;
    }

    .bcp-nav-prev,
    .bcp-nav-next,
    .bcp-pagination,
    .bcp-wishlist {
        display: none !important;
    }

    .bcp-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}