/**
 * Frontend Styles for BigQuery Data Viewer Plugin
 * 
 * @package BigQuery_Data_Viewer
 * @since 1.0.0
 */

/* ============================================
   Container & Layout
   ============================================ */

.bqv-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ============================================
   Filter Form
   ============================================ */

.bqv-filters {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

.bqv-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 200px;
}

.bqv-filter-group label {
    font-weight: 600;
    font-size: 14px;
    color: #495057;
}

.bqv-filters select {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out;
}

.bqv-filters select:hover {
    border-color: #80bdff;
}

.bqv-filters select:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.bqv-filters button[type="submit"] {
    padding: 8px 24px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    align-self: flex-end;
}

.bqv-filters button[type="submit"]:hover {
    background-color: #0056b3;
}

.bqv-filters button[type="submit"]:active {
    background-color: #004085;
}

/* ============================================
   Swiper Filter Bar (v2.2.2)
   ============================================ */

/* Fixed Filter Bar */
.bqv-filter-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9998; /* v2.2.2: Higher z-index để không bị che bởi WordPress admin bar (99999) nhưng vẫn dưới full-screen mode (9999) */
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid #e5e7eb;
    padding: 16px;
}

/* Adjust filter bar position when WordPress admin bar is present (v2.2.2) */
.admin-bar .bqv-filter-bar {
    top: 32px !important; /* WordPress admin bar height on desktop */
    z-index: 9998; /* Ensure it's above admin bar but below fullscreen mode */
}

@media screen and (max-width: 782px) {
    .admin-bar .bqv-filter-bar {
        top: 46px !important; /* WordPress admin bar height on mobile */
    }
}

/* Ensure filter bar is always visible and not overlapped */
body.admin-bar .bqv-filter-bar {
    position: fixed !important;
}

.bqv-filter-bar-container {
    max-width: 42rem; /* max-w-xl equivalent */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Sort Toggle Switch */
.bqv-sort-toggle-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.bqv-sort-label-newest,
.bqv-sort-label-hottest {
    font-size: 14px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.bqv-sort-label-newest {
    color: #374151; /* text-gray-700 */
    margin-right: 12px; /* v2.3.20: Tăng khoảng cách với toggle */
}

.bqv-sort-label-hottest {
    color: #dc2626; /* text-red-600 */
    margin-left: 12px; /* v2.3.20: Tăng khoảng cách với toggle */
}

.bqv-sort-label-inactive {
    color: #9ca3af; /* text-gray-400 */
}

.bqv-sort-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.bqv-sort-toggle-slider {
    position: relative;
    width: 44px; /* w-11 */
    height: 24px; /* h-6 */
    background-color: #e5e7eb; /* bg-gray-200 */
    border-radius: 9999px; /* rounded-full */
    transition: background-color 0.2s ease;
}

.bqv-sort-toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px; /* h-5 */
    height: 20px; /* w-5 */
    background-color: #fff;
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.bqv-sort-toggle-input:checked + .bqv-sort-toggle-slider {
    background-color: #dc2626; /* bg-red-600 */
}

.bqv-sort-toggle-input:checked + .bqv-sort-toggle-slider::after {
    transform: translateX(20px); /* translate-x-full */
    border-color: #fff;
}

/* Date Range Button Group */
.bqv-range-toggle-group {
    display: flex;
    align-items: center;
    background-color: #e5e7eb; /* bg-gray-200 */
    border-radius: 9999px; /* rounded-full */
    padding: 4px;
    font-size: 14px;
    font-weight: 500;
}

.bqv-range-toggle-btn {
    padding: 4px 12px;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: #4b5563; /* text-gray-600 */
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    font-size: 14px;
    font-weight: 500;
}

.bqv-range-toggle-btn:hover {
    color: #374151; /* text-gray-800 */
}

.bqv-range-toggle-btn.active {
    background-color: #fff;
    color: #2563eb; /* text-blue-600 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
}

.bqv-range-toggle-btn.active:hover {
    color: #1d4ed8; /* darker blue on hover */
}

/* Responsive: Stack filter controls on mobile */
@media (max-width: 640px) {
    .bqv-filter-bar {
        padding: 12px;
    }
    
    .bqv-filter-bar-container {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
        max-width: 100%;
    }
    
    .bqv-sort-toggle-label {
        justify-content: center;
        width: 100%;
    }
    
    .bqv-range-toggle-group {
        justify-content: center;
        width: 100%;
    }
    
    /* Smaller filter bar elements on mobile */
    .bqv-sort-label-newest,
    .bqv-sort-label-hottest {
        font-size: 13px;
    }
    
    .bqv-range-toggle-btn {
        font-size: 13px;
        padding: 3px 10px;
    }
}

/* Tablet: Keep horizontal layout but adjust spacing */
@media (min-width: 641px) and (max-width: 1024px) {
    .bqv-filter-bar-container {
        max-width: 100%;
        padding: 0 1rem;
    }
    
    .bigquery-card-swiper {
        max-width: 400px; /* Slightly smaller on tablet */
    }
}

/* ============================================
   Grid Filter Bar (v2.3.12)
   ============================================ */

/* Grid Filter Bar - KHÔNG sticky (normal flow) */
.bqv-grid-filter-bar {
    padding: 16px; /* p-4 */
    margin-bottom: 24px; /* mb-6 */
    background: #ffffff; /* v2.3.20: Background màu trắng */
    border-radius: 8px; /* v2.3.20: Bo góc */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* v2.3.20: Shadow nhẹ */
    /* KHÔNG có position: fixed */
}

.bqv-grid-filter-bar-container {
    max-width: 42rem; /* max-w-xl equivalent */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Grid filter bar sử dụng chung styles với Swiper filter bar cho toggle và buttons */
.bqv-grid-filter-bar .bqv-sort-toggle-label,
.bqv-grid-filter-bar .bqv-range-toggle-group {
    /* Sử dụng styles từ .bqv-filter-bar */
}

/* Responsive: Stack filter controls on mobile */
@media (max-width: 640px) {
    .bqv-grid-filter-bar {
        padding: 12px;
        margin-bottom: 20px;
    }
    
    .bqv-grid-filter-bar-container {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
        max-width: 100%;
    }
    
    .bqv-grid-filter-bar .bqv-sort-toggle-label {
        justify-content: center;
        width: 100%;
    }
    
    .bqv-grid-filter-bar .bqv-range-toggle-group {
        justify-content: center;
        width: 100%;
    }
}

/* Tablet: Keep horizontal layout but adjust spacing */
@media (min-width: 641px) and (max-width: 1024px) {
    .bqv-grid-filter-bar-container {
        max-width: 100%;
        padding: 0 1rem;
    }
}

/* ============================================
   Swiper Container & Full-screen (v2.2.2)
   ============================================ */

/* Google Fonts Inter for Swiper mode (v2.2.2) */
.bqv-swiper-container,
.bqv-swiper-container * {
    font-family: 'Inter', sans-serif;
}

/* Swiper container (v2.2.2: Normal mode mặc định) */
.bqv-swiper-container {
    position: relative;
    width: 100%;
    height: auto; /* v2.2.2: Chiều cao tự nhiên */
    overflow: visible; /* v2.2.2: Cho phép scroll trang */
    isolation: isolate; /* v2.2.2: Isolate từ WordPress theme styles */
    contain: layout style; /* v2.2.2: Optimize rendering và isolate styles */
}

/* Full-screen mode (khi .bqv-fullscreen-mode active) */
.bqv-swiper-container.bqv-fullscreen-mode {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 99999 !important; /* v2.2.2: Higher z-index để overlay cả WordPress admin bar (99999) */
    background: transparent !important; /* v2.2.2: Transparent background, dùng page background */
    background-color: transparent !important; /* v2.2.2: Ensure no background color */
}

/* Full-screen mode: Filter bar adjustment (v2.2.2) */
.bqv-swiper-container.bqv-fullscreen-mode .bqv-filter-bar {
    top: 0 !important; /* Reset admin bar adjustment trong full-screen mode */
    z-index: 100000 !important; /* v2.2.2: Higher z-index trong full-screen mode */
    position: fixed !important; /* Ensure fixed position in fullscreen */
}

/* Full-screen mode: Full-screen toggle button adjustment (v2.2.2) */
.bqv-swiper-container.bqv-fullscreen-mode .bqv-fullscreen-toggle {
    top: 8px !important; /* Small margin from top in fullscreen mode */
    right: 8px !important; /* Ensure right positioning */
    z-index: 100001 !important; /* v2.2.2: Higher z-index trong full-screen mode */
    position: fixed !important; /* Ensure fixed position in fullscreen */
}

/* Reset admin bar adjustments in fullscreen mode */
.bqv-swiper-container.bqv-fullscreen-mode.admin-bar .bqv-filter-bar,
.admin-bar .bqv-swiper-container.bqv-fullscreen-mode .bqv-filter-bar {
    top: 0 !important; /* Override admin bar adjustment in fullscreen */
}

.bqv-swiper-container.bqv-fullscreen-mode.admin-bar .bqv-fullscreen-toggle,
.admin-bar .bqv-swiper-container.bqv-fullscreen-mode .bqv-fullscreen-toggle {
    top: 8px !important; /* Override admin bar adjustment in fullscreen */
}

/* Swiper container (v2.2.2: Normal mode - chiều cao tự nhiên, không full viewport) */
/* v2.3.11: Support cả .bqv-swiper và .swiper để backward compatibility và isolate từ Elementor */
.bqv-swiper-container .bqv-swiper.mySwiper,
.bqv-swiper-container .swiper.mySwiper {
    width: 100%;
    height: auto; /* v2.2.2: Chiều cao tự nhiên, không full viewport */
    min-height: 600px; /* Minimum height để có thể scroll */
    padding-top: 80px; /* Space cho filter bar (desktop) */
    box-sizing: border-box;
    background: transparent !important; /* v2.2.2: Transparent background, dùng page background */
    background-color: transparent !important; /* v2.2.2: Ensure no background color */
}

/* Adjust padding-top when WordPress admin bar is present (v2.2.2) */
.admin-bar .bqv-swiper-container .bqv-swiper.mySwiper,
.admin-bar .bqv-swiper-container .swiper.mySwiper {
    padding-top: 112px; /* 80px (filter bar) + 32px (admin bar) */
}

/* Adjust slide min-height when WordPress admin bar is present (v2.2.2) */
.admin-bar .bqv-swiper-container .swiper-slide {
    min-height: calc(100vh - 232px); /* 100vh - 112px (padding-top) - 120px (buffer) */
}

@media screen and (max-width: 782px) {
    .admin-bar .bqv-swiper-container .bqv-swiper.mySwiper,
    .admin-bar .bqv-swiper-container .swiper.mySwiper {
        padding-top: 146px; /* 100px (filter bar stacked) + 46px (admin bar mobile) */
    }
}

/* Full-screen mode (khi .bqv-fullscreen-mode active) */
.bqv-swiper-container.bqv-fullscreen-mode .bqv-swiper.mySwiper,
.bqv-swiper-container.bqv-fullscreen-mode .swiper.mySwiper {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    padding-top: 80px !important; /* v2.2.2: Space cho filter bar trong full-screen mode - override admin bar adjustment */
    background: transparent !important; /* v2.2.2: Transparent background */
    background-color: transparent !important; /* v2.2.2: Ensure no background color */
}

/* Full-screen mode: Swiper slide height (v2.2.2) */
.bqv-swiper-container.bqv-fullscreen-mode .swiper-slide {
    min-height: calc(100vh - 80px) !important; /* 100vh - filter bar height */
    height: calc(100vh - 80px) !important; /* Full height trong full-screen mode */
}

/* Swiper wrapper - Center alignment (v2.2.2) */
.bqv-swiper-container .swiper-wrapper {
    display: flex !important;
    align-items: center !important; /* Vertical center */
    justify-content: center !important; /* Horizontal center */
    width: 100% !important; /* Ensure full width */
    height: auto !important; /* Allow natural height */
}

/* Swiper slide - Center alignment (v2.2.2) */
.bqv-swiper-container .swiper-slide {
    display: flex !important;
    align-items: center !important; /* Vertical center */
    justify-content: center !important; /* Horizontal center */
    padding: 2rem 1rem 2rem 1rem; /* v2.2.2: Reduce horizontal padding để card không bị sát cạnh */
    box-sizing: border-box;
    text-align: center; /* v2.2.2: Center content inside */
    width: 100% !important; /* Ensure full width */
    height: auto !important; /* Allow natural height */
    min-height: calc(100vh - 200px); /* v2.2.2: Minimum height để center card properly (100vh - filter bar - padding - buffer) */
}

/* Ensure card is perfectly centered within slide */
.bqv-swiper-container .swiper-slide > .bigquery-card-swiper {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
}

/* Responsive: Smaller padding on mobile */
@media (max-width: 640px) {
    .bqv-swiper-container .swiper-slide {
        padding: 1rem 0.75rem 1.5rem 0.75rem; /* v2.2.2: Reduce horizontal padding trên mobile */
        min-height: calc(100vh - 240px); /* v2.2.2: Minimum height để center card properly trên mobile (100vh - filter bar stacked - padding - buffer) */
    }
    
    .bqv-swiper-container .bqv-swiper.mySwiper,
    .bqv-swiper-container .swiper.mySwiper {
        padding-top: 100px; /* More space for stacked filter bar */
    }
    
    /* Adjust padding-top when WordPress admin bar is present on mobile (v2.2.2) */
    .admin-bar .bqv-swiper-container .bqv-swiper.mySwiper,
    .admin-bar .bqv-swiper-container .swiper.mySwiper {
        padding-top: 146px; /* 100px (filter bar stacked) + 46px (admin bar mobile) */
    }
    
    /* Adjust slide min-height when WordPress admin bar is present on mobile (v2.2.2) */
    .admin-bar .bqv-swiper-container .swiper-slide {
        min-height: calc(100vh - 286px); /* 100vh - 146px (padding-top) - 140px (buffer) */
    }
}

/* Tablet: Adjust padding */
@media (min-width: 641px) and (max-width: 1024px) {
    .bqv-swiper-container .swiper-slide {
        padding: 1.5rem 1rem 2rem 1rem; /* v2.2.2: Reduce horizontal padding trên tablet */
        min-height: calc(100vh - 220px); /* v2.2.2: Minimum height để center card properly trên tablet */
    }
    
    /* Adjust slide min-height when WordPress admin bar is present on tablet (v2.2.2) */
    .admin-bar .bqv-swiper-container .swiper-slide {
        min-height: calc(100vh - 252px); /* 100vh - 112px (padding-top) - 140px (buffer) */
    }
}

/* Full-screen body khi Swiper full-screen mode active (v2.2.2) */
body.bqv-fullscreen-mode,
html.bqv-fullscreen-mode {
    overflow: hidden;
    height: 100vh;
    margin: 0;
    padding: 0;
}

body.bqv-fullscreen-mode {
    position: fixed;
    width: 100%;
    height: 100%;
}

/* v2.2.2: Normal mode - không set overflow hidden (trang có thể scroll) */
body.bqv-swiper-mode:not(.bqv-fullscreen-mode),
html.bqv-swiper-mode:not(.bqv-fullscreen-mode) {
    overflow: visible; /* Cho phép scroll trang */
}

/* ============================================
   Swiper Card Layout (v2.2.2)
   ============================================ */

/* Swiper card - centered với max-width */
.bigquery-card-swiper {
    width: auto !important; /* v2.2.2: Không 100% để có thể center với margin: 0 auto */
    min-width: 300px; /* v2.2.2: Thêm min-width */
    max-width: 448px !important; /* v2.2.2: Override Swiper.js default */
    height: auto;
    max-height: 85vh;
    min-height: 550px;
    margin-left: auto !important; /* v2.2.2: Center card horizontally */
    margin-right: auto !important; /* v2.2.2: Center card horizontally */
    margin-top: auto !important; /* v2.2.2: Center card vertically within slide */
    margin-bottom: auto !important; /* v2.2.2: Center card vertically within slide */
    background: #fff;
    border: 1px solid #e5e7eb; /* border-gray-200 */
    border-radius: 8px; /* rounded-lg */
    display: flex !important; /* v2.2.2: Override Swiper.js */
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
    overflow: hidden;
    position: relative !important; /* v2.2.2: Ensure proper positioning */
    box-sizing: border-box; /* v2.2.2: Ensure padding và border included in width/height */
}

/* Card max-height adjustment trong full-screen mode (v2.2.2) */
.bqv-swiper-container.bqv-fullscreen-mode .bigquery-card-swiper {
    max-height: calc(100vh - 160px); /* 100vh - filter bar (80px) - padding (80px) */
}

/* Responsive: Smaller card on mobile (v2.2.2) */
@media (max-width: 640px) {
    .bigquery-card-swiper {
        max-width: 90% !important; /* v2.2.2: Override Swiper.js */
        min-width: 280px; /* v2.2.2: Smaller min-width on mobile */
        min-height: 400px; /* v2.2.2: Reduce min-height để phù hợp với mobile */
        max-height: 75vh; /* v2.2.2: Reduce max-height để phù hợp với mobile */
    }
    
    .card-number-swiper {
        font-size: 2.5rem; /* Smaller on mobile */
    }
    
    .vote-count-swiper {
        font-size: 1.75rem; /* Smaller on mobile */
    }
    
    .card-footer-swiper {
        flex-direction: column; /* v2.2.2: Stack source and date on mobile */
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Content section (Top) - Centered */
.card-content-swiper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* v2.2.2: Change from center to flex-start để content không bị center quá */
    text-align: center;
    padding: 2rem 1.5rem 1.5rem 1.5rem; /* v2.2.2: Reduce bottom padding */
    gap: 1.5rem; /* v2.2.2: Increase gap for better spacing */
    width: 100%;
    min-height: 0; /* v2.2.2: Prevent flex item from overflowing */
    overflow-y: auto; /* v2.2.2: Allow scrolling if content is too long */
}

/* Responsive: Adjust content padding on mobile */
@media (max-width: 640px) {
    .card-content-swiper {
        padding: 1.5rem 1rem 1rem 1rem; /* v2.2.2: Reduce bottom padding */
        gap: 1rem; /* v2.2.2: Maintain gap */
    }
    
    .card-brand-swiper {
        font-size: 0.8125rem; /* v2.2.2: Slightly smaller on mobile (13px) */
    }
    
    .card-explanation-swiper,
    .card-news-content-swiper {
        font-size: 1rem; /* v2.2.2: Slightly smaller on mobile (16px) */
        line-height: 1.6; /* v2.2.2: Better line-height for mobile */
    }
}

.card-brand-swiper {
    margin: 0 0 0.5rem 0; /* v2.2.2: Add bottom margin for spacing */
    font-size: 0.875rem; /* text-sm (14px) - v2.2.2 */
    font-weight: 600; /* font-semibold */
    color: #212529;
    text-transform: uppercase; /* uppercase */
    letter-spacing: 0.05em; /* tracking-wide */
    text-align: center; /* v2.2.2: Center alignment */
    width: 100%; /* v2.2.2 */
    word-break: break-word; /* v2.2.2: Prevent overflow */
}

/* Hide brand name if empty (v2.2.2) */
.card-brand-swiper:empty {
    display: none !important;
    margin: 0 !important; /* v2.2.2: Remove margin when hidden */
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    line-height: 0 !important;
}

/* Also hide if only contains whitespace */
.card-brand-swiper:not(:empty) {
    /* Ensure brand name is visible if not empty */
}

/* Additional rule to handle empty h4 tags that might have whitespace */
.card-content-swiper > h4.card-brand-swiper:only-child:empty,
.card-content-swiper > h4.card-brand-swiper:empty {
    display: none !important;
}

.card-number-swiper {
    margin: 1.5rem 0; /* my-6 */
    font-size: 3.75rem; /* text-6xl (60px) - v2.2.2 */
    font-weight: 900; /* font-extrabold */
    color: #111827; /* text-gray-900 */
    line-height: 1.1; /* v2.2.2: Slightly increase line-height for better readability */
    text-align: center; /* v2.2.2: Center alignment */
    width: 100%; /* v2.2.2 */
    word-break: break-word; /* v2.2.2: Prevent overflow */
}

.card-explanation-swiper {
    margin: 0 0 1.5rem 0; /* v2.2.2: Reduce bottom margin */
    font-size: 1.125rem; /* text-lg (18px) - v2.2.2 */
    font-weight: 400; /* font-normal */
    color: #374151; /* text-gray-700 */
    line-height: 1.6; /* v2.2.2: Increase line-height for better readability */
    max-width: 100%;
    text-align: center; /* v2.2.2: Center alignment */
    width: 100%; /* v2.2.2 */
    flex-grow: 1; /* flex-grow để push footer xuống */
    word-break: break-word; /* v2.2.2: Prevent overflow */
    hyphens: auto; /* v2.2.2: Enable hyphenation for long words */
}

/* News content styling (v2.2.2) - Dành cho News cards */
.card-news-content-swiper {
    margin: 0 0 1.5rem 0; /* v2.2.2: Reduce bottom margin */
    font-size: 1.125rem; /* text-lg (18px) - v2.2.2 */
    font-weight: 400; /* font-normal */
    color: #374151; /* text-gray-700 */
    line-height: 1.75; /* Better line-height for longer text (News content) */
    max-width: 100%;
    text-align: center; /* v2.2.2: Center alignment */
    text-align-last: center; /* v2.2.2: Center last line */
    width: 100%; /* v2.2.2 */
    flex-grow: 1; /* flex-grow để push footer xuống */
    padding: 0 0.25rem; /* v2.2.2: Reduce horizontal padding */
    word-break: break-word; /* v2.2.2: Prevent overflow */
    hyphens: auto; /* v2.2.2: Enable hyphenation for long words */
    overflow-wrap: break-word; /* v2.2.2: Break long words if needed */
}

.card-footer-swiper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: auto; /* v2.2.2: Push footer to bottom */
    padding-top: 1.25rem; /* v2.2.2: Increase padding for better spacing */
    border-top: 1px solid #e5e7eb; /* v2.2.2: Match border-gray-200 */
    font-size: 0.875rem; /* text-sm */
    gap: 1rem; /* v2.2.2: Add gap between source and date */
}

/* Card source link in Swiper mode (v2.2.2) */
.card-footer-swiper .card-source {
    color: #3b82f6; /* text-blue-500 */
    text-decoration: none;
    font-weight: 500; /* font-medium */
    font-size: 0.875rem; /* text-sm */
    transition: color 0.15s ease-in-out, text-decoration 0.15s ease-in-out;
}

.card-footer-swiper .card-source:hover {
    color: #2563eb; /* darker blue */
    text-decoration: underline;
}

/* Card update date in Swiper mode (v2.2.2) */
.card-footer-swiper .card-update-date {
    color: #6b7280; /* text-gray-500 */
    font-size: 0.75rem; /* text-xs */
    font-style: italic;
}

/* Voting section (Bottom) - Horizontal layout */
.card-voting-swiper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem; /* v2.2.2: Increase gap (mx-4 = 1rem) */
    padding: 1rem 1.5rem;
    background-color: #f9fafb; /* bg-gray-50 */
    border-top: 1px solid #e5e7eb; /* border-gray-200 */
    flex-shrink: 0; /* v2.2.2: Prevent shrinking */
    min-height: 80px; /* v2.2.2: Minimum height để đảm bảo voting section không bị quá nhỏ */
}

/* Ensure vote display is properly aligned in voting section */
.card-voting-swiper > .vote-display,
.card-voting-swiper > div[id^="vote-display-"] {
    order: 2; /* Ensure vote display is in the middle */
}

.card-voting-swiper > .vote-arrow.vote-down {
    order: 1; /* Vote down button on the left */
}

.card-voting-swiper > .vote-arrow.vote-up {
    order: 3; /* Vote up button on the right */
}

/* Vote count in Swiper mode - Large text */
.vote-count-swiper {
    font-size: 2.25rem; /* text-4xl (36px) - v2.2.2 */
    font-weight: 700; /* font-bold */
    text-align: center;
    user-select: none;
    display: inline-block; /* v2.2.2: Change to inline-block for better alignment */
    line-height: 1; /* v2.2.2: Tight line-height để align với icon */
    white-space: nowrap; /* v2.2.2: Prevent text wrapping */
    vertical-align: middle; /* v2.2.2: Align với icon */
}

/* Thermometer icon (v2.2.2) */
.thermometer-icon,
.vote-thermometer {
    width: 32px; /* w-8 h-8 (32px) - v2.2.2 */
    height: 32px;
    color: currentColor;
    flex-shrink: 0;
    margin-right: 0.5rem; /* mr-2 - fallback for cases without vote-display wrapper */
    display: inline-block; /* v2.2.2: Ensure proper alignment */
    vertical-align: middle; /* v2.2.2: Align với text */
}

/* Override margin-right when inside vote-display (gap is handled by parent) */
.card-voting-swiper .vote-display .thermometer-icon,
.card-voting-swiper .vote-display .vote-thermometer {
    margin-right: 0;
}

/* Vote display container (v2.2.2) - Wrapper cho thermometer + vote count */
.card-voting-swiper > div[id^="vote-display-"],
.card-voting-swiper .vote-display {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.125rem; /* v2.3.16: Giảm gap (0.5rem -> 0.125rem = 2px) để sát nhau hơn */
    flex-shrink: 0;
    white-space: nowrap; /* Prevent wrapping */
}

/* Vote count inside vote-display container (v2.2.2) */
.card-voting-swiper .vote-display .vote-count-swiper {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    line-height: 1; /* Tight line-height for better alignment */
}

/* Thermometer icon inside vote-display container (v2.2.2) */
.card-voting-swiper .vote-display .thermometer-icon,
.card-voting-swiper .vote-display .vote-thermometer {
    margin-right: 0; /* Remove margin-right since gap is handled by parent */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Vote buttons in Swiper mode */
.card-voting-swiper .vote-arrow {
    width: 36px;
    height: 36px;
    padding: 0.25rem;
    border-radius: 9999px; /* rounded-full */
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280; /* text-gray-500 */
    transition: all 0.15s ease-in-out;
}

.card-voting-swiper .vote-arrow:hover {
    color: #374151; /* text-gray-800 */
    background-color: #e5e7eb; /* bg-gray-200 */
}

.card-voting-swiper .vote-arrow:active {
    background-color: #d1d5db; /* bg-gray-300 */
    transform: scale(0.95);
}

.card-voting-swiper .vote-arrow svg {
    width: 24px;
    height: 24px;
}

/* Responsive: Adjust voting section on mobile */
@media (max-width: 640px) {
    .card-voting-swiper {
        padding: 0.75rem 1rem;
        gap: 8px;
    }
    
    .card-voting-swiper .vote-arrow {
        width: 32px;
        height: 32px;
    }
    
    .card-voting-swiper .vote-arrow svg {
        width: 20px;
        height: 20px;
    }
    
    .thermometer-icon {
        width: 20px;
        height: 20px;
    }
}

/* ============================================
   Vertical Pagination Dots (v2.2.2)
   ============================================ */

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical > .swiper-pagination-bullets {
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #6b7280; /* text-gray-500 */
    opacity: 0.5;
    margin: 6px 0;
    transition: all 0.2s ease;
}

.swiper-pagination-bullet-active {
    background: #3b82f6; /* bg-blue-500 */
    opacity: 1;
    width: 10px;
    height: 10px;
}

/* Responsive: Adjust pagination position on mobile */
@media (max-width: 640px) {
    .swiper-pagination-vertical.swiper-pagination-bullets,
    .swiper-vertical > .swiper-pagination-bullets {
        right: 10px; /* Closer to edge on mobile */
    }
    
    .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 4px 0;
    }
    
    .swiper-pagination-bullet-active {
        width: 8px;
        height: 8px;
    }
}

/* ============================================
   Full-screen Toggle Button (v2.2.2)
   ============================================ */

/* Full-screen toggle button - Normal mode */
.bqv-fullscreen-toggle {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9999; /* v2.2.2: Higher z-index để visible và không bị che bởi filter bar (9998) */
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 8px;
    border: none;
    background-color: rgba(229, 231, 235, 0.9); /* bg-gray-200 với opacity */
    border-radius: 50%; /* Circular */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Adjust full-screen toggle position when WordPress admin bar is present (v2.2.2) */
.admin-bar .bqv-fullscreen-toggle {
    top: 40px !important; /* WordPress admin bar height (32px) + small margin (8px) on desktop */
    z-index: 9999; /* Ensure it's above filter bar and admin bar */
}

@media screen and (max-width: 782px) {
    .admin-bar .bqv-fullscreen-toggle {
        top: 54px !important; /* WordPress admin bar height (46px) + small margin (8px) on mobile */
    }
}

/* Ensure fullscreen toggle is always visible */
body.admin-bar .bqv-fullscreen-toggle {
    position: absolute !important;
}

.bqv-fullscreen-toggle:hover {
    background-color: rgba(209, 213, 219, 0.95); /* bg-gray-300 với opacity */
    transform: scale(1.05);
}

.bqv-fullscreen-toggle:active {
    transform: scale(0.95);
}

.bqv-fullscreen-icon {
    width: 24px;
    height: 24px;
    color: #374151; /* text-gray-700 */
    pointer-events: none;
}

.bqv-fullscreen-icon-exit {
    display: none;
}

/* Full-screen mode - Show exit icon, hide enter icon */
.bqv-swiper-container.bqv-fullscreen-mode .bqv-fullscreen-icon-enter {
    display: none;
}

.bqv-swiper-container.bqv-fullscreen-mode .bqv-fullscreen-icon-exit {
    display: block;
}

/* Responsive: Smaller button on mobile */
@media (max-width: 640px) {
    .bqv-fullscreen-toggle {
        width: 36px;
        height: 36px;
        margin: 6px;
    }
    
    .bqv-fullscreen-icon {
        width: 20px;
        height: 20px;
    }
}

/* ============================================
   Cards Container
   ============================================ */

/* Legacy class - giữ để backward compatibility */
.bqv-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Stats Cards Container - 2 columns layout (v2.2) */
.bqv-stats-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* News Cards Container - 1 column layout (v2.2 - Updated) */
.bqv-news-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* ============================================
   Individual Card
   ============================================ */

.bigquery-card {
    display: flex;
    flex-direction: row; /* v2.3.12: Content trước, Voting sau */
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.bigquery-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* ============================================
   Voting Section (Right Side) - v2.3.12
   ============================================ */

.card-voting {
    display: flex;
    flex-direction: column; /* v2.3.20: Vertical layout - Vote Up | Thermometer + Temp | Vote Down */
    align-items: center;
    justify-content: center; /* v2.3.12: Center all elements */
    gap: 8px; /* v2.3.20: Gap giữa vote buttons và vote display (vertical) */
    margin-left: 16px; /* v2.3.12: Margin left thay vì right */
    min-width: 80px; /* v2.3.20: Minimum width cho vertical layout */
    flex-shrink: 0; /* v2.3.12: Prevent shrinking */
}

/* Vote Display Container (Thermometer + Temperature) - v2.3.12 */
.card-voting .vote-display {
    display: flex;
    flex-direction: row; /* v2.3.12: Horizontal - icon cạnh temperature */
    align-items: center;
    justify-content: center;
    gap: 3px; /* v2.3.16: Giảm gap để icon và số sát nhau hơn */
    flex-shrink: 0;
}

/* Thermometer Icon (v2.3.12) */
.card-voting .vote-display .thermometer-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* Vote Count trong vote-display (v2.3.12) */
.card-voting .vote-display .vote-count {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
}

.vote-arrow {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-in-out;
    color: #6c757d;
}

.vote-arrow svg {
    width: 24px;
    height: 24px;
}

.vote-arrow:hover {
    transform: scale(1.2);
}

.vote-arrow.vote-up:hover {
    color: #28a745;
}

.vote-arrow.vote-down:hover {
    color: #dc3545;
}

.vote-arrow:active {
    transform: scale(0.95);
}

.vote-arrow:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.vote-count {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    min-width: 40px;
    user-select: none;
}

/* ============================================
   Card Content (Right Side)
   ============================================ */

.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-brand {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #212529;
}

.card-number {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #007bff;
}

.card-explanation {
    margin: 0;
    font-size: 14px;
    color: #6c757d;
    line-height: 1.5;
}

/* News Card Text Justification (v2.3.12) */
.bqv-news-container .bigquery-card .card-news-content {
    text-align: justify;
    text-justify: inter-word;
    margin: 0;
    font-size: 14px;
    color: #6c757d;
    line-height: 1.6;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e9ecef;
    font-size: 12px;
}

.card-source {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease-in-out;
}

.card-source:hover {
    color: #0056b3;
    text-decoration: underline;
}

.card-update-date {
    color: #6c757d;
}

/* ============================================
   Pagination
   ============================================ */

.bqv-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    padding: 20px 0;
}

/* Pagination list styling */
.bqv-pagination ul.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bqv-pagination ul.page-numbers li {
    display: inline-block;
    list-style: none;
    margin: 0;
}

.bqv-pagination a,
.bqv-pagination span {
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #007bff;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
    font-size: 14px;
}

.bqv-pagination a:hover {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.bqv-pagination .current {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
    font-weight: 600;
}

.bqv-pagination .dots {
    border: none;
    cursor: default;
}

.bqv-pagination .dots:hover {
    background-color: transparent;
    color: #6c757d;
}

/* ============================================
   Loading & Error States
   ============================================ */

.bqv-loading {
    text-align: center;
    padding: 40px;
    color: #6c757d;
}

.bqv-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    padding: 16px;
    margin-bottom: 20px;
}

.bqv-no-results {
    text-align: center;
    padding: 40px;
    color: #6c757d;
    background-color: #f8f9fa;
    border-radius: 8px;
}

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

@media (max-width: 1024px) {
    /* News: 1 column (giữ nguyên cho tất cả kích thước) */
    .bqv-news-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .bqv-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .bqv-filter-group {
        min-width: 100%;
    }
    
    .bqv-filters button[type="submit"] {
        align-self: stretch;
        margin-top: 10px;
    }
    
    /* Stats: 2 columns → 1 column on mobile */
    .bqv-stats-container {
        grid-template-columns: 1fr;
    }
    
    /* News: 1 column (giữ nguyên cho mobile) */
    .bqv-news-container {
        grid-template-columns: 1fr;
    }
    
    .bigquery-card {
        flex-direction: column; /* v2.3.12: Stack vertically on mobile */
    }
    
    .card-voting {
        flex-direction: row; /* v2.3.20: Horizontal layout on mobile - Mũi tên lên | Nhiệt kế + Nhiệt độ | Mũi tên xuống */
        justify-content: center;
        align-items: center;
        margin-left: 0; /* v2.3.12: Remove left margin */
        margin-bottom: 12px;
        margin-top: 12px;
        width: 100%;
        min-width: auto; /* v2.3.12: Auto width on mobile */
        gap: 12px; /* v2.3.20: Horizontal gap on mobile */
    }
    
    /* v2.3.12: Vote display smaller on mobile */
    .card-voting .vote-display {
        gap: 2px; /* v2.3.16: Giảm gap trên mobile để sát nhau hơn */
    }
    
    .card-voting .vote-display .thermometer-icon {
        width: 24px;
        height: 24px;
    }
    
    .card-voting .vote-display .vote-count {
        font-size: 18px;
    }
    
    .card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .bqv-container {
        padding: 10px;
    }
    
    .bqv-filters {
        padding: 15px;
    }
    
    .bigquery-card {
        padding: 12px;
    }
    
    .card-brand {
        font-size: 16px;
    }
    
    .card-number {
        font-size: 20px;
    }
}

/* ============================================
   Print Styles
   ============================================ */

/* ============================================
   Lazy Load / Infinite Scroll
   ============================================ */

.bqv-loading-indicator {
    text-align: center;
    padding: 30px 20px;
    color: #666;
    font-size: 14px;
}

.bqv-loading-indicator::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0073aa;
    border-radius: 50%;
    animation: bqv-spin 1s linear infinite;
    margin-right: 10px;
    vertical-align: middle;
}

@keyframes bqv-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.bqv-end-message {
    text-align: center;
    padding: 30px 20px;
    color: #666;
    font-size: 14px;
    font-style: italic;
}

.bqv-scroll-sentinel {
    height: 1px;
    margin: 20px 0;
    visibility: hidden;
}

/* Hide pagination when using lazy load */
.bqv-pagination[style*="display: none"] {
    display: none !important;
}

@media print {
    .bqv-filters,
    .card-voting,
    .bqv-pagination,
    .bqv-loading-indicator,
    .bqv-end-message,
    .bqv-scroll-sentinel {
        display: none;
    }
    
    .bigquery-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}