/* Nina Sky Shops - Exact replica of ShopSlider.tsx styling */

/* Reset and base styles */
.nina-sky-shops-wrapper * {
    box-sizing: border-box;
}

/* Main wrapper - matches the React component's outer div */
.nina-sky-shops-wrapper {
    width: 100%;
    padding: 64px 0;
    /* py-16 = 4rem = 64px */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Loading State */
.shops-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 384px;
    /* h-96 = 24rem = 384px */
    background-color: #f9fafb;
    /* bg-gray-50 */
    border-radius: 8px;
    /* rounded-lg */
}

.loading-spinner {
    margin-right: 12px;
    /* ml-3 */
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.rounded-full {
    border-radius: 9999px;
}

.h-12 {
    height: 48px;
}

.w-12 {
    width: 48px;
}

.border-b-2 {
    border-bottom-width: 2px;
}

.border-blue-600 {
    border-color: #2563eb;
}

.loading-text {
    color: #6b7280;
    /* text-gray-600 */
}

/* Error State */
.shops-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 384px;
    /* h-96 */
    background-color: #f9fafb;
    /* bg-gray-50 */
    border-radius: 8px;
}

.error-content p {
    color: #6b7280;
    /* text-gray-600 */
    margin: 0;
}

/* Header */
.shops-header {
    text-align: center;
    margin-bottom: 32px;
    /* mb-8 on md screens, mb-12 on larger */
    padding: 0 16px;
    /* px-4 */
}

@media (min-width: 768px) {
    .shops-header {
        margin-bottom: 48px;
        /* md:mb-12 */
    }
}

.shops-title {
    font-size: 24px;
    /* text-2xl */
    font-weight: 700;
    /* font-bold */
    color: #111827;
    /* text-gray-900 */
    margin: 0 0 16px 0;
    /* mb-4 */
    line-height: 1.2;
}

@media (min-width: 768px) {
    .shops-title {
        font-size: 36px;
        /* md:text-4xl */
    }
}

/* Slider Container */
.shops-slider-container {
    max-width: 1280px;
    /* max-w-7xl */
    margin: 0 auto;
    padding: 0 16px;
    /* px-4 */
    position: relative;
}

@media (min-width: 768px) {
    .shops-slider-container {
        padding: 0 24px;
        /* md:px-6 */
    }
}

/* Slider Overflow */
.shops-slider-overflow {
    overflow: hidden;
}

/* Slider Track */
.shops-slider-track {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

/* Mobile: Each card takes full width */
/* Mobile: One centered card per screen with fixed 320px width */
@media (max-width: 767px) {
    .shops-slider-track {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .shop-card {
        flex: none !important;
        width: 320px !important;
        max-width: 320px !important;
        min-width: 320px !important;
        margin: 0 auto !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }
    
    /* Override base shop-card padding on mobile */
    .nina-sky-shops-wrapper .shop-card {
        padding: 0 16px !important;
        width: 320px !important;
    }
}

/* Desktop: Each card takes 1/3 width */
@media (min-width: 768px) {
    .shop-card {
        flex: 0 0 33.333333%;
        /* Each card takes 1/3 width on desktop */
        width: 33.333333%;
    }
}

/* Shop Card - matches the exact card structure from React */
.shop-card {
    width: 100%;
    /* w-full on mobile */
    flex-shrink: 0;
    padding: 0 12px;
    /* px-3 */
}

@media (min-width: 768px) {
    .shop-card {
        width: 33.333333%;
        /* md:w-1/3 */
        padding: 0 12px;
        /* md:px-3 */
    }
}

.shop-card-inner {
    background: white;
    border-radius: 16px;
    /* rounded-2xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* shadow-md */
    overflow: hidden;
    border: 1px solid #e5e7eb;
    /* border-gray-100 */
    transition: box-shadow 0.3s;
    height: 480px;
    /* h-[480px] on mobile */
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .shop-card-inner {
        height: 520px;
        /* md:h-[520px] */
    }
}

.shop-card-inner:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* hover:shadow-lg */
}

/* Map Section */
.shop-map {
    position: relative;
    height: 128px;
    /* h-32 on mobile */
    background-color: #f9fafb;
    /* bg-gray-50 */
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .shop-map {
        height: 160px;
        /* md:h-40 */
    }
}

.map-container {
    width: 100%;
    height: 100%;
    background-color: #f3f4f6;
    /* bg-gray-100 */
    overflow: hidden;
}

/* Status Badges Section */
.shop-badges-section {
    padding: 12px 16px;
    /* px-4 py-3 */
    background-color: #f9fafb;
    /* bg-gray-50 */
    display: flex;
    justify-content: center;
    gap: 8px;
    /* gap-2 */
    flex-shrink: 0;
}

.shop-status-badge {
    padding: 4px 12px;
    /* px-3 py-1 */
    border-radius: 9999px;
    /* rounded-full */
    font-size: 12px;
    /* text-xs */
    font-weight: 500;
    /* font-medium */
}

.shop-status-badge.available {
    background-color: #dcfce7;
    /* bg-green-100 */
    color: #166534;
    /* text-green-800 */
}

.shop-status-badge.occupied {
    background-color: #dbeafe;
    /* bg-blue-100 */
    color: #1e40af;
    /* text-blue-800 */
}

.shop-status-badge.maintenance {
    background-color: #fef3c7;
    /* bg-yellow-100 */
    color: #92400e;
    /* text-yellow-800 */
}

.shop-status-badge.approved {
    background-color: #dcfce7;
    /* bg-green-100 */
    color: #166534;
    /* text-green-800 */
}

.shop-status-badge.pending {
    background-color: #fef3c7;
    /* bg-yellow-100 */
    color: #92400e;
    /* text-yellow-800 */
}

.shop-status-badge.rejected {
    background-color: #fee2e2;
    /* bg-red-100 */
    color: #991b1b;
    /* text-red-800 */
}

.shop-type-badge {
    background-color: #374151;
    /* bg-gray-700 */
    color: white;
    /* text-white */
    padding: 4px 12px;
    /* px-3 py-1 */
    border-radius: 9999px;
    /* rounded-full */
    font-size: 12px;
    /* text-xs */
    font-weight: 500;
    /* font-medium */
}

/* Information Section */
.shop-info {
    padding: 12px 16px;
    /* p-3 on mobile, p-4 on md */
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    /* space-y-2 on mobile */
}

@media (min-width: 768px) {
    .shop-info {
        padding: 16px;
        /* md:p-4 */
        gap: 12px;
        /* md:space-y-3 */
    }
}

/* Shop Type and Price */
.shop-header-info {
    text-align: center;
    flex-shrink: 0;
}

.shop-type-title {
    font-size: 16px;
    /* text-base on mobile */
    font-weight: 600;
    /* font-semibold */
    color: #111827;
    /* text-gray-900 */
    margin: 0 0 4px 0;
    /* mt-1 spacing */
}

@media (min-width: 768px) {
    .shop-type-title {
        font-size: 18px;
        /* md:text-lg */
    }
}

.shop-price-container {
    margin-top: 4px;
}

.shop-price {
    font-size: 20px;
    /* text-xl on mobile */
    font-weight: 700;
    /* font-bold */
    color: #111827;
    /* text-gray-900 */
}

@media (min-width: 768px) {
    .shop-price {
        font-size: 24px;
        /* md:text-2xl */
    }
}

.shop-price-suffix {
    font-size: 12px;
    /* text-xs on mobile */
    color: #6b7280;
    /* text-gray-500 */
    margin-left: 4px;
    /* ml-1 */
}

@media (min-width: 768px) {
    .shop-price-suffix {
        font-size: 14px;
        /* md:text-sm */
    }
}

/* Shop Details */
.shop-details {
    color: #6b7280;
    /* text-gray-600 */
    font-size: 12px;
    /* text-xs on mobile */
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* space-y-1 on mobile */
}

@media (min-width: 768px) {
    .shop-details {
        font-size: 14px;
        /* md:text-sm */
        gap: 8px;
        /* md:space-y-2 */
    }
}

.shop-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shop-detail-label {
    font-weight: 500;
    /* font-medium */
}

.shop-address-section {
    padding-top: 4px;
    /* pt-1 */
}

.shop-address-label {
    font-weight: 500;
    /* font-medium */
    color: #374151;
    /* text-gray-700 */
}

.shop-address-text {
    font-size: 12px;
    /* text-xs on mobile */
    color: #374151;
    /* text-gray-700 */
    margin-top: 4px;
    /* mt-1 */
    line-height: 1.4;
    /* leading-relaxed */
    font-weight: 500;
    /* font-medium */
    padding: 8px;
    /* p-2 */
    border-radius: 8px;
    /* rounded-lg */
}

@media (min-width: 768px) {
    .shop-address-text {
        font-size: 14px;
        /* md:text-sm */
    }
}

/* Navigation Buttons */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #d1d5db;
    /* bg-gray-300 */
    color: #000;
    /* text-black */
    padding: 8px;
    /* p-2 on mobile */
    border-radius: 50%;
    /* rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* shadow-lg */
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .slider-nav {
        padding: 12px;
        /* md:p-3 */
    }
}

.slider-nav:hover {
    background-color: #9ca3af;
    /* hover:bg-gray-400 */
    transform: translateY(-50%) scale(1.1);
    /* hover:scale-110 */
}

/* Navigation button disabled state */
.slider-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.slider-nav:disabled:hover {
    background-color: #f3f4f6;
    /* Don't change color when disabled */
    transform: none;
    /* Don't scale when disabled */
}

.slider-prev {
    left: 0;
    /* left-0 on mobile */
}

@media (min-width: 768px) {
    .slider-prev {
        left: -64px;
        /* md:-left-16 */
    }
}

.slider-next {
    right: 0;
    /* right-0 on mobile */
}

@media (min-width: 768px) {
    .slider-next {
        right: -64px;
        /* md:-right-16 */
    }
}

.nav-icon {
    height: 16px;
    /* h-4 on mobile */
    width: 16px;
    /* w-4 on mobile */
}

@media (min-width: 768px) {
    .nav-icon {
        height: 24px;
        /* md:h-6 */
        width: 24px;
        /* md:w-6 */
    }
}

/* Screen reader text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Transition states */
.transitioning {
    opacity: 0.75;
}

/* Mobile responsive adjustments */
/* Mobile styles - better layout and spacing - Elementor/VC compatible */
@media (max-width: 767px) {

    /* Override any parent container constraints from page builders */
    .vc_row .vc_column_container .vc_column-inner .wpb_wrapper .nina-sky-shops-wrapper,
    .elementor-widget-container .nina-sky-shops-wrapper,
    .nina-sky-shops-wrapper {
        padding: 0 !important;
        margin: 0 auto !important;
        max-width: 100vw !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        position: relative !important;
        display: block !important;
        clear: both !important;
    }

    /* Force container to work within page builder constraints */
    .vc_row .vc_column_container .vc_column-inner .wpb_wrapper .nina-sky-shops-wrapper .shops-slider-container,
    .elementor-widget-container .nina-sky-shops-wrapper .shops-slider-container,
    .shops-slider-container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        position: relative !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .shops-slider-overflow {
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    .shops-slider-track {
        display: flex !important;
        width: calc(100% * var(--total-cards, 3)) !important;
        transition: transform 0.3s ease-in-out !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* Show navigation buttons on mobile positioned below cards */
    .slider-nav {
        display: flex !important;
        position: static !important;
        transform: none !important;
        margin: 20px 10px 0 10px !important;
        background-color: #3b82f6 !important;
        color: white !important;
        border-radius: 8px !important;
        padding: 12px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    }
    
    .slider-prev {
        left: auto !important;
    }
    
    .slider-next {
        right: auto !important;
    }
    
    /* Container for navigation buttons */
    .shops-slider-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .shops-slider-overflow {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    /* Navigation button container */
    .mobile-nav-container {
        display: flex !important;
        gap: 12px !important;
        margin-top: 20px !important;
        justify-content: center !important;
    }

    /* Mobile cards use fixed 320px width centered */
    .vc_row .vc_column_container .vc_column-inner .wpb_wrapper .nina-sky-shops-wrapper .shop-card,
    .elementor-widget-container .nina-sky-shops-wrapper .shop-card,
    .shop-card {
        flex: none !important;
        width: 320px !important;
        max-width: 320px !important;
        min-width: 320px !important;
        margin: 0 auto !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* Ensure theme styles don't interfere */
    .nina-sky-shops-wrapper * {
        box-sizing: border-box !important;
    }

    .nina-sky-shops-wrapper img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Override common page builder interference */
    .vc_row .vc_column_container .vc_column-inner .wpb_wrapper .nina-sky-shops-wrapper,
    .elementor-widget-container .nina-sky-shops-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Prevent WPBakery/VC row constraints */
    .vc_row .vc_column_container .vc_column-inner .wpb_wrapper {
        overflow-x: visible !important;
    }

    /* Override Elementor widget constraints */
    .elementor-widget-container {
        overflow-x: visible !important;
    }

    /* Force proper width calculation on cards regardless of parent constraints */
    .nina-sky-shops-wrapper .shop-card {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Override any theme link styles */
    .nina-sky-shops-wrapper a {
        text-decoration: none !important;
        color: inherit !important;
    }

    /* Override any theme list styles */
    .nina-sky-shops-wrapper ul,
    .nina-sky-shops-wrapper ol {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
}

/* Specific handling for Visual Composer Raw HTML widget */
.wpb_raw_html .nina-sky-shops-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 767px) {
    .wpb_raw_html .nina-sky-shops-wrapper {
        overflow-x: hidden !important;
    }

    .wpb_raw_html .nina-sky-shops-wrapper .shop-card {
        max-width: 100% !important;
        width: 100% !important;
        flex: none !important;
    }
}