/**
 * Panilux Modern CSS
 *
 * Modern, responsive styles for Panilux website
 * Compatible with Bootstrap 5
 * Includes dark mode support
 *
 * @version 1.0.0
 * @date 2024-10-27
 */

/* Theme Variables */
:root
{
	--primary-color    : #06c;
	--secondary-color  : #0b9d6b;
	--accent-color     : #e7524b;
	--dark-color       : #1a1a1a;
	--light-color      : #f8f9fa;
	--text-color       : #333;
	--text-muted       : #6c757d;
	--border-radius    : 12px;
	--transition       : all 0.3s ease;
	--bg-color         : #fff;
	--bg-secondary     : #f8f9fa;
	--navbar-height    : 82px;
	--surface-color    : #fff;
	--surface-elevated : #f8f9ff;
	--surface-border   : rgba(0, 0, 0, 0.08);
	--surface-shadow   : 0 10px 30px rgba(0, 0, 0, 0.08);
	color-scheme       : light;
}

@media (prefers-color-scheme : dark)
{
	:root
	{
		--primary-color    : #4d94ff;
		--secondary-color  : #0db87c;
		--accent-color     : #ff6b63;
		--dark-color       : #fff;
		--light-color      : #2d2d2d;
		--text-color       : #e9ecef;
		--text-muted       : #adb5bd;
		--bg-color         : #1a1a1a;
		--bg-secondary     : #2d2d2d;
		--navbar-height    : 82px;
		--surface-color    : #21242b;
		--surface-elevated : #1b1e24;
		--surface-border   : rgba(255, 255, 255, 0.08);
		--surface-shadow   : 0 18px 45px rgba(0, 0, 0, 0.55);
		color-scheme       : dark;
	}
}

html
{
	background : var(--bg-color);
}

body
{
	background  : var(--bg-color);
	color       : var(--text-color);
	font-family : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height : 1.6;
	font-size   : 16px;
}

*
{
	margin     : 0;
	padding    : 0;
	box-sizing : border-box;
}

body,
.modern-navbar,
.modern-footer,
.feature-card,
.pricing-card,
.demo-card,
.contact-form-wrapper,
.contact-info-card,
.purchase-form-card,
.settings-page-wrapper
{
	transition : background 0.3s ease, color 0.3s ease;
}

/* Modern Navbar */
.modern-navbar
{
	background      : rgba(255, 255, 255, 0.98);
	backdrop-filter : blur(10px);
	box-shadow      : 0 2px 20px rgba(0, 0, 0, 0.08);
	padding         : 0.8rem 0;
	position        : sticky;
	top             : 0;
	z-index         : 1030;
}

.modern-navbar .navbar-brand
{
	font-size   : 1.5rem;
	font-weight : 700;
	color       : var(--primary-color) !important;
	transition  : var(--transition);
}

.brand-logo
{
	display     : inline-flex;
	align-items : center;
	height      : 48px;
}

.brand-logo-img
{
	height  : 48px;
	width   : auto;
	display : block;
}

.modern-navbar .navbar-brand:hover
{
	/* removed vertical hover shift */
	transform : none;
}

.modern-navbar .nav-link
{
    color         : var(--text-color) !important;
    font-weight   : 500;
    padding       : 0.5rem 1rem !important;
    border-radius : 8px;
    transition    : var(--transition);
    position      : relative;
}

/* Increase spacing between top navbar items */
.modern-navbar .navbar-nav
{
    gap : 0.75rem;
}

@media (min-width : 992px)
{
    .modern-navbar .navbar-nav
    {
        gap : 1.25rem;
    }
}

.modern-navbar .nav-link:hover,
.modern-navbar .nav-link.active
{
	background : var(--light-color);
	color      : var(--primary-color) !important;
}

.modern-navbar .nav-link.active::after
{
	content    : '';
	position   : absolute;
	bottom     : 0;
	left       : 1rem;
	right      : 1rem;
	height     : 2px;
	background : var(--primary-color);
}

.navbar-toggler
{
	border        : none;
	padding       : 0.35rem 0.5rem;
	border-radius : 10px;
	transition    : var(--transition);
}

.navbar-toggler:focus
{
	box-shadow : 0 0 0 2px rgba(102, 126, 234, 0.25);
	outline    : none;
}

.navbar-toggler-icon
{
	position      : relative;
	display       : block;
	width         : 1.75rem;
	height        : 2px;
	background    : var(--text-color);
	border-radius : 999px;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after
{
	content       : '';
	position      : absolute;
	left          : 0;
	width         : 100%;
	height        : 2px;
	background    : var(--text-color);
	border-radius : 999px;
	transition    : var(--transition);
}

.navbar-toggler-icon::before
{
	top : -6px;
}

.navbar-toggler-icon::after
{
	top : 6px;
}

@media (max-width : 991.98px)
{
	.modern-navbar .navbar-collapse
	{
		margin-top    : 0.75rem;
		padding       : 0.75rem 0;
		background    : var(--surface-color);
		border-radius : var(--border-radius);
		box-shadow    : var(--surface-shadow);
	}

	.modern-navbar .navbar-nav
	{
		align-items : stretch !important;
		gap         : 0.35rem;
		padding     : 0 1rem;
	}

	.modern-navbar .nav-link
	{
		width         : 100%;
		padding       : 0.75rem 1rem !important;
		border-radius : 10px;
	}

	.modern-navbar .nav-item.ms-2
	{
		margin-left : 0 !important;
	}

	.theme-toggle,
	.lang-switcher
	{
		width           : 100%;
		justify-content : center;
	}
}

/* Language Switcher */
.lang-switcher
{
	padding        : 0.45rem 0.9rem !important;
	border-radius  : 999px;
	border         : 1px solid rgba(0, 0, 0, 0.08);
	background     : var(--light-color);
	color          : var(--text-color) !important;
	font-weight    : 600;
	text-transform : uppercase;
	letter-spacing : 0.05em;
	transition     : var(--transition);
}

.lang-switcher .lang-code
{
	font-size : 0.85rem;
}

.lang-switcher .lang-flag
{
	width         : 30px;
	height        : 20px;
	border-radius : 4px;
	object-fit    : cover;
	box-shadow    : 0 0 6px rgba(0, 0, 0, 0.2);
}

.lang-switcher:hover
{
	background   : var(--primary-color);
	color        : #fff !important;
	border-color : transparent;
    /* removed vertical hover shift */
    transform    : none;
}

.lang-switcher:hover .lang-flag
{
    /* Remove hover border ring around flag */
}

@media (prefers-color-scheme : dark)
{
	.lang-switcher
	{
		background   : var(--bg-secondary);
		border-color : #3d3d3d;
		color        : var(--text-color) !important;
	}

	.lang-switcher:hover
	{
		color        : #fff !important;
		border-color : transparent;
	}
}

/* Common spacing helpers */
.section-padding
{
	padding : 80px 0;
}

@media (max-width : 768px)
{
	.section-padding
	{
		padding : 40px 0;
	}
}

/* Dark Mode Overrides */
@media (prefers-color-scheme : dark)
{
	body
	{
		background : var(--bg-color);
		color      : var(--text-color);
	}

	.modern-navbar
	{
		background : rgba(30, 30, 30, 0.98);
		box-shadow : 0 2px 20px rgba(0, 0, 0, 0.3);
	}

	.feature-card,
	.pricing-card,
	.demo-card,
	.contact-form-wrapper,
	.contact-info-card,
	.purchase-form-card,
	.settings-page-wrapper,
	.account-nav,
	.install-card
	{
		background   : var(--surface-color);
		border-color : var(--surface-border);
		box-shadow   : var(--surface-shadow);
	}

	.form-control,
	.command-box
	{
		background   : var(--bg-color);
		color        : var(--text-color);
		border-color : #3d3d3d;
	}

	.form-control:focus
	{
		background : var(--bg-secondary);
		color      : var(--text-color);
	}

	.table-modern
	{
		background    : var(--bg-secondary);
		color         : var(--text-color);
		--bs-table-bg : unset;
	}

	.table-modern tbody tr:hover
	{
		background : var(--bg-color);
	}

	.bg-light
	{
		background : var(--bg-secondary) !important;
	}

	.text-muted
	{
		color : var(--text-muted) !important;
	}
}

/* Home Page */
.hero-section
{
	background        : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color             : white;
	position          : relative;
	overflow          : hidden;
	padding           : calc(var(--navbar-height) - 80px) 0 800px;
	scroll-margin-top : calc(var(--navbar-height) + 20px);
}

.hero-section .carousel,
.hero-section .carousel-inner,
.hero-section .carousel-item
{
	display     : flex;
	align-items : center;
	min-height  : 0;
}

.hero-section .carousel-item > .container
{
	padding-top    : 2rem;
	padding-bottom : 2rem;
}

.hero-section .min-vh-75
{
	min-height : 0;
}

@media (max-width : 991.98px)
{
	.hero-section
	{
		padding : calc(var(--navbar-height) - 60px) 0 620px;
	}

	.hero-section .carousel,
	.hero-section .carousel-inner,
	.hero-section .carousel-item
	{
		justify-content : center;
	}
}

@media (max-width : 575.98px)
{
	.hero-section
	{
		padding : calc(var(--navbar-height) - 40px) 0 520px;
	}

	.hero-section .carousel,
	.hero-section .carousel-inner,
	.hero-section .carousel-item
	{
		justify-content : center;
	}
}

.carousel-fade .carousel-item
{
	opacity    : 0;
	transition : opacity 0.8s ease-in-out;
}

.carousel-fade .carousel-item.active
{
	opacity : 1;
}

.hero-indicators
{
	top    : auto;
	bottom : 0;
	margin : 0;
}

.hero-indicators button
{
	width      : 12px !important;
	height     : 4px !important;
	background : rgba(255, 255, 255, 0.5);
	border     : 2px solid white !important;
	margin     : 0 5px;
	/*border     : 1px solid #fff !important;*/
}

.hero-indicators button.active
{
	background : white;
}

.hero-control
{
	opacity    : 0.7;
	transition : var(--transition);
}

.hero-control:hover
{
	opacity : 1;
}

.hero-icon
{
	font-size : 4rem;
	opacity   : 0.9;
	animation : pulse 2s ease-in-out infinite;
}

@keyframes pulse
{
	0%, 100%
	{
		transform : scale(1);
		opacity   : 0.9;
	}
	50%
	{
		transform : scale(1.1);
		opacity   : 1;
	}
}

.hero-stats-bar
{
	background      : rgba(255, 255, 255, 0.1);
	backdrop-filter : blur(10px);
	border-radius   : var(--border-radius);
	padding         : 2rem;
	margin-top      : 2rem;
}

.hero-gradient
{
	position       : absolute;
	top            : 0;
	left           : 0;
	right          : 0;
	bottom         : 0;
	background     : radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%),
	radial-gradient(circle at 80% 80%, rgba(252, 70, 107, 0.2), transparent 50%);
	pointer-events : none;
}

.hero-content
{
	position : relative;
	z-index  : 2;
}

.hero-subtitle
{
	display        : block;
	font-size      : 1.1rem;
	font-weight    : 500;
	text-transform : uppercase;
	letter-spacing : 2px;
	opacity        : 0.9;
	margin-bottom  : 0.5rem;
}

.hero-title
{
	font-size     : 3.5rem;
	font-weight   : 800;
	line-height   : 1.2;
	margin-bottom : 1.5rem;
}

.hero-description
{
	font-size     : 1.2rem;
	opacity       : 0.95;
	margin-bottom : 2rem;
	line-height   : 1.8;
}

.hero-buttons .btn
{
	padding        : 0.8rem 2rem;
	font-weight    : 600;
	border-radius  : 50px;
	transition     : all 0.3s ease;
	text-transform : uppercase;
	letter-spacing : 0.5px;
}

.hero-buttons .btn-primary
{
	background : white;
	color      : #667eea;
	border     : none;
	box-shadow : 0 10px 30px rgba(0, 0, 0, 0.2);
}

.hero-buttons .btn-primary:hover
{
	/* removed vertical hover shift */
	transform  : none;
	box-shadow : 0 15px 40px rgba(0, 0, 0, 0.3);
}

.hero-buttons .btn-outline-light
{
	border : 2px solid white;
}

.hero-buttons .btn-outline-light:hover
{
	background : white;
	color      : #667eea;
	/* removed vertical hover shift */
	transform  : none;
}

.hero-stats
{
	display : flex;
	gap     : 2rem;
}

.stat-item
{
	text-align : center;
}

.stat-number
{
	font-size   : 2rem;
	font-weight : 700;
	color       : white;
}

.stat-label
{
	font-size      : 0.9rem;
	opacity        : 0.8;
	text-transform : uppercase;
	letter-spacing : 1px;
}

.hero-image-wrapper
{
	position  : relative;
	animation : float 6s ease-in-out infinite;
}

.hero-image
{
	border-radius : 20px;
	box-shadow    : 0 30px 60px rgba(0, 0, 0, 0.3);
	position      : relative;
	z-index       : 2;
}

.hero-image-decoration
{
	position      : absolute;
	width         : 100%;
	height        : 100%;
	top           : 20px;
	left          : 20px;
	background    : linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
	border-radius : 20px;
	z-index       : 1;
}

@keyframes float
{
	0%, 100%
	{
		transform : translateY(0px);
	}
	50%
	{
		transform : translateY(-20px);
	}
}

.scroll-indicator
{
	position  : absolute;
	bottom    : 30px;
	left      : 50%;
	transform : translateX(-50%);
	animation : bounce 2s infinite;
	font-size : 2rem;
	color     : white;
	opacity   : 0.7;
}

@keyframes bounce
{
	0%, 20%, 50%, 80%, 100%
	{
		transform : translateX(-50%) translateY(0);
	}
	40%
	{
		transform : translateX(-50%) translateY(-10px);
	}
	60%
	{
		transform : translateX(-50%) translateY(-5px);
	}
}

.features-section
{
	background : var(--bg-color);
}

.section-title
{
	font-size     : 2.5rem;
	font-weight   : 700;
	color         : var(--text-color);
	margin-bottom : 1rem;
}

.section-subtitle
{
	font-size : 1.2rem;
	color     : var(--text-muted);
}

.feature-card
{
	background    : var(--surface-color);
	border-radius : var(--border-radius);
	padding       : 2rem;
	text-align    : center;
	transition    : var(--transition);
	border        : 1px solid var(--surface-border);
	height        : 100%;
	box-shadow    : var(--surface-shadow);
}

.feature-card:hover
{
	transform    : translateY(-10px);
	box-shadow   : 0 20px 40px rgba(0, 0, 0, 0.15);
	border-color : transparent;
}

.feature-icon
{
	width           : 80px;
	height          : 80px;
	border-radius   : 50%;
	display         : flex;
	align-items     : center;
	justify-content : center;
	margin          : 0 auto 1.5rem;
	font-size       : 2rem;
	color           : white;
	transition      : var(--transition);
}

.feature-icon.performance
{
	background : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.feature-icon.independent
{
	background : linear-gradient(135deg, #0b9d6b 0%, #0a7d56 100%);
}

.feature-icon.smart
{
	background : linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.feature-icon.secure
{
	background : linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.feature-card:hover .feature-icon
{
	transform : scale(1.1) rotate(5deg);
}

.feature-title
{
	font-size     : 1.3rem;
	font-weight   : 600;
	margin-bottom : 1rem;
	color         : var(--text-color);
}

.feature-description
{
	color       : var(--text-muted);
	line-height : 1.8;
}

.screenshots-section
{
	background : var(--bg-secondary);
}

.screenshot-wrapper
{
	border-radius : var(--border-radius);
	overflow      : hidden;
	box-shadow    : 0 20px 60px rgba(0, 0, 0, 0.15);
}

.carousel-caption
{
	background      : rgba(0, 0, 0, 0.7);
	backdrop-filter : blur(10px);
	border-radius   : 12px;
	padding         : 1.5rem;
	bottom          : 2rem;
	left            : 10%;
	right           : 10%;
}

.carousel-caption h5
{
	font-size     : 1.5rem;
	font-weight   : 700;
	margin-bottom : 0.5rem;
}

.cta-section
{
	background : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color      : white;
	position   : relative;
	overflow   : hidden;
}

.cta-section .container
{
	position   : relative;
	margin-top : -40px;
}

.cta-section::before
{
	content    : '';
	position   : absolute;
	top        : 0;
	left       : 0;
	right      : 0;
	bottom     : 0;
	background : radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1), transparent 50%),
	radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.1), transparent 50%);
}

.cta-title
{
	font-size     : 2.5rem;
	font-weight   : 700;
	margin-bottom : 1rem;
}

.cta-description
{
	font-size     : 1.2rem;
	opacity       : 0.95;
	margin-bottom : 2rem;
}

.cta-section .btn
{
	padding       : 0.8rem 2.5rem;
	font-weight   : 600;
	border-radius : 50px;
	transition    : all 0.3s ease;
}

.cta-section .btn-light
{
	background : white;
	color      : #667eea;
	border     : none;
}

.cta-section .btn-light:hover
{
	/* removed vertical hover shift */
	transform  : none;
	box-shadow : 0 15px 40px rgba(0, 0, 0, 0.3);
}

.cta-section .btn-outline-light:hover
{
	background : white;
	color      : #667eea;
	/* removed vertical hover shift */
	transform  : none;
}

@media (max-width : 992px)
{
	.hero-title
	{
		font-size : 2.5rem;
	}

	.hero-image-container
	{
		margin-top : 3rem;
	}

	.section-title
	{
		font-size : 2rem;
	}
}

@media (max-width : 576px)
{
	.hero-title
	{
		font-size : 2rem;
	}

	.hero-description
	{
		font-size : 1rem;
	}

	.hero-buttons .btn
	{
		width         : 100%;
		margin-bottom : 1rem;
	}

	.hero-stats
	{
		justify-content : space-around;
	}

	.stat-number
	{
		font-size : 1.5rem;
	}

	.section-title
	{
		font-size : 1.8rem;
	}
}

/* Downloads Page */
.downloads-hero
{
	background : linear-gradient(135deg, #e8883b 0%, #d67025 100%);
	color      : white;
	padding    : 60px 0;
}

.page-title
{
	font-size     : 3rem;
	font-weight   : 700;
	margin-bottom : 1rem;
}

.page-subtitle
{
	font-size : 1.3rem;
	opacity   : 0.9;
}

.demo-icon-wrapper
{
	margin-bottom : 2rem;
}

.demo-icon
{
	font-size : 4rem;
	color     : var(--primary-color);
}

.section-description
{
	font-size   : 1.1rem;
	color       : var(--text-muted);
	line-height : 1.8;
}

.demo-card
{
	background    : var(--surface-color);
	border-radius : var(--border-radius);
	overflow      : hidden;
	box-shadow    : var(--surface-shadow);
	transition    : var(--transition);
	border        : 1px solid var(--surface-border);
}

.demo-card:hover
{
	transform  : translateY(-5px);
	box-shadow : 0 20px 60px rgba(0, 0, 0, 0.2);
}

.demo-card-header
{
	background  : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color       : white;
	padding     : 1.5rem;
	font-size   : 1.2rem;
	font-weight : 600;
}

.demo-card-body
{
	padding : 2rem;
}

.demo-info-item
{
	display       : flex;
	align-items   : center;
	margin-bottom : 1.5rem;
	font-size     : 1.1rem;
}

.demo-link
{
	color           : var(--primary-color);
	text-decoration : none;
	font-weight     : 600;
	transition      : var(--transition);
}

.demo-link:hover
{
	color : #764ba2;
}

.demo-credentials
{
	background    : var(--surface-elevated);
	border-radius : 8px;
	padding       : 1.5rem;
	margin        : 1.5rem 0;
	border        : 1px solid var(--surface-border);
}

.credential-item
{
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	margin-bottom   : 1rem;
}

.credential-item:last-child
{
	margin-bottom : 0;
}

.credential-label
{
	font-weight : 500;
}

.credential-value
{
	background    : var(--surface-color);
	padding       : 0.5rem 1rem;
	border-radius : 6px;
	font-size     : 1.1rem;
	border        : 1px solid var(--surface-border);
}

.install-card
{
	background    : var(--surface-color);
	border-radius : var(--border-radius);
	padding       : 3rem;
	box-shadow    : var(--surface-shadow);
	border        : 1px solid var(--surface-border);
}

.install-step
{
	display       : flex;
	gap           : 2rem;
	margin-bottom : 3rem;
	position      : relative;
}

.install-step:not(:last-child)::after
{
	content    : '';
	position   : absolute;
	left       : 24px;
	top        : 50px;
	bottom     : -3rem;
	width      : 2px;
	background : linear-gradient(180deg, #667eea 0%, rgba(233, 236, 239, 0) 100%);
}

.install-step:last-child
{
	margin-bottom : 0;
}

.step-number
{
	width           : 48px;
	height          : 48px;
	background      : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color           : white;
	border-radius   : 50%;
	display         : flex;
	align-items     : center;
	justify-content : center;
	font-size       : 1.5rem;
	font-weight     : 700;
	flex-shrink     : 0;
	box-shadow      : 0 5px 15px rgba(102, 126, 234, 0.4);
}

.step-content
{
	flex : 1;
}

.step-content h4
{
	font-size     : 1.5rem;
	font-weight   : 600;
	margin-bottom : 0.5rem;
}

.command-box
{
	background    : #1e1e1e;
	border-radius : 8px;
	overflow      : hidden;
	margin        : 1rem 0;
}

.command-header
{
	background      : #2d2d2d;
	color           : white;
	padding         : 0.75rem 1rem;
	display         : flex;
	justify-content : space-between;
	align-items     : center;
	font-size       : 0.9rem;
}

.command-body
{
	padding : 1.5rem;
}

.command-body code
{
	color       : #4af626;
	font-family : 'Courier New', monospace;
	font-size   : 0.95rem;
	line-height : 1.6;
	display     : block;
	word-break  : break-all;
}

.copy-btn
{
	padding   : 0.25rem 0.75rem;
	font-size : 0.85rem;
}

.terminal-wrapper
{
	background    : #1e1e1e;
	border-radius : 12px;
	overflow      : hidden;
	box-shadow    : 0 20px 60px rgba(0, 0, 0, 0.3);
}

.terminal-header
{
	background  : #2d2d2d;
	padding     : 0.75rem 1rem;
	display     : flex;
	align-items : center;
	gap         : 1rem;
}

.terminal-buttons
{
	display : flex;
	gap     : 0.5rem;
}

.terminal-btn
{
	width         : 12px;
	height        : 12px;
	border-radius : 50%;
}

.terminal-btn.red
{
	background : #ff5f56;
}

.terminal-btn.yellow
{
	background : #ffbd2e;
}

.terminal-btn.green
{
	background : #27c93f;
}

.terminal-title
{
	color     : #888;
	font-size : 0.9rem;
}

.terminal-body
{
	padding    : 1.5rem;
	max-height : 400px;
	overflow-y : auto;
}

.terminal-content
{
	color       : #4af626;
	font-family : 'Courier New', monospace;
	font-size   : 0.85rem;
	line-height : 1.5;
	margin      : 0;
}

.video-wrapper
{
	border-radius : var(--border-radius);
	overflow      : hidden;
	box-shadow    : 0 20px 60px rgba(0, 0, 0, 0.15);
}

.bg-gradient-purple
{
	background : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.text-white-75
{
	color     : rgba(255, 255, 255, 0.9);
	font-size : 1.1rem;
}

.feature-list
{
	list-style : none;
	padding    : 0;
	margin     : 2rem 0;
}

.feature-list li
{
	font-size     : 1.1rem;
	margin-bottom : 1rem;
	color         : white;
}

.google-play-btn
{
	display    : inline-block;
	transition : var(--transition);
}

.google-play-btn:hover
{
	transform : scale(1.05);
}

.support-icon
{
	font-size     : 4rem;
	color         : var(--primary-color);
	margin-bottom : 1rem;
}

@media (max-width : 768px)
{
	.page-title
	{
		font-size : 2rem;
	}

	.install-step
	{
		flex-direction : column;
		gap            : 1rem;
	}

	.install-step::after
	{
		display : none;
	}

	.command-body code
	{
		font-size : 0.8rem;
	}

	.terminal-content
	{
		font-size : 0.75rem;
	}
}

/* Contact Page */
.contact-hero
{
	background : linear-gradient(135deg, #73caf5 0%, #5ca2c4 100%);
	color      : white;
	padding    : 60px 0;
}

.contact-form-wrapper
{
	background    : var(--surface-color);
	border-radius : var(--border-radius);
	padding       : 3rem;
	box-shadow    : var(--surface-shadow);
	border        : 1px solid var(--surface-border);
}

.contact-form-wrapper h2
{
	font-size   : 2rem;
	font-weight : 700;
	color       : var(--text-color);
}

.form-floating > label
{
	color : var(--text-muted);
}

.form-control
{
	border-radius : 8px;
	border        : 2px solid var(--surface-border);
	padding       : 1rem;
	transition    : var(--transition);
}

.form-control:focus
{
	border-color : var(--primary-color);
	box-shadow   : 0 0 0 0.25rem rgba(102, 126, 234, 0.1);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label
{
	color : var(--primary-color);
}

.contact-info-wrapper h2
{
    font-size   : 2rem;
    font-weight : 700;
    color       : var(--text-color);
}

/* Consistent contact section heading when placed outside cards */
.contact-section-title
{
    font-size   : 2rem;
    font-weight : 700;
    color       : var(--text-color);
}

.contact-info-card
{
	background    : var(--surface-color);
	border-radius : var(--border-radius);
	padding       : 2rem;
	box-shadow    : var(--surface-shadow);
	border        : 1px solid var(--surface-border);
}

.contact-info-item
{
	display        : flex;
	gap            : 1.5rem;
	margin-bottom  : 2rem;
	padding-bottom : 2rem;
	border-bottom  : 1px solid var(--surface-border);
}

.contact-info-item:last-child
{
	margin-bottom  : 0;
	padding-bottom : 0;
	border-bottom  : none;
}

.contact-icon
{
	width           : 60px;
	height          : 60px;
	background      : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius   : 50%;
	display         : flex;
	align-items     : center;
	justify-content : center;
	flex-shrink     : 0;
	color           : white;
	font-size       : 1.5rem;
}

.contact-details
{
	flex : 1;
}

.contact-details h5
{
	font-size     : 1.1rem;
	font-weight   : 600;
	margin-bottom : 0.5rem;
	color         : var(--text-color);
}

.contact-details p
{
	margin      : 0;
	color       : var(--text-muted);
	line-height : 1.8;
}

.contact-details a
{
	color           : var(--primary-color);
	text-decoration : none;
	transition      : var(--transition);
}

.contact-details a:hover
{
	color           : #764ba2;
	text-decoration : underline;
}

@media (max-width : 992px)
{
	.contact-form-wrapper,
	.contact-info-card
	{
		padding : 2rem;
	}

	.contact-form-wrapper h2,
	.contact-info-wrapper h2
	{
		font-size : 1.5rem;
	}
}

@media (max-width : 576px)
{
	.contact-icon
	{
		width     : 50px;
		height    : 50px;
		font-size : 1.2rem;
	}

	.contact-details h5
	{
		font-size : 1rem;
	}
}

/* Prices Page */
.prices-hero
{
	background : linear-gradient(135deg, #e7524b 0%, #c6423c 100%);
	color      : white;
	padding    : 60px 0;
}

.pricing-card
{
	background    : var(--surface-color);
	border-radius : var(--border-radius);
	padding       : 2.5rem;
	text-align    : center;
	border        : 1px solid var(--surface-border);
	transition    : var(--transition);
	height        : 100%;
	position      : relative;
	box-shadow    : var(--surface-shadow);
}

.pricing-card:hover
{
	transform    : translateY(-10px);
	box-shadow   : 0 24px 60px rgba(0, 0, 0, 0.18);
	border-color : rgba(102, 126, 234, 0.45);
}

.pricing-popular
{
	border-color : rgba(102, 126, 234, 0.6);
	box-shadow   : 0 18px 50px rgba(102, 126, 234, 0.22);
}

.pricing-badge
{
	position       : absolute;
	top            : -12px;
	left           : 50%;
	transform      : translateX(-50%);
	padding        : 0.5rem 1.5rem;
	border-radius  : 50px;
	font-size      : 0.85rem;
	font-weight    : 600;
	text-transform : uppercase;
}

.badge-free
{
	background : linear-gradient(135deg, #0b9d6b 0%, #0a7d56 100%);
	color      : white;
}

.badge-popular
{
	background : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color      : white;
}

.pricing-plan-name
{
	font-size   : 1.5rem;
	font-weight : 600;
	margin      : 1.5rem 0 1rem;
	color       : var(--text-color);
}

.pricing-price
{
	margin : 2rem 0;
}

.price-currency
{
	font-size      : 1.5rem;
	vertical-align : top;
	color          : var(--text-muted);
}

.price-amount
{
	font-size   : 3.5rem;
	font-weight : 700;
	color       : var(--text-color);
}

.price-period
{
	font-size : 1rem;
	color     : var(--text-muted);
}

.pricing-feature
{
	color     : var(--text-muted);
	font-size : 1.1rem;
	margin    : 1rem 0;
}

.feature-category-card
{
	background    : var(--surface-color);
	border-radius : var(--border-radius);
	overflow      : hidden;
	box-shadow    : var(--surface-shadow);
	border        : 1px solid var(--surface-border);
	transition    : var(--transition);
}

.feature-category-card:hover
{
	border-color : var(--primary-color);
	box-shadow   : 0 10px 30px rgba(102, 126, 234, 0.15);
}

.category-title
{
	background  : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color       : white;
	padding     : 1.25rem 1.5rem;
	margin      : 0;
	font-size   : 1.3rem;
	font-weight : 600;
}

.feature-category-card table
{
	margin : 0;
}

.feature-category-card thead tr
{
	background : rgba(102, 126, 234, 0.12) !important;
}

.feature-category-card thead th
{
	background    : rgba(255, 255, 255, 0.85) !important;
	color         : var(--text-color) !important;
	border-bottom : 1px solid var(--surface-border);
	padding       : 1rem;
	font-weight   : 600;
}

.feature-category-card tbody tr
{
	transition : var(--transition);
}

.feature-category-card tbody tr:hover
{
	background : rgba(102, 126, 234, 0.03);
}

.feature-category-card td
{
	padding        : 1rem;
	vertical-align : middle;
	border-bottom  : 1px solid var(--surface-border);
}

.feature-category-card tbody tr:last-child td
{
	border-bottom : none;
}

.feature-name-cell
{
	font-weight : 500;
	color       : var(--text-color);
}

.plan-header
{
	font-size   : 0.9rem;
	font-weight : 600;
	color       : var(--text-color);
}

.plan-header small
{
	color       : var(--text-muted);
	font-weight : 500;
}

.plan-header.popular
{
	color : var(--primary-color);
}

.popular-column
{
	background : rgba(102, 126, 234, 0.05);
}

.popular-header
{
	background : rgba(102, 126, 234, 0.1);
	color      : var(--text-color);
}

/* Pricing Summary */
.pricing-summary-card
{
	background    : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color         : white;
	border-radius : var(--border-radius);
	padding       : 2rem;
	box-shadow    : 0 10px 40px rgba(102, 126, 234, 0.3);
}

.price-summary-row td
{
	padding        : 1rem;
	vertical-align : middle;
}

.price-summary-row h5
{
	color       : white;
	font-weight : 600;
}

.price-badge
{
	background      : rgba(255, 255, 255, 0.2);
	backdrop-filter : blur(10px);
	padding         : 0.75rem 1.5rem;
	border-radius   : 50px;
	font-size       : 1.5rem;
	font-weight     : 700;
	display         : inline-block;
}

.price-badge.free
{
	background : rgba(11, 157, 107, 0.3);
}

.price-badge.popular
{
	background : rgba(255, 255, 255, 0.3);
	box-shadow : 0 5px 20px rgba(255, 255, 255, 0.2);
}

/* Feature numeric badges */
.feature-qty-badge
{
    display       : inline-block;
    min-width     : 2.25rem;
    padding       : 0.25rem 0.6rem;
    border-radius : 999px;
    background    : var(--surface-elevated);
    color         : var(--text-color);
    font-weight   : 700;
    font-size     : 0.9rem;
    border        : 1px solid var(--surface-border);
}

.feature-qty-badge.is-green
{
    background : rgba(25, 135, 84, 0.15);
    color      : #198754;
    border-color: rgba(25, 135, 84, 0.35);
}

.feature-qty-badge.is-orange
{
    background : rgba(253, 126, 20, 0.15);
    color      : #fd7e14;
    border-color: rgba(253, 126, 20, 0.35);
}

.feature-qty-badge.is-red
{
    background : rgba(220, 53, 69, 0.15);
    color      : #dc3545;
    border-color: rgba(220, 53, 69, 0.35);
}

.feature-legend
{
	background    : var(--surface-color);
	padding       : 1.5rem;
	border-radius : var(--border-radius);
	box-shadow    : var(--surface-shadow);
	border        : 1px solid var(--surface-border);
}

@media (prefers-color-scheme : dark)
{
	.pricing-card
	{
		box-shadow : 0 18px 45px rgba(0, 0, 0, 0.55);
	}

	.feature-category-card thead tr
	{
		background : rgba(102, 126, 234, 0.32) !important;
	}

	.feature-category-card thead th
	{
		background : transparent !important;
		color      : #f4f6ff !important;
	}

	.pricing-card:hover
	{
		box-shadow : 0 26px 65px rgba(0, 0, 0, 0.6);
	}

	.feature-category-card tbody tr:hover,
	.popular-column
	{
		background : rgba(102, 126, 234, 0.14);
	}

	.popular-header
	{
		background : rgba(102, 126, 234, 0.18);
	}

	.alert-info
	{
		background-color : rgba(102, 126, 234, 0.12);
		border-color     : rgba(102, 126, 234, 0.35);
		color            : #d8e3ff;
	}
}

@media (max-width : 992px)
{
	.pricing-card
	{
		margin-bottom : 2rem;
	}

	.price-amount
	{
		font-size : 2.5rem;
	}

	.table-responsive
	{
		border-radius : var(--border-radius);
	}
}

/* Additional modern utilities and overrides */

/* Smooth scrolling */
html
{
	scroll-behavior : smooth;
}

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

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

::-webkit-scrollbar-thumb
{
	background    : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius : 10px;
}

::-webkit-scrollbar-thumb:hover
{
	background : linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Accessibility improvements */
a:focus,
button:focus
{
	outline        : 2px solid #667eea;
	outline-offset : 2px;
}

/* Loading animation (if needed) */
@keyframes spin
{
	from
	{
		transform : rotate(0deg);
	}
	to
	{
		transform : rotate(360deg);
	}
}

.loading
{
	animation : spin 1s linear infinite;
}

/* Print styles */
@media print
{
	.modern-navbar,
	.modern-footer
	{
		display : none;
	}
}

/* Account Area Styles */
/**
 * Panilux Account Area - Modern CSS
 *
 * Modern, responsive styles for account dashboard
 *
 * @version 1.0.0
 * @date 2024-10-27
 */

/* Dashboard Stats */
.dashboard-stats
{
	margin-bottom : 2rem;
}

.stat-card
{
	background      : var(--surface-color);
	border-radius   : var(--border-radius);
	padding         : 1.5rem;
	display         : flex;
	align-items     : center;
	gap             : 1.5rem;
	text-decoration : none;
	transition      : var(--transition);
	border          : 1px solid var(--surface-border);
	box-shadow      : var(--surface-shadow);
}

.stat-card:hover
{
	transform    : translateY(-5px);
	box-shadow   : 0 10px 30px rgba(0, 0, 0, 0.1);
	border-color : var(--primary-color);
}

.stat-card.active
{
	border-color : var(--primary-color);
	background   : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card.active .stat-icon,
.stat-card.active .stat-label,
.stat-card.active .stat-value
{
	color : white;
}


.stat-icon
{
	width           : 60px;
	height          : 60px;
	background      : var(--surface-elevated);
	border-radius   : 50%;
	display         : flex;
	align-items     : center;
	justify-content : center;
	font-size       : 1.8rem;
	color           : var(--primary-color);
	flex-shrink     : 0;
}

.stat-card.active .stat-icon
{
	background : rgba(255, 255, 255, 0.2);
}

.stat-content
{
	flex : 1;
}

.stat-label
{
	color         : var(--text-muted);
	font-size     : 0.9rem;
	font-weight   : 500;
	margin-bottom : 0.25rem;
}

.stat-value
{
	color       : var(--dark-color);
	font-size   : 2rem;
	font-weight : 700;
	line-height : 1;
}

/* Category Pills */
.category-tabs-wrapper
{
	background    : var(--surface-color);
	border-radius : var(--border-radius);
	padding       : 1rem;
	box-shadow    : var(--surface-shadow);
	border        : 1px solid var(--surface-border);
}

.category-pills
{
	margin-bottom : 0;
}


.category-pills .nav-link
{
	background    : transparent;
	color         : var(--primary-color);
	border        : 1px solid var(--surface-border);
	border-radius : 50px;
	padding       : 0.5rem 1rem;
	font-weight   : 500;
	transition    : var(--transition);
	white-space   : nowrap;
	margin-right  : 0.5rem;
}

.category-pills .nav-link:hover
{
	background   : var(--surface-elevated);
	border-color : var(--primary-color);
	color        : var(--primary-color);
}

.category-pills .nav-link.active
{
	background   : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color        : white;
	border-color : transparent;
}

.category-pills .nav-link .btn-close-white
{
	opacity   : 0.7;
	font-size : 0.7rem;
}

.category-pills .nav-link .btn-close-white:hover
{
	opacity : 1;
}

.add-category-btn
{
	background   : var(--surface-elevated) !important;
	color        : var(--primary-color) !important;
	border-color : var(--primary-color) !important;
}

.add-category-btn:hover
{
	background : var(--primary-color) !important;
	color      : white !important;
}

/* Licenses Table */


.table-modern
{
	margin-bottom : 0;
	background    : var(--surface-color);
	color         : var(--text-color);
	border-radius : var(--border-radius);
	overflow      : hidden;
}

.table-modern thead
{
	background    : var(--surface-elevated);
	color         : var(--text-color);
	border-bottom : 2px solid var(--surface-border);
}

.table-modern thead th
{
	padding        : 1rem 0.75rem;
	font-weight    : 600;
	border         : none;
	white-space    : nowrap;
	color          : var(--text-color);
	letter-spacing : 0.02em;
}


.table-modern tr[style*='#DFF0D8']
{
	background : rgba(11, 157, 107, 0.12) !important;
	box-shadow : none !important;
}

.table-modern tr[style*='#DEDEDE']
{
	background : var(--surface-elevated) !important;
	box-shadow : none !important;
}

.table-modern tr[style*='border: 2px dashed #0A0']
{
	box-shadow : 0 0 0 2px rgba(11, 157, 107, 0.45) inset !important;
	border     : none !important;
}

.table-modern tbody
{
	background : var(--surface-color);
}

.table-modern tbody tr
{
	transition    : background 0.2s ease, color 0.2s ease;
	border-bottom : 1px solid var(--surface-border);
}

.table-modern tbody tr:nth-of-type(even)
{
	background : var(--surface-elevated);
}

.table-modern tbody tr:hover
{
	background : rgba(102, 126, 234, 0.08);
}

.table-modern tbody td
{
	padding        : 1.05rem 0.9rem;
	vertical-align : middle;
	color          : var(--text-color);
}

.table-modern tbody td small
{
	color : var(--text-muted);
}

.table-modern tbody td .badge
{
	padding       : 0.3rem 0.6rem;
	font-size     : 0.75rem;
	border-radius : 999px;
}


.license_rows
{
	background : var(--surface-color) !important;
	transition : background 0.2s ease, box-shadow 0.2s ease;
}

.license-row-valid
{
	background : rgba(11, 157, 107, 0.12) !important;
}

.license-row-expired
{
	background : var(--surface-elevated) !important;
}

.license-row-highlight
{
	box-shadow : 0 0 0 2px rgba(11, 157, 107, 0.45) inset;
}

.license-info-cell
{
	vertical-align : top;
}

.license-meta
{
	margin-top  : 0.5rem;
	display     : flex;
	flex-wrap   : wrap;
	gap         : 0.5rem;
	align-items : center;
}

.license-type-badge
{
	background    : linear-gradient(135deg, #0b9d6b 0%, #0a7d56 100%);
	color         : white;
	border-radius : 999px;
	font-size     : 0.75rem;
	padding       : 0.35rem 0.75rem;
}

.license-comment-input
{
	max-width : 320px;
}

.license-comment-toggle,
.license-ip-toggle
{
	color           : var(--primary-color);
	text-decoration : none;
	font-weight     : 500;
}

.license-comment-toggle:hover,
.license-ip-toggle:hover
{
	text-decoration : underline;
}

.license-usage-cell
{
	width          : 200px;
	vertical-align : top;
}

.license-server-meta
{
	font-size  : 0.85rem;
	margin-top : 0.5rem;
}

.license-ip-input
{
	max-width : 160px;
}

.license-actions
{
	display     : flex;
	flex-wrap   : wrap;
	gap         : 0.4rem;
	align-items : center;
}

.license-metrics
{
	display        : flex;
	flex-direction : column;
	gap            : 0.5rem;
}

.license-date-meta
{
	font-size  : 0.75rem;
	color      : var(--text-muted);
	text-align : right;
}


.license_key[style]
{
	background    : var(--surface-color) !important;
	border-radius : 6px !important;
	font-family   : 'Courier New', monospace !important;
	font-size     : 1rem !important;
	padding       : 0.45rem 0.65rem !important;
	border        : 1px solid var(--surface-border) !important;
	color         : var(--text-color) !important;
}

/* License Key Display */
.license_key
{
	background    : var(--surface-elevated) !important;
	border        : 1px solid var(--surface-border);
	border-radius : 8px !important;
	font-family   : 'Courier New', monospace !important;
	font-size     : 1rem !important;
	padding       : 0.75rem 1rem !important;
	cursor        : pointer;
	transition    : var(--transition);
	display       : inline-block;
	font-weight   : 600;
}

.license_key:hover
{
	border-color : var(--primary-color);
	background   : var(--surface-color) !important;
}

/* License Status Badge */
.label
{
	display        : inline-block;
	padding        : 0.35em 0.65em;
	font-size      : 0.85rem;
	font-weight    : 600;
	line-height    : 1;
	color          : #fff;
	text-align     : center;
	white-space    : nowrap;
	vertical-align : baseline;
	border-radius  : 6px;
}

.label-success
{
	background : linear-gradient(135deg, #0b9d6b 0%, #0a7d56 100%);
}

/* Buttons Modern */
.btn-mini
{
	padding       : 0.4rem 0.8rem;
	font-size     : 0.85rem;
	border-radius : 6px;
	margin        : 0 0.25rem;
}

/* Auth Pages */
.auth-section
{
	min-height : 80vh;
	padding    : 80px 0;
	background : linear-gradient(135deg, rgba(245, 247, 250, 1) 0%, rgba(195, 207, 226, 1) 100%);
}

.auth-card
{
	background    : var(--surface-color);
	border-radius : var(--border-radius);
	box-shadow    : var(--surface-shadow);
	overflow      : hidden;
	border        : 1px solid var(--surface-border);
}

.auth-tabs
{
	border-bottom : 1px solid var(--surface-border);
	padding       : 0 2rem;
	background    : var(--surface-elevated);
}

.auth-tabs .nav-link
{
	border        : none;
	color         : var(--text-muted);
	font-weight   : 600;
	padding       : 1.25rem 2rem;
	transition    : var(--transition);
	border-bottom : 3px solid transparent;
}

.auth-tabs .nav-link:hover
{
	color      : var(--primary-color);
	background : transparent;
}

.auth-tabs .nav-link.active
{
	color               : var(--primary-color);
	background          : transparent;
	border-bottom-color : var(--primary-color);
}

.auth-tab-content
{
	padding    : 3rem;
	background : var(--surface-color);
}

.auth-title
{
	font-size   : 2rem;
	font-weight : 700;
	color       : var(--text-color);
	text-align  : center;
}

.input-group-text
{
	background   : var(--surface-elevated);
	border       : 1px solid var(--surface-border);
	border-right : none;
}

.input-group .form-control
{
	border-left : none;
}

.auth-modal .modal-content
{
	background : var(--surface-color);
	border     : 1px solid var(--surface-border);
}

.auth-modal .modal-header
{
	border-bottom : 1px solid var(--surface-border);
}

.auth-modal .modal-footer
{
	border-top : 1px solid var(--surface-border);
}


@media (prefers-color-scheme : dark)
{
	.table-modern thead
	{
		background : rgba(43, 45, 56, 0.9);
	}

	.table-modern thead th
	{
		color       : rgba(255, 255, 255, 0.92);
		text-shadow : 0 1px 2px rgba(0, 0, 0, 0.4);
	}

	.auth-section
	{
		background : linear-gradient(135deg, #1f1f25 0%, #2c2f3a 100%);
	}

	.auth-tabs
	{
		background : rgba(255, 255, 255, 0.02);
	}

	.auth-tabs .nav-link.active,
	.auth-tabs .nav-link:hover
	{
		color : #8fb3ff;
	}

	.auth-card
	{
		box-shadow : 0 22px 55px rgba(0, 0, 0, 0.6);
	}

	.account-nav
	{
		box-shadow : 0 22px 55px rgba(0, 0, 0, 0.6);
	}

	.account-nav-item.text-danger:hover
	{
		background : rgba(220, 53, 69, 0.25);
		color      : #ff6b6b;
	}
}

@media (max-width : 768px)
{
	.auth-section
	{
		padding : 40px 0;
	}

	.auth-tab-content
	{
		padding : 2rem 1.5rem;
	}

	.auth-tabs
	{
		padding : 0 1rem;
	}

	.auth-tabs .nav-link
	{
		padding   : 1rem;
		font-size : 0.9rem;
	}

	.auth-title
	{
		font-size : 1.5rem;
	}
}

/* Account Layout */
.account-container
{
	display        : flex;
	flex-direction : column;
	gap            : 1.5rem;
	padding        : 2rem 0;
}

.account-topbar
{
	width : 100%;
}

.account-main
{
	flex      : 1;
	min-width : 0;
}

.account-nav
{
	background     : var(--surface-color);
	border-radius  : var(--border-radius);
	padding        : 0.5rem 1rem;
	box-shadow     : var(--surface-shadow);
	border         : 1px solid var(--surface-border);
	display        : flex;
	flex-direction : column;
	gap            : 0.75rem;
}

.account-nav-links
{
	display         : flex;
	flex-wrap       : wrap;
	align-items     : center;
	gap             : 0.75rem;
	justify-content : flex-start;
}

.account-nav-links-secondary
{
	display         : flex;
	flex-wrap       : wrap;
	align-items     : center;
	gap             : 0.75rem;
	justify-content : flex-start;
}

.account-nav-item
{
	display         : inline-flex;
	align-items     : center;
	gap             : 0.5rem;
	padding         : 0.65rem 1rem;
	color           : var(--text-color);
	text-decoration : none;
	border-radius   : var(--border-radius);
	border          : 1px solid transparent;
	transition      : var(--transition);
	font-weight     : 600;
	white-space     : nowrap;
}

.account-nav-item:hover
{
	background : var(--surface-elevated);
	color      : var(--primary-color);
}

.account-nav-item.active
{
	background   : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color        : white;
	border-color : transparent;
}

.account-nav-item.active:hover
{
	color : white;
}

.account-nav-item.text-danger:hover,
.account-nav-item.account-nav-item-danger:hover
{
	background   : rgba(220, 53, 69, 0.15);
	color        : #dc3545;
	border-color : rgba(220, 53, 69, 0.25);
}

@media (min-width : 576px)
{
	.account-nav-item
	{
		white-space : normal;
	}
}

@media (min-width : 768px)
{
	.account-nav
	{
		flex-direction : row;
		align-items    : center;
	}

	.account-nav-links
	{
		gap : 1rem;
	}

	.account-nav-links-secondary
	{
		margin-left     : auto;
		justify-content : flex-end;
	}
}

@media (max-width : 575.98px)
{
	.account-nav-links,
	.account-nav-links-secondary
	{
		flex-direction : column;
		align-items    : stretch;
	}

	.account-nav-item
	{
		width           : 100%;
		text-align      : center;
		justify-content : center;
	}
}

.account-nav-user
{
	background   : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color        : #fff;
	border-color : transparent;
}

.account-nav-user:hover
{
	color   : #fff;
	opacity : 0.9;
}

.account-subnav
{
	display     : flex;
	flex-wrap   : wrap;
	align-items : center;
	gap         : 0.75rem;
	margin      : 0.5rem 0 1.25rem;
}

.account-subnav-link
{
	display         : inline-flex;
	align-items     : center;
	gap             : 0.5rem;
	padding         : 0.6rem 1rem;
	border-radius   : 999px;
	border          : 1px solid var(--surface-border);
	background      : var(--surface-color);
	color           : var(--text-color);
	text-decoration : none;
	font-weight     : 600;
	transition      : var(--transition);
}

.account-subnav-link:hover
{
	color        : var(--primary-color);
	border-color : var(--primary-color);
}

.account-subnav-link.active
{
	background   : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color        : #fff;
	border-color : transparent;
}

.account-subnav-text
{
	display     : inline-flex;
	align-items : center;
}

.account-subnav-badge
{
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	min-width       : 28px;
	padding         : 0.2rem 0.65rem;
	border-radius   : 999px;
	background      : var(--surface-elevated);
	color           : var(--text-muted);
	font-size       : 0.85rem;
	font-weight     : 600;
	transition      : var(--transition);
}

.account-subnav-badge.has-value
{
	color      : var(--primary-color);
	background : rgba(102, 126, 234, 0.12);
}

.account-subnav-link.active .account-subnav-badge
{
	background : rgba(255, 255, 255, 0.2);
	color      : #fff;
}

.account-tabs
{
	display       : flex;
	flex-wrap     : wrap;
	gap           : 0.75rem;
	margin-bottom : 1.5rem;
}

.account-tab
{
	display       : inline-flex;
	align-items   : center;
	border-radius : var(--border-radius);
	border        : 1px solid var(--surface-border);
	background    : var(--surface-color);
	box-shadow    : var(--surface-shadow);
	color         : var(--text-color);
	transition    : var(--transition);
}

.account-tab:hover
{
	border-color : var(--primary-color);
	color        : var(--primary-color);
}

.account-tab-link
{
	display         : inline-flex;
	align-items     : center;
	gap             : 0.45rem;
	padding         : 0.55rem 0.9rem;
	color           : inherit;
	text-decoration : none;
	font-weight     : 600;
	white-space     : nowrap;
}

.account-tab-count
{
	padding       : 0.1rem 0.45rem;
	border-radius : 999px;
	background    : rgba(102, 126, 234, 0.12);
	color         : var(--primary-color);
	font-size     : 0.8rem;
}

.account-tab.active
{
	background   : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-color : transparent;
	color        : #fff;
	box-shadow   : 0 12px 30px rgba(102, 126, 234, 0.25);
}

.account-tab.active .account-tab-count
{
	background : rgba(255, 255, 255, 0.25);
	color      : #fff;
}

.account-tab-closable .account-tab-link
{
	padding-right : 0.5rem;
}

.account-tab-close
{
	border          : none;
	background      : transparent;
	color           : inherit;
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	padding         : 0.4rem;
	margin-right    : 0.35rem;
	border-radius   : 50%;
	cursor          : pointer;
	transition      : var(--transition);
}

.account-tab-close:hover
{
	background : rgba(102, 126, 234, 0.12);
	color      : var(--primary-color);
}

.account-tab.active .account-tab-close:hover
{
	background : rgba(255, 255, 255, 0.2);
	color      : #fff;
}

.account-tab-add
{
	border-style : dashed;
	border-color : rgba(102, 126, 234, 0.4);
	background   : rgba(102, 126, 234, 0.05);
	color        : var(--primary-color);
}

.account-tab-add .account-tab-link
{
	color : inherit;
}

.account-tab-add:hover
{
	background : rgba(102, 126, 234, 0.12);
	color      : var(--primary-color);
}

@media (max-width : 575.98px)
{
	.account-subnav
	{
		flex-direction : column;
		align-items    : stretch;
	}

	.account-subnav-link
	{
		width           : 100%;
		justify-content : space-between;
	}

	.account-tabs
	{
		flex-direction : column;
	}

	.account-tab
	{
		justify-content : space-between;
	}
}

/* Billing Page */
.billing-page-wrapper
{
	background    : var(--surface-color);
	border-radius : var(--border-radius);
	padding       : 2.5rem;
	box-shadow    : var(--surface-shadow);
	border        : 1px solid var(--surface-border);
}

.page-heading
{
	font-size   : 2rem;
	font-weight : 700;
	color       : var(--text-color);
}

.billing-section-title
{
	font-size      : 1.2rem;
	font-weight    : 600;
	color          : var(--text-color);
	margin-bottom  : 1rem;
	padding-bottom : 0.5rem;
	border-bottom  : 2px solid var(--surface-border);
}

.billing-page-wrapper .form-floating > .form-select,
.billing-page-wrapper .form-floating > .form-control
{
	min-height : 58px;
}

/* Credit Cards */
.credit-cards-wrapper
{
	max-width : 900px;
}

.section-title
{
	font-size   : 1.3rem;
	font-weight : 600;
	color       : var(--text-color);
}

.credit-card-item
{
	background    : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color         : white;
	border-radius : var(--border-radius);
	padding       : 1.5rem;
	box-shadow    : 0 10px 30px rgba(102, 126, 234, 0.3);
	transition    : var(--transition);
}

.credit-card-item:hover
{
	transform  : translateY(-5px);
	box-shadow : 0 15px 40px rgba(102, 126, 234, 0.4);
}

.card-header-row
{
	display       : flex;
	align-items   : center;
	margin-bottom : 1rem;
}

.card-type-icon
{
	font-size    : 1.5rem;
	margin-right : 0.5rem;
}

.card-type-badge
{
	background    : rgba(255, 255, 255, 0.2);
	padding       : 0.25rem 0.75rem;
	border-radius : 50px;
	font-size     : 0.75rem;
	font-weight   : 600;
}

.card-number
{
	font-family    : 'Courier New', monospace;
	font-size      : 1.3rem;
	font-weight    : 600;
	letter-spacing : 2px;
	margin         : 1rem 0;
}

.card-holder
{
	font-size      : 0.9rem;
	opacity        : 0.9;
	text-transform : uppercase;
}

.bank-info
{
	font-size : 0.85rem;
}

.card-actions
{
	display : flex;
	gap     : 0.5rem;
}

.add-card-section
{
	background    : var(--surface-color);
	border-radius : var(--border-radius);
	padding       : 2.5rem;
	box-shadow    : var(--surface-shadow);
	border        : 1px solid var(--surface-border);
}

.empty-state
{
	text-align    : center;
	padding       : 3rem 2rem;
	background    : var(--surface-color);
	border-radius : var(--border-radius);
	box-shadow    : var(--surface-shadow);
	border        : 1px solid var(--surface-border);
}

.empty-state i
{
	font-size     : 4rem;
	color         : var(--text-muted);
	margin-bottom : 1rem;
}

.empty-state h4
{
	font-size     : 1.5rem;
	font-weight   : 600;
	color         : var(--text-color);
	margin-bottom : 0.5rem;
}

.empty-state p
{
	color : var(--text-muted);
}

/* Transactions */

.license-keys-row
{
	background : var(--surface-elevated);
	border-top : none !important;
}

.license-keys-cell
{
	padding : 1rem !important;
}

.license-keys-wrapper
{
	display     : flex;
	align-items : center;
	flex-wrap   : wrap;
	gap         : 0.5rem;
}

.license-key-badge
{
	background    : var(--surface-color);
	border        : 1px solid var(--surface-border);
	padding       : 0.5rem 1rem;
	border-radius : 6px;
	font-family   : 'Courier New', monospace;
	font-size     : 0.9rem;
	font-weight   : 600;
	display       : inline-block;
}

@media (max-width : 992px)
{
	.billing-page-wrapper,
	.add-card-section
	{
		padding : 1.5rem;
	}
}

@media (max-width : 768px)
{
	.credit-card-item
	{
		margin-bottom : 1rem;
	}
}

/* Buy License */
.buy-page-content
{
	margin : 0 auto;
}

.discount-badge
{
    background    : linear-gradient(135deg, #0b9d6b 0%, #0a7d56 100%);
    color         : white;
    padding       : 1rem 1.5rem;
    border-radius : var(--border-radius);
    text-align    : center;
    font-size     : 1.1rem;
}

/* New compact discount card shown on Buy page */
.discount-card
{
    background    : linear-gradient(135deg, #0b9d6b 0%, #0a7d56 100%);
    color         : #fff;
    border-radius : var(--border-radius);
    padding       : 1.25rem 1rem;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    justify-content: center;
    border        : 1px solid rgba(255,255,255,0.15);
    box-shadow    : 0 10px 30px rgba(11, 157, 107, 0.25);
}

.discount-card .discount-icon
{
    font-size : 1.5rem;
    opacity   : 0.9;
}

.discount-card .discount-label
{
    margin-top  : 0.25rem;
    font-weight : 600;
    opacity     : 0.9;
}

.discount-card .discount-value
{
    font-size   : 2.25rem;
    font-weight : 800;
    line-height : 1.1;
}

.purchase-form-card
{
	background    : var(--surface-color);
	border-radius : var(--border-radius);
	padding       : 2.5rem;
	box-shadow    : var(--surface-shadow);
	border        : 1px solid var(--surface-border);
}

.package-card,
.period-card
{
    background    : var(--surface-color);
    border        : 2px solid var(--surface-border);
    border-radius : var(--border-radius);
    padding       : 1.5rem;
    cursor        : pointer;
    transition    : var(--transition);
    display       : flex;
    flex-direction: column;
    align-items   : center;
    justify-content: center;
    height        : 100%;
    text-align    : center;
}

.package-card:hover,
.period-card:hover
{
	border-color : var(--primary-color);
	transform    : translateY(-5px);
	box-shadow   : 0 10px 30px rgba(102, 126, 234, 0.2);
}

.btn-check:checked + .package-card,
.btn-check:checked + .period-card
{
	background   : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-color : transparent;
	color        : white;
}

.package-name,
.period-name
{
	font-size     : 1.3rem;
	font-weight   : 600;
	margin-bottom : 1rem;
	color         : var(--text-color);
}

.btn-check:checked + .package-card .package-name,
.btn-check:checked + .package-card .current-price,
.btn-check:checked + .package-card .original-price,
.btn-check:checked + .period-card .period-name
{
	color : white;
}

.package-price
{
	margin-top : auto;
}

.original-price
{
	text-decoration : line-through;
	color           : var(--text-muted);
	font-size       : 0.9rem;
	display         : block;
	margin-bottom   : 0.25rem;
}

.current-price
{
	font-size   : 2rem;
	font-weight : 700;
	color       : var(--primary-color);
}

.current-price small
{
	font-size : 1rem;
}

.period-badge
{
	background    : rgba(255, 255, 255, 0.2);
	color         : white;
	padding       : 0.5rem 1rem;
	border-radius : 50px;
	font-size     : 0.85rem;
	font-weight   : 600;
	margin-top    : 0.75rem;
	display       : inline-block;
}

.btn-check:checked + .period-card .period-badge
{
	background : rgba(255, 255, 255, 0.3);
}

.price-row
{
	display         : flex;
	justify-content : space-between;
	align-items     : center;
	margin-bottom   : 1rem;
}

.price-row:last-child
{
	margin-bottom : 0;
}

.price-label
{
	font-size : 1rem;
	color     : var(--text-muted);
}

.price-value
{
	font-size   : 1.2rem;
	font-weight : 600;
	color       : var(--text-color);
}

.total-row .price-label,
.total-row .price-value
{
	font-size : 1.3rem;
}

.total-value
{
	color     : var(--primary-color);
	font-size : 2rem !important;
}

@media (max-width : 768px)
{
	.purchase-form-card
	{
		padding : 1.5rem;
	}

	.package-card,
	.period-card
	{
		margin-bottom : 1rem;
	}
}

/* Renew License */
.renew-page-content
{
	max-width : 900px;
	margin    : 0 auto;
}

.license-info-card
{
	background    : linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color         : white;
	border-radius : var(--border-radius);
	padding       : 2rem;
	box-shadow    : 0 10px 40px rgba(102, 126, 234, 0.3);
}

.license-key-display,
.license-type-badge
{
	background      : rgba(255, 255, 255, 0.2);
	backdrop-filter : blur(10px);
	border-radius   : 8px;
	padding         : 0.75rem 1.5rem;
}

.license-key-display
{
	font-family    : 'Courier New', monospace;
	font-size      : 1.2rem;
	font-weight    : 600;
	letter-spacing : 1px;
	margin         : 1rem 0;
}

.license-type-badge
{
	border-radius : 50px;
	font-size     : 1.1rem;
	font-weight   : 600;
	display       : inline-block;
}

.current-package-display
{
	background    : var(--surface-elevated);
	border-radius : var(--border-radius);
	padding       : 1.5rem;
	font-size     : 1.2rem;
	font-weight   : 600;
	display       : flex;
	align-items   : center;
}

.package-name-text
{
	color : var(--text-color);
}

.renew-form-card
{
	background    : var(--surface-color);
	border-radius : var(--border-radius);
	padding       : 2.5rem;
	box-shadow    : var(--surface-shadow);
	border        : 1px solid var(--surface-border);
}

/* My Account */
.my-account-wrapper
{
	max-width : 800px;
}

.account-info-card
{
	background    : var(--surface-color);
	border-radius : var(--border-radius);
	padding       : 2.5rem;
	box-shadow    : var(--surface-shadow);
	border        : 1px solid var(--surface-border);
	margin-bottom : 2rem;
}

.card-section-title
{
	font-size      : 1.3rem;
	font-weight    : 600;
	color          : var(--text-color);
	margin-bottom  : 1.5rem;
	padding-bottom : 1rem;
	border-bottom  : 2px solid var(--surface-border);
}

.info-display-row
{
	display         : flex;
	justify-content : space-between;
	align-items     : center;
	padding         : 1rem;
	background      : var(--surface-elevated);
	border-radius   : 8px;
}

.info-label
{
	font-weight : 500;
	color       : var(--text-muted);
}

.info-value
{
	font-weight : 600;
	color       : var(--text-color);
	font-size   : 1.1rem;
}

@media (max-width : 768px)
{
	.account-info-card
	{
		padding : 1.5rem;
	}
}

/* Responsive Tables */


.table-modern
{
	font-size : 0.9rem;
}

.table-modern tbody td
{
	padding : 0.75rem 0.5rem;
}

.license_key
{
	font-size : 0.85rem !important;
}

.table-modern
{
	min-width : 600px;
}