/**
 * 3D Spatial Functions - Frontend Shortcodes Styles
 * Modern cinematic dark aesthetics
 * Palette: #000000 (bg), #0C111B (cards/surface), #1F80E0 (accent), #ffffff (text)
 * Max bold: 600. Font: 'Montserrat', inherit.
 */

:root {
	--sf3dp-fe-bg: #000000;
	--sf3dp-fe-surface: #0C111B;
	--sf3dp-fe-contrast: #000000;
	--sf3dp-fe-accent: #1F80E0;
	--sf3dp-fe-text: #ffffff;
	--sf3dp-fe-text-muted: #94a3b8;
	--sf3dp-fe-border: rgba(255, 255, 255, 0.08);
	--sf3dp-fe-radius: 20px;
}

/* Base wrapper */
.sf3dp-frontend-wrap {
	font-family: "Montserrat", inherit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--sf3dp-fe-text, #ffffff);
	box-sizing: border-box;
	margin: 20px 0 40px;
}

.sf3dp-frontend-wrap *,
.sf3dp-frontend-wrap *::before,
.sf3dp-frontend-wrap *::after {
	box-sizing: inherit;
}

/* ==========================================================================
   1. Filter Bar Component ([sf3dp_movie_filters])
   ========================================================================== */
.sf3dp-filter-bar {
	background: var(--sf3dp-fe-surface, #0C111B) !important;
	background-color: var(--sf3dp-fe-surface, #0C111B) !important;
	border: none !important;
	border-radius: var(--sf3dp-fe-radius, 20px) !important;
	padding: 20px !important;
	margin-bottom: 24px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.sf3dp-filter-form {
	display: grid !important;
	grid-template-columns: 2fr 1fr 1fr auto !important;
	gap: 14px !important;
	align-items: center !important;
}

@media (max-width: 1024px) {
	.sf3dp-filter-form {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 640px) {
	.sf3dp-filter-form {
		grid-template-columns: 1fr !important;
	}
}

.sf3dp-filter-field {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Inputs & Selects: High-specificity selectors + !important to defeat theme overrides */
.sf3dp-frontend-wrap .sf3dp-filter-input,
.sf3dp-frontend-wrap .sf3dp-filter-select,
.sf3dp-filter-bar input[type="text"].sf3dp-filter-input,
.sf3dp-filter-bar select.sf3dp-filter-select,
.sf3dp-filter-form input[type="text"],
.sf3dp-filter-form select,
.sf3dp-filter-field input,
.sf3dp-filter-field select {
	width: 100% !important;
	height: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;
	line-height: 26px !important;
	padding: 8px 14px !important;
	background: var(--sf3dp-fe-bg, #000000) !important;
	background-color: var(--sf3dp-fe-bg, #000000) !important;
	border: 1px solid var(--sf3dp-fe-border, rgba(255, 255, 255, 0.15)) !important;
	border-radius: 6px !important;
	color: var(--sf3dp-fe-text, #ffffff) !important;
	font-size: 14px !important;
	font-family: "Montserrat", inherit, -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-weight: 400 !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
	outline: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

.sf3dp-frontend-wrap .sf3dp-filter-select,
.sf3dp-filter-bar select.sf3dp-filter-select,
.sf3dp-filter-form select,
.sf3dp-filter-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 12px !important;
	padding-right: 36px !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

.sf3dp-frontend-wrap .sf3dp-filter-select option,
.sf3dp-filter-bar select.sf3dp-filter-select option,
.sf3dp-filter-form select option,
.sf3dp-filter-field select option {
	background: #0C111B !important;
	background-color: #0C111B !important;
	color: #ffffff !important;
	padding: 8px 12px !important;
}

.sf3dp-frontend-wrap .sf3dp-filter-input::placeholder,
.sf3dp-filter-form input::placeholder,
.sf3dp-filter-field input::placeholder {
	color: #64748b !important;
	opacity: 1 !important;
}

.sf3dp-frontend-wrap .sf3dp-filter-input:focus,
.sf3dp-frontend-wrap .sf3dp-filter-select:focus,
.sf3dp-filter-bar input[type="text"].sf3dp-filter-input:focus,
.sf3dp-filter-bar select.sf3dp-filter-select:focus,
.sf3dp-filter-form input:focus,
.sf3dp-filter-form select:focus,
.sf3dp-filter-field input:focus,
.sf3dp-filter-field select:focus {
	border-color: var(--sf3dp-fe-accent, #1F80E0) !important;
	box-shadow: 0 0 0 2px rgba(31, 128, 224, 0.3) !important;
	background: #000000 !important;
	background-color: #000000 !important;
	color: #ffffff !important;
	outline: none !important;
}

.sf3dp-filter-actions {
	display: flex !important;
	gap: 8px !important;
	align-items: center !important;
}

/* Botones: padding 12x24px, fondo #1F80E0, 15px font, radio 3px, bold max 600 */
.sf3dp-frontend-wrap .sf3dp-btn-filter,
.sf3dp-frontend-wrap .sf3dp-btn,
.sf3dp-filter-bar button.sf3dp-btn-filter,
.sf3dp-filter-form button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 12px 24px !important;
	background: var(--sf3dp-fe-accent, #1F80E0) !important;
	background-color: var(--sf3dp-fe-accent, #1F80E0) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 3px !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
	text-transform: none !important;
	font-family: "Montserrat", inherit, -apple-system, BlinkMacSystemFont, sans-serif !important;
	box-shadow: none !important;
	margin: 0 !important;
	height: 44px !important;
	box-sizing: border-box !important;
}

.sf3dp-frontend-wrap .sf3dp-btn-filter:hover,
.sf3dp-frontend-wrap .sf3dp-btn:hover,
.sf3dp-filter-bar button.sf3dp-btn-filter:hover,
.sf3dp-filter-form button:hover {
	background: #1565c0 !important;
	background-color: #1565c0 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
}

.sf3dp-frontend-wrap .sf3dp-btn-reset,
.sf3dp-filter-bar a.sf3dp-btn-reset {
	background: transparent !important;
	background-color: transparent !important;
	border: 1px solid var(--sf3dp-fe-border, rgba(255, 255, 255, 0.15)) !important;
	color: var(--sf3dp-fe-text-muted, #94a3b8) !important;
}

.sf3dp-frontend-wrap .sf3dp-btn-reset:hover,
.sf3dp-filter-bar a.sf3dp-btn-reset:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================================================
   2. Movies Grid Component ([sf3dp_movies])
   ========================================================================== */
.sf3dp-movies-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 20px !important;
	margin-bottom: 40px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

@media (max-width: 1100px) {
	.sf3dp-movies-grid {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 18px !important;
	}
}

@media (max-width: 820px) {
	.sf3dp-movies-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px !important;
	}
}

@media (max-width: 480px) {
	.sf3dp-movies-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}

	.sf3dp-card-body {
		padding: 10px 10px 12px !important;
	}

	.sf3dp-card-title {
		font-size: 13px !important;
		line-height: 1.3 !important;
		margin: 0 0 6px !important;
	}

	.sf3dp-card-genre {
		font-size: 11px !important;
	}

	.sf3dp-card-meta-row {
		font-size: 11px !important;
		padding-top: 6px !important;
	}

	.sf3dp-card-meta-item .dashicons {
		font-size: 13px !important;
		width: 13px !important;
		height: 13px !important;
	}

	.sf3dp-tag {
		font-size: 9px !important;
		padding: 2px 5px !important;
	}

	.sf3dp-card-badge-top-left {
		top: 6px !important;
		left: 6px !important;
	}

	.sf3dp-card-badge-top-right {
		top: 6px !important;
		right: 6px !important;
	}
}

@media (max-width: 360px) {
	.sf3dp-movies-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
	}

	.sf3dp-card-body {
		padding: 8px 8px 10px !important;
	}

	.sf3dp-card-title {
		font-size: 12px !important;
	}
}

.sf3dp-movie-card {
	background: var(--sf3dp-fe-surface, #0C111B) !important;
	border: none !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
	text-decoration: none !important;
	color: inherit !important;
	position: relative !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

.sf3dp-movie-card:hover {
	transform: translateY(-5px) !important;
	box-shadow: 0 16px 30px rgba(0, 0, 0, 0.6), 0 0 16px rgba(31, 128, 224, 0.3) !important;
	color: inherit !important;
}

/* Poster container: enforce max-height 530px and portrait movie ratio */
.sf3dp-card-poster-wrap {
	position: relative !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 2 / 3 !important;
	max-height: 530px !important;
	background: #000000 !important;
	overflow: hidden !important;
	display: block !important;
}

/* Base poster image: covers container with max-height 530px */
.sf3dp-card-poster {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-height: 530px !important;
	object-fit: cover !important;
	object-position: center top !important;
	transition: transform 0.35s ease !important;
}

/* 1. Horizontal SBS (Side-By-Side 3D duplicate) frames:
   Align top-left so ONLY the left-eye frame covers the card,
   completely hiding the duplicate right-eye frame in overflow. */
.sf3dp-card-poster.sf3dp-img-sbs,
.sf3dp-poster-sbs .sf3dp-card-poster {
	object-position: left top !important;
	transform-origin: left top !important;
}

/* 2. Vertical portrait posters:
   Align centered at the top for clean, balanced movie framing. */
.sf3dp-card-poster.sf3dp-img-portrait,
.sf3dp-poster-portrait .sf3dp-card-poster {
	object-position: center top !important;
	transform-origin: center top !important;
}

.sf3dp-movie-card:hover .sf3dp-card-poster {
	transform: scale(1.04) !important;
}

.sf3dp-card-poster-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000000;
	color: #64748b;
}

/* Badges over poster */
.sf3dp-card-badge-top-left,
.sf3dp-card-badge-top-right {
	position: absolute;
	top: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sf3dp-card-badge-top-left { left: 10px; }
.sf3dp-card-badge-top-right { right: 10px; }

.sf3dp-tag {
	display: inline-block;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 600;
	text-transform: none;
	border-radius: 3px;
	backdrop-filter: blur(8px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.sf3dp-tag-accent {
	background: var(--sf3dp-fe-accent, #1F80E0);
	color: #ffffff;
}

.sf3dp-tag-format {
	background: rgba(0, 0, 0, 0.8);
	color: #e2e8f0;
	border: 1px solid rgba(255, 255, 255, 0.15);
}

.sf3dp-tag-vr {
	background: rgba(16, 185, 129, 0.85);
	color: #ffffff;
}

/* Card Body */
.sf3dp-card-body {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* Card Genres */
.sf3dp-card-genres {
	margin: 0 0 6px 0;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.sf3dp-card-genre {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: var(--sf3dp-fe-accent, #1F80E0);
	letter-spacing: 0.2px;
	text-transform: none !important;
	line-height: 1.3;
}

.sf3dp-card-title {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--sf3dp-fe-text, #ffffff);
	text-transform: none !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sf3dp-card-title a {
	color: var(--sf3dp-fe-text, #ffffff) !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
}

.sf3dp-card-title a:hover {
	color: var(--sf3dp-fe-accent, #1F80E0) !important;
}

.sf3dp-card-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 500;
	color: var(--sf3dp-fe-text-muted, #94a3b8);
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sf3dp-card-meta-item {
	display: flex;
	align-items: center;
	gap: 5px;
}

.sf3dp-card-meta-item .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	color: var(--sf3dp-fe-accent, #1F80E0);
}

.sf3dp-card-price-val {
	font-weight: 600;
	color: var(--sf3dp-fe-text, #ffffff);
}

/* Pagination */
.sf3dp-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 35px 0;
}

.sf3dp-pagination .page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 38px !important;
	height: 38px !important;
	padding: 0 12px !important;
	background: var(--sf3dp-fe-surface, #0C111B) !important;
	background-color: var(--sf3dp-fe-surface, #0C111B) !important;
	border: 1px solid var(--sf3dp-fe-border, rgba(255, 255, 255, 0.12)) !important;
	border-radius: 3px !important;
	color: var(--sf3dp-fe-text, #ffffff) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.sf3dp-pagination .page-numbers:hover,
.sf3dp-pagination .page-numbers.current {
	background: var(--sf3dp-fe-accent, #1F80E0) !important;
	background-color: var(--sf3dp-fe-accent, #1F80E0) !important;
	border-color: var(--sf3dp-fe-accent, #1F80E0) !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(31, 128, 224, 0.35) !important;
}

/* No results notice */
.sf3dp-no-results {
	background: var(--sf3dp-fe-surface, #0C111B);
	border: none;
	border-radius: var(--sf3dp-fe-radius, 20px);
	padding: 40px 20px;
	text-align: center;
	color: var(--sf3dp-fe-text-muted, #94a3b8);
	font-size: 15px;
}

/* ==========================================================================
   3. Single Movie Details Component ([sf3dp_movie_single])
   ========================================================================== */

/* Container 1: Hero Card (Poster on Left, Title, Top Meta Badges, Synopsis & Key Fields on Right)
   Styled with radius 20px, padding 20px, background #0C111B, border none. */
.sf3dp-single-hero-card {
	background: var(--sf3dp-fe-surface, #0C111B);
	border: none;
	border-radius: 20px;
	padding: 20px;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.sf3dp-single-hero-grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 28px;
	align-items: start;
}

@media (max-width: 820px) {
	.sf3dp-single-hero-grid {
		grid-template-columns: 1fr;
	}
}

/* Left Column: Poster */
.sf3dp-single-poster-wrap {
	position: relative;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: #000000;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
	aspect-ratio: 2 / 3;
	max-height: 530px;
}

.sf3dp-single-poster {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: left top;
}

.sf3dp-single-poster-badges {
	display: none !important;
}

/* Right Column: Hero Content */
.sf3dp-single-hero-content {
	display: flex;
	flex-direction: column;
}

/* Title & Pricing Row: Title on Left, Rent/Buy on Right */
.sf3dp-single-title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	margin: 0 0 14px;
}

.sf3dp-single-title {
	margin: 0 !important;
	font-size: 28px;
	font-weight: 600;
	color: var(--sf3dp-fe-text, #ffffff);
	line-height: 1.25;
	text-transform: none;
}

/* 2 Most Important Meta Fields directly below title */
.sf3dp-single-top-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
}

.sf3dp-top-meta-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: var(--sf3dp-fe-bg, #000000);
	border: 1px solid var(--sf3dp-fe-border, rgba(255, 255, 255, 0.08));
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sf3dp-fe-text, #ffffff);
	line-height: 1.4;
	transition: all 0.2s ease;
}

.sf3dp-top-meta-badge:hover {
	border-color: rgba(31, 128, 224, 0.4);
	background: rgba(31, 128, 224, 0.04);
}

.sf3dp-top-meta-icon {
	color: var(--sf3dp-fe-accent, #1F80E0);
	font-size: 15px;
	width: 15px;
	height: 15px;
	line-height: 15px;
	display: inline-block;
}

.sf3dp-top-meta-label {
	color: var(--sf3dp-fe-text-muted, #94a3b8);
	font-weight: 500;
	font-size: 12px;
}

.sf3dp-top-meta-val {
	color: var(--sf3dp-fe-text, #ffffff);
	font-weight: 600;
}

.sf3dp-badge-rating,
.sf3dp-single-top-meta .sf3dp-badge-rating {
	display: none !important;
}

/* Pricing Action: Rent & Buy alongside Title */
.sf3dp-single-pricing-row {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 0;
}

.sf3dp-pricing-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	user-select: none;
}

.sf3dp-pricing-label {
	font-weight: 600;
	color: var(--sf3dp-fe-text-muted, #94a3b8);
	font-size: 13px;
	letter-spacing: 0.2px;
	text-transform: none;
}

.sf3dp-pricing-price {
	font-weight: 700;
	font-size: 13px;
	padding: 5px 12px;
	border-radius: 6px;
	letter-spacing: 0.3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.3;
	transition: all 0.2s ease;
}

.sf3dp-pricing-rent {
	background: rgba(31, 128, 224, 0.14);
	border: 1px solid var(--sf3dp-fe-accent, #1F80E0);
	color: #ffffff;
}

.sf3dp-pricing-rent:hover {
	background: rgba(31, 128, 224, 0.25);
	border-color: #3b9bff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(31, 128, 224, 0.35);
}

.sf3dp-pricing-buy {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #ffffff;
}

.sf3dp-pricing-buy:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.38);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.sf3dp-pricing-free {
	background: rgba(16, 185, 129, 0.14);
	border: 1px solid #10b981;
	color: #34d399;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.sf3dp-pricing-free:hover {
	background: rgba(16, 185, 129, 0.25);
	border-color: #34d399;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.sf3dp-card-meta-price.sf3dp-is-free .sf3dp-card-price-val {
	color: #34d399;
	font-weight: 700;
}

.sf3dp-card-meta-price.sf3dp-is-free .dashicons {
	color: #34d399;
}

/* Títulos en pequeño: #1F80E0, no en mayúscula, no capitalize */
.sf3dp-small-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--sf3dp-fe-accent, #1F80E0);
	text-transform: none !important;
	letter-spacing: 0.2px;
	margin: 0 0 8px;
}

/* Description / Synopsis below top meta */
.sf3dp-synopsis-text {
	line-height: 1.7;
	font-size: 15px;
	color: #e2e8f0;
	font-weight: 400;
}

.sf3dp-synopsis-text p {
	margin: 0 0 12px;
}

.sf3dp-synopsis-text p:last-child {
	margin-bottom: 0;
}

/* Other Key Meta Fields below description */
.sf3dp-single-key-fields {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sf3dp-key-field-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	font-size: 14px;
	line-height: 1.6;
}

.sf3dp-key-field-label {
	color: var(--sf3dp-fe-accent, #1F80E0);
	font-weight: 600;
	font-size: 13px;
	text-transform: none !important;
	min-width: 160px;
	flex-shrink: 0;
	letter-spacing: 0.2px;
}

.sf3dp-key-field-val {
	color: var(--sf3dp-fe-text, #ffffff);
	font-weight: 500;
	flex: 1 1 240px;
	word-break: break-word;
	line-height: 1.6;
}

/* Technical Specifications & Details (Inside hero content, without extra containers or boxes) */
.sf3dp-single-specs-wrap {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sf3dp-single-specs-wrap .sf3dp-small-title {
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sf3dp-fe-accent, #1F80E0);
	text-transform: none !important;
}

/* Specifications grid: clean typography list without container boxes */
.sf3dp-specs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px 20px;
}

@media (max-width: 640px) {
	.sf3dp-specs-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px 14px;
	}
}

@media (max-width: 380px) {
	.sf3dp-specs-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}

/* Individual spec item: pure typography, no container box, no borders */
.sf3dp-spec-item,
.sf3dp-spec-card {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	transition: none !important;
	transform: none !important;
}

.sf3dp-spec-item:hover,
.sf3dp-spec-card:hover {
	border: none !important;
	background: transparent !important;
	transform: none !important;
}

.sf3dp-spec-card-full {
	grid-column: 1 / -1;
}

/* Deprecated container fallback */
.sf3dp-single-meta-card {
	display: none !important;
}

/* Labels in spec cards: #1F80E0, no uppercase, no capitalize */
.sf3dp-spec-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--sf3dp-fe-accent, #1F80E0);
	text-transform: none !important;
	margin-bottom: 4px;
	letter-spacing: 0.2px;
	line-height: 1.2;
}

.sf3dp-spec-value {
	font-size: 14px;
	font-weight: 500;
	color: var(--sf3dp-fe-text, #ffffff);
	word-break: break-word;
	line-height: 1.4;
}

/* ==========================================================================
   Single movie (mobile): fields ordered by importance
   Title > Category > Rent > Buy > Synopsis > Duration > Release Year >
   Director > Producer > Writer > Cast > Genre > Sub Genre > Rating >
   (details) Studio > Distributor > Original Language > Subtitle Language >
   3D Format > Color > Aspect Ratio > Audio Format
   ========================================================================== */
@media (max-width: 820px) {
	.sf3dp-single-hero-content {
		gap: 12px;
	}

	/* Flatten wrappers so every field can be ordered individually. */
	.sf3dp-single-title-row,
	.sf3dp-single-pricing-row,
	.sf3dp-single-top-meta,
	.sf3dp-single-key-fields,
	.sf3dp-single-specs-wrap,
	.sf3dp-specs-grid {
		display: contents;
	}

	.sf3dp-single-title { order: 1; }
	.sf3dp-field-category { order: 2; }
	.sf3dp-field-rent { order: 3; }
	.sf3dp-field-buy { order: 4; }
	.sf3dp-field-synopsis { order: 5; }
	.sf3dp-field-duration { order: 6; }
	.sf3dp-field-year { order: 7; }
	.sf3dp-field-director { order: 8; }
	.sf3dp-field-producer { order: 9; }
	.sf3dp-field-writer { order: 10; }
	.sf3dp-field-cast { order: 11; }
	.sf3dp-field-genre { order: 12; }
	.sf3dp-field-subgenre { order: 13; }
	.sf3dp-field-rating { order: 14; }

	/* Less important details. */
	.sf3dp-single-specs-wrap > .sf3dp-small-title {
		order: 20;
		margin: 8px 0 0;
		padding-top: 16px;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}
	.sf3dp-field-studio { order: 21; }
	.sf3dp-field-distributor { order: 22; }
	.sf3dp-field-language { order: 23; }
	.sf3dp-field-subtitles { order: 15; }
	.sf3dp-field-format3d { order: 25; }
	.sf3dp-field-color { order: 26; }
	.sf3dp-field-aspect { order: 27; }
	.sf3dp-field-audio { order: 28; }
	.sf3dp-field-sku { order: 29; }
	.sf3dp-field-barcode { order: 30; }

	.sf3dp-pricing-item,
	.sf3dp-top-meta-badge {
		align-self: flex-start;
	}

	/* Same look for important and detail fields: label above value. */
	.sf3dp-key-field-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.sf3dp-key-field-label {
		min-width: 0;
		font-size: 12px;
	}

	.sf3dp-key-field-val {
		flex: 0 1 auto;
	}
}

/* Subtitle Language: label and value on a single line. */
.sf3dp-key-field-row.sf3dp-field-subtitles {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 8px;
}

.sf3dp-key-field-row.sf3dp-field-subtitles .sf3dp-key-field-label {
	min-width: 0;
	white-space: nowrap;
}

.sf3dp-key-field-row.sf3dp-field-subtitles .sf3dp-key-field-val {
	flex: 1 1 auto;
	min-width: 0;
}