/* ========================================
   Entry Theme Custom Styles - Vendors Page
   Professional Modern UI Design
   ======================================== */

/* Vendors Page Container */
.vendors-page-wrapper {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    min-height: 100vh;
    padding-bottom: 60px;
}

/* Professional Store Card */
.others-store-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.others-store-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    border-color: var(--primary, #f93355);
}

/* Store Banner */
.other-store-banner {
    position: relative;
    height: 180px;
    background: var(--bs-primary, #0052ea);
    overflow: hidden;
}

.other-store-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 100%);
    z-index: 1;
}

.other-store-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.others-store-card:hover .other-store-banner img {
    transform: scale(1.1);
}

/* Card Body */
.others-store-card .name-area {
    position: relative;
    padding: 0 24px;
    margin-top: -45px;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Store Logo */
.other-store-logo {
    width: 90px;
    height: 90px;
    margin: 0 auto;
    border: 5px solid #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.other-store-logo::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 2px solid var(--primary, #f93355);
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.others-store-card:hover .other-store-logo::after {
    opacity: 1;
    transform: scale(1);
}

.other-store-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.others-store-card:hover .other-store-logo {
    transform: scale(1.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(0, 0, 0, 0.12);
}

/* Temporary Closed Badge */
.temporary-closed {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    backdrop-filter: blur(8px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* Store Info */
.others-store-card .name-area .info {
    text-align: center;
    margin-top: 16px;
    flex: 1;
}

.others-store-card .name-area .info h5 {
    font-size: 18px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s ease;
    line-height: 1.4;
}

.others-store-card:hover .name-area .info h5 {
    color: var(--primary, #f93355);
}

/* Rating Section */
.store-rating-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 8px 16px;
    border-radius: 50px;
    margin: 0 auto;
}

.others-store-card .name-area .info .d-flex {
    justify-content: center;
    gap: 4px;
    font-size: 14px;
}

.others-store-card .name-area .info h6 {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    color: #92400e;
}

.others-store-card .name-area .info small {
    font-size: 13px;
    color: #92400e;
    font-weight: 600;
    text-transform: capitalize;
}

.text-star {
    color: #f59e0b;
    font-size: 16px;
    filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.3));
}

/* Info Area (Reviews & Products) */
.others-store-card .info-area {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px 24px;
    margin-top: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-top: 2px solid #e2e8f0;
    gap: 20px;
    position: relative;
}

.others-store-card .info-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, #cbd5e1 50%, transparent 100%);
}

.others-store-card .info-area .info-item {
    flex: 1;
    text-align: center;
    position: relative;
}

.others-store-card .info-area .info-item h6 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: var(--bs-primary, #0052ea);
    transition: all 0.3s ease;
}

.others-store-card:hover .info-area .info-item h6 {
    transform: scale(1.1);
}

.others-store-card .info-area .info-item span {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Rounded utilities */
.rounded-10 {
    border-radius: 10px !important;
}

.rounded-20 {
    border-radius: 20px !important;
}

.rounded-full {
    border-radius: 50% !important;
}

/* Background utilities */
.bg-primary-light {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.08) 100%) !important;
    position: relative;
    overflow: hidden;
}

.bg-primary-light::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

/* Page Header Styles */
.vendors-page-header {
    background-color: var(--bs-primary, #0052ea);
    padding: 30px 0;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.vendors-page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.5;
}

.vendors-page-header h4 {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.vendors-page-header p {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Search Section */
.search-wrapper {
    background: #ffffff;
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.input-group .form-control.rounded-10 {
    border: none;
    padding: 14px 20px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: transparent;
}

.input-group .form-control.rounded-10:focus {
    outline: none;
    box-shadow: none;
    background: #f8fafc;
}

.input-group .btn.rounded-10 {
    border-radius: 10px !important;
    background: var(--bs-primary, #0052ea);
    color: #ffffff;
    border: none;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 13px;
    text-transform: capitalize;
    transition: all 0.3s ease;
}

.input-group .btn.rounded-10:hover {
    filter: brightness(0.9);
}

/* Header Section */
.bg-primary-light.rounded-10 {
    position: relative;
    overflow: hidden;
}

.bg-primary-light h4 {
    font-size: 32px;
    letter-spacing: 0.5px;
}

.bg-primary-light p {
    color: var(--text, #545454);
    max-width: 100%;
}

/* Grid improvements */
.__inline-65 {
    min-height: 65vh;
}

.__min-h-200px {
    min-height: 200px;
}

/* Empty State */
.text-muted h4 {
    font-size: 24px;
    font-weight: 600;
    margin-top: 16px;
}

.text-muted p {
    font-size: 14px;
    color: var(--text-2, #909090);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Large Devices (Desktops, 1200px and up) */
@media (min-width: 1200px) {
    .others-store-card {
        max-width: 100%;
    }
}

/* Medium Devices (Tablets, 992px to 1199px) */
@media (max-width: 1199.98px) {
    .others-store-card .name-area .info h5 {
        font-size: 17px;
    }

    .other-store-logo {
        width: 85px;
        height: 85px;
    }

    .other-store-banner {
        height: 160px;
    }

    .others-store-card .info-area .info-item h6 {
        font-size: 20px;
    }
}

/* Small to Medium Devices (Tablets, 768px to 991px) */
@media (max-width: 991.98px) {
    .vendors-page-header {
        padding: 36px 0;
        margin-bottom: 36px;
    }

    .vendors-page-header h4 {
        font-size: 28px !important;
    }

    .other-store-banner {
        height: 150px;
    }

    .other-store-logo {
        width: 80px;
        height: 80px;
    }

    .others-store-card .name-area .info h5 {
        font-size: 16px;
    }

    .others-store-card .info-area {
        padding: 18px 20px;
    }
}

/* Small Devices (Landscape Phones, 576px to 767px) */
@media (max-width: 767.98px) {
    .vendors-page-wrapper {
        padding-bottom: 40px;
    }

    .vendors-page-header {
        padding: 28px 0;
        margin-bottom: 28px;
    }

    .vendors-page-header h4 {
        font-size: 24px !important;
        letter-spacing: 0.5px;
    }

    .vendors-page-header p {
        font-size: 13px;
    }

    .other-store-banner {
        height: 140px;
    }

    .other-store-logo {
        width: 75px;
        height: 75px;
        border-width: 4px;
    }

    .others-store-card .name-area {
        margin-top: -40px;
        padding: 0 20px;
    }

    .others-store-card .name-area .info {
        margin-top: 14px;
    }

    .others-store-card .name-area .info h5 {
        font-size: 15px;
    }

    .others-store-card .info-area {
        padding: 16px 20px;
    }

    .others-store-card .info-area .info-item h6 {
        font-size: 19px;
    }

    .others-store-card .info-area .info-item span {
        font-size: 11px;
    }

    .input-group .form-control.rounded-10 {
        padding: 12px 18px;
        font-size: 14px;
    }

    .input-group .btn.rounded-10 {
        padding: 12px 24px;
        font-size: 13px;
    }

    .search-wrapper {
        margin-top: 16px;
    }
}

/* Extra Small Devices (Phones, less than 576px) */
@media (max-width: 575.98px) {
    .vendors-page-header {
        padding: 24px 0;
        margin-bottom: 24px;
    }

    .vendors-page-header h4 {
        font-size: 22px !important;
        margin-bottom: 8px !important;
    }

    .vendors-page-header p {
        font-size: 12px;
    }

    .other-store-banner {
        height: 120px;
    }

    .other-store-logo {
        width: 70px;
        height: 70px;
        border-width: 4px;
    }

    .others-store-card .name-area {
        margin-top: -35px;
        padding: 0 16px;
    }

    .others-store-card .name-area .info h5 {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .others-store-card .name-area .info h6 {
        font-size: 14px;
    }

    .others-store-card .name-area .info small {
        font-size: 11px;
    }

    .text-star {
        font-size: 14px;
    }

    .store-rating-wrapper {
        padding: 6px 12px;
    }

    .others-store-card .info-area {
        padding: 14px 16px;
        gap: 16px;
    }

    .others-store-card .info-area .info-item h6 {
        font-size: 18px;
    }

    .others-store-card .info-area .info-item span {
        font-size: 10px;
    }

    .input-group .form-control.rounded-10 {
        padding: 11px 16px;
        font-size: 13px;
    }

    .input-group .btn.rounded-10 {
        padding: 11px 20px;
        font-size: 12px;
    }

    .temporary-closed {
        font-size: 10px;
        padding: 6px 12px;
    }
}

/* Ultra Small Devices (Very Small Phones, less than 375px) */
@media (max-width: 374.98px) {
    .vendors-page-header h4 {
        font-size: 20px !important;
    }

    .other-store-banner {
        height: 100px;
    }

    .other-store-logo {
        width: 60px;
        height: 60px;
        border-width: 3px;
    }

    .others-store-card .name-area {
        margin-top: -30px;
        padding: 0 12px;
    }

    .others-store-card .name-area .info h5 {
        font-size: 13px;
    }

    .others-store-card .info-area {
        padding: 12px;
        gap: 12px;
    }

    .others-store-card .info-area .info-item h6 {
        font-size: 16px;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.others-store-card {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

.others-store-card:nth-child(1) { animation-delay: 0.05s; }
.others-store-card:nth-child(2) { animation-delay: 0.1s; }
.others-store-card:nth-child(3) { animation-delay: 0.15s; }
.others-store-card:nth-child(4) { animation-delay: 0.2s; }
.others-store-card:nth-child(5) { animation-delay: 0.25s; }
.others-store-card:nth-child(6) { animation-delay: 0.3s; }
.others-store-card:nth-child(7) { animation-delay: 0.35s; }
.others-store-card:nth-child(8) { animation-delay: 0.4s; }
.others-store-card:nth-child(9) { animation-delay: 0.05s; }
.others-store-card:nth-child(10) { animation-delay: 0.1s; }
.others-store-card:nth-child(11) { animation-delay: 0.15s; }
.others-store-card:nth-child(12) { animation-delay: 0.2s; }

/* Hover Effects */
.others-store-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bs-primary, #0052ea);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

.others-store-card:hover::after {
    transform: scaleX(1);
}

/* Loading Skeleton (Optional) */
.skeleton-loader {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

/* Empty State */
.empty-state {
    animation: fadeInUp 0.6s ease forwards;
}

/* Pagination Styles */
.pagination {
    margin-top: 40px;
}

.pagination .page-link {
    border-radius: 8px !important;
    margin: 0 4px;
    border: 2px solid #e2e8f0;
    color: #64748b;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pagination .page-link:hover {
    background: var(--bs-primary, #0052ea);
    color: #ffffff;
    border-color: var(--bs-primary, #0052ea);
}

.pagination .page-item.active .page-link {
    background: var(--primary-dark, var(--bs-primary, #0d6efd));
    border-color: var(--primary-dark, var(--bs-primary, #0d6efd));
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb, 13,110,253), 0.3);
}

/* Utility Classes */
.gradient-text {
    color: var(--bs-primary, #0052ea);
}

.glass-effect {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Print Styles */
@media print {
    .others-store-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}


/* =========================================================================
   Store card
   -------------------------------------------------------------------------
   Used by the store directory (seller-view/sellers) and the "top vendors"
   rail on the home page. It lived inline in the directory page while home
   carried a second, five-band copy of the same idea under .vendor-* in
   styles.css -- two designs for one object, drifting apart. One definition
   now, here, because both pages load this sheet.
   ========================================================================= */

/* --- Store card ----------------------------------------------------
   It used to be five stacked bands: banner, a floating avatar on its own
   divider, a centred name, a stats table, then a footer. Two rules now.
   The logo sits beside the name rather than over the banner, because the
   banner is the store's own artwork and half of them already have the
   name printed on it -- overlaying it a second time is noise. */
.st-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border-color, #eee);
    border-radius: 3px;
    background: var(--color-base-background-1, #fff);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.st-card:hover {
    border-color: var(--main-color2, #000);
}

.st-banner {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-base-background-2, #f7f7f7);
    overflow: hidden;
}

.st-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Closed is the one thing on this page allowed to shout: a shopper who
   misses it wastes a trip into the store. */
.st-status {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 9px;
    border-radius: 3px;
    background: var(--main-color, #f93355);
    color: var(--color-base-background-1, #fff);
    font-size: 11px;
    font-weight: var(--font-medium, 500);
    letter-spacing: 0.02em;
}

.st-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    flex: 1 1 auto;
}

/* The size lives on the box, not the image. Owl Carousel sets
   `.owl-carousel .owl-item img { width: 100% }` on every image inside a slide,
   which outranks a bare .st-logo and stretched the logo to the full card width
   in the home rail. A wrapper takes the dimensions and the image fills it, so
   both rules get what they want. */
.st-logo {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 2px;
    border: 1px solid var(--border-color, #eee);
    border-radius: 3px;
    background: var(--color-base-background-1, #fff);
    overflow: hidden;
}

.st-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.st-identity {
    min-width: 0;
}

.st-name {
    margin: 0;
    font-size: 15px;
    font-weight: var(--font-medium, 500);
    line-height: 1.35;
    color: var(--main-color2, #000);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rating and stock in one quiet line, where the stats table used to be. */
.st-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--color-text, #666);
}

.st-meta .bi-star-fill {
    color: var(--yellow, #ffb321);
    font-size: 11px;
}

.st-rating-value {
    font-weight: var(--font-medium, 500);
    color: var(--main-color2, #000);
}

/* #eee is the hairline colour and vanishes on white -- a separator has
   to be seen to separate. */
.st-meta-sep {
    color: var(--text-2, #909090);
    font-size: 10px;
}

.st-foot {
    padding: 0 14px 14px;
}

.st-visit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 38px;
    border: 1px solid var(--main-color2, #000);
    border-radius: 3px;
    background: transparent;
    color: var(--main-color2, #000);
    font-size: 14px;
    font-weight: var(--font-medium, 500);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.st-visit:hover,
.st-card:hover .st-visit {
    background: var(--main-color2, #000);
    color: var(--color-base-background-1, #fff);
}

/* The whole card is the link, so hovering anywhere filling the button is
   telling the truth rather than teasing. One anchor, so the card is a
   single tab stop and the focus ring lands on something visible. */
.st-visit::after {
    content: '';
    position: absolute;
    inset: 0;
}

.st-visit:focus-visible {
    outline: 2px solid var(--main-color2, #000);
    outline-offset: 2px;
}