/* DVB Dream site styles consolidated October 21, 2025.
 * WHY: centralize typography, spacing, and color tokens for the legacy frontend.
 */
:root {
	--font-family-sans: 'Inter', 'Work Sans', 'Inter var', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	--font-family-serif: 'Georgia', serif;
	--font-weight-regular: 400;
	--font-weight-semibold: 600;
	--font-size-base: 1rem;
	--font-size-sm: 0.875rem;
	--font-size-xs: 0.75rem;
	--font-size-h4: 1.125rem;
	--font-size-h3: 1.375rem;
	--font-size-h2: 1.75rem;
	--font-size-h1: 2rem;
	--line-height-base: 1.6;
	--line-height-heading: 1.3;
	--color-background: #fbfae6;
	--color-surface: #ffffff;
	--color-border-subtle: rgba(63, 70, 84, 0.08);
	--color-text-primary: #3f3f46;
	--color-text-strong: #333333;
	--color-text-muted: #616161;
	--color-text-inverse: #ffffff;
	--color-accent: #33aaaa;
	--color-accent-secondary: #2980b9;
	--color-accent-dark: #207d8d;
	--color-nav: #444444;
	--shadow-soft: 0 0.5rem 1.5rem rgba(17, 24, 39, 0.12);
	--shadow-outline: 0 0 0 0.125rem rgba(232, 230, 230, 1);
	--radius-sm: 0.5rem;
	--radius-md: 0.75rem;
	--radius-lg: 1rem;
	--space-2xs: 0.3125rem;
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-xxl: 3rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 100%;
}

body {
	margin: 0;
	font-family: var(--font-family-sans);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-text-primary);
	background: var(--color-background) url('../images/bg.jpg') repeat;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.theme-legacy {
	color: var(--color-text-primary);
}

.theme-legacy p,
.theme-legacy div {
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-text-muted);
}

.theme-legacy h1,
.theme-legacy h2,
.theme-legacy h3,
.theme-legacy h4,
.theme-legacy h5,
.theme-legacy h6 {
	font-family: var(--font-family-sans);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	color: var(--color-text-primary);
	margin-bottom: var(--space-sm);
}

.theme-legacy h1 {
	font-size: var(--font-size-h1);
}

.theme-legacy h2 {
	font-size: var(--font-size-h2);
}

.theme-legacy h3 {
	font-size: var(--font-size-h3);
}

.theme-legacy h4 {
	font-size: var(--font-size-h4);
}

.theme-legacy h5 {
	font-size: var(--font-size-base);
}

.theme-legacy h6 {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.theme-legacy small {
	font-size: var(--font-size-xs);
}

.theme-legacy a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

.theme-legacy a:hover,
.theme-legacy a:focus {
	color: var(--color-accent-secondary);
}

.page-header {
	margin-top: 0;
	margin-bottom: var(--space-lg);
	border-bottom: none;
	padding-bottom: 0;
}

.panel-body {
	padding-top: 0;
}

.featureImg {
	margin-bottom: var(--space-lg);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}

.margin5 {
	margin: var(--space-2xs);
}

.margintop5 {
	margin-top: var(--space-2xs);
}

.fontsize70percent {
	font-size: 0.7em;
}

.box-shadow {
	box-shadow: var(--shadow-outline);
}


/*/////////////////////////////////////////*/




.navbar-custom {
	  background-color:var(--color-nav);
    color:var(--color-text-inverse);
  	border-radius:0;
}


.navbar-custom .navbar-nav > li > a {
  	color:var(--color-text-inverse);
  	padding-left:1.25rem;
  	padding-right:1.25rem;
	font-size: var(--font-size-sm);
}
.navbar-custom .navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
    color: var(--color-text-primary);
	background-color:transparent;
}

.navbar-custom .navbar-nav > li > a:hover,
.nav > li > a:focus {
    text-decoration: none;
    background-color: var(--color-accent);
}

.navbar-custom .navbar-brand {
  	color:rgba(255, 255, 255, 0.9);
}
.navbar-custom .navbar-toggle {
  	background-color:rgba(255, 255, 255, 0.9);
}
.navbar-custom .icon-bar {
  	background-color:var(--color-accent);
}


/*//////////////////////////////////////*/
label{display:block;}
/*label {clear:both;float:left;width:18.75rem;}*/


.nav-pills  .nav-stacked .nav {
    background-color:var(--color-nav);
    color:var(--color-text-inverse);
    border-radius:0;
}

.navbar-pills  > li > a {
    color:var(--color-text-inverse);
    padding-left:1.25rem;
    padding-right:1.25rem;
    font-size: var(--font-size-sm);
}
.navbar-pills  > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: var(--color-text-primary);
    /* background-color:transparent; */
}

.navbar-pills > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: var(--color-accent);
}
.navbar-pills .navbar-brand {
    color:rgba(255, 255, 255, 0.9);
}
.navbar-pills .navbar-toggle {
    background-color:rgba(255, 255, 255, 0.9);
}
.navbar-pills .icon-bar {
    background-color:var(--color-accent);
}




/* Add these new styles */

.side-nav-panel {
    background: linear-gradient(180deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.95) 90%);
    border-radius: var(--radius-md);
    box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.4);
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-xl);
    backdrop-filter: blur(0.5rem);
    border: 0.0625rem solid rgba(148, 163, 184, 0.25);
}

.main-nav {
    margin: 0;
    padding: 0 var(--space-sm);
}

.main-nav .nav-item {
    margin: 0;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
}

.main-nav .nav-item:last-child {
    border-bottom: none;
}

/* WHY: keep long-form guides readable with consistent, smaller headings */
.television-on-computer .heading-lg {
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 600;
}

.television-on-computer .heading-md {
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 600;
}

.television-on-computer .heading-sm {
    font-size: 1.0625rem;
    line-height: 1.5;
    font-weight: 600;
}

.main-nav .nav-link {
    color: rgba(248, 250, 252, 0.85);
    padding: 0.75rem 1.25rem 0.75rem 2.1875rem;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    font-size: var(--font-size-sm);
    position: relative;
    background: transparent;
    border-radius: var(--radius-sm);
}

/* Add arrow using pseudo-element */
.main-nav .nav-link:before {
    content: '';
    position: absolute;
    left: 0.9375rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.3125rem 0 0.3125rem 0.5rem;
    border-color: transparent transparent transparent rgba(248, 250, 252, 0.55);
    transition: all 0.25s ease;
}

/* Style arrow on hover */
.main-nav .nav-link:hover:before {
    border-color: transparent transparent transparent rgba(248, 250, 252, 0.95);
    left: 1.125rem;
}

/* Style arrow for active link */
.main-nav .nav-link.active:before,
.main-nav .nav-item.active .nav-link:before {
    border-color: transparent transparent transparent var(--color-text-inverse);
}

.main-nav .nav-link i {
    margin-right: 0.5rem;
    margin-left: 0.3125rem;
    width: 1rem;
    text-align: center;
    opacity: 0.8;
}

.nav-divider {
    height: 0.0625rem;
    background: rgba(255, 255, 255, 0.15);
    margin: 0.5rem 0;
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus {
    color: var(--color-text-inverse) !important;
    background: rgba(51, 170, 170, 0.18);
    transform: translateX(0.125rem);
}

.main-nav .nav-item.active > .nav-link,
.main-nav .nav-item.active > .nav-link:hover,
.main-nav .nav-item.active > .nav-link:focus {
    color: var(--color-text-inverse) !important;
    background: rgba(51, 170, 170, 0.32);
    font-weight: var(--font-weight-semibold);
    transform: translateX(0);
}

/* Override Bootstrap nav-pills styles */
.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
    background-color: rgba(51, 170, 170, 0.9);
    color: var(--color-text-inverse) !important;
}

/* Marketing Banner Styles */
.marketing-banner {
    background: linear-gradient(135deg, rgba(51, 170, 170, 0.95) 0%, rgba(41, 128, 185, 0.95) 100%);
    border-radius: 0.5rem;
    padding: 1.5625rem;
    margin: 1.25rem 0 1.875rem;
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.marketing-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 55%),
                radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.15), transparent 60%);
    opacity: 0.85;
    z-index: 1;
}

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

.banner-title {
    color: var(--color-text-inverse);
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.625rem;
    text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

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

.marketing-banner .banner-subtitle {
    font-size: 0.75rem !important;
    margin-bottom: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.0312rem;
    background: linear-gradient(
        270deg,
        #ff6b6b,
        #4ecdc4,
        #45b7d1,
        #96c93d,
        #e056fd,
        #20bf6b,
        #eb4d4b,
        #f0932b
    );
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: bannerSubtitlePulse 10s ease infinite;
    text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.35);
}

.marketing-banner .banner-text {
    color: var(--color-text-inverse) !important;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    text-shadow: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.35);
}

.banner-cta {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-text-inverse) !important;
    padding: 0.625rem 1.5625rem;
    border-radius: 1.5625rem;
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: all 0.3s ease;
    border: 0.125rem solid transparent;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

.marketing-banner .banner-cta,
.marketing-banner .banner-cta:link,
.marketing-banner .banner-cta:visited {
    color: var(--color-text-inverse) !important;
    text-decoration: none;
}

.marketing-banner .banner-cta:hover,
.marketing-banner .banner-cta:focus,
.marketing-banner .banner-cta:active {
    background: var(--color-accent-dark);
    color: var(--color-text-inverse) !important;
    text-decoration: none;
    transform: translateY(-0.125rem);
    border-color: var(--color-accent);
}

/* Add hover effect to the entire banner */
.marketing-banner:hover {
    transform: translateY(-0.125rem);
    transition: transform 0.3s ease;
}

.content-panel {
    background: var(--color-surface);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.12);
    margin-bottom: var(--space-xl);
    overflow: hidden;
}

.content-panel .panel-heading {
    background: transparent;
    border: none;
}

.content-panel .panel-body {
    padding: var(--space-xl);
}

.content-shell {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
}

.content-heading {
    margin-bottom: var(--space-lg);
    border-bottom: 0.0625rem solid var(--color-border-subtle);
    padding-bottom: var(--space-sm);
}

.content-heading__title {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-strong);
}

.content-heading__subtitle {
    margin: var(--space-xs) 0 0;
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

.content-entry > *:first-child {
    margin-top: 0;
}

.content-entry > *:last-child {
    margin-bottom: 0;
}

.content-entry p,
.content-entry ul,
.content-entry ol,
.content-entry table,
.content-entry blockquote {
    margin-bottom: var(--space-md);
}

.content-entry p {
    color: var(--color-text-primary);
}

.content-entry ul,
.content-entry ol {
    padding-left: 1.5rem;
}

.content-entry li {
    margin-bottom: 0.5rem;
}

.content-entry a {
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
}

.content-entry a:hover,
.content-entry a:focus {
    color: var(--color-accent-secondary);
}

.content-entry img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.12);
    margin: var(--space-md) 0;
}

.content-entry blockquote {
    border-left: 0.25rem solid rgba(51, 170, 170, 0.3);
    padding-left: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.content-entry table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.1);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.content-entry table th,
.content-entry table td {
    padding: 0.75rem 1rem;
    border-bottom: 0.0625rem solid rgba(226, 232, 240, 0.7);
}

.content-entry table th {
    text-transform: uppercase;
    letter-spacing: 0.045em;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: rgba(15, 23, 42, 0.04);
}

.content-entry table tr:last-child td {
    border-bottom: none;
}

.content-entry hr {
    border: none;
    height: 0.0625rem;
    background: linear-gradient(90deg, rgba(51, 170, 170, 0.35), rgba(41, 128, 185, 0.35));
    margin: var(--space-lg) 0;
}

.content-entry .btn,
.content-entry button,
.content-entry .cta-button {
    font-size: var(--font-size-sm);
    padding: 0.625rem 1.5rem;
    border-radius: var(--radius-sm);
}

@media (max-width: 991px) {
    .content-panel .panel-body {
        padding: var(--space-lg);
    }

    .content-heading__title {
        font-size: var(--font-size-h3);
    }
}

@media (max-width: 767px) {
    .content-panel .panel-body {
        padding: var(--space-md);
    }

    .content-heading {
        text-align: center;
    }
}

/* Elegant Since 2003 styles */
.since-2003 {
    text-align: center;
    margin-bottom: 1.5625rem;
    padding: 0.9375rem 0;
    position: relative;
}

.since-2003::before,
.since-2003::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 0.0625rem;
    width: 60%;
    background: linear-gradient(to right, transparent, rgba(51, 170, 170, 0.5), transparent);
}

.since-2003::before {
    top: 0;
}

.since-2003::after {
    bottom: 0;
}

.since-text {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-bottom: 0.3125rem;
    font-family: "Georgia", serif;
}

.year-text {
    display: block;
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--color-accent);
    letter-spacing: 0.125rem;
    font-family: "Georgia", serif;
    text-shadow: 0.0625rem 0.0625rem 0.0625rem rgba(0,0,0,0.1);
}

/* Purchase Page Styles */
.purchase-container {
    max-width: 62.5rem;
    margin: 0 auto;
    padding: 1.875rem;
}

/* Trust Indicators */
.trust-indicators {
    display: flex;
    justify-content: space-around;
    margin-bottom: 2.5rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0.625rem;
    box-shadow: 0 0.125rem 0.9375rem rgba(0,0,0,0.1);
}

.trust-item {
    text-align: center;
    padding: 0.9375rem;
}

.trust-item i {
    font-size: 1.5rem;
    color: var(--color-accent);
    margin-bottom: 0.625rem;
    display: block;
}

.trust-item span {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Video Section */
.video-showcase {
    text-align: center;
    margin: 2.5rem 0;
    padding: 1.25rem;
    background: rgba(0,0,0,0.03);
    border-radius: 0.625rem;
}

.video-container {
    width: 50%;
    margin: 0 auto;
    position: relative;
    padding-bottom: 28.125%; /* Maintains 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.9375rem rgba(0,0,0,0.1);
}

/* Info Card */
.info-card {
    background: white;
    border-radius: 0.625rem;
    padding: 1.5625rem;
    margin: 1.875rem 0;
    box-shadow: 0 0.125rem 0.9375rem rgba(0,0,0,0.1);
}

.info-card h3 {
    color: var(--color-text-strong);
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

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

.feature-list li {
    margin-bottom: 1.25rem;
    padding-left: 1.5625rem;
    position: relative;
    line-height: 1.6;
    color: #555;
}

.feature-list li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

/* Purchase Options */
.purchase-options {
    text-align: center;
    margin: 2.5rem 0;
}

.price-tag {
    display: inline-block;
    margin-bottom: 1.875rem;
    padding: 0.9375rem 2.5rem;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-secondary) 100%);
    border-radius: 3.125rem;
    color: var(--color-text-inverse);
}

.price-amount {
    font-size: 2.25rem;
    font-weight: bold;
    color: #dddddd;
}

.price-period {
    font-size: 0.875rem;
    opacity: 0.9;
    color: #cccccc;
}

.payment-box {
    background: white;
    border-radius: 0.625rem;
    overflow: hidden;
    box-shadow: 0 0.125rem 0.9375rem rgba(0,0,0,0.1);
    margin: 1.25rem 0;
}

.payment-header {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    padding: 0.9375rem;
    font-size: 1.125rem;
}

.payment-content {
    padding: 1.5625rem;
}

.accepted-methods {
    margin: 1.25rem 0;
}

.accepted-methods i {
    font-size: 1.875rem;
    margin: 0 0.625rem;
    color: var(--color-text-muted);
}

.purchase-button {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-text-inverse);
    padding: 0.9375rem 2.5rem;
    border-radius: 1.5625rem;
    text-decoration: none;
    font-weight: 500;
    margin-top: 1.25rem;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.purchase-button:hover {
    background: var(--color-accent-secondary);
    transform: translateY(-0.125rem);
    color: var(--color-text-inverse);
    text-decoration: none;
}

/* Contact Support */
.contact-support {
    text-align: center;
    margin-top: 2.5rem;
    padding: 1.25rem;
    background: rgba(255,255,255,0.9);
    border-radius: 0.625rem;
}

.wire-transfer-note {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-top: 0.625rem;
}

/* Add styles for the ad banner container */
.ad-banner-container2 {
    background: rgba(255, 255, 255, 0.95);
    padding: 0.625rem;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: inline-block; /* Ensure it takes proper dimensions */
    max-width: 100%; /* Ensure responsiveness */
}

.ad-banner-container2 img {
    opacity: 1; /* Changed from 0.75 to fully visible */
    max-width: 100%; /* Ensure responsiveness */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Prevent line-height issues */
    filter: none; /* Remove all filters that might cause rendering issues */
    transition: all 0.3s ease;
}

.ad-banner-container2:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.15);
}

.ad-banner-container2:hover img {
    opacity: 1;
    filter: none; /* Remove all filters on hover */
}

/* Recommendations box styles */
.recommendations {
    background: linear-gradient(135deg, rgba(51, 170, 170, 0.05) 0%, rgba(41, 128, 185, 0.05) 100%);
    border-left: 0.1875rem solid var(--color-accent);
    padding: 0.9375rem;
    margin: 1.25rem 0;
    border-radius: 0 0.5rem 0.5rem 0;
    font-size: 0.75rem;
    line-height: 1.5;
}

.recommendations-title {
    color: var(--color-accent);
    font-weight: bold;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recommendations-links {
    display: flex;
    gap: 0.9375rem;
    flex-wrap: wrap;
    margin-top: 0.625rem;
}

.rec-link {
    flex: 1;
    min-width: 9.375rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0.25rem;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--color-text-muted);
}

.rec-link:hover {
    background: rgba(51, 170, 170, 0.1);
    transform: translateY(-0.125rem);
    text-decoration: none;
    color: var(--color-accent);
}

.rec-link i {
    margin-right: 0.3125rem;
    color: var(--color-accent);
}

/* Updated Purchase Options Styles */
.pricing-box {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.875rem rgba(0,0,0,0.12);
    padding: 2.5rem;
    margin: 2.5rem auto;
    max-width: 37.5rem;
}

.pricing-header {
    margin-bottom: 1.875rem;
    text-align: center;
}

.pricing-title {
    font-size: 2rem;
    color: var(--color-text-strong);
    margin-bottom: 0.9375rem;
    font-weight: 600;
}

.pricing-subtitle {
    color: var(--color-text-muted);
    font-size: 1.125rem;
    margin-bottom: 1.5625rem;
}

.price-display {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-secondary) 100%);
    padding: 2.1875rem;
    border-radius: 0.75rem;
    color: var(--color-text-inverse) !important;
    margin-bottom: 2.1875rem;
    text-align: center;
    box-shadow: 0 0.25rem 0.9375rem rgba(51, 170, 170, 0.2);
}

.original-price {
    font-size: 1.375rem;
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 0.5rem;
}

.current-price {
    font-size: 4rem !important;
    font-weight: bold;
    margin: 0.9375rem 0;
    text-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.1);
    color: var(--color-text-inverse) !important;
}

.price-period {
    font-size: 1.25rem;
    opacity: 0.9;
    color: var(--color-text-inverse) !important;
}

.monthly-price {
    background: rgba(255, 255, 255, 0.15);
    padding: 0.625rem 1.25rem;
    border-radius: 1.5625rem;
    font-size: 0.75rem !important;
    display: inline-block;
    margin-top: 0.9375rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.2);
    color: var(--color-text-inverse) !important;
}

.pricing-features {
    margin: 2.1875rem 0;
    padding-left: 1.25rem;
}

.pricing-features li {
    margin: 1.25rem 0;
    padding-left: 2.1875rem;
    position: relative;
    color: #444;
    font-size: 1rem;
    line-height: 1.6;
}

.pricing-features li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: bold;
    font-size: 1.125rem;
}

.payment-methods-grid {
    display: flex;
    justify-content: center;
    gap: 1.5625rem;
    margin: 1.875rem 0;
    align-items: center;
    flex-wrap: wrap;
}

.payment-methods-grid i {
    font-size: 2.625rem;
    color: #555;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.payment-methods-grid i:hover {
    color: var(--color-accent);
    transform: translateY(-0.125rem);
    opacity: 1;
}

.secure-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    margin-top: 1.5625rem;
    padding: 0.75rem;
    background: rgba(51, 170, 170, 0.05);
    border-radius: 0.5rem;
}

.secure-badge i {
    color: var(--color-accent);
    font-size: 1.125rem;
}

/* Update purchase button styles */
.purchase-button {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    padding: 1.125rem 2.8125rem;
    border-radius: 1.875rem;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    border: none;
    margin-top: 1.5625rem;
    box-shadow: 0 0.25rem 0.9375rem rgba(51, 170, 170, 0.2);
}

.purchase-button:hover {
    background: var(--color-accent-secondary);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 1.25rem rgba(41, 128, 185, 0.25);
    color: var(--color-text-inverse);
    text-decoration: none;
}

.purchase-button i {
    margin-left: 0.5rem;
}

/* Support Contact Section Styles */
.support-contact {
    text-align: center;
    background: white;
    border-radius: 0.75rem;
    padding: 1.875rem;
    margin: 2.5rem auto;
    max-width: 37.5rem;
    box-shadow: 0 0.25rem 0.9375rem rgba(0,0,0,0.08);
}

.support-icon {
    margin-bottom: 0.9375rem;
}

.support-icon i {
    font-size: 2rem;
    color: var(--color-accent);
}

.support-contact h4 {
    color: var(--color-text-strong);
    font-size: 1.25rem;
    margin-bottom: 0.9375rem;
}

.support-contact p {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.9375rem;
}

.support-email {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-accent);
    font-size: 1.125rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.625rem 1.25rem;
    background: rgba(51, 170, 170, 0.1);
    border-radius: 1.5625rem;
    transition: all 0.3s ease;
}

.support-email:hover {
    background: rgba(51, 170, 170, 0.15);
    transform: translateY(-0.125rem);
    color: var(--color-accent-secondary);
    text-decoration: none;
}

.support-note {
    color: #888;
    font-size: 0.875rem;
    margin-top: 0.9375rem;
    font-style: italic;
}

.side-nav-panel .nav-item {
    margin: 0;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
}

/* Add this new rule to remove bottom border from last nav-item in side-nav-panel */
.side-nav-panel .nav-item:last-child {
    border-bottom: none;
}


.promo-banner {
    background: linear-gradient(135deg, var(--color-text-inverse) 0%, #f8f9fa 100%);
    border: 0.0625rem solid rgba(51, 170, 170, 0.2);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.promo-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.1875rem;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-secondary));
}

.promo-banner:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 1.25rem rgba(51, 170, 170, 0.1);
}

.promo-message {
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    text-align: center;
}

.promo-message-highlight {
    font-size: 1rem;
    font-weight: 500;
    display: block;
    background-image: linear-gradient(
        90deg,
        var(--color-accent) 0%,
        var(--color-accent-secondary) 25%,
        #3498db 50%,
        var(--color-accent) 75%
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 4s linear infinite;
    text-align: center;
    margin: 0.5rem 0;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

.promo-link {
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.promo-brand {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-secondary) 100%);
    color: var(--color-text-inverse);
    padding: 0.6rem 1.2rem;
    border-radius: 1.5625rem;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.0312rem;
    transition: all 0.3s ease;
    border: 0.0625rem solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0.125rem 0.5rem rgba(51, 170, 170, 0.2);
    position: relative;
    overflow: hidden;
}

.promo-brand::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: 0.5s;
}

.promo-link:hover .promo-brand::before {
    left: 100%;
}

.promo-link:hover .promo-brand {
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.25rem 0.75rem rgba(51, 170, 170, 0.3);
    background: linear-gradient(135deg, var(--color-accent-secondary) 0%, var(--color-accent) 100%);
}

@media (max-width: 48rem) {
    .promo-banner {
        padding: 1.2rem;
    }

    .promo-message,
    .promo-message-highlight {
        font-size: 0.85rem;
    }
}

.promo-message-animated {
    background-image: linear-gradient(
        90deg,
        var(--color-accent) 0%,
        var(--color-accent-secondary) 25%,
        #3498db 50%,
        var(--color-accent) 75%
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 4s linear infinite;
    text-align: center;
    margin: 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 0.5rem;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* Keep other promo-banner styles the same */
.promo-banner {
    background: linear-gradient(135deg, var(--color-text-inverse) 0%, #f8f9fa 100%);
    border: 0.0625rem solid rgba(51, 170, 170, 0.2);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

/* Rest of the existing styles remain the same */