/* 
 * BAM Theme Main CSS - Exact Tailwind CSS replication from bamcam
 * Converted from bamcam/app/globals.css with exact same structure
 */

/* Third-party styles */
@import 'react-toastify/dist/ReactToastify.css';

@tailwind base;
@tailwind components;
@tailwind utilities;


@font-face {
    font-family: 'montserrat';
    src: url('../fonts/montserrat-var.woff2') format('woff2 supports variations');
    /* Fallback for older browsers: */
    src: url('../fonts/montserrat-var.woff2') format('woff2-variations');
    font-weight: 100 900; /* Define the range of weights available */
}

@font-face {
    font-family: 'source-sans';
    src: url('../fonts/source-sans-var.woff2') format('woff2 supports variations');
    /* Fallback for older browsers: */
    src: url('../fonts/source-sans-var.woff2') format('woff2-variations');
    font-weight: 100 900; /* Define the range of weights available */
}


:root {
    --font-montserrat: 'montserrat', sans-serif;
    --font-source-sans: 'source-sans', sans-serif;
}


.drawer-toggle{
    width: 30px;
    height: 30px;
}

.drawer-toggle span, .drawer-toggle:before, .drawer-toggle:after {
    /*background: #f2b007;*/
    background: #ffffff;
    border-radius: 5px;
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    transition: all .3s linear;
    content: '';
}

.drawer-toggle:before {
    top: 5px;
}
.drawer-toggle:after {
    top: 25px;
}

/* Sidebar Collapse Styles */
.sidebar-drawer {
    transition: width 0.3s ease-in-out;
}

.sidebar-drawer.sidebar-collapsed {
    width: 0 !important;
}

.sidebar-drawer.sidebar-collapsed .sidebar-content {
    display: none !important;
}

.icon-menu-btn {
    transition: all 0.2s ease-in-out;
}

.icon-menu-btn:hover {
    transform: scale(1.05);
}

.icon-menu-btn:hover svg {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Filter Overlay Styles */
.filter-overlay {
    min-width: 200px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.2s ease;
}

.filter-overlay::-webkit-scrollbar {
    width: 4px;
}

.filter-overlay::-webkit-scrollbar-track {
    background: #374151;
}

.filter-overlay::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 2px;
}

.filter-overlay::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.filter-overlay > div {
    animation: slideUp 0.3s ease;
}

/* Active Filter States */
.filter-option.active {
    background-color: #8b5cf6 !important;
    color: white !important;
}

.filter-option.active span {
    color: white !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Responsive Sidebar Behavior */
@media (max-width: 1023px) {
    .sidebar-collapsed {
        width: 256px !important;
    }
    
    .main-content {
        margin-left: 0 !important;
    }
}

@layer base {
    h1, h2, h3, h4, h5, h6 {
        @apply font-montserrat font-bold;
    }
}

:root {
     --primary-color: #4B0082;
     --primary-dark: #121212;
     --footer-text: #fff;
     --color-primary-main: #4B0082;
     --color-primary-default: #4B0082;
     --color-primary-light: #6916a6;
     --color-primary-text: #4B0082;
     --color-primary-neon: #D100FF;
     --color-primary-black: #121212;
     --color-secondary-default: #19d25d;
     --drawerWidth: 240px;
     outline: none;
}

.dark {
    --color-primary-main: #272727;
    --color-primary-default: #4B0082;
    --color-primary-light: #3a3939;
    --color-primary-text: '#ffffff';
    --color-primary-neon: #D100FF;
    --color-primary-black: #121212;
    --color-secondary-default: #19d25d;
}

/* Vertical scrollbar */
*::-webkit-scrollbar {
    width: 8px;
}

/* Horizontal scrollbar */
*::-webkit-scrollbar:horizontal {
    height: 8px;  /* Adjust this value to make the horizontal scrollbar thinner */
}

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

*::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Montserrat', sans-serif;
}

html{
    @apply font-sans;
}

h1{
    @apply text-2xl md:text-4xl font-bold mt-0 mb-6;
}

.main-content:has(.grid-archive) h1{
    @apply text-white;
}

.breadcrumb :is(.breadcrumb-label, .breadcrumb-link){
    @apply text-gray-800 dark:text-white capitalize;
}
.main-content:has(.grid-archive) .breadcrumb :is(.breadcrumb-label, .breadcrumb-link){
    @apply text-white capitalize;
}

.breadcrumb .breadcrumb-link.active{
    @apply text-primary-neon;
}
.main-content:has(.grid-archive) .breadcrumb .breadcrumb-link.active{
    @apply text-primary-light dark:text-primary-neon;
}

.tag-cms-content .page-title{
    @apply text-2xl sm:text-3xl md:text-5xl font-bold mt-0 mb-6;
}

.main-logo{
    width: 185px;
    height: 100px;
    position: relative;
    top: 30px;
}

/* WordPress specific additions */
.site-main {
    @apply min-h-screen;
}

.container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Model card specific styles */
.model-card {
    @apply relative bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden h-[200px];
}

.model-image-container {
    @apply relative w-full h-full;
}

.model-image-link {
    @apply block w-full h-full;
}

.model-image-placeholder {
    @apply w-full h-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center relative;
}

.model-initial {
    @apply text-4xl font-bold text-gray-500 dark:text-gray-400;
}

.model-hover-overlay {
    @apply absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center;
}

.hover-actions {
    @apply text-white text-center;
}

.view-model {
    @apply text-lg font-semibold;
}

.favorite-btn {
    @apply absolute top-2 right-2 z-40 p-2 bg-black bg-opacity-50 rounded-full text-white hover:bg-opacity-75 transition-all duration-200;
}

.heart-icon {
    @apply w-5 h-5;
}

/* Grid layouts */
.grid-archive {
    @apply w-full;
}

/* Scrolling announcement */
.scrolling-announcement {
    @apply w-full bg-primary-neon text-white py-2 overflow-hidden;
}

.scroll-content {
    @apply animate-scroll;
}

.scroll-content ul {
    @apply flex list-none m-0 p-0;
}

.scroll-content li {
    @apply whitespace-nowrap px-8;
}

/* Animation for scrolling */
@keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.animate-scroll {
    animation: scroll 30s linear infinite;
}

/* Loading skeleton */
.skeleton {
    @apply animate-pulse bg-gray-200 dark:bg-gray-700;
}

.skeleton-text {
    @apply h-4 bg-gray-200 dark:bg-gray-700 rounded;
}

.skeleton-avatar {
    @apply w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full;
}

/* Responsive grid */
.models-grid, .models-grid-skeleton {
    @apply grid gap-4;
}

.models-grid.normal, .models-grid-skeleton.normal {
    @apply grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6;
}

.models-grid.compact, .models-grid-skeleton.compact {
    @apply grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8;
}

.models-grid.wide, .models-grid-skeleton.wide {
    @apply grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4;
}

.models-grid.normal .model-card-wrapper[data-is-big-card="true"], .models-grid-skeleton.normal .skeleton-card:first-child {
    @apply col-span-2 row-span-2 sm:col-span-2 lg:col-span-3;
}

.models-grid.wide .model-card-wrapper[data-is-big-card="true"], .models-grid-skeleton.wide .skeleton-card:first-child{
    @apply col-span-1 row-span-2 sm:col-span-2 lg:col-span-2;
}

.models-grid.compact .model-card-wrapper[data-is-big-card="true"], .models-grid-skeleton.compact .skeleton-card:first-child{
    @apply col-span-3 row-span-2 sm:col-span-3;
}

.models-grid .model-card-wrapper[data-is-big-card="true"] .model-card{
    @apply h-[400px] sm:h-[420px] md:h-[415px];
}

.models-grid.wide .model-card-wrapper[data-is-big-card="true"] .model-card{
    @apply h-[350px] sm:h-[420px] md:h-[415px];
}

.models-grid.compact .model-card-wrapper[data-is-big-card="true"] .model-card{
    @apply h-[370px] sm:h-[420px] md:h-[315px];
}

.models-grid .model-card-wrapper[data-is-big-card="false"] .model-card{
    @apply h-[200px];
}

.models-grid.compact .model-card-wrapper[data-is-big-card="false"] .model-card{
    @apply h-[150px];
}

.models-grid.wide .model-card-wrapper[data-is-big-card="false"] .model-card{
    @apply h-[250px] sm:h-[200px];
}

.models-grid.compact .model-card-wrapper[data-is-big-card="false"] .model-card .model-site-logo{
    width: 70px;
}

/* Header-specific styles (exact from bamcam AppDrawer and HeaderFixedMenu) */
.z-modal { z-index: 1000; }
.z-drawer { z-index: 50; }


/* Header sort dropdown styling */
.header-sort option {
    background-color: var(--color-primary-main);
    color: white;
}

/* Mobile drawer animations */
.mobile-drawer-open {
    transform: translateX(0) !important;
}

.mobile-drawer-backdrop-open {
    opacity: 0.5 !important;
    pointer-events: auto !important;
}

/* Primary color utilities */
.bg-primary-main { background-color: var(--color-primary-main); }
.bg-primary-neon { background-color: var(--color-primary-neon); }
.bg-primary-light { background-color: var(--color-primary-light); }
.text-primary-main { color: var(--color-primary-main); }
.text-primary-neon { color: var(--color-primary-neon); }
.text-primary-light { color: var(--color-primary-light); }
.border-primary-main { border-color: var(--color-primary-main); }
.border-primary-neon { border-color: var(--color-primary-neon); }

/* LeftSideDrawer specific styles (exact from bamcam) */
.filter-section {
    @apply w-full;
}

.filter-header {
    @apply transition-colors duration-200;
}

.filter-header:hover {
    background-color: var(--color-primary-neon) !important;
}

.filter-container {
    @apply transition-all duration-300;
}

.filter-container.hidden {
    display: none;
}

.filter-option {
    @apply transition-colors duration-200;
}

.filter-option:hover {
    background-color: rgba(209, 0, 255, 0.5) !important;
    color: white !important;
}

.filter-option.active {
    background-color: var(--color-primary-neon) !important;
    color: white !important;
}

.sidebar-icon {
    @apply flex items-center justify-center;
}

.sidebar-title {
    @apply text-sm font-medium;
}

.filter-arrow {
    @apply transition-transform duration-300;
}

.filter-dropdown-open .filter-arrow {
    transform: rotate(180deg);
}

/* Drawer backdrop */
/* .drawer-open {
    overflow: hidden;
} */

/* Z-index for drawer */
.z-drawer {
    z-index: 40;
}

/* Text color utilities for primary text */
.text-primary-text {
    color: var(--color-primary-main);
}

.dark .text-primary-text {
    color: white;
}

/* Exact drawer animation styles from bamcam globals.css */
.left-drawer{
    transition: margin .35s cubic-bezier(.3, .86, .36, .95);
    left: 0;
}

.main-content{
    width: 100%;
    transition: width .35s cubic-bezier(.3, .86, .36, .95);
}

html:not(.drawer-open) .left-drawer .sidebar-filter-container{
    display: none;
}
html.drawer-open .left-drawer .sidebar-filter-container.filter-container-open{
    /*display: block;*/
    display: grid;
}

.drawer-open .left-drawer{
    margin-left: 0 !important;
}
.left-drawer{
    width: var(--drawerWidth);
    transition: all .3s ease;
    margin-left: calc(-1 * var(--drawerWidth) + 60px);
    flex-shrink: 0;
}

.left-drawer .left-drawer-container{
    width: var(--drawerWidth);
    left: calc(-1 * var(--drawerWidth) + 60px);
    transition: all .3s ease;
    height: calc(100% - 72px);
}

.drawer-open .left-drawer .left-drawer-container {
    left: 0 !important;
}

.main-content {
    width: 100%;
    transition: width .35s cubic-bezier(.3, .86, .36, .95);
}

/* Backdrop visibility */
.left-drawer-backdrop {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.drawer-open .left-drawer-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

html:not(.drawer-open) .left-drawer .search-icon {
    transition: all .3s ease;
    right: 15px;
    left: unset;
}

.drawer-open .left-drawer .search-icon {
    right: unset;
    transition: all .3s ease;
}

body .left-drawer .sidebar-icon {
    order: 1;
    place-items: center;
    text-align: center;
    transition: all .3s ease;
}

.drawer-open .left-drawer .sidebar-icon {
    order: 0;
    place-items: start;
    text-align: left;
    transition: all .3s ease;
}

/* Filter container visibility - enhanced for WordPress */
.filter-container {
    display: none;
    transition: all 0.3s ease;
}

.filter-container.filter-container-open {
    display: grid !important;
}

.filter-container.block {
    display: grid !important;
}

.filter-container.hidden {
    display: none !important;
}

/* Drawer-specific filter visibility */
html:not(.drawer-open) .left-drawer .sidebar-filter-container {
    display: none;
}

html.drawer-open .left-drawer .sidebar-filter-container.filter-container-open {
    display: grid !important;
}

/* Filter section states */
.filter-section .filter-header {
    cursor: pointer;
    user-select: none;
}

.filter-section .filter-header:hover {
    background-color: var(--color-primary-neon) !important;
}

.filter-section .filter-arrow {
    transition: transform 0.3s ease;
}

.filter-section .filter-header.filter-dropdown-open .filter-arrow {
    transform: rotate(180deg);
}

/* Filter option states */
.filter-option {
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.filter-option:hover {
    background-color: rgba(209, 0, 255, 0.5) !important;
    color: white !important;
}

.filter-option.active {
    background-color: var(--color-primary-neon) !important;
    color: white !important;
}

.filter-option.active span {
    color: white !important;
}

body .left-drawer .sidebar-title {
    font-size: 17px;
}

.left-drawer-backdrop {
    display: none;
}

/* Mobile drawer styles (exact from bamcam) */
@media screen and (max-width: 1024px) {
    .left-drawer {
        margin-left: calc(-1 * var(--drawerWidth));
    }
    
    .left-drawer .left-drawer-container {
        left: calc(-1 * var(--drawerWidth));
    }

    .drawer-open .left-drawer {
        margin-left: 0 !important;
    }

    .drawer-open .left-drawer .left-drawer-container {
        left: 0 !important;
    }

    .drawer-open .left-drawer-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
}

/* Desktop drawer behavior */
@media screen and (min-width: 1024px) {
    .drawer-open .main-content {
        width: calc(100% - var(--drawerWidth));
    }
    
    .left-drawer-backdrop {
        display: none !important;
    }
}

/* Header hamburger menu states */
header .header-hamburger-open,
header .header-hamburger-close {
    display: none;
}

@media screen and (max-width: 1024px) {
    header .header-hamburger-open,
    header .header-hamburger-close {
        @apply block absolute transition-all duration-300 ease-in-out;
    }

    header .header-hamburger-open {
        @apply opacity-100 rotate-0;
    }

    header .header-hamburger-close {
        @apply opacity-0 rotate-90;
    }

    .drawer-open header .header-hamburger-open {
        @apply opacity-0 -rotate-90;
    }

    .drawer-open header .header-hamburger-close {
        @apply opacity-100 rotate-0;
    }
}

/* Background gradient for archive pages */
html:not(.dark) .main-content:has(.grid-archive) {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: radial-gradient(circle at 5% 10%,#05baf4,transparent,transparent 80%),radial-gradient(circle at 20% 40%,#05baf4,transparent,transparent 60%),radial-gradient(circle at 70% 10%,#4B0082,transparent,transparent 100%),radial-gradient(circle at 50% 70%,#0b0379,transparent,transparent 60%),radial-gradient(circle at 80% 50%,#2b0399,transparent,transparent 60%),radial-gradient(circle at 80% 50%,#2b0399,transparent,transparent 100%),linear-gradient(120deg,#035979,#1c516f),linear-gradient(to bottom,rgba(255,0,150,0.3),rgb(6 117 255 / 30%)),linear-gradient(to top,rgb(8 1 49),rgb(0 0 0));
    background-attachment: fixed;
    background-size: cover;
}

/* Dark mode styles */
.dark {
    background: #121212;
    color: #fff;
}

.dark .next-error-h1 {
    border-right: 1px solid rgb(255 255 255 / 72%);
}

/* CMS content links */
.cms-content a {
    color: var(--primary-color);
    text-decoration: none;
}

.dark .cms-content a {
    color: #fff;
}

/* Grid sort visibility */
body:not(:has(.grid-archive)) .grid-sort-type {
    display: none;
}

/* Header sort dropdown */
.header-sort option {
    background-color: #fff;
    color: #000;
}

.dark .header-sort option {
    background-color: #121212;
    color: #fff;
}

/* Material symbols filled */
.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1;
}

/* Tags gradient overlay */
.tags-gradient::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1.5em;
}

:root[class~="dark"] .tags-gradient::after {
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(31,41,55,1));
}

:root:not([class~="dark"]) .tags-gradient::after {
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,75));
}

/* Scrolling announcement styles */
.scrollingAnnouncement {
    background-color: #f2f2f2;
    color: black;
    overflow: hidden;
    height: 30px;
    border-radius: 5px;
    margin: 5px 0;
    width: 100%;
    position: relative;
}

.scrollContent {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    animation: scrolling linear 20s infinite;
    overflow-x: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.scrollContent::-webkit-scrollbar {
    display: none; /* WebKit */
}

.scrollContent > ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-shrink: 0;
}

.scrollContent > ul > li {
    display: flex;
    align-items: center;
    padding: 0 30px;
    height: 100%;
    white-space: nowrap;
    position: relative;
}

@keyframes scrolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.33%);
    }
}

.scrollingAnnouncement:hover .scrollContent {
    animation-play-state: paused;
}

.scrollingAnnouncement ul li:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 38%;
    border-radius: 50%;
    border: 4px solid black;
}

/* No scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 404 page styles */
.main-content > div:has(.not-found-page), .main-content:has(.not-found-page) footer {
    margin: 0 !important;
}

.main-content > div:has(.not-found-page), .not-found-page {
    @apply min-h-[100vw] sm:min-h-[50vh] md:min-h-[60vh];
}

.not-found-page img {
    @apply object-top h-[100vw] sm:h-[70vh] md:h-[75vh] lg:h-[80vh] w-full;
}
/* Breadcrumb Navigation Styles (replicating Next.js Breadcrumb component) */
.breadcrumb {
    margin-bottom: 1.5rem;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    color: #6b7280;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item:not(:last-child)::after {
    content: '/';
    margin: 0 0.5rem;
    color: #000000;
}

.breadcrumb-item a {
    color: #000000;
    text-decoration: none;
    transition: color 0.2s ease;
}

.dark .breadcrumb-item a, .dark .breadcrumb-item:not(:last-child)::after{
    color: #9ca3af;
}

.breadcrumb-item a:hover {
    color: #4b0082;
}

.breadcrumb-item.active {
    color: #374151;
    font-weight: 500;
}

.dark .breadcrumb-item {
    color: #9ca3af;
}

.dark .breadcrumb-item a {
    color: #9ca3af;
}

.dark .breadcrumb-item a:hover {
    color: #d100ff;
}

.dark .breadcrumb-item.active {
    color: #f3f4f6;
}

#about-tabs-container .about-tab-button{
    @apply text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300;
}
#about-tabs-container .about-tab-button.active{
    color: var(--color-primary-text);
    border-color: var(--color-primary-main);
    border-bottom-width: 2px;
}
.dark #about-tabs-container .about-tab-button.active{
    color: var(--color-secondary-default);
    border-color: var(--color-secondary-default);
    border-bottom-width: 2px;
}

@media (max-width: 1320px) {
    .main-logo{
        width: 155px;
        height: 90px;
        top: 20px;
    }
}

@media screen and (max-width: 1026px) and (min-width: 1023px) {
    .main-logo{
        width: 130px;
    }
}

@media (max-width: 900px) {
    .model-card .model-site-logo{
        width: 60px;
        display: none;
    }
}

@media (max-width: 768px) {
    .main-logo{
        /*width: 145px;*/
        width: 140px;
        /*height: 80px;*/
        /*top: 20px;*/
        position: initial;
        transform: rotate(10deg);
    }
}