/* ============================================
   GLASSMORPHISM THEME - Complete Site Makeover
   Beautiful frosted glass effects for ALL pages
   ============================================ */

:root {
    /* Color Scheme - Preserved */
    --color-primary: #e55c5c;
    --color-primary-dark: #d44c4c;
    --color-bg-red: #8c010a;
    --color-bg-dark: #1a1a1a;
    --color-text: #ffffff;
    --color-text-muted: rgba(255, 255, 255, 0.8);
    
    /* Glassmorphism Variables */
    --glass-bg: rgba(20, 20, 20, 0.4);
    --glass-bg-light: rgba(255, 255, 255, 0.1);
    --glass-bg-dark: rgba(0, 0, 0, 0.5);
    --glass-blur: blur(20px);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    /* Container */
    --container-max: 1200px;
    --container-padding: 1rem;
}

/* ============================================
   BACKGROUND & BASE
   ============================================ */

/* Darken background pattern for better contrast */
body {
    position: relative;
    background: var(--color-bg-red) !important;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.8) 100%),
        var(--color-bg-red);
    z-index: 0;
    pointer-events: none;
}

body > * {
    position: relative;
    z-index: 1;
}

/* ============================================
   CONTAINER SYSTEM
   ============================================ */

/* Main content container */
.main-content-wrapper,
.content-wrapper,
.page-wrapper,
#content,
#content .wrapper,
section#content,
section#content > .wrapper {
    max-width: var(--container-max) !important;
    margin: 0 auto !important;
    padding: 0 var(--container-padding) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Contain sitesList */
#sitesList {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    :root {
        --container-padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --container-padding: 2rem;
    }
}

/* ============================================
   HEADER GLASSMORPHISM
   ============================================ */

/* Top black bar - glass effect (exclude #header to avoid stacked/tunnel effect) */
header:not(#header) > div:first-child,
.black-bar,
.top-bar {
    background: var(--glass-bg-dark) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    padding: var(--spacing-sm) var(--container-padding) !important;
    max-width: 100% !important;
}

/* Main header section - preserve existing layout */
#header,
header {
    background: transparent !important;
}

/* Header wrapper - only constrain width, don't break layout */
#header .wrapper,
#header .desktop-wrapper,
header .wrapper {
    max-width: var(--container-max) !important;
    margin: 0 auto !important;
    padding: 0 var(--container-padding) !important;
    box-sizing: border-box !important;
}

/* DON'T override row/column/align-middle - let existing CSS handle layout */
/* The existing page.css and overwrite.css handle all positioning */

/* Header elements - use separate fix file to avoid conflicts */
/* See header-fix.css for header-specific glassmorphism */

/* ============================================
   BUTTONS - GLASSMORPHISM
   ============================================ */

.btn,
button,
a.btn,
input[type="submit"],
input[type="button"] {
    background: var(--glass-bg-light) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    color: var(--color-text) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.btn:hover,
button:hover,
a.btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
    color: var(--color-text) !important;
    text-decoration: none !important;
}

/* Primary/Red buttons */
.btn-primary,
.btn-default,
button[style*="red"],
a[style*="red"],
.btn-red {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 16px rgba(229, 92, 92, 0.4) !important;
}

.btn-primary:hover,
.btn-default:hover {
    background: linear-gradient(135deg, var(--color-primary-dark), #c43c3c) !important;
    box-shadow: 0 6px 24px rgba(229, 92, 92, 0.5) !important;
}

/* ============================================
   CONTENT PANELS - GLASSMORPHISM
   ============================================ */

/* All panels get glass effect (exclude #header to prevent broken header layout) */
.panel,
.card,
.content-panel,
.review-panel,
div[style*="background"]:not(.logo-col):not(.search-col),
section:not(#header) > div,
main > div {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    padding: var(--spacing-lg) !important;
    margin-bottom: var(--spacing-md) !important;
    box-shadow: var(--glass-shadow) !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* Panel headers - darker glass */
.panel__header,
.card-header,
[class*="header"]:not(#header):not(header) {
    background: var(--glass-bg-dark) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: var(--spacing-md) var(--spacing-lg) !important;
    margin: calc(var(--spacing-lg) * -1) calc(var(--spacing-lg) * -1) var(--spacing-md) calc(var(--spacing-lg) * -1) !important;
    color: var(--color-text) !important;
}

/* Black headers on panels - make them glass */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   TOPLIST TEMPLATE - GLASSMORPHISM
   ============================================ */

/* Three column lists - glass cards (overflow visible so action buttons aren't clipped) */
.list-col,
.list-panel,
.toplist-panel,
.list-shadow {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    overflow: visible !important;
    box-shadow: var(--glass-shadow) !important;
    margin-bottom: var(--spacing-md) !important;
}

/* List panels with "list" in class - same but avoid overflow hidden on containers that clip buttons */
.list-content {
    overflow: visible !important;
    padding-right: var(--spacing-md) !important;
}

/* List headers (black bars) - glass with red accent */
.list-title,
.list-shadow > div:first-child,
div[style*="background"][style*="black"],
div[style*="background-color"][style*="black"],
div[style*="background"][style*="#000"],
div[style*="background"][style*="rgb(0"] {
    background: linear-gradient(135deg, var(--glass-bg-dark), rgba(229, 92, 92, 0.3)) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-bottom: 2px solid var(--color-primary) !important;
    padding: var(--spacing-md) !important;
    color: var(--color-text) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
}

.list-title a {
    color: var(--color-text) !important;
    text-decoration: none !important;
}

.list-title a:hover {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

/* List content (white areas) - glass */
.list-content,
.list-shadow > div:last-child,
div[style*="background"][style*="white"]:not(.logo-col):not(.search-col),
div[style*="background-color"][style*="white"],
div[style*="background"][style*="#fff"],
div[style*="background"][style*="#ffffff"],
div[style*="background"][style*="rgb(255"] {
    background: var(--glass-bg-light) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: none !important;
    padding: var(--spacing-md) !important;
    color: var(--color-text) !important;
}

/* List items - flex row so main link + action buttons (i, link, fav) never clip */
.list-content li,
.list-content .site-row,
.list-panel li,
.toplist-panel li,
.list-item {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    padding: var(--spacing-sm) 0 var(--spacing-sm) 0 !important;
    padding-right: var(--spacing-sm) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.2s ease !important;
    color: var(--color-text) !important;
    list-style: none !important;
}

/* Main link in row - flex grow, min-width 0 so it doesn't push buttons off */
.list-content .site-row > a:first-of-type,
.list-content li > a:first-of-type {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 0.5rem !important;
}

/* Action buttons (link, fav, info) - always visible, never shrink (like theporndude) */
.list-content .sub-links {
    display: flex !important;
    flex-shrink: 0 !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    align-items: center !important;
    gap: 0.25rem !important;
}
.list-content .sub-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-text) !important;
    transition: background 0.2s ease !important;
}
.list-content .sub-links a:hover {
    background: rgba(229, 92, 92, 0.3) !important;
    color: var(--color-text) !important;
}
.list-content .sub-links .i-info,
.list-content .sub-links .icon {
    display: inline-block !important;
}

.list-content li:hover,
.list-content .site-row:hover,
.list-panel li:hover,
.toplist-panel li:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    padding-left: var(--spacing-sm) !important;
    border-radius: 8px !important;
}

.list-content li:last-child,
.list-content .site-row:last-child,
.list-panel li:last-child,
.toplist-panel li:last-child {
    border-bottom: none !important;
}

/* List item links */
.list-content a,
.list-content .site-row a,
.list-panel a,
.toplist-panel a {
    color: var(--color-text) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.list-content a:hover,
.list-content .site-row a:hover,
.list-panel a:hover,
.toplist-panel a:hover {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

/* Allow full site names without truncation */
.list-content .site-row,
.list-content li {
    align-items: flex-start !important;
}

.list-content .name {
    white-space: normal !important;
    word-break: break-word !important;
}

/* "See X More Sites" links - only explicit see-more rows */
.list-content li.see-more a,
.list-panel li.see-more a,
.toplist-panel li.see-more a {
    display: inline-block !important;
    margin-top: var(--spacing-md) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    background: var(--glass-bg-light) !important;
    backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 8px !important;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.list-content li.see-more a:hover,
.list-panel li.see-more a:hover,
.toplist-panel li.see-more a:hover {
    background: rgba(229, 92, 92, 0.2) !important;
    transform: translateX(4px) !important;
}

/* ============================================
   REVIEW PAGES - GLASSMORPHISM
   ============================================ */

/* Review title panel - target panels with review titles */
.review-wrapper,
.review-title,
.review-header,
.review-main {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    padding: var(--spacing-lg) !important;
    margin-bottom: var(--spacing-md) !important;
    box-shadow: var(--glass-shadow) !important;
}

/* Embedded content container */
.embedded-content,
.iframe-wrapper,
.preview-container,
div:has(> iframe),
div:has(> embed) {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    padding: var(--spacing-md) !important;
    margin-bottom: var(--spacing-md) !important;
    box-shadow: var(--glass-shadow) !important;
    overflow: hidden !important;
}

.embedded-content iframe,
.iframe-wrapper iframe {
    border-radius: 12px !important;
    border: none !important;
}

/* Review text content */
.review-content,
.review-text,
article {
    background: var(--glass-bg-light) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    padding: var(--spacing-lg) !important;
    color: var(--color-text) !important;
    line-height: 1.8 !important;
    box-shadow: var(--glass-shadow) !important;
}

/* ============================================
   INTRO TEXT - GLASSMORPHISM
   ============================================ */

/* Hero/intro text blocks - target large text blocks */
.hero-text,
.intro-text,
p[style*="white"][style*="font"],
div > p:only-child,
section > p:only-child {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    padding: var(--spacing-lg) !important;
    margin: var(--spacing-md) auto !important;
    max-width: var(--container-max) !important;
    box-shadow: var(--glass-shadow) !important;
    color: var(--color-text) !important;
    text-align: center !important;
    font-size: 1.125rem !important;
    line-height: 1.8 !important;
}

/* ============================================
   FAVORITES GRID - GLASSMORPHISM
   ============================================ */

.favorites-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: var(--spacing-md) !important;
    list-style: none !important;
    padding: 0 !important;
}

.favorite-card {
    background: var(--glass-bg-light) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    padding: var(--spacing-md) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.favorite-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
    border-color: var(--color-primary) !important;
}

.favorite-card img {
    border-radius: 12px !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: var(--spacing-sm) !important;
}

/* ============================================
   RESPONSIVE FIXES
   ============================================ */

@media screen and (max-width: 1024px) {
    .favorites-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    }
    
    .list-panel,
    .toplist-panel {
        margin-bottom: var(--spacing-sm) !important;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --container-padding: 1rem;
        --spacing-lg: 1.5rem;
    }
    
    .favorites-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Stack toplist panels */
    .list-panel,
    .toplist-panel {
        width: 100% !important;
        margin-bottom: var(--spacing-md) !important;
    }
    
    /* Stack header elements */
    .logo-search,
    .feedback-social-media {
        flex-direction: column !important;
        gap: var(--spacing-sm) !important;
    }
}

/* ============================================
   UTILITIES
   ============================================ */

/* Prevent overflow */
* {
    box-sizing: border-box !important;
}

html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
}

/* Text improvements */
body, p, div, span {
    color: var(--color-text) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth !important;
}

/* Focus states */
a:focus,
button:focus,
input:focus {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
}