/* ==========================================================================
   STYLES.CSS — ExCoGi Members Area
   Author: Michael Sinclair

   Table of Contents:
   1. DESIGN TOKENS (custom properties, fonts)
   2. RESETS & BASE
   3. LAYOUT (sections, containers, dividers)
   4. NAVIGATION (navbar, mobile toggle, search bar)
   5. BUTTONS
   6. TYPOGRAPHY (headings, text utilities, special fonts)
   7. COMPONENTS
      7a. Update Cards
      7b. Model Cards & Bio
      7c. Scene / Gallery Page
      7d. Comments
      7e. Pagination
      7f. Countdown
      7g. Tags & Filters
      7h. Video Player
      7i. Models List
   8. MEMBERS-SPECIFIC
      8a. Top Header Bar
      8b. Site Identity / Promo
      8c. News Ticker
      8d. Page Titles
      8e. Blog
      8f. Deals Page
      8g. Trial Page
      8h. Join Page
   9. SECTIONS (hero/banner, features)
   10. FOOTER
   11. UTILITIES (scroll-to-top, animations)
   12. RESPONSIVE
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
	/* Brand Colors */
	--primary: hsl(220, 86%, 63%);
	--primary: oklch(62.5% 0.155 260);
	--secondary: hsl(220, 86%, 43%);
	--secondary: oklch(43% 0.18 262);
	--primary-dark: #0657f5;
	--primary-dark: oklch(48% 0.2 262);
	--offcolor-dark: hsl(0, 0%, 20%);
	--offcolor-dark: oklch(24% 0 0);

	/* Light Scale */
	--color-light: hsl(0, 0%, 100%);
	--color-light: oklch(100% 0 0);
	--color-light-4: hsl(0, 0%, 95%);
	--color-light-4: oklch(96% 0 0);
	--color-light-3: hsl(0, 0%, 90%);
	--color-light-3: oklch(92% 0 0);
	--color-light-2: hsl(0, 0%, 85%);
	--color-light-2: oklch(88% 0 0);
	--color-light-1: hsl(0, 0%, 80%);
	--color-light-1: oklch(84% 0 0);

	/* Dark Scale */
	--color-dark: hsl(0, 0%, 0%);
	--color-dark: oklch(0% 0 0);
	--color-dark-4: hsl(0, 0%, 5%);
	--color-dark-4: oklch(7% 0 0);
	--color-dark-3: hsl(0, 0%, 10%);
	--color-dark-3: oklch(14% 0 0);
	--color-dark-2: hsl(0, 0%, 15%);
	--color-dark-2: oklch(20% 0 0);
	--color-dark-1: hsl(0, 0%, 20%);
	--color-dark-1: oklch(24% 0 0);

	/* Neutral / Gray Scale */
	--color-border: #2a2a2a;
	--color-border: oklch(22% 0 0);
	--color-divider: #444444;
	--color-divider: oklch(34% 0 0);
	--color-gray: #a2a2a2;
	--color-gray: oklch(70% 0 0);
	--color-gray-dark: #222;
	--color-gray-dark: oklch(18% 0 0);
	--color-gray-medium: #777;
	--color-gray-medium: oklch(54% 0 0);
	--color-gray-muted: #838383;
	--color-gray-muted: oklch(59% 0 0);
	--color-gray-mid: #808080;
	--color-gray-mid: oklch(58% 0 0);
	--color-gray-steel: #7b7b7b;
	--color-gray-steel: oklch(56% 0 0);
	--color-gray-silver: #cdcdcd;
	--color-gray-silver: oklch(84% 0 0);
	--color-gray-charcoal: #464646;
	--color-gray-charcoal: oklch(35% 0 0);
	--color-gray-dim: #666;
	--color-gray-dim: oklch(48% 0 0);
	--color-gray-soft: #555;
	--color-gray-soft: oklch(41% 0 0);
	--color-gray-neutral: #979797;
	--color-gray-neutral: oklch(66% 0 0);
	--color-gray-border: #cacaca;
	--color-gray-border: oklch(83% 0 0);
	--color-gray-separator: #CCC;
	--color-gray-separator: oklch(84% 0 0);
	--color-tag-bg: #e3e3e5;
	--color-tag-bg: oklch(91% 0 0);
	--color-card-bg: #efefef;
	--color-card-bg: oklch(95% 0 0);
	--color-input-bg: #f5f5f5;
	--color-input-bg: oklch(97% 0 0);
	--color-input-border: #d9d9d9;
	--color-input-border: oklch(88% 0 0);
	--color-btn-default: #f1f1f1;
	--color-btn-default: oklch(96% 0 0);
	--color-section-offcolor: #f2f2f2;
	--color-section-offcolor: oklch(96% 0 0);
	--color-section-offcolor-alt: #eaeaea;
	--color-section-offcolor-alt: oklch(93% 0 0);
	--color-near-white: #f7f7f7;
	--color-near-white: oklch(98% 0 0);
	--color-near-black: #0f0e0e;
	--color-near-black: oklch(8% 0 0);
	--color-near-black-alt: #1d2022;
	--color-near-black-alt: oklch(16% 0.005 240);
	--color-dark-text: #1d1d1d;
	--color-dark-text: oklch(16% 0 0);
	--color-dark-overlay: #111;
	--color-dark-overlay: oklch(9% 0 0);
	--color-text-shadow: #333;
	--color-text-shadow: oklch(27% 0 0);

	/* Accent / Status Colors */
	--color-danger: #d52023;
	--color-danger: oklch(50% 0.2 27);
	--color-danger-alt: #d61f21;
	--color-danger-alt: oklch(50% 0.2 27);
	--color-success-green: #34cc71;
	--color-success-green: oklch(73% 0.17 155);
	--accent-pink: #D4739D;
	--accent-pink: oklch(65% 0.13 350);
	--accent-green: #28a745;
	--accent-green: oklch(62% 0.17 148);
	--accent-green-dark: #0E7B00;
	--accent-green-dark: oklch(48% 0.17 142);
	--accent-gold-light: #fae17b;
	--accent-gold-light: oklch(91% 0.13 93);
	--accent-gold: #ffb042;
	--accent-gold: oklch(82% 0.155 72);

	/* Typography */
	--font-primary: 'Manrope', sans-serif;

	/* Fluid Heading Sizes */
	--h1: clamp(1.8rem, 1.0127rem + 3.499vw, 4rem);
	--h2: clamp(1.6rem, 1.099rem + 2.2266vw, 2.2rem);
	--h3: clamp(1.4rem, 1.0421rem + 1.5905vw, 2rem);

	/* Fluid Text Sizes */
	--text-size-xs: clamp(0.79rem, -0.01vw + 0.79rem, 0.78rem);
	--text-size-s: clamp(0.89rem, 0.08vw + 0.87rem, 0.94rem);
	--text-size-m: clamp(1rem, 0.21vw + 0.96rem, 1.13rem);
	--text-size-l: clamp(1.13rem, 0.37vw + 1.05rem, 1.35rem);
	--text-size-xl: clamp(1.27rem, 0.59vw + 1.15rem, 1.62rem);
	--text-size-2xl: clamp(1.75rem, 1.239rem + 2.273vw, 3rem);
	--text-size-3xl: clamp(1.75rem, 0.932rem + 3.636vw, 3.75rem);

	/* Spacing */
	--space-xs: 0.5rem;
	--space-s: 0.75rem;
	--space-m: 1rem;
	--space-l: 1.5rem;
	--space-xl: 2rem;

	/* Transitions */
	--transition-fast: 0.15s ease-in-out;
	--transition-normal: 0.3s ease-in-out;

	/* Border Radius */
	--radius-sm: 0.25rem;
	--radius-md: 0.375rem;
	/* Muted text */
	--color-muted: #868686;
}

/* Font Faces */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url(../fonts/manrope.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'monumentextended-regular';
	font-weight: normal;
	font-style: normal;
	font-display: block;
	src: url('../fonts/monumentextended-regular-webfont.woff2') format('woff2'),
		 url('../fonts/monumentextended-regular-webfont.woff') format('woff');
}


/* ==========================================================================
   2. RESETS & BASE
   ========================================================================== */

body {
	color: var(--color-dark);
	font-size: var(--text-size-m);
	font-family: var(--font-primary);
}
.body-div { max-width: 100%; margin: 0 auto; overflow: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--primary); }
a:hover { color: var(--color-dark); }
a, .btn, .item .content-div, .item-update .img-div .thumb-model-overlay {
	transition: all 200ms ease-in-out;
}
.highlight { color: var(--primary) !important; }


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.p-tb-50 { padding-top: 50px; padding-bottom: 50px; }
.pb-30 { padding-bottom: 30px; }
.pb-70 { padding-bottom: 70px; }
.pt-70 { padding-top: 70px; }

/* Section Spacing */
.section-margin { margin: 1em 0; }
.section-margin-2 { margin: 2em 0; }
.section-margin-3 { margin: 3em 0; }
.section-padding { padding: 0.5em 0; }
.section-padding-2 { padding: 1em 0; }
.section-padding-3 { padding: 2em 0; }
.section-offcolor { padding: 1rem 0; background-color: var(--color-section-offcolor); }
.section-dark { padding: 1em 0; background-color: var(--color-dark); }
.section-offcolor-alt { padding: 0.5em 0; background-color: var(--color-section-offcolor-alt); }
.bg-dark { background-color: var(--color-dark) !important; }

/* Title Block */
.title-block { display: inline-block; width: 100%; margin-bottom: 10px; }
.section-title {
	display: inline-block;
	font-size: 1.2em;
	line-height: 1.2em;
	letter-spacing: -.022em;
	margin: 10px 0;
}
.section-title span { color: var(--primary); }
.section-title.see-more { padding-right: 100px; }
.section-title .btn {
	position: absolute;
	right: 0;
	top: 0;
	color: var(--primary);
	border: 1px solid var(--color-near-black);
	border-radius: 0;
}
.section-title .btn:hover { background-color: var(--color-near-black); }

/* Banner Section */
.banner-section .container-fluid { padding: 0; }
.main-header .container-fluid { max-width: 1920px; width: 100%; }

/* Home Banner */
.home-banner-section-2 {
	padding: 30px 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.home-banner-section-2 .container { max-width: 700px; }

/* List with Checks */
.list-with-check {
	margin: 25px 0;
	padding: 20px 40px;
	list-style: none;
	font-size: 0;
	background-color: rgba(0,0,0,0.8); /* var(--color-dark) at 80% opacity */
	border-radius: 15px;
}
.list-with-check li {
	width: 50%;
	display: inline-block;
	font-weight: 600;
	font-size: 21px;
	color: var(--color-light);
	text-align: left;
	padding: 5px;
	margin: 10px 0;
	vertical-align: top;
}
.list-with-check li i.fa { color: var(--color-danger); }

.list-with-check2 {
	max-width: 560px;
	margin: 25px auto;
	padding: 0;
	list-style: none;
	font-size: 0;
	border-radius: 15px;
}
.list-with-check2 li {
	width: 100%;
	font-weight: 600;
	font-size: 30px;
	color: var(--color-dark);
	text-align: left;
	padding: 13px;
	background-image: url(../images/g-img1.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-repeat: repeat-y;
	padding-left: 60px;
	margin: 40px 0;
	vertical-align: top;
	position: relative;
}
.list-with-check2 li:after {
	background-image: url(../images/check-icon.png);
	background-repeat: no-repeat;
	position: absolute;
	left: 15px;
	top: 8px;
	content: "";
	display: block;
	width: 30px;
	height: 30px;
}

.row.col-5-div .col, .row.col-5-div .col-6 { flex: 0 0 20%; max-width: 20%; }

/* Sticker Section */
.swiper-container-sticker .swiper-slide {
	width: auto;
	border-left: 1px solid var(--color-gray-steel);
	padding-left: 15px;
	padding-right: 15px;
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
}
.sticker-section {
	border-top: 1px solid var(--color-gray-silver);
	border-bottom: 15px solid var(--color-dark);
}
.sticker-section .inner-div {
	position: relative;
	padding: 30px 100px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-content: stretch;
	align-items: center;
}
.sticker-section .inner-div h2 {
	min-width: 350px;
	margin: 0;
	padding: 0;
	font-size: 25px;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
}
.sticker-section .inner-div h2 i.fa { color: var(--primary); }
.sticker-section .inner-div h2 span { color: var(--primary); }
.sticker-section .inner-div h2 img {
	vertical-align: middle;
	position: relative;
	top: -3px;
}
.sticker-section .inner-div .swiper-sticker-next,
.sticker-section .inner-div .swiper-sticker-prev {
	position: absolute;
	right: 0;
	top: 50%;
	outline: none;
	margin-top: -18px;
	border-radius: 10px;
	cursor: pointer;
	background-color: var(--color-gray-charcoal);
	color: var(--color-light);
	font-size: 20px;
	padding: 7px 10px;
}
.sticker-section .inner-div .swiper-sticker-prev { right: auto; left: 0; }
.sticker-section .inner-div .swiper-sticker-next:hover,
.sticker-section .inner-div .swiper-sticker-prev:hover { background-color: var(--primary); }


/* ==========================================================================
   4. NAVIGATION
   ========================================================================== */

/* Navbar Base */
.navbar { padding: .5rem .75em; }
.navbar-brand { padding: 0px; margin: 0px; }
.navbar-brand span { display: none; }
.navbar-dark .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='3' stroke-linecap='square' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
.navbar-main {
	background-color: var(--color-dark);
	border-radius: 0;
	margin: 0;
}
.navbar-main .navbar-nav { margin: 0px 10px; }

/* Nav Links */
.navbar-main .navbar-nav > li > a {
	font-size: var(--text-size-m);
	margin: 0 0.5em;
	letter-spacing: .04em;
	background-color: transparent;
	color: var(--color-light);
	display: inline-block;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	border: none;
}

/* Nav Underline Animation */
.navbar-main .navbar-nav li a::after {
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 3px;
	top: 25px;
	left: 0;
	background-color: var(--primary);
	transform-origin: bottom right;
	transition: transform 0.25s ease-out;
}
.navbar-main .navbar-nav li.active > a::after,
.navbar-main .navbar-nav li a:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

/* Social Nav */
.nav.social-icon > li > a { background-color: var(--color-gray); color: var(--color-dark); }
.nav.social-icon > li > a:hover { background-color: var(--color-light) !important; color: var(--color-dark) !important; }
.nav.social-icon > li > a .fa { line-height: 30px; }

/* Search Bar */
.navbar-search { margin: 10px; border: 0; padding: 0; background: none; color: var(--color-light); font-size: 18px; }
.fa-search { color: var(--color-light); }
.search {
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 1px;
	padding: 0 10px;
	z-index: 99;
	top: 100%;
	background-color: var(--color-gray-dark);
	width: 100vw;
}
.search .wrap {
	display: flex;
	align-items: center;
	max-width: 100%;
	margin: 0 auto;
	padding: 10px;
}
.search .input {
	border-radius: 20px;
	border: none;
	padding: 12px 20px;
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 1px;
}
.search .button_submit {
	background-color: var(--primary);
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 20px;
}
.search .button_submit i { font-size: 1rem; }
.search .button_submit:hover { background-color: var(--color-near-black-alt); color: var(--color-light); }
.search .button_search_close {
	background-color: var(--primary);
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 20px;
	margin-left: 0;
	margin-right: 5px;
}


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
	font-weight: 600;
	letter-spacing: -.022em;
	padding: 0.25rem 0.5rem;
	margin: .25rem 0;
	transition: all 200ms ease-in-out;
}
.btn.focus, .btn:focus { outline: 0; box-shadow: none; }

/* Primary */
.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
	background: var(--primary);
	border: 1px solid var(--primary);
	white-space: nowrap;
	font-weight: 600;
	color: var(--color-light);
}
.btn-primary.disabled, .btn-primary:disabled, .form-control:disabled, .form-control[readonly] { cursor: not-allowed; }
.btn-primary:hover { background: var(--secondary); border: 1px solid var(--secondary); }
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle { background-color: var(--secondary); border-color: var(--secondary); }
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus { box-shadow: none; }
.btn-info:not(:disabled):not(.disabled).active:focus,
.btn-info:not(:disabled):not(.disabled):active:focus,
.show > .btn-info.dropdown-toggle:focus { box-shadow: none; }

/* Default */
.btn-default { background: var(--primary); color: var(--color-light); font-weight: 600; }
.btn-default:hover { background: var(--secondary); color: var(--color-light-4); }

/* Outline */
.btn-outline-dark { color: var(--primary); border-color: var(--primary); }
.btn-outline-dark:hover { color: var(--color-light); background-color: var(--secondary); border-color: var(--secondary); }
.trial .btn-outline-success { font-family: 'monumentextended-regular'; font-weight: 400; border-radius: 0; }

/* Theme Buttons */
.btn-theme, .bg-theme { background-color: var(--secondary); color: var(--color-light); border: 0 !important; font-weight: 600; }
.btn-theme { font-size: 2rem; width: 100%; }
.btn-theme:hover { background-color: var(--color-gray-dim); }

/* Special Buttons */
.btn-red {
	box-shadow: none !important;
	position: relative;
	font-size: 36px;
	line-height: 40px;
	padding: 15px 30px;
	color: var(--color-light) !important;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	border-radius: 75px;
}
.btn-red, .btn-red-with-round {
	background: var(--primary);
	background: linear-gradient(to bottom, var(--primary) 0%, var(--primary) 49%, var(--primary) 51%, var(--primary) 100%);
}
.btn-red:hover, .btn-red-with-round:hover {
	background: var(--primary-dark);
	background: linear-gradient(to bottom, var(--primary-dark) 0%, var(--primary-dark) 49%, var(--primary-dark) 51%, var(--primary-dark) 100%);
}
.btn-red-with-round {
	box-shadow: none !important;
	font-size: 36px;
	padding: 15px 20px;
	color: var(--color-light) !important;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	border-radius: 30px;
}

/* Stars */
ul.stars { margin: 0; padding: 0; list-style: none; }


/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */

/* Headings */
h1, .h1 { font-size: var(--h1); line-height: 1.1; }
h2, .h2 { font-size: var(--h2); line-height: 1.1; }
h3, .h3 { font-size: var(--h3); line-height: 1.1; }
h4, .h4 { font-size: var(--h4); line-height: 1.3; }
h5, .h5 { font-size: var(--h5); line-height: 1.3; }
h6, .h6 { font-size: var(--h6); line-height: 1.3; }
h1, .h1, h2, .h2, h3, .h3 {
	font-family: var(--font-primary);
	font-weight: 600;
	text-wrap: balance;
}
h4, .h4, h5, .h5, h6, .h6 {
	font-family: var(--font-primary);
	font-weight: 500;
	text-wrap: balance;
}

/* Text Size Utilities */
.text-size-3xl { font-size: var(--text-size-3xl); line-height: 1.2; }
.text-size-2xl { font-size: var(--text-size-2xl); line-height: 1.2; }
.text-size-xl { font-size: var(--text-size-xl); line-height: 1.4; }
.text-size-l { font-size: var(--text-size-l); line-height: 1.5; }
.text-size-m { font-size: var(--text-size-m); line-height: 1.5; }
.text-size-s { font-size: var(--text-size-s); line-height: 1.6; }
.text-size-xs { font-size: var(--text-size-xs); line-height: 1.7; }

/* Text Helpers */
.text-light { color: var(--color-light); }

/* Responsive Text */
.rt-regular { font-size: clamp(1.8rem, 1.3654rem + 0.9065vw, 2rem); }
.rt-large { font-size: clamp(3rem, 1.7309rem + 1.813vw, 4rem); }

/* Read More / Read Less */
.read-more, .read-less { color: var(--primary); font-weight: bold; }
.intro p { font-size: 1rem; line-height: 1.2rem; }


/* ==========================================================================
   7. COMPONENTS
   ========================================================================== */

/* ---------- 7a. Update Cards ---------- */

.item { position: relative; margin-bottom: 30px; }

.item-update .img-div {
	position: relative;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.item-update .img-div a { display: inline-block; position: relative; width: 100%; }
.item-update .img-div img { width: 100%; height: auto; }
.item-update .img-div a img { transition: transform .5s ease; }
.item-update:hover .img-div a img { transform: scale(1.05); }

.item-update .img-div .item-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -43px;
	margin-left: -43px;
	font-size: 100px;
	z-index: 5;
	color: var(--color-light);
	text-shadow: var(--color-text-shadow) 0px 0px 20px;
	opacity: 0;
}
.item-update .img-div a:hover .item-icon { opacity: 0.4; }

.item-update .img-div .thumb-model-overlay { position: absolute; bottom: 10px; left: 10px; width: 150px; z-index: 9999; }
.item-update .img-div .thumb-model-overlay img { display: inline-block; width: 100%; max-width: 100%; height: auto; vertical-align: top; }
.item-update .img-div a:hover .thumb-model-overlay { opacity: 0; }

.item-update .content-div {
	background-color: var(--primary);
	color: var(--color-dark);
	padding: .5rem;
	position: relative;
}
.item-update .content-div h3 {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.4rem;
}
.item-update .content-div h3 a { color: var(--color-light); }
.item-update .content-div h3 a:hover { color: var(--color-dark); text-decoration: none; }
.item-update .content-div h4 { color: var(--color-light); font-size: 1.1rem; margin: 0; padding: 0; list-style: none; }
.item-update .content-div h4 a { color: var(--color-light); }
.item-update .content-div h4 a:hover { color: var(--color-dark); text-decoration: none; }
.item-update .content-div .more-info-div { font-size: 0.875rem; line-height: 2em; color: var(--color-dark); }
.item-update .content-div .rating-div { color: var(--primary); }

/* Update Info Block */
.update-info .update-info-block { display: inline-block; width: 100%; margin-bottom: 30px; }
.update-info .update-info-block h3 {
	font-size: 1.2em;
	line-height: 1.2em;
	letter-spacing: -.022em;
	font-weight: 600;
}
.update-info .update-info-block .update-info-row { margin-bottom: 10px; }
.update-info .update-info-block a.btn-huge { font-size: 60px; border-radius: 60px; font-weight: 700; }
.latest-updates-section .row-col-padding-10 { margin-bottom: 60px; }

/* S-Bottom Button */
.s-bottom-btn { margin-bottom: 30px; }
.s-bottom-btn .copy-div {
	font-size: 22px;
	line-height: 24px;
	overflow: hidden;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
}
.s-bottom-btn .btn {
	margin-bottom: 20px;
	font-size: 65px;
	line-height: 70px;
	padding-left: 100px;
	padding-right: 100px;
	white-space: normal;
}
.s-bottom-btn .copy-div span { padding: 0 15px; border-right: 1px solid var(--color-gray-soft); }
.s-bottom-btn .copy-div span:last-child { border: none; }
.s-bottom-btn.s-bottom-btn-modelbio .btn { font-size: 30px; padding: 20px 30px; line-height: 125%; }
.home-models-section .btn-red {
	font-size: 52px;
	line-height: 55px;
	padding: 30px 50px;
}
.home-models-section .s-bottom-btn { margin-bottom: 0; }
.home-models-section .row-col-padding-10 { margin-bottom: 60px; }


/* ---------- 7b. Model Cards & Bio ---------- */

.bio-img { box-shadow: 2px 2px 2px 1px rgba(78, 134, 242, .1); /* var(--primary) at 10% opacity */ }

/* Model Bio Cards */
.card { background-color: var(--color-card-bg); margin-bottom: 3%; }
.card__model-bio { flex: 1 1 auto; padding: 1em; }
.card__model-bio-thumb { border-top-left-radius: 4px; border-top-right-radius: 4px; width: 100%; height: auto; aspect-ratio: 1.2/1; object-fit: cover; }
.card__detail-div { color: var(--color-light); }
.card__detail-div p { margin-bottom: 0; }
.card__detail-div, ul.card__scene-details { list-style: none; padding-inline-start: 0px; }

.model-bio__image { width: 100%; height: auto; aspect-ratio: 1.2/1; object-fit: cover; }
.model-bio__description {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: .25em;
	padding: 1em 0;
}

/* Bio Section Head */
.bio-section-head .rating-div, .bio-section-head .detail-div { font-size: 1em; line-height: 1.4em; }
.bio-section-head .bottom-btn .btn {
	font-size: 65px;
	margin: 0 auto;
	line-height: 70px;
	font-weight: 700;
	max-width: 600px;
	display: block;
	padding-left: 50px;
	padding-right: 50px;
}
.bio-section-head .bottom-btn .btn:after { background-image: url(../images/btn-right-img-green.png); }
.bio-section-head .bottom-btn .btn:before { background-image: url(../images/btn-left-img-green.png); }
.bio-section-head .list-with-check2 { margin-bottom: 60px; }
.bio-section-head .left-content .img-div img { width: 100%; height: auto; }
.bio-section-head .left-content .img-div {
	background-size: cover;
	background-position: center top;
}
.bio-section-head .left-content .inner-right-c { padding-left: 50px; font-size: 18px; }
.bio-section-head .left-content { color: var(--color-dark); padding: 20px 0; }
.bio-section-head .left-content h3 { margin: 0 0 25px 0; }
.bio-section-head .left-content p { margin-bottom: 25px; }


/* ---------- 7c. Scene / Gallery Page ---------- */

.player-section { background-color: var(--color-dark); }
.trailer-section-head { color: var(--color-light); }
ul.scene-details { list-style: none; padding-inline-start: 0px; }
#scene-info .description.hidden,
#scene-info .descriptionFull.hidden { display: none; }
#scene-info .description .read-more,
#scene-info .descriptionFull .read-less { font-style: italic; cursor: pointer; }

/* Trailer Section */
.trailer-section-head .left-content { font-size: 16px; line-height: 20px; }
.trailer-section-head .left-content .video-div {
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
}
.trailer-section-head .left-content .video-div .play {
	background-image: url(../images/play-icon.png);
	background-position: center;
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	z-index: 55;
	background-repeat: no-repeat;
}
.trailer-section-head .left-content .video-div img { width: 100%; height: auto; }
.trailer-article .rating-div { margin: 0; font-size: 20px; color: var(--color-danger-alt); }

/* Special Offer Block */
.special-offer-block {
	background: var(--color-gray-neutral);
	width: 440px;
	float: right;
	text-align: center;
	padding: 10px;
}
.special-offer-block h3 {
	padding: 15px;
	margin: 0;
	background: var(--color-light);
	font-weight: 600;
	font-size: 35px;
	line-height: 35px;
	color: var(--color-dark-text);
}
.special-offer-block h3 .fa {
	font-size: 22px;
	color: var(--color-danger-alt);
	padding: 0 10px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: -4px;
}
.special-offer-block h2 {
	font-family: 'Oswald', sans-serif;
	margin: 0;
	padding: 5px 0;
	font-weight: 700;
	font-size: 85px;
	line-height: 85px;
	color: var(--color-light);
}
.special-offer-block h4 {
	font-family: 'Oswald', sans-serif;
	margin: 0;
	padding: 0 0 20px 0;
	font-weight: 400;
	font-size: 30px;
	line-height: 30px;
	color: var(--color-light);
}
.special-offer-block .btn {
	font-size: 35px;
	line-height: 35px;
	background: var(--color-danger-alt);
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	color: var(--color-light);
	padding: 15px 30px;
	border-radius: 10px;
	min-width: 325px;
	margin-bottom: 10px;
}
.special-offer-block .btn img {
	position: relative;
	vertical-align: middle;
	top: -3px;
}

/* Trailer Upgrade Overlay */
.video_area_upgrade { position: relative; }
.video_area_upgrade a#postroll_url { display: inline-block; width: 100%; vertical-align: top; }
.video_area_upgrade a#postroll_url img { display: inline-block; width: 100%; vertical-align: top; }
.trailer_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; background: rgba(0,0,0,0.5); /* var(--color-dark) at 50% opacity */ text-align: center; display: block; }
.trailer_overlay .centerbox { display: table; width: 100%; height: 100%; }
.trailer_overlay .middle { display: table-cell; vertical-align: middle; }
.trailer_overlay .middle .trailer_box { margin: auto; vertical-align: middle; display: inline-block; width: 600px; padding: 25px; border: 1px solid var(--color-gray-dark); background: var(--color-dark-overlay); color: var(--color-light); font-size: 18px; text-transform: none; position: relative; }
.trailer_overlay .middle .trailer_box i.fa { font-size: 38px; vertical-align: top; }
.trailer_overlay .middle .trailer_box h3 { display: inline-block; width: 100%; padding: 15px 0 10px 0; font-size: 18px; vertical-align: top; }
.trailer_overlay .middle .trailer_box p { display: inline-block; width: 100%; padding: 0; margin: 0; font-size: 14px; vertical-align: top; margin-bottom: 15px; }
.trailer_overlay .middle .trailer_box p a { color: var(--color-light); }
.trailer_overlay .middle .trailer_box p a:hover { color: var(--color-light); text-decoration: underline; }


/* ---------- 7d. Comments ---------- */

.comments { display: inline-block; width: 100%; }
.comment-body { font-size: 0.9rem; padding: 1rem; }
#comments .comment-form input { border: 1px solid var(--color-light-2); padding: 5px; border-radius: var(--radius-sm); }
#comments .comment-form .form-control { border: 1px solid var(--color-light-2); }
#comments .comment-form {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	padding: 1rem;
	background-color: var(--color-light-4);
	margin-bottom: 10px;
	border: 1px solid var(--color-light-2);
	border-radius: var(--radius-sm);
}
.comments .comments-list { display: inline-block; width: 100%; padding: 0.1rem; background: var(--color-light-2); margin-bottom: 1rem; border-radius: var(--radius-sm); }
.comments .comments-list ul { display: inline-block; width: 100%; list-style: none; padding: 0; margin: 0; }
.comments .comments-list ul > li > ul { padding-left: 30px; margin-top: 10px; }
.comments .comments-list ul li { display: inline-block; width: 100%; margin-bottom: 0.1rem; background-color: var(--color-light); }
.comments .comments-list ul li:last-child { border-bottom: 0; margin-bottom: 0; }
.comments .comments-list ul li .date { display: inline-block; padding-left: 1rem; color: var(--color-light-1); }
.comments .comments-list ul li .member-name { display: inline-block; color: var(--primary); font-weight: 600; font-size: 1rem; margin-bottom: 5px; }
.comments .comments-list ul li .text { display: inline-block; width: 100%; }
.comments .comments-form { display: inline-block; width: 100%; margin-bottom: 15px; }


/* ---------- 7e. Pagination ---------- */

.pagination { display: inline-block; width: 100%; text-align: center; }
.pagination ul { margin-bottom: 0; padding-inline: 0; }
.pagination li { display: inline-block; font-size: 1.4rem; text-align: center; margin: 5px 3px; }
.pagination li a { display: block; min-width: 34px; padding: 4px 8px; text-align: center; color: var(--primary); border: 1px solid var(--primary); line-height: 100%; border-radius: 4px; text-decoration: none; }
.pagination li a:hover { background-color: var(--secondary); border-color: var(--secondary); color: var(--color-light-4); }
.pagination .active { background-color: var(--primary); border-color: var(--primary); border-radius: 4px; }
.pagination .active a { color: var(--color-light); }


/* ---------- 7f. Countdown ---------- */

/* (countdown styles handled via responsive section) */


/* ---------- 7g. Tags & Filters ---------- */

ul.tags { display: inline-block; width: 100%; text-align: left; margin: 0; padding: 0; }
ul.tags li { display: inline-block; margin: 0 0 .5rem 0; padding: 0; }
ul.tags li a { display: inline-block; background-color: var(--color-tag-bg); font-style: normal; padding: .25rem .5rem; border-radius: .25rem; color: var(--color-dark); font-size: 1rem; font-weight: 600; }
ul.tags li a:hover { background-color: var(--primary); color: var(--color-light); text-decoration: none; }

.tags_filter { display: none; clear: both; width: 100%; box-sizing: border-box; border: 1px solid var(--color-light-1); background: var(--color-light-3); padding: 10px; border-radius: 4px; margin: 1rem; position: relative; }
.tags_filter .tags_filter_title { color: var(--primary); display: inline-block; width: 100%; text-align: left; font-size: 1.2rem; margin-bottom: 15px; line-height: 100%; }
.tags_filter .tags_filter_close { display: inline-block; position: absolute; top: 5px; right: 5px; }
.tags_filter ul.tags_filter_list { display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 0.875rem; }
.tags_filter ul.tags_filter_list li a:hover { border: 1px solid var(--color-dark-2); color: var(--color-dark-4); background: var(--color-light-1); }
.tags_filter ul.tags_filter_list li.active a { border: 1px solid var(--color-gray-mid); color: var(--color-light); text-decoration: none; background: var(--color-gray-mid); }
.tags_filter .tags_filter_buttons { display: inline-block; width: 100%; text-align: center; padding: 10px 0; border-top: 1px solid var(--color-gray-separator); border-bottom: 1px solid var(--color-light-1); margin-bottom: 10px; }
.tags_filter .tags_filter_buttons a.filter-btn { display: inline-block; border-radius: 4px; text-shadow: var(--color-light) 1px 1px 1px; padding: 10px 15px; text-align: left; font-size: 1.2rem; color: var(--color-dark-4); text-decoration: none; background: url(../../images/top_menu.png) repeat-x center top; border: 1px solid var(--color-light-1); }
.tags_filter_trigger { float: none; display: inline-block; vertical-align: top; margin: 0px 0px 10px 0px; }


/* ---------- 7h. Video Player ---------- */

.video-player { position: relative; }


/* ---------- 7i. Models List ---------- */

.models-list-thumbs ul {
	display: inline-block;
	width: 100%;
	list-style: none;
	margin: 0;
	margin-top: 10px;
	padding: 0;
}
.models-list-thumbs ul li {
	display: inline-block;
	width: 100%;
	margin-right: 0;
	margin-bottom: 10px;
}
.models-list-thumbs ul.half-sized li { width: 49%; }
.models-list-thumbs ul li a {
	display: inline-block;
	padding: 5px;
	border: 1px solid var(--color-gray-border);
	background: var(--color-light);
	color: var(--color-text-shadow);
	text-align: center;
	border-radius: 5px;
}
.models-list-thumbs ul li a:hover img { opacity: 0.6; }
.models-list-thumbs ul li a img {
	display: inline-block;
	vertical-align: top;
	border-radius: 5px;
	height: auto;
}
.models-list-thumbs ul li a span {
	display: inline-block;
	padding: 5px 0 0;
	font-weight: 700;
	font-size: 16px;
}
.models-list-thumbs ul.half-sized li a span { font-size: 13px; }

.models-az { display: inline-block; width: 100%; text-align: center; vertical-align: top; margin-bottom: 1rem; }
.models-az .btn { padding: 6px 12px; }
.models-az .btn-group .btn:first-child.btn-default { background: var(--secondary); }
.models-az .btn-group .btn:first-child.btn-default:hover { background: var(--primary); }


/* ==========================================================================
   8. MEMBERS-SPECIFIC
   ========================================================================== */

/* ---------- 8a. Top Header Bar ---------- */

.top-header { background-color: var(--color-dark-3); padding: .25rem 0; }
.top-header .menu {
	display: flex;
	margin: 0 auto;
	padding: 0 1.5rem;
	gap: 1rem;
	justify-content: flex-end;
	list-style: none;
}
.top-header .menu-item { line-height: 1; }
.top-header .menu-item a {
	color: var(--color-light-2);
	font-size: var(--text-size-xs);
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.3s ease;
	cursor: pointer;
}
.top-header .menu-item a:hover { color: var(--primary); text-decoration: underline; }


/* ---------- 8b. Site Identity / Promo ---------- */

.site-identity {
	font-size: clamp(2.6rem, 1.7309rem + 1.813vw, 3rem);
	text-transform: uppercase;
	margin-bottom: 0px;
}
.site-identity-subhead {
	font-weight: 300;
	text-transform: uppercase;
	font-size: clamp(1rem, 1.0914rem + 0.2266vw, 1.25rem);
	letter-spacing: 4px;
	margin-bottom: 0px;
}
.promo-banner { aspect-ratio: 60 / 19; object-fit: fill; }


/* ---------- 8c. News Ticker ---------- */

.news { padding: 0.5em; background-color: var(--primary); }
.news__wrapper { display: flex; align-items: center; justify-content: center; gap: .5em; }
.news__ticker-text { color: var(--color-light); font-size: var(--text-size-m); line-height: 1.5em; }
.news__ticker-text a { color: var(--color-light); text-decoration: underline; }
.news__ticker-text a:hover { color: var(--color-near-white); text-decoration: none; }
.news__btn {
	text-decoration: none !important;
	letter-spacing: -.022em;
	padding: 0.25rem 0.5rem;
	background-color: var(--success);
	color: var(--color-light);
}
.news__ticker-title { color: var(--color-light); background-color: var(--danger); padding: .25em .5em; border-radius: 0.25em; }
.blink { animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }


/* ---------- 8d. Page Titles ---------- */

.page-title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 0;
}
.page-title__heading {
	font-size: clamp(2.25rem, 2.0455rem + 0.8182vw, 2.7rem);
	margin-bottom: 0;
	text-align: center;
}
.page-title__subheading {
	font-family: var(--font-primary);
	font-size: var(--text-size-m);
	font-weight: 300;
	text-transform: uppercase;
	order: -1;
	margin-bottom: 0;
}
.page-title__description p {
	font-size: var(--text-size-m);
	text-align: center;
	margin-bottom: 0;
}

/* Title Heading Variants */
.title-heading {
	font-size: clamp(1.8rem, 1.3654rem + 0.9065vw, 3rem);
	line-height: 1;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin-bottom: 0rem;
	background: -webkit-linear-gradient(45deg, var(--color-light), var(--accent-pink) 80%);
	background: linear-gradient(45deg, var(--color-light), var(--accent-pink) 80%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 0;
	transition: all 0.2s ease;
}
.title-subheading {
	color: var(--color-gray-dark);
	font-size: clamp(1.6rem, 1.2741rem + 0.6799vw, 1.75rem);
	font-weight: 600;
	line-height: 1;
	margin-bottom: 0rem;
}
.title-subheading-small {
	color: var(--color-gray-dark);
	font-size: clamp(1.2rem, 1.0914rem + 0.2266vw, 1.25rem);
	font-weight: 400;
	line-height: 1.6rem;
	margin-bottom: 0rem;
}


/* ---------- 8e. Blog ---------- */

/* Blog Container */
.blog-container {max-width: 1200px; margin: 0 auto; padding: var(--space-l) var(--space-m) var(--space-xl);}

/* Archive Header */
.blog-archive__header {margin-bottom: 3rem;}
.blog-archive__title {font-family: var(--font-primary); font-size: var(--h3); font-weight: 600; text-transform: uppercase; margin: 0; color: var(--color-dark);}
.blog-archive__subtitle {font-size: var(--text-size-m); color: var(--color-muted); margin: var(--space-xs) 0 0 0;}
.blog-archive__empty {font-size: var(--text-size-m); color: var(--color-muted); padding: var(--space-xl) 0;}

/* Blog Card (Archive Listing) */
.blog-card {padding: var(--space-l) 0; border-bottom: 1px solid var(--color-light-2);}
.blog-card:first-child {padding-top: 0;}
.blog-card__title {font-family: var(--font-primary); font-size: var(--h5); font-weight: 600; margin: 0 0 var(--space-xs) 0; line-height: 1.3;}
.blog-card__title a {color: var(--color-dark); text-decoration: none;}
.blog-card__title a:hover {color: var(--primary);}
.blog-card__meta {display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-s); margin-bottom: var(--space-m); font-size: var(--text-size-s); color: var(--color-muted);}
.blog-card__date {color: var(--color-muted);}
.blog-card__tags {display: flex; flex-wrap: wrap; gap: var(--space-xs);}
.blog-card__tag {display: inline-block; padding: 0.125rem 0.5rem; font-size: var(--text-size-xs); font-weight: 600; color: var(--color-dark); background-color: var(--color-light-3); border-radius: var(--radius-sm); text-decoration: none; text-transform: lowercase;}
.blog-card__tag:hover {background-color: var(--primary); color: var(--color-light); text-decoration: none;}
.blog-card__excerpt {font-size: var(--text-size-m); line-height: 1.6; color: var(--color-dark-2); margin-bottom: var(--space-m);}
.blog-card__read-more {font-size: var(--text-size-s); font-weight: 600; color: var(--primary); text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em;}
.blog-card__read-more:hover {color: var(--secondary);}

/* Blog Single Post */
.blog-single {max-width: 800px; margin: 0 auto; padding: var(--space-l) 0;}
.blog-single__back {display: inline-block; font-size: var(--text-size-s); color: var(--color-muted); text-decoration: none; margin-bottom: var(--space-l); transition: color var(--transition-fast);}
.blog-single__back:hover {color: var(--primary);}
.blog-single__header {margin-bottom: var(--space-xl); padding-bottom: var(--space-l); border-bottom: 1px solid var(--color-light-2);}
.blog-single__title {font-family: var(--font-primary); font-size: var(--h3); font-weight: 600; margin: 0 0 var(--space-m) 0; line-height: 1.2; color: var(--color-dark);}
.blog-single__meta {display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-s); font-size: var(--text-size-s); color: var(--color-muted);}
.blog-single__date {color: var(--color-muted);}
.blog-single__tags {display: flex; flex-wrap: wrap; gap: var(--space-xs);}
.blog-single__tag {display: inline-block; padding: 0.125rem 0.5rem; font-size: var(--text-size-xs); font-weight: 600; color: var(--color-dark); background-color: var(--color-light-3); border-radius: var(--radius-sm); text-decoration: none; text-transform: lowercase;}
.blog-single__tag:hover {background-color: var(--primary); color: var(--color-light); text-decoration: none;}
.blog-single__body {font-size: var(--text-size-m); line-height: 1.7; color: var(--color-dark-2);}
.blog-single__body p {margin: 0 0 var(--space-l) 0;}
.blog-single__body a {color: var(--primary); text-decoration: underline;}
.blog-single__body a:hover {color: var(--secondary);}
.blog-single__body img {border-radius: var(--radius-md); margin: var(--space-m) 0;}

/* Blog WYSIWYG Content Classes (output by CMS editor) */
.blog__heading {font-size: var(--text-size-m); font-weight: 600;}
.blog__list {list-style: none; padding: 0; margin: 0 0 var(--space-l) 0;}
.blog__group-list {margin: 0 0 var(--space-m) 0;}
.blog__list-item {margin-bottom: var(--space-xs);}

/* Blog Responsive */
@media (max-width: 768px) {
	.blog-single {padding: var(--space-m) 0;}
	.blog-single__header {margin-bottom: var(--space-l); padding-bottom: var(--space-m);}
}



/* ---------- 8f. Deals Page ---------- */

#bannerAds { width: 100%; padding: 2rem 1rem; }
.banner-item a,
.text-link-list-item a { color: var(--primary); }
.banner-item a:hover,
.text-link-list-item a:hover { color: var(--color-dark-4); text-decoration: none; }
.banner-container { max-width: 1200px; margin: 0 auto; text-align: center; }
.banner-container h2 { margin: 0 0 2rem 0; font-size: clamp(1.875rem, 1.7045rem + 0.6818vw, 2.25rem); }
.banner-list { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.banner-item { width: 100%; max-width: 800px; }
.text-link-container { max-width: 1200px; margin: 0 auto; text-align: center; padding: 2rem; }
.text-link-list { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.text-link-list-item { width: 100%; max-width: 600px; }


/* ---------- 8g. Trial Page ---------- */

.upgrade-text {
	font-family: 'monumentextended-regular', serif;
	font-size: 3.6rem;
	line-height: 100%;
	background: -webkit-linear-gradient(45deg, var(--accent-green), var(--accent-green-dark) 80%);
	background: linear-gradient(45deg, var(--accent-green), var(--accent-green-dark) 80%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 0;
	transition: all 0.2s ease;
}


/* ---------- 8h. Join Page ---------- */

.join-page { padding: 55px 0; }
.join-page .section { display: block; padding: 0 0 20px 0; }
.join-page .join-section-title { display: inline-block; width: 100%; margin-bottom: 15px; }
.join-page .join-section-title h3 { text-transform: uppercase; font-size: 1.5rem; font-weight: 400; margin: 0; }
.join-page .form-group label { margin-bottom: .1rem; }
.join-page .join_error { padding: .25rem .5rem; font-size: 13px; margin-top: 4px; }
.join-page .form-group .input-group-text { min-width: 42px; text-align: center; background-color: var(--color-light); border-color: var(--color-input-border); }
.join-page .form-group .input-group-text i.fa { margin: 0 auto; }
.join-page .form-group .form-control { background-color: var(--color-input-bg); border-color: var(--color-input-border); }
.join-page .coupon_code_form { display: none; }

ul.payment-options { display: inline-block; width: 100%; text-align: left; margin: 0; padding: 0; margin-bottom: 4px; }
ul.payment-options li { display: block; background-color: var(--color-input-bg); padding: .375rem .75rem; cursor: pointer; border: 1px solid var(--color-input-border); color: var(--color-dark); box-sizing: border-box; margin-bottom: 4px; border-radius: .25rem; }
ul.payment-options li:last-child { margin-bottom: 0px; }
ul.payment-options li.nopadding { padding: 0; }
ul.payment-options li.active { background-color: var(--color-danger); color: var(--color-light); }
ul.payment-options li label, ul.payment-options li label span { cursor: pointer; text-transform: uppercase; font-size: 1rem; font-weight: 300; margin: 0; }
ul.payment-options li .selectric .label { line-height: 50px; height: 50px; font-size: 20px; font-weight: 300; margin-left: 40px; }
ul.payment-options li .selectric-items li { background: var(--color-btn-default); text-transform: uppercase; font-size: 16px; }
ul.payment-options li .selectric-items li:hover { background: var(--color-text-shadow); color: var(--color-light); }

ul.join-options { display: inline-block; width: 100%; text-align: left; margin: 0; padding: 0; }
ul.join-options li { display: inline-block; width: 100%; background-color: var(--color-input-bg); padding: 6px; cursor: pointer; border: 1px solid var(--color-input-border); color: var(--color-dark); box-sizing: border-box; margin-bottom: 4px; border-radius: .25rem; }
ul.join-options li.active { background-color: var(--color-danger); color: var(--color-light); }
ul.join-options li label, ul.join-options li label span { display: block; cursor: pointer; text-transform: uppercase; font-size: 20px; font-weight: 300; position: relative; line-height: 100%; margin: 0; }
ul.join-options li span.label { display: inline-block; vertical-align: top; font-size: 24px; font-weight: 700; margin-top: 15px; letter-spacing: -1px; }
ul.join-options li span.desc { display: inline-block; vertical-align: top; font-size: 12px; font-weight: 300; position: absolute; top: 50px; left: 45px; }
ul.join-options li span.extra { display: inline-block; font-size: 14px; font-weight: 300; padding: 5px 10px; background-color: var(--color-danger); position: absolute; top: 25px; right: 140px; color: var(--color-light); border-radius: 50px; }
ul.join-options li span.price { float: right; background: none; padding: 10px 0; text-align: center; width: 130px; position: relative; font-size: 0; letter-spacing: -1px; color: var(--color-danger); border-radius: .25rem; }
ul.join-options li span.price span.price-symbol,
ul.join-options li span.price span.price-small { display: inline-block; vertical-align: top; font-size: 20px; margin-top: 8px; }
ul.join-options li span.price span.price-big { display: inline-block; vertical-align: top; font-size: 60px; font-weight: 400; margin: 0 5px; }
ul.join-options li span.price i { font-style: normal; }
ul.join-options li span.price span.price-below { display: inline-block; vertical-align: top; font-size: 14px; position: absolute; bottom: 15px; left: 100%; }
ul.join-options li span.price span.price-bestoffer { display: inline-block; width: 100%; position: absolute; top: -15px; left: 5px; }
ul.join-options li span.price span.price-bestoffer i {
	display: inline-block;
	padding: 1px 10px;
	border-radius: 5px;
	text-align: center;
	color: var(--color-dark);
	font-size: 12px;
	letter-spacing: 1px;
	background: linear-gradient(to right, var(--accent-gold-light) 0%, var(--accent-gold) 100%);
}
ul.join-options li input[type="radio"] { display: inline-block; margin-top: 35px; margin-left: 15px; margin-right: 10px; opacity: 0; }
ul.join-options li.active span.extra, ul.join-options li.active span.price { background: none; color: var(--color-light); }
ul.join-options li.active span.extra { background: var(--color-light); color: var(--color-danger); }
ul.join-options li.active input[type="radio"] { opacity: 1; }

.join-page .secure { display: inline-block; width: 100%; text-align: center; padding-top: 15px; border-top: 1px solid var(--color-input-border); }
.join-page .secure img { display: inline-block; margin-right: 10px; vertical-align: top; }
.join-page .secure .secure-text { display: inline-block; font-size: 11.5px; text-align: center; font-weight: 400; color: var(--color-gray-muted); }
.join-page .secure .secure-text strong { font-size: 14px; text-align: center; font-weight: 400; color: var(--color-success-green); }
.join-page .secure .secure-text a { color: var(--color-gray-muted) !important; }
.join-page .secure .secure-text a:hover { color: var(--color-gray-dark) !important; text-decoration: underline; }


/* ==========================================================================
   9. SECTIONS (hero/banner, features)
   ========================================================================== */

/* Welcome TPL */
@keyframes transitionIn {
	from { opacity: 0; transform: rotateX(-10deg); }
	to { opacity: 1; transform: rotateX(0); }
}
.fadeIn { animation: transitionIn 0.75s; }


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

/* Footer Base */
.site-footer {
	background-color: var(--color-dark-3);
	color: var(--color-light-1);
	font-size: var(--text-size-xs);
	line-height: 1.4;
}
.site-footer__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-l);
	padding: var(--space-xl) var(--space-m);
	max-width: 1200px;
	margin: 0 auto;
}

/* Footer Sections */
.footer-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-m);
	text-align: center;
	width: 100%;
}
.footer-section__logo { width: 275px; height: auto; max-width: 100%; }
.footer-section__text { margin: 0; line-height: 1.6; color: var(--color-light-1); }
.footer-section__text em { font-style: italic; color: var(--color-light-1); }

/* Support Button */
.support-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-xs) var(--space-m);
	font-size: var(--text-size-s);
	font-weight: 500;
	color: var(--color-light-1);
	background-color: transparent;
	border: 1px solid var(--primary);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: all var(--transition-normal);
	cursor: pointer;
}
.support-button:hover,
.support-button:focus-visible {
	background-color: var(--primary);
	color: var(--color-light-1);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3); /* decorative shadow — kept as rgba */
}
.support-button:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.support-button:active { transform: translateY(0); }

/* Footer Links */
.footer-link { color: var(--primary); text-decoration: none; transition: color var(--transition-fast); border-bottom: 1px solid transparent; }
.footer-link:hover { color: var(--secondary); }
.footer-link:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; border-radius: 2px; }

/* Footer Navigation */
.footer-nav { width: 100%; padding: var(--space-xs) 0; }
.footer-nav__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.footer-nav__item { position: relative; display: flex; align-items: center; }
.footer-nav__item:not(:last-child)::after { content: ''; width: 1px; height: 1.25rem; background-color: var(--color-divider); margin: 0 var(--space-xs); }
.footer-nav__link { color: var(--primary); font-size: var(--text-size-s); text-decoration: none; padding: var(--space-s); transition: color var(--transition-fast); white-space: nowrap; }
.footer-nav__link:hover { color: var(--secondary); text-decoration: underline; }
.footer-nav__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }

/* Copyright */
.copyright {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--space-m) var(--space-s);
	background-color: var(--color-dark-3);
	font-size: var(--text-size-xs);
	color: var(--color-light-1);
	text-align: center;
	border-top: 1px solid var(--color-border);
}


/* ==========================================================================
   11. UTILITIES
   ========================================================================== */

/* Scroll to Top */
.scroll_up {
	position: fixed;
	bottom: 40px;
	right: 40px;
	z-index: 999;
	width: 30px;
	height: 30px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.06); /* var(--color-dark) at 6% opacity */
	background-color: var(--primary);
	border-radius: 30px;
	cursor: pointer;
	transition: background .3s, opacity .3s, visibility .3s;
	opacity: 0;
	visibility: hidden;
}
.scroll_up.show { opacity: 1; visibility: visible; }
.scroll_up i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	color: var(--color-light);
	font-size: 16px;
}


/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

/* --- max 480px (mobile) --- */
@media screen and (max-width: 480px) {
	.news__wrapper { flex-direction: column; }
	.news__ticker-text { text-align: center; text-wrap: balance; }
	.trailer_overlay .middle .trailer_box { width: 100%; }
	.trailer_overlay .middle .trailer_box h3 { width: auto; padding: 0; vertical-align: middle; }
	.trailer_overlay .middle .trailer_box p { margin-top: 10px; }
}

/* --- max 479px --- */
@media screen and (max-width: 479px) {
	.search {
		padding: 0;
		order: 4;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		padding: 10px;
		box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1); /* var(--color-dark) at 10% opacity */
	}
	.button_search_close { display: none; }
	.update-info .update-info-block a.btn-huge { font-size: 18px; }
	ul.payment-options li { padding: 10px; }
	ul.payment-options li label, ul.payment-options li label span { font-size: 14px; }
	ul.join-options li span.label { font-size: 20px; margin-bottom: 5px; }
	.join-page .secure img { margin: 0 0 10px; }
	.join-page .secure .secure-text { width: 100%; }
}

/* --- max 768px (tablets) --- */
@media only screen and (max-width: 768px) {
	.top-header .menu { justify-content: center; }
	.title-block { text-align: center; }
	.section-title { width: 100%; text-align: center; }
	.pagination li.hidden-sm { display: none; }

	/* Footer */
	.site-footer__container { padding: var(--space-l) var(--space-m); gap: var(--space-m); }
	.footer-section { gap: var(--space-s); }
	.footer-section__logo { width: 150px; }
	.footer-nav__list { flex-direction: column; gap: var(--space-xs); }
	.footer-nav__item:not(:last-child)::after { display: none; }
	.footer-nav__link { padding: var(--space-xs) var(--space-s); }
	.support-button { width: 100%; max-width: 300px; }
}

/* --- max 767px --- */
@media screen and (max-width: 767px) {
	.trailer_overlay .middle .trailer_box { padding: 10px; }
	.trailer_overlay .middle .trailer_box h3 { font-size: 14px; }
	.trailer_overlay .middle .trailer_box p { font-size: 12px; line-height: 120%; }
	.trailer_overlay .middle .trailer_box i.trailer_lock { max-width: 20px; }
	ul.payment-options li { padding: 10px 15px; }
	ul.payment-options li label, ul.payment-options li label span { font-size: 16px; }
	ul.join-options li input[type="radio"],
	ul.join-options li.active input[type="radio"] { opacity: 0; display: none; }
	ul.join-options li span.label { width: 100%; text-align: center; }
	ul.join-options li span.desc { width: 100%; text-align: center; position: relative; top: 0; left: 0; }
	ul.join-options li span.price { width: 100%; }
	ul.join-options li span.extra { top: -15px; right: auto; left: 15px; }
	ul.join-options li span.price span.price-bestoffer { top: 65px; }
}

/* --- min 768px (tablets+) --- */
@media (min-width: 768px) {
	.blog__grid-wrapper { grid-template-columns: repeat(3, 1fr); }
}

/* --- max 870px --- */
@media screen and (max-width: 870px) {
	.trailer_overlay .middle .trailer_box { width: 96%; }
}

/* --- max 992px --- */
@media only screen and (max-width: 992px) {
	.nav-item { text-align: center; }
	.navbar ul { margin: 10px 0; }
}

/* --- min 992px (desktop) --- */
@media only screen and (min-width: 992px) { }

/* --- max 1199px --- */
@media screen and (max-width: 1199px) {
	.navbar-brand img { max-width: 300px; }
	.navbar-main .navbar-nav.social-icon { margin-left: 10px; }
	.navbar-main .navbar-nav > li > a {
		font-size: var(--text-size-l);
		margin: 0.25rem;
	}
}

/* --- min 1200px (large desktop) --- */
@media (min-width: 1200px) {
	.container.container-default { max-width: 1140px; }
}

/* --- min 1025px --- */
@media screen and (min-width: 1025px) {
	.section-title {
		font-size: 1.6rem;
		line-height: 1.5rem;
		letter-spacing: -.022rem;
	}
}

/* --- max 1280px --- */
@media screen and (max-width: 1280px) {
	.update-info .update-info-block a.btn-huge { font-size: 30px; }
}

/* --- Footer Responsive (480px) --- */
@media (max-width: 480px) {
	.footer-section__text { font-size: var(--text-size-xs); }
	.footer-section__logo { width: 120px; }
}