/* Dracula Cyberpunk Vaporwave Theme */
:root {
    --background-color: #303041; /* Dracula dark background */
    --primary-accent: #ff79c6; /* Dracula pink for primary accents */
    --secondary-accent: #bd93f9; /* Dracula purple for secondary accents */
    --tertiary-accent: #8be9fd; /* Cyberpunk teal for tertiary accents */
    --highlight-color: #f1fa8c; /* Vaporwave yellow for highlights */
    --font-color: #f8f8f2; /* Dracula foreground */
    --dark-gray: #44475a; /* Dracula comment color, used for less emphasized elements */
    --menu-gray: #6272a4; /* Dracula selection background, used for menu elements */
    --card-radius: .75rem;
    --disabled-color: #6272a4; /* Using the Dracula selection background color for disabled elements */
    --menu-rounding: 1rem;
    --not-card-radius: .25rem;
    --red-delete: #ff5555; /* Dracula red for delete or error states */
}

.btn {
    border-radius: var(--not-card-radius);
}

.btn-primary:not(:disabled):not(.disabled):not(.brand-link):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    background-color: var(--dark-gray);
    border-color: var(--primary-accent);
    color: var(--font-color);
}

.dropdown-item {
    border-radius: var(--menu-rounding);
}

.fa-chevron-up, .fa-chevron-down {
    color: var(--primary-accent);
}

.form-control {
    border-radius: var(--not-card-radius);
    padding-right: 1.3rem;
}

.input-group-text {
    background-color: var(--menu-gray);
    border: 1px solid var(--primary-accent);
    color: var(--font-color);
}

.nav-pills .nav-link {
    border-radius: var(--not-card-radius);
}

.search-item {
    background-color: var(--menu-gray);
    border-radius: .25rem;
    padding: 1rem;
}

.setting-section .setting:not(:last-child) {
    border-bottom: 1px solid var(--primary-accent);
}

a.bg-secondary:hover, a.bg-secondary:focus, button.bg-secondary:hover, button.bg-secondary:focus {
    background-color: var(--dark-gray)!important;
}

body {
    background-color: var(--background-color);
    color: var(--font-color);
    text-align: left;
}

.card {
    background-color: var(--menu-gray);
    border: 1px solid var(--secondary-accent);
    box-shadow: 0 0 8px var(--tertiary-accent);
    border-radius: var(--card-radius)!important;
}

.navbar-brand, .btn-primary, .btn-secondary, .badge-info, .modal-header, .modal-body, .modal-footer, .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: var(--dark-gray);
    color: var(--font-color);
    border-color: var(--highlight-color);
}

/* Additional styles to accentuate the Cyberpunk / Vaporwave flair */
body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #282a36 0%, #bd93f9 100%);
}

.btn, .form-control, .card {
    transition: all .3s ease-in-out;
}

.btn:hover, .form-control:focus {
    box-shadow: 0 0 12px var(--tertiary-accent);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px var(--tertiary-accent);
}

/* Ensuring readability and aesthetics */
::selection {
    background-color: var(--tertiary-accent);
    color: var(--background-color);
}

/* Custom scrollbar for webkit browsers */
body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    background: var(--dark-gray);
}

body::-webkit-scrollbar-thumb {
    background: var(--primary-accent);
}

body::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-accent);
}


/* 888888888888888888888888888888888888888888888 */

/* Mobile Layout Overhaul by Dankonite */
:root
{
	--card-radius:.75rem;
	--font-color:#fff;
	--menu-rounding:1rem;
	--not-card-radius:.25rem;
}
@media(max-width: 576px) {    
.btn
{
	border-radius:var(--not-card-radius)
}
.dropdown-item
{
	border-radius:var(--menu-rounding)
}
.edit-buttons-container>*
{
	margin-bottom:1rem
}
.form-control
{
	border-radius:var(--not-card-radius);
	padding-right:1.3rem
}
.input-group-text
{
	color:var(--font-color)
}
.input-group.has-validation>.input-group-append>div>div>button
{
	border-bottom-left-radius:0!important;
	border-top-left-radius:0!important
}
.nav-pills .nav-link
{
	border-radius:var(--not-card-radius)
}
.row
{
	margin-left:0;
	margin-right:0
}
.saved-filter-list-menu>div>div
{
	margin-bottom:1rem
}
.search-item
{
	border-radius:.25rem;
	padding:1rem
}
.set-as-default-button
{
	margin-top:1rem
}
button.brand-link
{
	font-size:0;
	visibility:hidden!important
}
button.brand-link:after
{
	align-items:center;
	border-radius:var(--not-card-radius);
	content:"Home";
	display:inline-block;
	font-size:1rem;
	height:40px;
	padding:7px 12px;
	position:relative;
	top:-1px;
	vertical-align:middle;
	visibility:visible
}
div.row>h4
{
	margin:0;
	padding:1rem
}
div.row>hr.w-100
{
	padding-bottom:1rem
}
input.bg-secondary.text-white.border-secondary.form-control,.date-input.form-control,.text-input.form-control
{
	height:33.5px
}
	.brand-link:after
	{
		margin-left:-16px
	}
	.top-nav .btn
	{
		padding:0 12px
	}
.bs-popover-bottom>.arrow:after,.bs-popover-auto[x-placement^=bottom]>.arrow:after
{
	border-width:0 .5rem .5rem;
	top:1px
}
.btn-toolbar>.btn-group>.dropdown>button,.query-text-field,.form-control,.dropdown,.dropdown-toggle
{
	height:100%
}
.navbar-brand
{
	display:inline-block;
	font-size:1.25rem;
	line-height:inherit;
	margin-right:0;
	padding-bottom:.3125rem;
	padding-top:.3125rem;
	white-space:nowrap
}
.navbar-expand-xl .navbar-nav .nav-link
{
	padding-left:.5rem;
	padding-right:0
}
h6.col-md-2.col-4
{
	display:flex;
	justify-content:center
}
.TruncatedText.scene-card__description
{
	font-size:.9rem
}
.brand-link
{
	padding:0
}
.btn-toolbar
{
	justify-content:flex-start;
	padding-top:.5rem
}
.dropdown-item.disabled,.dropdown-item:disabled
{
	color:#adb5bd
}
.dropdown-menu.show
{
	display:block;
	padding:1rem
}
body
{
	text-align:left
}
div.navbar-buttons>:not(.mr-2)
{
	border-radius:var(--not-card-radius)
}
h5,.h5
{
	font-size:1.1rem
}
.gallery-card
{
	width:unset!important
}
.performer-card
{
	width:unset!important
}
.tag-card-image
{
	height:120px
}
#scrubber-current-position
{
	height:30px;
	left:50%;
	position:absolute;
	width:2px;
	z-index:1
}
#scrubber-position-indicator
{
	height:20px;
	left:-100%;
	position:absolute;
	width:100%;
	z-index:0
}
.badge-secondary
{
	border-radius:.25rem;
}
.filter-button .badge
{
	border-radius:999px;
	right:-7px;
	top:-6px;
	z-index:3!important
}
.gallery-card
{
	height:min-content!important
}
.gallery-card.card
{
	padding-bottom:0
}
.modal-footer
{
	border-radius:1rem;
	border-top-left-radius:0;
	border-top-right-radius:0
}
.modal-header
{
	border-bottom-left-radius:0!important;
	border-bottom-right-radius:0!important;
	border-radius:1rem
}
.performer-card .fi
{
	bottom:.3rem;
	filter:drop-shadow(0 0 2px rgba(0,0,0,.9));
	height:2rem;
	position:absolute;
	right:.2rem;
	width:3rem
}
.scene-header>h3>.TruncatedText
{
	text-align:left
}
.scene-specs-overlay,.scene-interactive-speed-overlay,.scene-studio-overlay,span.scene-card__date
{
	font-weight:900!important
}
.scrubber-tags-background
{
	height:20px;
	left:0;
	position:absolute;
	right:0
}
hr
{
	margin:0
}
.card.performer-card
{
	padding:0
}
.performer-card__age
{
	text-align:center
}
.slick-list .gallery-card
{
	width:min-content
}
.slick-slide .card
{
	height:min-content
}
.slick-track
{
	margin-bottom:1rem;
	top:0
}
.tag-sub-tags,.studio-child-studios
{
	display:none
}
.card-popovers
{
	justify-content:space-around;
	margin-bottom:2px;
	margin-top:2px
}
.card-section
{
	height:100%;
	padding:0 .2rem
}
.scene-specs-overlay
{
	bottom:.2rem;
	right:.2rem
}
.scene-studio-overlay
{
	line-height:.8rem;
	max-width:50%;
	right:.2rem;
	top:.2rem
}
.edit-buttons>button
{
	margin-left:1px
}
.scene-card__details,.gallery-card__details
{
	margin-bottom:0!important
}
.setting-section .setting>div:last-child
{
	display:flex;
	justify-content:center;
	text-align:right
}
span.scene-card__date
{
	display:flex;
	font-size:.8em;
	justify-content:flex-end;
	margin-right:.2rem
}
a.marker-count
{
	display:none
}
a[target='_blank']
{
	display:none
}
button.collapse-button.btn-primary:not(:disabled):not(.disabled):hover,button.collapse-button.btn-primary:not(:disabled):not(.disabled):focus,button.collapse-button.btn-primary:not(:disabled):not(.disabled):active
{
	color:var(--font-color)
}
.TruncatedText
{
	text-align:center;
	white-space:pre-line;
	word-break:break-word
}
.gallery-card
{
	width:min-content!important
}
.gallery-card-image
{
	max-height:240px!important;
	width:auto!important
}
.grid-card .progress-bar
{
	bottom:0
}
.grid-card a .card-section-title
{
	color:var(--font-color);
	display:flex;
	justify-content:center
}
.ml-2.mb-2.d-none.d-sm-inline-flex
{
	display:none!important
}
.tag-card
{
	padding:0;
	width:auto!important
}
body
{
	color:var(--font-color);
	padding:3.6rem 0 0
}
div.mb-2
{
	height:auto
}
.card
{
	padding:0
}
.container,.container-fluid,.container-xl,.container-lg,.container-md,.container-sm
{
	padding-left:0;
	padding-right:0
}
.d-flex.justify-content-center.mb-2.wrap-tags.filter-tags
{
	margin:0!important
}
.input-control,.text-input
{
	color:var(--font-color)
}
.navbar-buttons>.mr-2,.card hr
{
	margin:0!important
}
.preview-button .fa-icon
{
	color:var(--font-color)
}
.rating-banner
{
	display:none!important
}
.scene-card-preview,.gallery-card-image,.tag-card-image,.image-card-preview
{
	width:100%
}
.slick-dots li button:before
{
	content:"."
}
.slick-dots li.slick-active button:before
{
	opacity:.75
}
.tag-item
{
	color:var(--font-color)
}
.tag-item .btn
{
	color:var(--font-color)
}
.top-nav
{
	padding:0 2rem!important
}
a.nav-utility,button[title='Help'],.nav-menu-toggle
{
	margin-left:.5rem
}
button.brand-link,.top-nav .navbar-buttons .btn
{
	height:40px
}
div.react-select__control
{
	color:var(--font-color)
}
div.react-select__control .react-select__multi-value,div.react-select__multi-value__label,div.react-select__multi-value__remove
{
	color:var(--font-color)!important
}
div.react-select__menu,div.dropdown-menu
{
	color:var(--font-color)
}
div.react-select__multi-value
{
	border-radius:999px
}
div.react-select__multi-value__label
{
	border-bottom-left-radius:999px;
	border-top-left-radius:999px;
	padding-right:8px
}
div.react-select__multi-value__remove
{
	border-bottom-right-radius:999px;
	border-top-right-radius:999px;
	padding-left:0
}
div.react-select__placeholder
{
	color:var(--font-color)
}
div[id='settings-menu-container']
{
	padding-top:.5rem
}
div[role='group'].ml-auto.btn-group>div
{
	margin-right:.5rem;
	margin-top:.5rem
}
.grid-card a .card-section-title
{
	display:flex;
	justify-content:center
}
dl.details-list {
    grid-column-gap:0;
}
dt {
    padding-right: .5rem;
}
dd {
    margin-bottom: 0;
    padding-left: .5rem;
}
#performer-page .performer-image-container .performer {
    border-radius:var(--menu-rounding);
    border: 0!important;
}
.recommendations-container-edit .recommendation-row {
    border-radius: 1rem;
    margin-bottom: 10px;
}
.recommendations-container-edit.recommendations-container>div>div:first-of-type {
    margin-top: calc(1rem + 10px);
}
}
@media (max-width: 575.98px) and (orientation: portrait) {
	.container,.container-fluid,.container-xl,.container-lg,.container-nd,.container-sm
	{
		padding-top:3.5rem!important
	}
	.top-nav
	{
		bottom:unset;
		top:auto
	}
    .performer-card-image
	{
		height:25vh
	}
    body
    {
        padding:0
    }
    .grid-card
	{
		width:47vw
	}
    .grid-card
	{
		width:47vw
	}
    }
/* ========== ADDITIONAL QOL & PERFORMANCE TWEAKS ========== */

/* Bigger preview thumbnails for better visibility */
.scene-card-preview-image,
.scene-card-preview-video {
    min-height: 280px !important;
    object-fit: cover;
}

/* Better tag pills with enhanced styling */
.tag-item {
    border-radius: 15px !important;
    padding: 0.35rem 0.85rem !important;
    margin: 0.2rem !important;
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--secondary-accent) 100%) !important;
    border: none !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.tag-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--tertiary-accent);
}

/* Compact scene cards for more content on screen */
.scene-card {
    margin: 0.3rem !important;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.scene-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 8px 25px rgba(189, 147, 249, 0.4);
}

/* Hide performer gender icons for cleaner look */
.performer-card .gender-icon {
    display: none !important;
}

/* Better studio overlay */
.scene-studio-overlay {
    background: rgba(255, 121, 198, 0.9) !important;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    font-weight: 700;
    backdrop-filter: blur(5px);
}

/* Enhanced scene specs overlay */
.scene-specs-overlay {
    background: rgba(139, 233, 253, 0.9) !important;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    font-weight: 700;
    backdrop-filter: blur(5px);
}

/* Better organized rating display */
.rating-stars {
    font-size: 1.2rem;
    color: var(--highlight-color);
    text-shadow: 0 0 5px rgba(241, 250, 140, 0.5);
}

/* Smooth loading animations */
.card.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Better modal dialogs */
.modal-content {
    border-radius: var(--menu-rounding) !important;
    border: 2px solid var(--primary-accent) !important;
    background: var(--background-color) !important;
    box-shadow: 0 0 30px rgba(255, 121, 198, 0.3);
}

/* Enhanced buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--secondary-accent) 100%) !important;
    border: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 121, 198, 0.4);
}

/* Compact performer cards */
.performer-card {
    transition: all 0.3s ease;
}

.performer-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px var(--tertiary-accent);
}

/* Better gallery cards */
.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(189, 147, 249, 0.5);
}

/* Enhanced search bar */
input.form-control:focus {
    border-color: var(--primary-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 121, 198, 0.25) !important;
    background-color: rgba(68, 71, 90, 0.5) !important;
}

/* Better scene markers */
.scrubber-tag {
    background: var(--primary-accent) !important;
    border: 2px solid var(--highlight-color);
    transition: all 0.2s ease;
}

.scrubber-tag:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px var(--tertiary-accent);
}

/* Enhanced progress bars */
.progress-bar {
    background: linear-gradient(90deg, var(--primary-accent) 0%, var(--secondary-accent) 50%, var(--tertiary-accent) 100%) !important;
    animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Keyboard shortcut styling */
kbd {
    background: var(--dark-gray);
    border: 1px solid var(--primary-accent);
    border-radius: 3px;
    padding: 2px 6px;
    font-family: monospace;
    font-size: 11px;
    color: var(--font-color);
    box-shadow: 0 2px 0 var(--primary-accent);
    display: inline-block;
    margin: 0 2px;
}

/* Better tooltips */
.tooltip {
    font-size: 13px;
}

.tooltip-inner {
    background: var(--dark-gray) !important;
    border: 1px solid var(--primary-accent);
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 0 15px rgba(255, 121, 198, 0.3);
}

/* Enhanced dropdown menus */
.dropdown-menu {
    background: var(--menu-gray) !important;
    border: 1px solid var(--primary-accent) !important;
    border-radius: var(--menu-rounding) !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.dropdown-item:hover {
    background: var(--dark-gray) !important;
    color: var(--primary-accent) !important;
}

/* Smooth image loading */
img {
    transition: opacity 0.3s ease;
}

img[data-src] {
    opacity: 0.5;
}

/* Better table styling */
.table {
    border-radius: var(--card-radius);
    overflow: hidden;
}

.table thead th {
    background: var(--dark-gray);
    color: var(--primary-accent);
    font-weight: 700;
}

/* Enhanced badges */
.badge {
    border-radius: 12px !important;
    padding: 0.4em 0.8em !important;
    font-weight: 600;
    background: linear-gradient(135deg, var(--secondary-accent) 0%, var(--tertiary-accent) 100%) !important;
}

/* Better organized count display */
.organized-count,
.o-counter {
    background: linear-gradient(135deg, var(--tertiary-accent) 0%, var(--secondary-accent) 100%) !important;
    border-radius: 50%;
    padding: 0.3rem 0.6rem;
    font-weight: 700;
}

/* Glow effect for favorite/organized items */
.organized .scene-card {
    box-shadow: 0 0 15px rgba(139, 233, 253, 0.6);
}

/* Better video player controls */
.vjs-control-bar {
    background: rgba(40, 42, 54, 0.95) !important;
    backdrop-filter: blur(10px);
}

.vjs-play-progress {
    background: var(--primary-accent) !important;
}

/* Enhanced scene details page */
.scene-header {
    background: linear-gradient(135deg, rgba(68, 71, 90, 0.8) 0%, rgba(48, 48, 65, 0.8) 100%);
    padding: 2rem;
    border-radius: var(--card-radius);
    margin-bottom: 1rem;
}

/* Better organized stats panels */
.stats-element {
    background: var(--menu-gray);
    border-radius: var(--card-radius);
    padding: 1rem;
    border: 1px solid var(--secondary-accent);
    transition: all 0.3s ease;
}

.stats-element:hover {
    border-color: var(--primary-accent);
    box-shadow: 0 0 15px rgba(255, 121, 198, 0.3);
}

/* Responsive video grid improvements */
@media (min-width: 1200px) {
    .scene-card {
        width: calc(20% - 0.6rem);
    }
}

@media (min-width: 1600px) {
    .scene-card {
        width: calc(16.666% - 0.6rem);
    }
}

/* Hide unnecessary UI elements for cleaner look */
.donate-banner,
.upgrade-to-supporter {
    display: none !important;
}

/* Better filter panel */
.filter-container {
    background: rgba(68, 71, 90, 0.95);
    border-radius: var(--card-radius);
    padding: 1rem;
    backdrop-filter: blur(10px);
}

/* Enhanced scene duration display */
.scene-card__duration {
    background: rgba(0, 0, 0, 0.8) !important;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    font-weight: 700;
    backdrop-filter: blur(5px);
}

/* Performance: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print styles (hide unnecessary elements when printing) */
@media print {
    .top-nav,
    .filter-container,
    .keyboard-shortcuts-hint {
        display: none !important;
    }
}