/* ==========================================================================
   Home page slider (.sgHero): views/site/index.php, the behaviour in custom.js.
   Cross-fading 1920x640 slides with a slow zoom, a headline + text caption over a
   left shade, arrows / dots / pause at the bottom, a thin time bar on the bottom
   edge (white and pulsing while the countdown stands) and a divider under it.
   ========================================================================== */
.sgHero {
	--sg-hero-accent: var(--color-primary, #E30000);
	position: relative;
	margin: 0 0 22px;
	overflow: hidden;
	isolation: isolate;
	background-color: #000;
}

.sgHeroTrack {
	display: grid;
}

/* Every slide sits in the same grid cell: the track is as high as one image */
.sgHeroSlide {
	grid-area: 1 / 1;
	position: relative;
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .9s ease, visibility 0s linear .9s;
}

.sgHeroSlide.isActive {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity .9s ease, visibility 0s;
}

.sgHeroMedia {
	overflow: hidden;
}

/* A slide without a shown button links its whole image (as on the old site) */
.sgHero .slideLink {
	display: block;
}

.sgHero .sgHeroImg {
	display: block;
	width: 100%;
	aspect-ratio: 1920 / 640;
	object-fit: cover;
	opacity: 1;
	transform-origin: 60% 50%;
}

/* A slow zoom-out while the slide stands; it ends at its natural size, so the leaving slide
   does not jump back */
.sgHero.hasMany .sgHeroSlide.isActive .sgHeroImg {
	animation: sgHeroZoom calc(var(--sg-hero-interval, 5000ms) + .9s) ease-out both;
}

.sgHero.isPaused .sgHeroSlide.isActive .sgHeroImg {
	animation-play-state: paused;
}

/* Shade at the bottom (the controls and the fade into the page), and on the left behind the
   caption */
.sgHeroSlide::after,
.sgHeroSlide.hasCaption::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.sgHeroSlide::after {
	background: linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 38%);
}

.sgHeroSlide.hasCaption::before {
	background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .45) 32%, rgba(0, 0, 0, 0) 64%);
}

/* Caption */
.sgHeroLayer {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
}

.sgHeroLayer .toCenter {
	width: 100%;
}

/* Over a linked image the caption lets the clicks through, only its own links stay clickable */
.sgHeroSlide.isLinked .sgHeroLayer {
	pointer-events: none;
}

.sgHeroSlide.isLinked .sgHeroLayer a {
	pointer-events: auto;
}

.sgHeroCaption {
	max-width: min(780px, 58%);
	padding-bottom: 30px;
}

.sgHeroAccent {
	display: block;
	width: 56px;
	height: 4px;
	margin-bottom: 22px;
	border-radius: 4px;
	background-color: var(--sg-hero-accent);
	box-shadow: 0 0 18px color-mix(in srgb, var(--sg-hero-accent) 60%, transparent);
	transform-origin: left center;
}

.sgHeroTitle {
	color: #fff;
	font-size: clamp(30px, 3.4vw, 66px);
	line-height: 1.04;
	font-weight: 800;
	letter-spacing: -.025em;
	text-wrap: balance;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}

.sgHeroText {
	margin-top: 16px;
	color: rgba(255, 255, 255, .84);
	font-size: clamp(16px, 1.3vw, 24px);
	line-height: 1.45;
	font-weight: 500;
	text-wrap: pretty;
	text-shadow: 0 1px 16px rgba(0, 0, 0, .5);
}

.sgHero .sgHeroButton {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 30px;
	padding: 0 30px;
	font-size: 17px;
	line-height: 54px;
	letter-spacing: .06em;
	border-radius: 10px;
	box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--sg-hero-accent) 80%, transparent);
	transition: translate .25s ease, filter .25s ease, box-shadow .25s ease;
}

.sgHero .sgHeroButton svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .25s ease;
}

/* `translate`, not `transform`: the entrance animation holds the transform of the button */
.sgHero .sgHeroButton:hover {
	translate: 0 -2px;
	filter: brightness(1.1);
	box-shadow: 0 18px 38px -12px color-mix(in srgb, var(--sg-hero-accent) 90%, transparent);
}

.sgHero .sgHeroButton:hover svg {
	transform: translateX(4px);
}

/* Entrance of the caption of the active slide: the accent line grows, the rest rises in */
.sgHero.isJs .sgHeroCaption > * {
	opacity: 0;
}

.sgHero.isReady .sgHeroSlide.isActive .sgHeroCaption > * {
	animation: sgHeroIn .9s cubic-bezier(.2, .75, .2, 1) both;
}

.sgHero.isReady .sgHeroSlide.isActive .sgHeroCaption > .sgHeroAccent {
	animation-name: sgHeroAccentIn;
	animation-delay: .2s;
}

.sgHero.isReady .sgHeroSlide.isActive .sgHeroCaption > :nth-child(2) {
	animation-delay: .32s;
}

.sgHero.isReady .sgHeroSlide.isActive .sgHeroCaption > :nth-child(3) {
	animation-delay: .44s;
}

.sgHero.isReady .sgHeroSlide.isActive .sgHeroCaption > :nth-child(4) {
	animation-delay: .56s;
}

/* Controls: counter + dots on the left, previous / pause / next on the right */
.sgHeroControls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 28px;
	z-index: 3;
	pointer-events: none;
}

.sgHeroControls .toCenter {
	display: flex;
	align-items: center;
	gap: 26px;
}

.sgHeroControls button {
	pointer-events: auto;
}

.sgHeroCounter {
	display: flex;
	align-items: baseline;
	color: rgba(255, 255, 255, .55);
	font-size: 15px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
}

.sgHeroCurrent {
	color: #fff;
	font-size: 22px;
}

.sgHeroTotal::before {
	content: '/';
	margin: 0 8px 0 6px;
	color: rgba(255, 255, 255, .35);
}

.sgHeroDots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sgHeroDot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 99px;
	background-color: rgba(255, 255, 255, .4);
	cursor: pointer;
	transition: width .45s cubic-bezier(.2, .75, .2, 1), background-color .3s ease;
}

/* A bigger hit area than the dot itself */
.sgHeroDot::before {
	content: '';
	position: absolute;
	inset: -10px -4px;
}

.sgHeroDot:hover {
	background-color: rgba(255, 255, 255, .8);
}

.sgHeroDot.isActive {
	width: 30px;
	background-color: var(--sg-hero-accent);
}

.sgHeroNav {
	display: flex;
	gap: 10px;
	margin-left: auto;
}

.sgHeroBtn {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	background-color: rgba(0, 0, 0, .32);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, transform .2s ease;
}

.sgHeroBtn:hover {
	border-color: var(--sg-hero-accent);
	background-color: var(--sg-hero-accent);
}

.sgHeroBtn:active {
	transform: scale(.93);
}

.sgHeroBtn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sgHeroBtn .icoPlay {
	display: none;
	fill: currentColor;
	stroke: none;
}

.sgHero.isStopped .sgHeroToggle {
	border-color: var(--sg-hero-accent);
}

.sgHero.isStopped .sgHeroToggle .icoPause {
	display: none;
}

.sgHero.isStopped .sgHeroToggle .icoPlay {
	display: block;
}

.sgHero .sgHeroBtn:focus-visible,
.sgHero .sgHeroDot:focus-visible,
.sgHero a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Time bar: fills (in custom.js) until the next slide; white and pulsing while the countdown
   stands (hover, focus, touch), dim and still after the pause button */
.sgHeroBar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	height: 3px;
	overflow: hidden;
	background-color: rgba(255, 255, 255, .12);
}

.sgHeroBarFill {
	display: block;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: var(--sg-hero-accent);
	background: linear-gradient(90deg, color-mix(in srgb, var(--sg-hero-accent) 45%, transparent), var(--sg-hero-accent));
	will-change: transform;
}

.sgHero.isPaused .sgHeroBarFill {
	background: #fff;
	animation: sgHeroPulse 1.4s ease-in-out infinite;
}

.sgHero.isStopped .sgHeroBarFill {
	animation: none;
	opacity: .35;
}

/* Divider under the slider: a hairline with a short accent in the middle */
.sgHeroDivider {
	position: relative;
	width: calc(100% - 40px);
	max-width: 1620px;
	height: 1px;
	margin: 0 auto 26px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16) 18%, rgba(255, 255, 255, .16) 82%, rgba(255, 255, 255, 0));
}

.sgHeroDivider span {
	position: absolute;
	top: -1px;
	left: 50%;
	width: 72px;
	height: 3px;
	margin-left: -36px;
	border-radius: 3px;
	background-color: var(--color-primary, #E30000);
	box-shadow: 0 0 14px color-mix(in srgb, var(--color-primary, #E30000) 60%, transparent);
}

@keyframes sgHeroZoom {
	from { transform: scale(1.06); }
	to { transform: scale(1); }
}

@keyframes sgHeroIn {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}

@keyframes sgHeroAccentIn {
	from { opacity: 0; transform: scaleX(0); }
	to { opacity: 1; transform: scaleX(1); }
}

@keyframes sgHeroPulse {
	0%, 100% { opacity: .35; }
	50% { opacity: .9; }
}

@media only screen and (max-width: 1023px) {
	.sgHero {
		margin-bottom: 16px;
	}

	.sgHeroSlide.hasCaption::before {
		background: linear-gradient(90deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .4) 70%, rgba(0, 0, 0, .2) 100%);
	}

	.sgHeroCaption {
		max-width: 100%;
		padding-bottom: 40px;
	}

	.sgHeroAccent {
		width: 40px;
		height: 3px;
		margin-bottom: 14px;
	}

	.sgHeroTitle {
		font-size: 27px;
		line-height: 1.08;
	}

	.sgHeroText {
		margin-top: 10px;
		font-size: 15px;
		line-height: 1.4;
	}

	.sgHero .sgHeroButton {
		gap: 8px;
		margin-top: 20px;
		padding: 0 20px;
		font-size: 14px;
		line-height: 44px;
		border-radius: 8px;
	}

	.sgHero .sgHeroButton svg {
		width: 16px;
		height: 16px;
	}

	.sgHeroControls {
		bottom: 16px;
	}

	/* On a phone the slide is swiped: only the dots and the pause button stay */
	.sgHeroCounter,
	.sgHeroPrev,
	.sgHeroNext {
		display: none;
	}

	.sgHeroBtn {
		width: 36px;
		height: 36px;
	}

	.sgHeroBtn svg {
		width: 16px;
		height: 16px;
	}

	.sgHeroDivider {
		width: calc(100% - 28px);
		margin-bottom: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sgHeroSlide,
	.sgHeroSlide.isActive {
		transition-duration: .3s, 0s;
	}

	.sgHero.hasMany .sgHeroSlide.isActive .sgHeroImg {
		animation: none;
	}

	.sgHero.isReady .sgHeroSlide.isActive .sgHeroCaption > * {
		animation-duration: .01s;
		animation-delay: 0s;
	}

	.sgHero.isPaused .sgHeroBarFill {
		animation: none;
		opacity: .5;
	}
}

/* Promo banner lower text */
.statBoxes .ltext {
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	margin-top: 6px;
	text-transform: none;
}

.statBoxes a {
	color: inherit;
	text-decoration: none;
}

.statBoxes .box img {
	filter: grayscale(100%);
}

.statBoxes a:hover .box {
	opacity: 0.85;
}

/* Middle banner (.joinPanel.middleBanner) */
.joinPanel.middleBanner .panel {
	padding: 50px 70px;
}
.joinPanel.middleBanner .texts {
	padding: 0;
}
.joinPanel.middleBanner .top {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-bottom: 20px;
}
.joinPanel.middleBanner .award img {
	width: 200px;
	height: 120px;
	object-fit: contain;
	display: block;
}
.joinPanel.middleBanner h3 {
	margin: 0;
}
.joinPanel.middleBanner p {
	margin: 0;
}
.joinPanel.middleBanner a {
	color: inherit;
	text-decoration: none;
}

/* Discount badge — smaller text to fit "-50%" in the quality badge */
.videoLists .type.discount,
.myVideos .video .image .type.discount {
	font-size: 11px;
	line-height: 30px;
}

/* Video card hover — image rotation preview container */
.videoLists .image {
	position: relative;
	overflow: hidden;
}
.videoLists .image .prev {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
}
.videoLists .image:hover .prev {
	display: block;
}
.videoLists .image .prev img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.15s;
}
.videoLists .image .prev img.active {
	opacity: 1;
}

/* GIF hover — show gif overlay on hover */
.videoLists .image .gif-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none;
}
.videoLists .image:hover .gif-overlay {
	display: block;
}

/* Search clear X button — between input and search button */
.topSearch .searchClear {
	position: absolute;
	right: 50px;
	top: 0;
	width: 50px;
	height: 50px;
	background: var(--color-primary, #E30000) url(../img/close.svg) no-repeat center center;
	display: block;
	z-index: 2;
	cursor: pointer;
	text-decoration: none;
	border-radius: 0;
}
.topSearch .searchClear:hover {
	background-color: var(--color-primary-hover, #c00);
}

/* Auto-open advanced search on desktop only (when body has advSearchOpen class) */
@media only screen and (min-width: 1024px) {
	body.advSearchOpen {
		padding-top: 370px;
	}
	body.advSearchOpen .openSearch {
		display: block;
	}
	body.advSearchOpen .toggle {
		/* Visually show as open */
	}
	body.advSearchOpen .toggle:after {
		transform: translate(0, -50%) rotate(0);
	}
}

/* Advanced search — button column spans 2 cols on desktop */
.openSearch .selectGrid > .col:last-child {
	grid-column: span 2;
}
@media only screen and (max-width: 1023px) {
	.openSearch .selectGrid > .col:last-child {
		grid-column: span 1;
	}
}

/* Advanced search — buttons row (SEARCH NOW + CLEAR inline) */
.openSearch .selectGrid .col:last-child .col:last-child {
	display: flex;
	gap: 10px;
	align-items: center;
}

/* Advanced search Clear button */
.openSearch .clearSearch {
	background-color: #515151;
}
.openSearch .clearSearch:hover {
	background-color: var(--color-primary, #E30000);
}

/* Modal icon max size */
.modalBox img {
	max-width: 100px;
}

body.adult{
    padding: 0 0 0 0;
}

.openScreen .buttons {
    margin: 0 auto 40px;
}

.openScreen p {
    margin: 0 0 20px;
    font-size: 18px;
    line-height: 20px;
}

@media only screen and (max-width: 1023px) {
	.joinPanel.middleBanner .panel {
		padding: 24px;
	}
	.joinPanel.middleBanner .top {
		gap: 16px;
		flex-wrap: wrap;
	}
	.joinPanel.middleBanner .award img {
		width: 120px;
		height: 72px;
	}
	.topSearch .searchClear {
		right: 36px;
		height: 36px;
		width: 36px;
	}
}

/* Registration form — input validation states */
.forms .inputs input.error {
	border: 2px solid var(--color-primary, #E30000);
}
.forms .inputs input.good {
	border: 2px solid #4CAF50;
}
.forms .inputs input::placeholder {
	color: #888;
	opacity: 1;
}

form a {
    color: var(--color-primary, #E30000);
}

form a:hover{
    text-decoration: underline;
}

/* Login — registration offer under the form (GitLab sv82/pornleasing#2) */
.forms .loginJoin {
	margin-top: 60px;
	padding-top: 50px;
	border-top: 1px solid #333;
}
.forms .loginJoin h3 {
	font-size: 27px;
	line-height: 34px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 16px;
}
.forms .loginJoin .button {
	margin-top: 30px;
}
@media only screen and (max-width: 1023px) {
	.forms .loginJoin h3 {
		font-size: 22px;
		line-height: 28px;
	}
}

/* Login — blocked alert message */
.forms .blocked-alert {
	background: var(--color-primary, #E30000);
	color: #fff;
	padding: 20px;
	text-align: center;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 20px;
}

/* Subscribe/buy box buttons — smaller text to fit */
.subscribeBox .button {
	font-size: 18px;
	line-height: 48px;
}

/* Price superscript cents — smaller font for decimal part */
.subscribeBox .radios .price sup,
.videoLists .price sup,
.subscribeBox .radios .duration sup {
	font-size: 0.55em;
	vertical-align: super;
	line-height: 0;
}

.modalContent a{
    color: #fff;
    text-decoration: underline;
}

/* Images expand/collapse — same mechanism as commentBox */
.videoDescription .images {
	position: relative;
}

.videoDescription .images .maxHeight {
	position: relative;
	overflow: hidden;
}

.videoDescription .images .maxHeight.hide {
	max-height: 380px;
}

.videoDescription .images .maxHeight.hide:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 200px;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
}

.videoDescription .images .maxHeight.hide + .toggle {
	display: block;
}

.videoDescription .images .toggle {
	position: absolute;
	bottom: 0;
	left: 50%;
	background-color: var(--color-primary, #E30000);
	width: 44px;
	height: 44px;
	transform: translate(-50%, 50%);
	border-radius: 999px;
	cursor: pointer;
	display: none;
	z-index: 2;
}

.videoDescription .images .toggle:after {
	content: "";
	top: 50%;
	left: 50%;
	position: absolute;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 8px solid #fff;
	transform: translate(-50%, -50%) rotate(90deg);
}

/* Cart notification toast — centered, 30px from top */
.cart-notification {
	display: none;
	z-index: 99999;
	background: #1a1a1a;
	position: fixed;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
	text-transform: uppercase;
	font: 700 17px/20px "Roboto Condensed", sans-serif;
	padding: 14px 30px;
	text-align: center;
	color: #fff;
	border-radius: 6px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
	border-left: 3px solid var(--color-primary, #E30000);
}

.cart-notification a {
	color: #fff;
	text-decoration: none;
}

/* Cart clone — replicates old system .cloned behavior */
.cart-clone {
	position: fixed;
	z-index: 100000;
	pointer-events: none;
	transform: scale(1, 1);
	transition: transform ease-in-out 900ms;
}

/* Basket icon bounce transition */
header .basket {
	transition: transform 0.2s ease;
}

/* Pornstar list — placeholder box when no image */
.actors .list .noImage {
	width: 100%;
	aspect-ratio: 366 / 439;
	background: linear-gradient(135deg, #2a2a3a, #1a1a2a);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
}
.actors .list .noImage span {
	color: #fff;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	word-break: break-word;
}

.yii-debug-toolbar{
    color: #000;
}

/* Comment textarea */
.commentBox .addMessage {
	position: relative;
}
.commentBox .addMessage textarea {
	height: 200px;
}
.commentBox .addMessage .comment-loading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 30px - 30px);
	background: rgba(0, 0, 0, 0.5);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.commentBox .addMessage .comment-loading span {
	color: #fff;
	font-size: 16px;
}
@keyframes commentDots {
	0%, 20% { content: '.'; }
	40% { content: '..'; }
	60%, 100% { content: '...'; }
}
.commentBox .addMessage .comment-loading span::after {
	content: '';
	animation: commentDots 1.5s infinite;
}

/* Checkout table - spacious layout */
.checkoutTable .tableHead .cell {
	border-right-width: 8px;
}
.checkoutTable .tableHead .cell:last-child {
	border-right-width: 0;
}
.checkoutTable .tableBody .cell {
	padding: 14px 20px;
	border-right: solid 8px transparent;
}
.checkoutTable .tableBody .cell:last-child {
	border-right: 0;
}
.checkoutTable .tableBody .cell:first-child {
	padding: 14px 30px;
}
.checkoutTable .tableBody .cell:first-child p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.checkoutTable sup {
	font-size: 0.7em;
	vertical-align: super;
}

/* Billing form - typed text brighter than placeholder */
.cartData .forms .profileGrids input,
.cartData .forms .profileGrids textarea {
	color: #fff;
}
.cartData .forms .profileGrids input::placeholder,
.cartData .forms .profileGrids textarea::placeholder {
	color: #8C8C8C;
}
.cartData .profileGrids .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #fff;
}
.cartData .profileGrids .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #8C8C8C;
}
.checkoutTable .tableFooter .bottomTitle {
	padding: 0 20px;
	font-size: 24px;
}
main > .cartData {
	padding-top: 20px;
}

/* Messages - button styled as bottomTitle link */
.customTables button.bottomTitle {
	border: none;
	cursor: pointer;
	font-family: inherit;
	padding: 0 30px;
}

/* Messages - thread items: no gap between title and body */
.customTables .msgItem .table {
	border-spacing: 0;
}
.customTables .msgItem .tableHead .cell {
	border-bottom: 0 !important;
	border-right: 0;
}
.customTables .msgItem {
	margin-bottom: 0;
}

/* Messages - date column in thread view */
.customTables .msgDate {
	width: 180px;
}
.customTables .msgDate .title {
	font-size: 14px;
	white-space: nowrap;
}

.customTables .msgItem .title {
	line-height: 47px;
}

.customTables .msgDate .title {
	line-height: 42px;
}

/* Messages - textarea auto-grow */
.customTables textarea#c {
	height: 142px;
	max-height: 400px;
	resize: none;
}

/* Messages - reply button */
.customTables .msgReply {
	font-size: 18px;
}

/* Messages - clickable rows */
.customTables .tableBody .row[onclick] {
	cursor: pointer;
}
.customTables .tableBody .row[onclick]:hover .cell {
	background-color: #333;
}

/* Membership cards — tighter name line-height + spacing from price */
.memberships .window .top .name {
	line-height: 28px;
	margin-right: 12px;
}

.customTables .tableHead .cell {
    border-bottom: solid 0px #000;
}

.customTables .oneTable{
    padding-top: 20px;
}

.customTables .title {
    line-height: 47px;
}

.customTables .msgReply {
    line-height: 26px;
}

/* Messages - mobile date/counter (hidden on desktop, shown on mobile) */
.msgDateMobile,
#counterMobile {
	display: none;
}
@media only screen and (max-width: 1023px) {
	.msgDateMobile,
	#counterMobile {
		display: inline;
		font-size: 14px;
		color: #8C8C8C;
	}
}

.joinPanel .texts {
    padding: 30px 0;
}

/* Why Us page */
.whyusPage {
	padding: 40px 0 70px;
}
.joinPanel.onlyImage .panel {
	background-color: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
}
.joinPanel.onlyImage .panel img {
	display: block;
	max-width: 100%;
	height: auto;
}

a{
    color: #999;
}

/* Badge notification bar — full width strip inside header, above nav */
.badgeBar {
	position: relative;
	z-index: 2;
	background-color: #000;
}
.badgeBar-card {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 8px 24px;
}
.badgeBar--active .badgeBar-card {
	background: linear-gradient(135deg, rgba(242, 242, 2, 0.1) 0%, rgba(242, 242, 2, 0.04) 100%);
	border-bottom: 1px solid rgba(242, 242, 2, 0.15);
}
.badgeBar--passive .badgeBar-card {
	background: linear-gradient(135deg, rgba(150, 150, 150, 0.08) 0%, rgba(150, 150, 150, 0.03) 100%);
	border-bottom: 1px solid rgba(150, 150, 150, 0.15);
}
.badgeBar-img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	flex-shrink: 0;
}
.badgeBar-content {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.badgeBar-text {
	font-size: 14px;
	line-height: 1.4;
	color: #ccc;
}
.badgeBar--active .badgeBar-text strong {
	color: #f2f202;
}
.badgeBar--passive .badgeBar-text strong {
	color: #999;
}
.badgeBar-countdown {
	font-size: 13px;
	color: #999;
	white-space: nowrap;
}
.badgeBar-countdown strong {
	color: #f2f202;
	font-variant-numeric: tabular-nums;
}

/* Badge status card on /badges page */
.badgeStatus {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px 28px;
	border-radius: 10px;
	margin-bottom: 30px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.badgeStatus--active {
	background: linear-gradient(135deg, rgba(242, 242, 2, 0.1) 0%, rgba(242, 242, 2, 0.03) 100%);
	border-color: rgba(242, 242, 2, 0.25);
}
.badgeStatus--passive {
	background: linear-gradient(135deg, rgba(150, 150, 150, 0.1) 0%, rgba(150, 150, 150, 0.03) 100%);
	border-color: rgba(150, 150, 150, 0.25);
}
.badgeStatus--progress {
	background: linear-gradient(135deg, rgba(100, 180, 255, 0.08) 0%, rgba(100, 180, 255, 0.02) 100%);
	border-color: rgba(100, 180, 255, 0.2);
}
.badgeStatus-img {
	width: 60px;
	height: 60px;
	object-fit: contain;
	flex-shrink: 0;
}
.badgeStatus-info {
	flex: 1;
}
.badgeStatus-title {
	font-size: 16px;
	line-height: 1.4;
	color: #ddd;
	margin-bottom: 4px;
}
.badgeStatus--active .badgeStatus-title strong {
	color: #f2f202;
}
.badgeStatus--passive .badgeStatus-title strong {
	color: #999;
}
.badgeStatus--progress .badgeStatus-title strong {
	color: #64b4ff;
}
.badgeStatus-desc {
	font-size: 14px;
	color: #999;
	line-height: 1.4;
}
.badgeStatus-desc strong {
	color: #f2f202;
}
.badgeStatus--progress .badgeStatus-desc strong {
	color: #64b4ff;
}
.badgeStatus-total {
	font-size: 12px;
	color: #666;
	margin-top: 6px;
}

@media only screen and (max-width: 1023px) {
	.badgeStatus {
		padding: 14px 18px;
		gap: 14px;
	}
	.badgeStatus-img {
		width: 44px;
		height: 44px;
	}
	.badgeStatus-title {
		font-size: 14px;
	}
	.badgeStatus-desc {
		font-size: 13px;
	}
}

@media only screen and (max-width: 1023px) {
	.badgeBar {
		padding: 8px 0;
	}
	.badgeBar-card {
		padding: 10px 16px;
		gap: 12px;
	}
	.badgeBar-img {
		width: 30px;
		height: 30px;
	}
	.badgeBar-content {
		gap: 8px;
	}
	.badgeBar-text {
		font-size: 12px;
	}
	.badgeBar-countdown {
		font-size: 12px;
	}
}

/* =================== EXTRA CONTENT =================== */

/* Tab with countdown: override line-height centering with padding */
.mediaTabs .oneTab:has(.ec-countdown) {
	line-height: 1.2;
	padding: 20px 0;
}

/* Countdown text below tab title */
.ec-countdown {
	display: block;
	font-size: 11px;
	font-weight: normal;
	opacity: 0.7;
	margin-top: 2px;
	line-height: 1.4;
}

/* Extra content items inside mediaTabs */
.mediaTabs .ec-item {
	position: relative;
}
.mediaTabs .ec-item .video,
.mediaTabs .ec-item .ec-gallery-wrap {
	cursor: pointer;
	position: relative;
}
.mediaTabs .ec-item .video img,
.mediaTabs .ec-item .ec-gallery-wrap img {
	border-radius: 6px;
	aspect-ratio: 16/9;
	object-fit: cover;
}

/* Gallery wrap - first link is the visible thumbnail */
.ec-gallery-wrap .galleryImage {
	display: block;
}
.ec-gallery-wrap .ec-gallery-hidden {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

/* Upload button */
.ec-upload-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 2px dashed rgba(255,255,255,0.3);
	border-radius: 6px;
	aspect-ratio: 16/9;
	cursor: pointer;
	transition: border-color 0.2s;
}
.ec-upload-btn:hover {
	border-color: rgba(255,255,255,0.6);
}
.ec-upload-icon {
	font-size: 32px;
	opacity: 0.5;
}
.ec-upload-text {
	margin-top: 8px;
	font-size: 13px;
	opacity: 0.5;
}

/* Locked content overlay */
.ec-locked {
	position: relative;
	cursor: default !important;
}
.ec-locked img {
	filter: blur(8px);
}
.ec-lock-overlay {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: #fff;
	background: rgba(0,0,0,0.4);
	border-radius: 6px;
}

/* Gallery badge */
.ec-gallery-badge {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background: rgba(0,0,0,0.7);
	color: #fff;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 12px;
}

/* Delete button */
.ec-delete-btn {
	position: absolute;
	top: 5px;
	right: 5px;
	background: rgba(0,0,0,0.6);
	color: #e74c3c;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s;
	z-index: 2;
}
.ec-item:hover .ec-delete-btn {
	opacity: 1;
}

/* Empty state */
.ec-empty {
	text-align: center;
	padding: 40px 20px;
	opacity: 0.5;
}

/* Upload modal */
.ec-modal-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.8);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ec-modal {
	background: #1a1a2e;
	border-radius: 12px;
	width: 90%;
	max-width: 500px;
	overflow: hidden;
}
.ec-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ec-modal-header h3 {
	margin: 0;
	font-size: 18px;
}
.ec-modal-close {
	font-size: 28px;
	cursor: pointer;
	opacity: 0.6;
	line-height: 1;
}
.ec-modal-close:hover {
	opacity: 1;
}
.ec-modal-body {
	padding: 20px;
}

/* Upload tabs */
.ec-upload-tabs {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}
.ec-upload-tab {
	flex: 1;
	padding: 10px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	text-align: center;
	transition: all 0.2s;
}
.ec-upload-tab.active {
	background: rgba(255,255,255,0.15);
	border-color: rgba(255,255,255,0.3);
}

/* Dropzone */
.ec-dropzone {
	border: 2px dashed rgba(255,255,255,0.2);
	border-radius: 8px;
	padding: 40px 20px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s;
}
.ec-dropzone:hover {
	border-color: rgba(255,255,255,0.4);
}
.ec-dropzone i {
	font-size: 36px;
	opacity: 0.4;
	display: block;
	margin-bottom: 12px;
}
.ec-dropzone p {
	margin: 0 0 8px;
	opacity: 0.7;
}
.ec-dropzone small {
	opacity: 0.4;
}

/* Progress bar */
.ec-upload-progress {
	margin-top: 15px;
	text-align: center;
}
.ec-progress-bar {
	width: 100%;
	height: 6px;
	background: rgba(255,255,255,0.1);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 8px;
}
.ec-progress-fill {
	height: 100%;
	background: #3498db;
	border-radius: 3px;
	width: 0;
	transition: width 0.3s;
}

/* Video lightbox */
.ec-video-lightbox {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.95);
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ec-video-lightbox-close {
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: 36px;
	color: #fff;
	cursor: pointer;
	z-index: 10002;
}
.ec-video-lightbox-content {
	width: 90%;
	max-width: 900px;
}

/* Add to favorites star on video details page */
.bigVideo {
	position: relative;
}
.addToFavWithStar {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	padding: 10px 16px;
	border-radius: 8px 0 8px 0;
	background: rgba(0, 0, 0, 0.55);
	transition: background 0.2s;
}
.addToFavWithStar:hover {
	background: rgba(0, 0, 0, 0.75);
}
.addToFavWithStar .star {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	background-color: #fff;
	opacity: 0.7;
	-webkit-mask-image: url('/static/site/img/star.svg');
	mask-image: url('/static/site/img/star.svg');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	transition: all 0.2s;
}
.addToFavWithStar .star img {
	display: none;
}
.addToFavWithStar:hover .star {
	opacity: 1;
}
.addToFavWithStar .star.activestar {
	background-color: var(--color-primary);
	opacity: 1;
}
.addToFavWithStar .text {
	color: #fff;
	font-size: 14px;
	white-space: nowrap;
}
@media only screen and (max-width: 699px) {
	.addToFavWithStar {
		padding: 8px 12px;
		gap: 8px;
	}
	.addToFavWithStar .star {
		width: 20px;
		height: 20px;
	}
	.addToFavWithStar .text {
		display: none;
	}
}


/* ==========================================================================
   Marketing banners: slideup bar + image popup
   Markup is rendered by views/layouts/main.php, shown by custom.js
   ========================================================================== */
.slideupBanner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	background-color: var(--color-primary);
	color: #fff;
	transform: translateY(100%);
	transition: transform 0.4s ease;
}
.slideupBanner.visible {
	transform: translateY(0);
}
.slideupBanner a {
	display: block;
	padding: 18px 60px 18px 24px;
	color: #fff;
	text-decoration: none;
}
.slideupBanner .text {
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
}
.slideupBanner .close {
	position: absolute;
	top: 50%;
	right: 18px;
	width: 24px;
	height: 24px;
	margin-top: -12px;
	cursor: pointer;
	opacity: 0.8;
}
.slideupBanner .close:before,
.slideupBanner .close:after {
	content: "";
	position: absolute;
	top: 11px;
	left: 0;
	width: 24px;
	height: 2px;
	background-color: #fff;
}
.slideupBanner .close:before {
	transform: rotate(45deg);
}
.slideupBanner .close:after {
	transform: rotate(-45deg);
}
.slideupBanner .close:hover {
	opacity: 1;
}

.imagePopup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.75);
}
.imagePopup.visible {
	display: flex;
	align-items: center;
	justify-content: center;
}
.imagePopup .imagePopupBox {
	position: relative;
	max-width: 90%;
	max-height: 90%;
}
.imagePopup .imagePopupBox img {
	display: block;
	max-width: 100%;
	max-height: 85vh;
}
.imagePopup .close {
	position: absolute;
	top: -34px;
	right: 0;
	width: 24px;
	height: 24px;
	cursor: pointer;
	opacity: 0.8;
}
.imagePopup .close:before,
.imagePopup .close:after {
	content: "";
	position: absolute;
	top: 11px;
	left: 0;
	width: 24px;
	height: 2px;
	background-color: #fff;
}
.imagePopup .close:before {
	transform: rotate(45deg);
}
.imagePopup .close:after {
	transform: rotate(-45deg);
}
.imagePopup .close:hover {
	opacity: 1;
}

@media only screen and (max-width: 699px) {
	.slideupBanner a {
		padding: 14px 50px 14px 16px;
	}
	.slideupBanner .text {
		font-size: 14px;
	}
}

/* Checkout payment rows: the full-width button plus its optional info icon.
   Each button now sits in its own .payRow, so style.css's
   `.cartData .buttons .button:last-child { margin-bottom: 0 }` (0,4,0) would match EVERY button
   and collapse the spacing between them. The gap therefore moves onto the row, and the button
   rule below is one class more specific (0,5,0) so the override does not depend on file order. */
.cartData .buttons .payRow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 30px;
}
.cartData .buttons .payRow:last-child {
	margin-bottom: 0;
}
.cartData .buttons .payRow .button,
.cartData .buttons .payRow .button:last-child {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}

/* The info icon itself: opens the gateway's popup (views/checkout/index.php binds
   ".<gateway>info"). Rendered only for a gateway that has an admin title. */
.checkoutinfo {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s;
}
.checkoutinfo:hover {
	opacity: 1;
}
.checkoutinfo img {
	display: block;
	width: 100%;
	height: 100%;
}

@media only screen and (max-width: 1023px) {
	.cartData .buttons .payRow {
		gap: 10px;
		margin-bottom: 20px;
	}
	.checkoutinfo {
		flex: 0 0 26px;
		width: 26px;
		height: 26px;
	}
}

/* Message analysis: the visitor's OWN comment that waits for an admin review (the policy hid it).
   Only its author gets it in the list (details page, crowdfunding project page), marked. */
.messageFlow .block.commentPending .title {
	background-color: #5c5c5c;
}
.messageFlow .block.commentPending .text {
	background-color: #FFF3CD;
	border: 2px dashed #C9A227;
	border-top: 0;
}
.messageFlow .block.commentPending .text .commentPendingNote {
	font-size: 13px;
	line-height: 18px;
	font-style: italic;
	color: #7A5B00;
	margin: 0 0 10px;
}

/* The busy modal (sgBusyModal, custom.js): no close button, a moving progress bar - e.g. while a
   new message is being sent */
.modalBox.busy .close {
	display: none;
}
.modalBox .sgProgress {
	height: 10px;
	margin: 30px auto 0;
	max-width: 520px;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 5px;
	overflow: hidden;
}
.modalBox .sgProgressBar {
	width: 0;
	height: 100%;
	background-color: #fff;
	border-radius: 5px;
	transition: width 0.2s linear;
}
.modalBox p.sgBusyNote {
	font-size: 16px;
	line-height: 22px;
	margin: 20px 0 0;
	opacity: 0.85;
}

/* Bottom menu above the footer: a long page list (fetishking: 9 pages, some four words long) used to
   squeeze into one row, every name broken into a column of words with no space between them. On
   desktop the row now wraps into centred lines with real gaps, each name on one line; in the mobile
   column a long name that has to break stays centred like the others. */
.bottomMenu ul a {
	text-align: center;
}
@media only screen and (min-width: 1024px) {
	.bottomMenu .toCenter {
		max-width: 1200px;
	}
	.bottomMenu ul {
		flex-wrap: wrap;
		justify-content: center;
		gap: 14px 36px;
	}
	.bottomMenu ul li {
		white-space: nowrap;
	}
}