/* Logo responsive styles */
.logo { max-width: 100%; height: auto; object-fit: contain; }
@media (max-width: 768px) { .logo { max-height: 2rem; } }
@media (min-width: 769px) { .logo { max-height: 3rem; } }

/* Custom Dropdown Styles - Clean & Modern */
.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
    transition: all 0.15s ease;
}

.custom-select {
    min-height: 44px;
    font-size: 16px;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    border: none;
    border-radius: 0.5rem;
    background-color: transparent;
    color: #374151;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .custom-select {
        min-height: 38px;
        font-size: 14px;
        padding: 0.5rem 2.25rem 0.5rem 0.75rem;
        border: none;
        border-radius: 0.5rem;
        background-color: transparent;
    }
}

.custom-select:focus {
    outline: none;
    background-color: rgba(59, 130, 246, 0.05);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

.custom-select:hover:not(:focus) {
    background-color: rgba(0, 0, 0, 0.02);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

.custom-select:disabled {
    background-color: transparent;
    color: #9ca3af;
    cursor: not-allowed;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
    .custom-select { background-color: transparent; color: #f9fafb; }
    .custom-select:focus { background-color: rgba(96, 165, 250, 0.1); }
    .custom-select:hover:not(:focus) { background-color: rgba(255, 255, 255, 0.05); }
}

/* ---------- SCOPED PAGE FIXES ---------- */

/* Hide hero sections on learning pages (they handle their own layouts) */
body.page-learn .page-hero,
body.page-learn .hero,
body.page-learn .section-hero,
body.page-learn .site-hero {
    display: none !important;
}

/* Disable hover movement effects in component_audit app */
.component-audit-page *:hover,
.component-audit-page a:hover,
.component-audit-page button:hover,
.component-audit-page .td-card:hover,
.compound-bundle-page *:hover,
.compound-bundle-page a:hover,
.compound-bundle-page button:hover,
.compound-bundle-page .td-card:hover,
.product-management-page *:hover,
.product-management-page a:hover,
.product-management-page button:hover,
.product-management-page .td-card:hover,
.td-container *:hover,
.td-section *:hover {
    transform: none !important;
    scale: none !important;
    translate: none !important;
}

/* Platform page: keep deal cards grounded (no hover lift) */
body.platform-page .td-card:hover {
    --tw-translate-y: 0;
    transform: none;
}

/* Prevent horizontal scrolling on mobile */
@media (max-width: 768px) {
    /* Remove global overflow-x hidden - fix root causes instead */
    html, body {
        max-width: 100vw;
        position: relative;
    }
    
    /* Ensure all containers respect viewport width */
    .td-container,
    .max-w-7xl,
    .max-w-4xl,
    main {
        max-width: 100%;
        overflow-x: visible;
    }
    
    /* Prevent common elements from causing horizontal scroll */
    img, video, iframe, embed, object {
        max-width: 100%;
        height: auto;
    }
    
    /* Tables and scrollable content should have visible scrollbars */
    .overflow-x-auto,
    table:not(.td-table),
    .comparison-table-wrapper {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Ensure flex and grid containers don't overflow */
    .flex, .grid, .container {
        max-width: 100%;
    }
    
    /* Flex items should shrink to fit */
    .flex > * {
        min-width: 0;
    }
}

/* Battery platform and product line styling for component catalog cards */
.battery-platform {
    font-weight: 400;
    color: #8A8A8A;
}

.product-line {
    font-weight: 400;
    color: #8A8A8A;
}

/* Main content padding - removed !important override */
/* Now controlled via Tailwind classes in template: pt-40 md:pt-42 */

/* Comparison table enhancements */
.comparison-table th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f9fafb;
}

.comparison-table .highlight-difference {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}

.comparison-table .section-header {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comparison-table .spec-value {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

.comparison-table .price-value {
    font-weight: 600;
    color: #059669;
}

@media (max-width: 1024px) {
    .comparison-table-mobile {
        display: block;
    }
    .comparison-table-desktop {
        display: none;
    }
    .comparison-card {
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
        overflow: hidden;
    }
    .comparison-card-header {
        background: #f9fafb;
        padding: 1rem;
        border-bottom: 1px solid #e5e7eb;
    }
    .comparison-card-body {
        padding: 1rem;
    }
    .comparison-spec-row {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f3f4f6;
    }
    .comparison-spec-label {
        font-weight: 500;
        color: #374151;
        flex: 1;
    }
    .comparison-spec-value {
        color: #6b7280;
        text-align: right;
        flex: 1;
    }
    .comparison-spec-value.different {
        background-color: #fef3c7;
        color: #92400e;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
    }
}

@media (min-width: 1025px) {
    .comparison-table-mobile {
        display: none;
    }
    .comparison-table-desktop {
        display: block;
    }
}

/* Deals listing table: borders + hover state */
.deals-table-view .td-table {
    border-left-width: 0;
    border-right-width: 0;
}

.deals-table-view tbody tr.td-table-row-hover {
    background-color: #ffffff;
    transition: background-color 0.15s ease;
}

.deals-table-view tbody tr.td-table-row-hover:nth-child(odd),
.deals-table-view tbody tr.td-table-row-hover:nth-child(even) {
    /* Explicitly disable zebra striping for deals table */
    background-color: #ffffff;
}

.deals-table-view tbody tr.td-table-row-hover:hover {
    /* Match legacy alternate row shade */
    background-color: rgb(245, 246, 248);
}

.deals-table-view tbody tr.td-table-row-hover:hover td {
    background-color: transparent;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    /* Minimum font size for body text on mobile */
    body {
        font-size: 14px;
    }
    
    /* Touch target minimum size - 44x44px per iOS/Android guidelines */
    .mobile-touch-target {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Ensure interactive elements meet minimum touch targets */
    button, a.td-btn, .td-btn, input[type="submit"], input[type="button"] {
        min-height: 44px;
    }
    
    /* Filter checkboxes with larger touch area */
    input[type="checkbox"] {
        min-height: 20px;
        min-width: 20px;
    }
    
    /* Checkbox labels should have adequate padding for touch */
    label:has(input[type="checkbox"]) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 8px 0;
    }
    
    /* Hide scrollbar but allow scrolling */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .mobile-swipe-indicator {
        position: relative;
    }
    .mobile-swipe-indicator::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 20px;
        background: linear-gradient(to bottom, #3b82f6, #1d4ed8);
        border-radius: 2px;
        opacity: 0.6;
    }
    .mobile-filter-drawer {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }
    .mobile-filter-drawer.open {
        transform: translateX(0);
    }
    .mobile-card {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-button {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        user-select: none;
    }
    .mobile-drawer-backdrop {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .mobile-drawer-content {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
    .mobile-form input[type="checkbox"] {
        transform: scale(1.2);
    }
    .mobile-form label {
        padding: 8px 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .mobile-pagination a,
    .mobile-pagination span {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Enhanced Visual Polish */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hover-lift {
    transition: transform 0.2s ease-in-out;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.ripple:active::before {
    width: 300px;
    height: 300px;
}

.gradient-text,
.text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Product Image Carousel - Thumbnail Container Height Fix */
.thumbnail-scroll-container {
    display: block;
}

/* Fix thumbnail container height - force it to match main image height on desktop */
@media (min-width: 1024px) {
    .product-image-carousel-container > .flex {
        align-items: stretch !important;
    }
    
    .product-image-carousel-container .thumbnail-scroll-container {
        align-self: stretch !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Constrain the inner flex container so it doesn't force parent to grow */
    .product-image-carousel-container .thumbnail-scroll-container > .flex {
        min-height: 0 !important;
        flex-shrink: 1 !important;
    }
}

/* Custom scrollbar styling for thumbnail container */
.thumbnail-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.thumbnail-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

.thumbnail-scroll-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.thumbnail-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}