/*
Theme Name: CyberKonto - Digital Store Theme
Theme URI: https://example.com/cyberkonto
Author: CHBX
Author URI: https://example.com
Description: Premium dark-themed, glassmorphic WordPress theme for digital products, shared accounts, AI subscriptions, and software. Fully integrated with WooCommerce.
Version: 1.0.0
License: GNU GPLv2 or later
Text Domain: cyberkonto
*/

/* Core Styling & Variables */
:root {
    --bg-primary: #05060b;
    --bg-secondary: #0b0c12;
    --bg-tertiary: #13141f;
    --bg-card: rgba(19, 20, 31, 0.75);
    
    --text-primary: #f1f3f9;
    --text-secondary: #9ea4c1;
    --text-muted: #676c88;
    
    /* Neon gradients and primary colors */
    --primary: #8a2be2; /* Electric Purple */
    --primary-glow: rgba(138, 43, 226, 0.4);
    
    --accent-cyan: #00f2fe;
    --accent-cyan-glow: rgba(0, 242, 254, 0.2);
    
    --accent-pink: #ff007f;
    --accent-pink-glow: rgba(255, 0, 127, 0.2);
    
    --spotify-green: #1db954;
    --netflix-red: #e50914;
    
    --border-color: rgba(255, 255, 255, 0.12);
    --border-color-hover: rgba(138, 43, 226, 0.4);
    
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --glass-border: 1px solid rgba(255, 255, 255, 0.12);
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    --text-title: #ffffff;
    --bg-header: rgba(5, 6, 11, 0.8);

    /* Form & Input Variables (Dark Theme) */
    --input-bg: #13141f;
    --input-bg-focus: #171926;
    --input-text: #ffffff;
    --input-placeholder: #8b92b2;
    --input-label: #a6adcb;
    --input-label-active: #00f2fe;
    --input-border: rgba(255, 255, 255, 0.18);
    --input-border-focus: #00f2fe;
    --card-active-bg: rgba(19, 20, 31, 0.9);
}

/* Light Theme Overrides */
body.light-theme {
    --bg-primary: #f4f6fb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eef1f6;
    --bg-card: #ffffff;
    
    --text-primary: #1e2235;
    --text-secondary: #4b556f;
    --text-muted: #737c9b;
    
    --primary: #7209b7;
    --primary-glow: rgba(114, 9, 183, 0.2);
    
    --accent-cyan: #0087a3;
    --accent-cyan-glow: rgba(0, 135, 163, 0.2);
    
    --accent-pink: #d90473;
    --accent-pink-glow: rgba(217, 4, 115, 0.15);
    
    --border-color: rgba(0, 0, 0, 0.12);
    --border-color-hover: rgba(114, 9, 183, 0.35);
    
    --glass-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.08);
    --glass-border: 1px solid rgba(0, 0, 0, 0.12);

    --text-title: #0f1322;
    --bg-header: rgba(255, 255, 255, 0.92);

    /* Form & Input Variables for Light Theme */
    --input-bg: #ffffff;
    --input-bg-focus: #ffffff;
    --input-text: #111424;
    --input-placeholder: #626b89;
    --input-label: #4b556f;
    --input-label-active: #7209b7;
    --input-border: rgba(0, 0, 0, 0.22);
    --input-border-focus: #7209b7;
    --card-active-bg: rgba(114, 9, 183, 0.06);
}

body.light-theme .main-header {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .logo {
    color: var(--text-title);
}

body.light-theme .nav-links a,
body.light-theme .nav-link {
    color: var(--text-secondary);
}

body.light-theme .nav-links a:hover,
body.light-theme .nav-link:hover {
    color: var(--text-title);
    text-shadow: none;
}

body.light-theme .theme-toggle-btn,
body.light-theme .cart-btn {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

body.light-theme .theme-toggle-btn:hover,
body.light-theme .cart-btn:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

body.light-theme .search-bar-container input,
body.light-theme .cart-promo-section input {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-theme .search-bar-container input:focus,
body.light-theme .cart-promo-section input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(114, 9, 183, 0.1);
}

body.light-theme .promo-card {
    background-color: #ffffff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

body.light-theme .feature-card {
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

body.light-theme .product-card {
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

body.light-theme .product-card:hover {
    box-shadow: 0 15px 35px rgba(114, 9, 183, 0.12);
}

body.light-theme .faq-item {
    background-color: #ffffff;
}

body.light-theme .faq-item.active .faq-question {
    background-color: rgba(0, 0, 0, 0.01);
}

body.light-theme .review-card {
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

body.light-theme .avatar {
    color: #ffffff;
}

body.light-theme .modal-price-box {
    background-color: rgba(0,0,0,0.02);
}

body.light-theme .variation-chip {
    background-color: rgba(0,0,0,0.03);
}

body.light-theme .variation-chip:hover {
    background-color: rgba(0,0,0,0.06);
}

body.light-theme .variation-chip.active {
    background-color: rgba(114, 9, 183, 0.12);
    color: var(--primary);
}

body.light-theme .cart-qty-btn:hover {
    background-color: rgba(0,0,0,0.06);
}

body.light-theme .cart-item-qty {
    background-color: rgba(0,0,0,0.02);
}

body.light-theme .success-details {
    background-color: rgba(0,0,0,0.02);
}

/* Theme Toggle Button Styling */
.theme-toggle-btn {
    background-color: rgba(255, 255, 255, 0.05);
    border: var(--glass-border);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}

.theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

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

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--text-title);
    letter-spacing: -0.02em;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography Utilities */
.gradient-text {
    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--primary) 50%, var(--accent-pink) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-success {
    color: #10b981;
}

.highlight {
    color: var(--accent-cyan);
}

/* Buttons */
.btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
    font-size: 0.95rem;
    gap: 8px;
}

.btn-primary, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt {
    background: linear-gradient(135deg, var(--primary) 0%, #6f1cc4 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px var(--primary-glow) !important;
}

.btn-primary:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit.alt:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.6) !important;
}

.btn-secondary, .woocommerce a.button:not(.alt), .woocommerce button.button:not(.alt) {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.btn-secondary:hover, .woocommerce a.button:not(.alt):hover, .woocommerce button.button:not(.alt):hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--text-secondary) !important;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-glow {
    position: relative;
    overflow: hidden;
}

.btn-glow::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(30deg);
    transition: 0.8s;
}

.btn-glow:hover::after {
    left: 120%;
}

/* Header Navigation */
.main-header {
    background-color: var(--bg-header);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--glass-border);
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 15px 0;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-title);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-icon {
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
}

.search-bar-container {
    position: relative;
    width: 380px;
    max-width: 100%;
}

.search-submit-btn {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    cursor: pointer;
    z-index: 2;
    transition: var(--transition);
}

.search-submit-btn:hover {
    color: var(--accent-cyan);
}

.search-bar-container input, .woocommerce-product-search input[type="search"] {
    width: 100%;
    background-color: var(--bg-tertiary);
    border: var(--glass-border);
    border-radius: 30px;
    padding: 10px 15px 10px 45px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    transition: var(--transition);
}

.search-bar-container input:focus, .woocommerce-product-search input[type="search"]:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 12px var(--accent-cyan-glow);
}

.nav-links {
    display: flex;
    gap: 25px;
}

.nav-links ul {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
}
.header-top-bar {
    background: #090a14;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    position: relative;
    z-index: 101;
}

body.light-theme .header-top-bar {
    background: #eef1f6 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.light-theme .header-top-bar .elementor-icon-list-text {
    color: #334155 !important;
}

body.light-theme .header-top-bar .elementor-icon-list-icon i {
    color: #7c3aed !important;
}

.nav-links {
    display: flex;
    gap: 25px;
    align-items: center;
}

.nav-links a, .nav-link,
.main-header .elementor-icon-list-item a,
.main-header .elementor-icon-list-item {
    color: var(--text-secondary);
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    position: relative;
    padding: 6px 4px;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.main-header .elementor-icon-list-item:hover,
.main-header .elementor-icon-list-item a:hover {
    color: #00f2fe !important;
    transform: translateY(-1px);
}

.main-header .elementor-icon-list-icon i {
    font-size: 0.9rem;
    color: #00f2fe;
    transition: var(--transition);
}

.main-header .elementor-icon-list-item:hover .elementor-icon-list-icon i {
    color: #ff007f;
    transform: scale(1.15);
}

body.light-theme .main-header .elementor-icon-list-text,
body.light-theme .main-header .nav-links a,
body.light-theme .main-header .nav-link {
    color: #0f172a !important;
}

body.light-theme .main-header .elementor-icon-list-icon i {
    color: #7c3aed !important;
}

body.light-theme .main-header .elementor-icon-list-item:hover .elementor-icon-list-text,
body.light-theme .main-header .nav-links a:hover {
    color: #7c3aed !important;
}

.nav-links a::after, .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--primary));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.nav-links a:hover::after, .nav-link:hover::after,
.nav-links .current-menu-item > a::after,
.nav-links .current_page_item > a::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-links a:hover, .nav-link:hover,
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a,
.nav-links a.active,
.nav-link.active {
    color: var(--text-title);
    text-shadow: none;
}

/* WordPress Dropdown / Sub-menu Styling */
.nav-links li {
    position: relative;
    list-style: none;
}

.nav-links .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 8px;
    padding: 10px 0;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 10px 0 0 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
    z-index: 999;
}

.nav-links li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-links .sub-menu li {
    width: 100%;
}

.nav-links .sub-menu a {
    display: block;
    padding: 8px 20px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.nav-links .sub-menu a::after {
    display: none;
}

.nav-links .sub-menu a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-title);
}

body.light-theme .nav-links .sub-menu a:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cart-btn {
    background-color: rgba(255, 255, 255, 0.05);
    border: var(--glass-border);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
    text-decoration: none;
}

.cart-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.cart-count {
    background: linear-gradient(135deg, var(--accent-pink), var(--primary));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    position: absolute;
    top: -3px;
    right: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 3px 8px rgba(255, 0, 127, 0.4);
}

/* Hero Section */
.hero-section {
    position: relative;
    padding: 100px 0;
    background-color: var(--bg-primary);
    overflow: hidden;
}

.hero-glow-1 {
    position: absolute;
    top: -10%;
    right: 5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.15) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.hero-glow-2 {
    position: absolute;
    bottom: -10%;
    left: 5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.1) 0%, transparent 75%);
    z-index: 0;
    pointer-events: none;
}

.hero-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.badge-new {
    background-color: rgba(0, 242, 254, 0.1);
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 242, 254, 0.2);
    border-radius: 30px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hero-content h1 {
    font-size: 3.3rem;
    line-height: 1.15;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 35px;
    max-width: 550px;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 45px;
}

.hero-buttons a {
    text-decoration: none;
}

.hero-trust {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Glowing Promo Card */
.promo-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
}

.promo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, var(--accent-cyan), var(--primary), var(--accent-pink));
}

.promo-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--accent-pink);
    color: #fff;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 30px;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.4);
}

.promo-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.promo-img {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.promo-header h3 {
    font-size: 1.2rem;
    margin-bottom: 3px;
}

.promo-header p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.promo-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.promo-price {
    display: flex;
    flex-direction: column;
}

.old-price {
    color: var(--text-muted);
    text-decoration: line-through;
    font-size: 0.85rem;
}

.new-price {
    color: var(--text-title);
    font-size: 1.6rem;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
}

.promo-delivery {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Trust Features Section */
.features-section {
    padding: 60px 0;
    background-color: var(--bg-secondary);
    border-top: var(--glass-border);
    border-bottom: var(--glass-border);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background-color: var(--bg-tertiary);
    border: var(--glass-border);
    padding: 30px;
    border-radius: 16px;
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.12);
}

.feature-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: #fff;
}

.feature-icon-wrapper.cyan {
    background-color: rgba(0, 242, 254, 0.1);
    color: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.15);
}

.feature-icon-wrapper.purple {
    background-color: rgba(138, 43, 226, 0.1);
    color: var(--primary);
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.15);
}

.feature-icon-wrapper.pink {
    background-color: rgba(255, 0, 127, 0.1);
    color: var(--accent-pink);
    box-shadow: 0 0 15px rgba(255, 0, 127, 0.15);
}

.feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Products Showcase Section */
.products-section {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.section-header p {
    color: var(--text-secondary);
    font-size: 1.05rem;
}

/* Categories Tabs Filter */
.categories-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 45px;
    flex-wrap: wrap;
}

.tab-btn {
    background-color: rgba(255, 255, 255, 0.03);
    border: var(--glass-border);
    color: var(--text-secondary);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 30px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.tab-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--accent-pink));
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px var(--primary-glow);
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

/* Product Card */
.product-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: var(--transition);
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-8px);
    border-color: var(--border-color-hover);
    box-shadow: 0 10px 25px rgba(138, 43, 226, 0.2);
}

.product-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 2;
}

.tag-hot { background-color: var(--accent-pink); color: #fff; }
.tag-new { background-color: var(--accent-cyan); color: #000; }
.tag-sale { background-color: #f59e0b; color: #fff; }
.tag-instant { background-color: #10b981; color: #fff; }

.product-image-container {
    width: 100%;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.product-card:hover .product-image {
    transform: scale(1.08);
}

.product-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.product-category {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.product-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-title);
    cursor: pointer;
    transition: var(--transition);
}

.product-title:hover {
    color: var(--accent-cyan);
}

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

.product-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.product-meta i {
    color: var(--accent-cyan);
}

.product-desc-short {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
}

.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.product-price {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
}

.product-price del, 
.product-price del .woocommerce-Price-amount {
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
    text-decoration: line-through !important;
    font-weight: 500 !important;
    background: none !important;
    margin-bottom: 2px;
}

.product-price ins, 
.product-price ins .woocommerce-Price-amount,
.product-price > .woocommerce-Price-amount {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: var(--text-title) !important;
    text-decoration: none !important;
    background: none !important;
    font-family: 'Outfit', sans-serif;
}

.action-buttons {
    display: flex;
    gap: 8px;
}

.btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.btn-icon-detail {
    background-color: rgba(255, 255, 255, 0.05);
    border: var(--glass-border);
    color: var(--text-secondary);
}

.btn-icon-detail:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.btn-icon-cart {
    background-color: var(--primary);
    color: #fff;
    border: none;
    box-shadow: 0 4px 10px var(--primary-glow);
    text-decoration: none;
}

.btn-icon-cart:hover {
    background-color: #9d3eff;
    box-shadow: 0 5px 12px rgba(138, 43, 226, 0.5);
    transform: translateY(-1px);
}

/* FAQ Accordion Styling */
.faq-section {
    padding: 100px 0;
    background-color: var(--bg-secondary);
    border-top: var(--glass-border);
    border-bottom: var(--glass-border);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background-color: var(--bg-tertiary);
    border: var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
}

.faq-question {
    width: 100%;
    padding: 20px 25px;
    background: none;
    border: none;
    color: var(--text-title);
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition);
}

.faq-question i {
    transition: transform 0.3s ease;
    color: var(--accent-cyan);
}

.faq-item.active .faq-question {
    background-color: rgba(255, 255, 255, 0.02);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

.faq-item.active .faq-answer {
    max-height: 300px; /* Allow content height */
    transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
}

.faq-answer p {
    padding: 0 25px 20px 25px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Reviews Section */
.reviews-section {
    padding: 100px 0;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.review-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--glass-border);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.stars {
    color: #f59e0b;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.review-text {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-style: italic;
    margin-bottom: 25px;
    line-height: 1.6;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--accent-cyan);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
}

.avatar.purple-bg {
    background-color: var(--primary);
    color: #fff;
}

.avatar.gold-bg {
    background-color: #f59e0b;
    color: #fff;
}

.review-author h4 {
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.review-author span {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* WooCommerce Overrides & Dark Theme Compatibility */
.woocommerce-page #content, .woocommerce #content {
    background-color: var(--bg-primary);
}

.woocommerce-Message, .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice {
    background-color: var(--bg-tertiary) !important;
    border-top-color: var(--primary) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    box-shadow: var(--glass-shadow) !important;
}

.woocommerce-message::before, .woocommerce-info::before {
    color: var(--accent-cyan) !important;
}

/* Product Inputs & Selects */
.woocommerce input.input-text, .woocommerce-page input.input-text, 
.woocommerce textarea, .woocommerce select,
.woocommerce-cart-form input.input-text {
    background-color: var(--bg-tertiary) !important;
    border: var(--glass-border) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    padding: 10px 15px !important;
    transition: var(--transition) !important;
}

.woocommerce input.input-text:focus, .woocommerce select:focus, .woocommerce textarea:focus {
    outline: none !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 10px var(--accent-cyan-glow) !important;
}

/* WooCommerce Shop Layout & Forms */
.woocommerce-checkout, .woocommerce-cart, .woocommerce-account, .woocommerce-order, .woocommerce-order-received, .woocommerce-view-order {
    padding: 60px 0;
    color: var(--text-primary);
}

.woocommerce-checkout h2, .woocommerce-checkout h3, 
.woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, 
.woocommerce-additional-fields h3, #order_review_heading,
.woocommerce-order-details__title, .woocommerce-customer-details__title,
.woocommerce-column__title {
    color: var(--text-title) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-size: 1.35rem !important;
}

/* Form labels and fields */
.woocommerce form .form-row {
    margin-bottom: 20px !important;
    padding: 3px 0 !important;
}

.woocommerce form .form-row label, 
.woocommerce-billing-fields label, 
.woocommerce-shipping-fields label, 
.woocommerce-additional-fields label,
.woocommerce-form__label,
.woocommerce form .form-row .woocommerce-input-wrapper {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    margin-bottom: 6px !important;
    display: block;
}

.woocommerce form .form-row .required,
abbr.required {
    color: var(--accent-pink) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    margin-left: 4px;
}

.woocommerce form .form-row .optional {
    color: var(--text-muted) !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
}

/* Checkout 2-Column Grid & Width Alignments */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide {
    width: 100% !important;
    clear: both !important;
    float: none !important;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first {
    width: calc(50% - 8px) !important;
    float: left !important;
    clear: left !important;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
    width: calc(50% - 8px) !important;
    float: right !important;
    clear: none !important;
}

@media (max-width: 640px) {
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
        width: 100% !important;
        float: none !important;
    }
}

/* Optional Fields Notice Banner (CyberKonto Blue Theme) */
.checkout-optional-fields-banner {
    width: 100%;
    clear: both;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 10px 0 20px 0;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25);
}

.checkout-optional-fields-banner .banner-icon {
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.checkout-optional-fields-banner .banner-text {
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
}

/* Light Theme overrides for banner */
body.light-theme .checkout-optional-fields-banner {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}


/* Form Inputs & Autofill */
.woocommerce input.input-text, .woocommerce-page input.input-text, 
.woocommerce textarea, .woocommerce select,
.woocommerce-cart-form input.input-text,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea {
    background-color: var(--bg-tertiary) !important;
    border: var(--glass-border) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    width: 100% !important;
    transition: var(--transition) !important;
}

.woocommerce input.input-text::placeholder,
.woocommerce textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.8;
}

/* Fix browser autofill dark mode styling */
.woocommerce input:-webkit-autofill,
.woocommerce input:-webkit-autofill:hover, 
.woocommerce input:-webkit-autofill:focus,
.woocommerce textarea:-webkit-autofill,
.woocommerce select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-tertiary) inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Select2 / SelectWoo dropdown styling */
.select2-container--default .select2-selection--single {
    background-color: var(--bg-tertiary) !important;
    border: var(--glass-border) !important;
    border-radius: 8px !important;
    height: 48px !important;
    padding: 8px 12px !important;
    color: var(--text-primary) !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
    line-height: normal !important;
    padding-left: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    top: 1px !important;
    right: 10px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-secondary) transparent transparent transparent !important;
}

.select2-dropdown {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color-hover) !important;
    border-radius: 8px !important;
    box-shadow: var(--glass-shadow) !important;
    z-index: 9999 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--bg-tertiary) !important;
    border: var(--glass-border) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
}

.select2-container--default .select2-results__option {
    color: var(--text-primary) !important;
    padding: 10px 15px !important;
    font-size: 0.95rem !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

/* Checkboxes & Terms */
.woocommerce form .form-row .woocommerce-form__label-for-checkbox,
.woocommerce form .form-row label.checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin-top: 10px !important;
}

.woocommerce form .form-row .woocommerce-form__label-for-checkbox input[type="checkbox"],
.woocommerce form .form-row label.checkbox input[type="checkbox"] {
    margin-top: 3px !important;
    accent-color: var(--primary) !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}

.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-checkbox-text {
    color: var(--text-secondary) !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-link {
    color: var(--accent-cyan) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    transition: var(--transition);
}

.woocommerce-privacy-policy-text a:hover,
.woocommerce-terms-and-conditions-link:hover {
    color: var(--text-title) !important;
    text-shadow: 0 0 8px var(--accent-cyan-glow);
}

/* Login and Coupon Toggles */
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
    background-color: var(--bg-card) !important;
    border: var(--glass-border) !important;
    border-left: 4px solid var(--accent-cyan) !important;
    color: var(--text-primary) !important;
    padding: 16px 20px !important;
    border-radius: 10px !important;
    margin-bottom: 25px !important;
}

.woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info a {
    color: var(--accent-cyan) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.woocommerce-form-login-toggle .woocommerce-info a:hover,
.woocommerce-form-coupon-toggle .woocommerce-info a:hover {
    text-decoration: underline !important;
}

/* Tables in Cart, Checkout & Order Details */
.woocommerce table.shop_table, 
.woocommerce-page table.shop_table,
.woocommerce-table--order-details,
table.order_details {
    border: var(--glass-border) !important;
    border-radius: 12px !important;
    background-color: var(--bg-card) !important;
    backdrop-filter: blur(12px) !important;
    color: var(--text-primary) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    margin-bottom: 30px !important;
    width: 100% !important;
}

.woocommerce table.shop_table th, 
.woocommerce-page table.shop_table th,
.woocommerce-table--order-details th,
table.order_details th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-title) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    padding: 15px 20px !important;
    border: none !important;
}

.woocommerce table.shop_table td, 
.woocommerce-page table.shop_table td,
.woocommerce-table--order-details td,
table.order_details td {
    padding: 15px 20px !important;
    border-top: 1px solid var(--border-color) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    color: var(--text-primary) !important;
}

.woocommerce table.shop_table tfoot th,
.woocommerce-table--order-details tfoot th,
table.order_details tfoot th {
    background-color: transparent !important;
    color: var(--text-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
    font-weight: 600 !important;
    padding: 14px 20px !important;
}

.woocommerce table.shop_table tfoot td,
.woocommerce-table--order-details tfoot td,
table.order_details tfoot td {
    color: var(--text-title) !important;
    border-top: 1px solid var(--border-color) !important;
    font-weight: 600 !important;
    padding: 14px 20px !important;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td,
table.order_details tfoot tr:last-child th,
table.order_details tfoot tr:last-child td {
    font-size: 1.2rem !important;
    color: var(--accent-cyan) !important;
    font-weight: 800 !important;
    border-top: 2px solid var(--border-color-hover) !important;
}

.woocommerce-table--order-details td.product-name a,
table.order_details td.product-name a {
    color: var(--text-title) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: var(--transition);
}

.woocommerce-table--order-details td.product-name a:hover,
table.order_details td.product-name a:hover {
    color: var(--accent-cyan) !important;
}

.woocommerce-table--order-details .product-quantity,
table.order_details .product-quantity,
.wc-item-meta {
    color: var(--text-secondary) !important;
    font-size: 0.9rem !important;
}

.wc-item-meta dt, .wc-item-meta dd, .wc-item-meta p {
    color: var(--text-secondary) !important;
    margin: 0 !important;
}

.woocommerce-cart-form__cart-item .product-thumbnail img {
    border-radius: 8px !important;
    width: 60px !important;
}

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

.product-remove a.remove:hover {
    color: var(--accent-pink) !important;
    background-color: transparent !important;
}

/* Coupon & Cart Actions styling */
.woocommerce-cart .actions .coupon {
    display: flex !important;
    gap: 10px !important;
}

.woocommerce-cart .actions .coupon input.input-text {
    width: 180px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
}

/* Cart Collaterals / Totals box */
.cart-collaterals {
    margin-top: 30px !important;
}

.cart_totals {
    background-color: var(--bg-tertiary) !important;
    border: var(--glass-border) !important;
    border-radius: 16px !important;
    padding: 25px !important;
    color: var(--text-primary) !important;
}

.cart_totals h2 {
    font-size: 1.4rem !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 10px !important;
}

/* Payment box on checkout page */
#order_review {
    background-color: var(--bg-card) !important;
    backdrop-filter: blur(12px) !important;
    border: var(--glass-border) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    margin-top: 20px !important;
}

#payment {
    background: transparent !important;
}

#payment ul.payment_methods {
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 20px !important;
    list-style: none !important;
    margin: 0 0 20px 0 !important;
    padding-left: 0 !important;
}

#payment ul.payment_methods li {
    margin-bottom: 15px !important;
    color: var(--text-primary) !important;
}

#payment ul.payment_methods li label {
    color: var(--text-title) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-size: 1.05rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#payment ul.payment_methods li input[type="radio"] {
    accent-color: var(--accent-cyan) !important;
    width: 18px !important;
    height: 18px !important;
}

#payment div.payment_box {
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border: var(--glass-border) !important;
    border-radius: 8px !important;
    padding: 15px 20px !important;
    margin: 15px 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

#payment div.payment_box p {
    color: var(--text-secondary) !important;
    margin: 0 !important;
}

#payment div.payment_box::before {
    border-bottom-color: var(--bg-secondary) !important;
}

#place_order {
    background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    padding: 16px 30px !important;
    border-radius: 12px !important;
    width: 100% !important;
    border: none !important;
    box-shadow: 0 4px 20px var(--primary-glow) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    letter-spacing: 0.5px !important;
    margin-top: 15px !important;
}

#place_order:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px var(--primary-glow) !important;
    filter: brightness(1.1) !important;
}

/* ===================================================
   ORDER RECEIVED / THANK YOU PAGE & ORDER CONFIRMATION
   =================================================== */
.woocommerce-order {
    color: var(--text-primary);
}

/* Success notice header */
.woocommerce-notice.woocommerce-thankyou-order-received,
p.woocommerce-notice--success.woocommerce-thankyou-order-received,
p.woocommerce-thankyou-order-received {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.12) 0%, rgba(138, 43, 226, 0.12) 100%) !important;
    border: 1px solid var(--accent-cyan) !important;
    border-radius: 16px !important;
    padding: 24px 30px !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--text-title) !important;
    font-family: 'Outfit', sans-serif !important;
    margin-bottom: 35px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px var(--accent-cyan-glow) !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    line-height: 1.5 !important;
}

.woocommerce-notice.woocommerce-thankyou-order-received::before,
p.woocommerce-thankyou-order-received::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--accent-cyan);
    color: #ffffff;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 900;
    flex-shrink: 0;
}

/* Order Overview List (Number, Date, Email, Total, Method) */
ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details,
ul.woocommerce-order-overview {
    list-style: none !important;
    padding: 25px 30px !important;
    margin: 0 0 40px 0 !important;
    background-color: var(--bg-card) !important;
    backdrop-filter: blur(12px) !important;
    border: var(--glass-border) !important;
    border-radius: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 20px !important;
    box-shadow: var(--glass-shadow) !important;
}

ul.woocommerce-order-overview li {
    border-right: 1px solid var(--border-color) !important;
    padding-right: 15px !important;
    margin: 0 !important;
    color: var(--text-secondary) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
    float: none !important;
}

ul.woocommerce-order-overview li:last-child {
    border-right: none !important;
}

ul.woocommerce-order-overview li strong {
    display: block !important;
    color: var(--text-title) !important;
    font-size: 1.15rem !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    margin-top: 6px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-break: break-word;
}

ul.woocommerce-order-overview li.woocommerce-order-overview__total strong {
    color: var(--accent-cyan) !important;
}

/* Customer & Contact Details Section */
.woocommerce-customer-details {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

.woocommerce-customer-details .woocommerce-columns--addresses {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 30px !important;
}

.woocommerce-customer-details .woocommerce-column {
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
}

/* Address Box & Contact Info Cards */
.woocommerce-customer-details address,
.woocommerce-Address address,
.woocommerce-column--billing-address address,
.woocommerce-column--shipping-address address {
    background-color: var(--bg-card) !important;
    backdrop-filter: blur(12px) !important;
    border: var(--glass-border) !important;
    border-radius: 14px !important;
    padding: 25px !important;
    color: var(--text-primary) !important;
    font-style: normal !important;
    line-height: 1.8 !important;
    font-size: 0.95rem !important;
    box-shadow: var(--glass-shadow) !important;
    margin-bottom: 20px !important;
}

.woocommerce-customer-details address p,
.woocommerce-Address address p {
    color: var(--text-primary) !important;
    margin-bottom: 6px !important;
}

.woocommerce-customer-details--phone,
.woocommerce-customer-details--email,
p.woocommerce-customer-details--phone,
p.woocommerce-customer-details--email {
    color: var(--text-primary) !important;
    font-size: 0.95rem !important;
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px dashed var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.woocommerce-customer-details--phone a,
.woocommerce-customer-details--email a {
    color: var(--accent-cyan) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: var(--transition);
}

.woocommerce-customer-details--phone a:hover,
.woocommerce-customer-details--email a:hover {
    color: var(--text-title) !important;
    text-shadow: 0 0 8px var(--accent-cyan-glow);
}

/* Bank details (BACS) */
.woocommerce-bacs-bank-details {
    background-color: var(--bg-card) !important;
    border: var(--glass-border) !important;
    border-radius: 14px !important;
    padding: 25px !important;
    margin: 30px 0 !important;
}

.woocommerce-bacs-bank-details .wc-bacs-bank-details-account-name {
    color: var(--text-title) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
}

.woocommerce-bacs-bank-details .wc-bacs-bank-details-order-details {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 15px !important;
}

.woocommerce-bacs-bank-details .wc-bacs-bank-details-order-details li {
    color: var(--text-secondary) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
}

.woocommerce-bacs-bank-details .wc-bacs-bank-details-order-details li strong {
    display: block !important;
    color: var(--text-title) !important;
    font-size: 1.05rem !important;
    margin-top: 4px !important;
    text-transform: none !important;
}

/* Downloads Box in Order Received */
.woocommerce-order-downloads {
    margin-bottom: 40px !important;
}

.woocommerce-table--order-downloads th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-title) !important;
}

.woocommerce-table--order-downloads td {
    color: var(--text-primary) !important;
}

.woocommerce-table--order-downloads .download-file a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%) !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: var(--transition);
}

.woocommerce-table--order-downloads .download-file a:hover {
    box-shadow: 0 4px 15px var(--primary-glow) !important;
    transform: translateY(-2px);
}

/* Order Again / Actions */
p.order-again .button {
    background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%) !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    border: none !important;
}

/* Order numbers / tags in Account & Order views */
mark.order-number, mark.order-date, mark.order-status {
    background: rgba(0, 242, 254, 0.12) !important;
    color: var(--accent-cyan) !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-style: normal !important;
}

/* ===================================================
   WOOCOMMERCE BLOCKS CHECKOUT & CART (GUTENBERG)
   =================================================== */
.wp-block-woocommerce-checkout,
.wc-block-checkout,
.wc-block-cart,
.wc-blocks-components-form {
    color: var(--text-primary);
}

.wc-block-checkout__title,
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wc-block-components-totals-wrapper .wc-block-components-totals-item__label {
    color: var(--text-title) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
}

/* Step headings ("Dane kontaktowe", "Adres rozliczeniowy", "Opcje płatności") */
.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__title {
    color: var(--text-title) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border-color) !important;
    margin-bottom: 25px !important;
}

.wc-block-components-checkout-step__description {
    color: var(--text-secondary) !important;
    margin-bottom: 15px !important;
}

/* Block Text Inputs (Email, Name, Address, City, Postcode, Phone) */
.wc-block-components-text-input,
.wc-block-components-combobox {
    position: relative !important;
    margin-bottom: 18px !important;
}

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input,
.wc-block-components-combobox input.components-combobox-control__input,
.wc-block-components-combobox .components-combobox-control__input,
.wc-block-components-textarea textarea {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 10px !important;
    color: var(--input-text) !important;
    font-size: 1rem !important;
    padding: 24px 16px 8px 16px !important;
    height: 56px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: var(--transition) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox input.components-combobox-control__input:focus,
.wc-block-components-textarea textarea:focus {
    border-color: var(--input-border-focus) !important;
    box-shadow: 0 0 12px var(--accent-cyan-glow) !important;
    outline: none !important;
    background-color: var(--input-bg-focus) !important;
    color: var(--input-text) !important;
}

/* Floating labels in WooCommerce Block Inputs - High Contrast & Crisp */
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-textarea label {
    color: var(--input-label) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: all 0.2s ease-in-out !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Shrunk / Active Floating label state */
.wc-block-components-text-input.is-active label,
.wc-block-components-combobox.is-active label,
.wc-block-components-text-input:focus-within label,
.wc-block-components-combobox:focus-within label,
.wc-block-components-textarea.is-active label,
.wc-block-components-textarea:focus-within label {
    top: 14px !important;
    transform: translateY(0) scale(0.8) !important;
    transform-origin: top left !important;
    color: var(--input-label-active) !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}

/* Country / Combobox selector dropdown & arrow */
.wc-block-components-combobox-control__arrow {
    fill: var(--text-secondary) !important;
    right: 15px !important;
}

.wc-block-components-combobox-control__listbox,
.components-form-token-field__suggestions-list {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color-hover) !important;
    border-radius: 10px !important;
    box-shadow: var(--glass-shadow) !important;
    z-index: 1000 !important;
}

.wc-block-components-combobox-control__option,
.components-form-token-field__suggestion {
    color: var(--text-primary) !important;
    padding: 12px 18px !important;
    font-size: 0.95rem !important;
}

.wc-block-components-combobox-control__option:hover,
.wc-block-components-combobox-control__option.is-selected,
.wc-block-components-combobox-control__option--highlighted {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

/* Address 2 Toggle button ("+ Dodaj nr mieszkania, lokalu, itp.") */
.wc-block-components-address-form__address_2-toggle,
button.wc-block-components-address-form__address_2-toggle {
    color: var(--accent-cyan) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    background: transparent !important;
    border: none !important;
    padding: 8px 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: var(--transition) !important;
}

.wc-block-components-address-form__address_2-toggle:hover,
button.wc-block-components-address-form__address_2-toggle:hover {
    color: var(--primary) !important;
    text-decoration: underline !important;
}

/* ===================================================
   PAYMENT METHODS & CREDIT CARD / STRIPE FIELDS
   =================================================== */
/* Payment Method Accordion & Radio Boxes */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
    transition: var(--transition) !important;
}

.wc-block-components-radio-control-accordion-option:hover,
.wc-block-components-radio-control__option:hover {
    border-color: var(--border-color-hover) !important;
}

.wc-block-components-radio-control-accordion-option:has(input:checked),
.wc-block-components-radio-control-accordion-option.is-checked {
    border-color: var(--accent-cyan) !important;
    background-color: var(--card-active-bg) !important;
    box-shadow: 0 0 15px var(--accent-cyan-glow) !important;
}

/* Radio Labels and Icons */
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__option-layout {
    color: var(--text-title) !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.wc-block-components-radio-control__input,
input[type="radio"].wc-block-components-radio-control__input {
    accent-color: var(--accent-cyan) !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
}

/* Payment fields / Credit Card / Stripe Box */
.wc-block-components-radio-control-accordion-content,
.wc-block-gateway-container,
.wc-block-components-credit-card-form {
    padding-top: 15px !important;
}

.wc-block-components-credit-card-form label,
.wc-block-components-radio-control-accordion-content label,
.wc-block-gateway-container label,
.wc-block-components-credit-card-form .wc-block-components-text-input label {
    color: var(--text-title) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.wc-block-components-credit-card-form input,
.wc-block-components-credit-card-form .wc-block-components-text-input input,
.wc-block-gateway-container input.input-text,
.wc-stripe-elements-field,
.wc-block-gateway-container iframe {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 8px !important;
}

/* Checkbox ("Zapisz dane płatności...") */
.wc-block-components-checkbox {
    margin: 15px 0 !important;
}

.wc-block-components-checkbox .wc-block-components-checkbox__label {
    color: var(--text-secondary) !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
}

.wc-block-components-checkbox input[type="checkbox"] {
    accent-color: var(--primary) !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}

/* ===================================================
   ORDER SUMMARY SIDEBAR - CLEAN GLASSMORPHIC CARD
   =================================================== */
/* Main outer sidebar container */
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-checkout__sidebar {
    background-color: var(--bg-card) !important;
    backdrop-filter: blur(14px) !important;
    border: var(--glass-border) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: var(--glass-shadow) !important;
    box-sizing: border-box !important;
}

/* Remove nested backgrounds and borders from inner panels */
.wc-block-components-sidebar,
.wc-block-components-order-summary,
.wc-block-components-totals-wrapper,
.wc-block-components-panel,
.wc-block-components-order-summary__content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide empty panels or spacer elements */
.wc-block-components-totals-item:empty,
.wc-block-components-panel:empty,
.wc-block-components-totals-wrapper:empty {
    display: none !important;
}

/* Order Summary Title */
.wc-block-components-order-summary .wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block h2,
.wc-block-components-order-summary h2 {
    color: var(--text-title) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-family: 'Outfit', sans-serif !important;
}

/* Product list item */
.wc-block-components-order-summary-item {
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: transparent !important;
    color: var(--text-primary) !important;
}

.wc-block-components-order-summary-item:last-child {
    border-bottom: none !important;
}

/* Product thumbnail */
.wc-block-components-order-summary-item__image,
.wc-block-components-product-image {
    border-radius: 8px !important;
    overflow: hidden !important;
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.wc-block-components-order-summary-item__image img,
.wc-block-components-product-image img {
    border-radius: 6px !important;
    object-fit: cover !important;
}

/* Product Title & Text */
.wc-block-components-order-summary-item__title,
.wc-block-components-product-name,
.wc-block-components-order-summary-item a {
    color: var(--text-title) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    word-break: normal !important;
    white-space: normal !important;
}

/* Quantity & Attributes (e.g. gpt 5.5) */
.wc-block-components-order-summary-item__quantity,
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description,
.wc-block-components-order-summary-item__meta {
    color: var(--text-secondary) !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
}

/* Product Prices */
.wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item__price,
.wc-block-components-product-price {
    color: var(--text-title) !important;
    font-weight: 700 !important;
}

.wc-block-components-order-summary-item__total-price .wc-block-formatted-money-amount,
.wc-block-components-product-price .wc-block-formatted-money-amount {
    color: var(--text-title) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}

.wc-block-components-order-summary-item del,
.wc-block-components-product-price del {
    color: var(--text-muted) !important;
    font-size: 0.85rem !important;
    text-decoration: line-through !important;
}

/* Savings badge */
.wc-block-components-order-summary-item .wc-block-components-product-badge,
.wc-block-components-order-summary-item [class*="badge"] {
    background: rgba(0, 242, 254, 0.12) !important;
    color: var(--accent-cyan) !important;
    border: 1px solid rgba(0, 242, 254, 0.25) !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

/* Coupon accordion panel */
.wc-block-components-totals-discount,
.wc-block-components-totals-coupon {
    margin: 12px 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 12px !important;
}

.wc-block-components-totals-coupon__button,
.wc-block-components-panel__button {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 6px 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
}

.wc-block-components-totals-coupon__button:hover,
.wc-block-components-panel__button:hover {
    color: var(--text-title) !important;
}

/* Subtotal & Totals rows */
.wc-block-components-totals-item {
    color: var(--text-secondary) !important;
    font-size: 0.95rem !important;
    padding: 8px 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: none !important;
}

.wc-block-components-totals-item .wc-block-components-totals-item__label {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

.wc-block-components-totals-item .wc-block-components-totals-item__value {
    color: var(--text-title) !important;
    font-weight: 600 !important;
}

/* Total / Łącznie row at the bottom */
.wc-block-components-totals-footer-item {
    border-top: 1px solid var(--border-color) !important;
    padding-top: 16px !important;
    margin-top: 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    color: var(--text-title) !important;
    font-size: 1.3rem !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
    color: var(--accent-cyan) !important;
    font-size: 1.5rem !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
}



/* Place order button in Block Checkout */
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions button {
    background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    padding: 18px 30px !important;
    border-radius: 12px !important;
    width: 100% !important;
    border: none !important;
    box-shadow: 0 4px 25px var(--primary-glow) !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    letter-spacing: 0.5px !important;
    margin-top: 20px !important;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-checkout__actions button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 35px var(--primary-glow) !important;
    filter: brightness(1.1) !important;
}

/* Single Product Page Customization */
.product_title {
    font-size: 2.5rem !important;
    margin-bottom: 15px !important;
}

.woocommerce-product-details__short-description {
    color: var(--text-secondary) !important;
    margin: 20px 0 !important;
    font-size: 1rem !important;
}

.single-product .summary .price {
    font-size: 2rem !important;
    color: var(--accent-cyan) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
}

.woocommerce-tabs.wc-tabs-wrapper {
    margin-top: 50px !important;
    border-top: 1px solid var(--border-color) !important;
    padding-top: 30px !important;
}

.woocommerce-tabs ul.tabs {
    border-bottom: 1px solid var(--border-color) !important;
    list-style: none !important;
    padding: 0 !important;
    display: flex !important;
    gap: 20px !important;
    background: none !important;
}

.woocommerce-tabs ul.tabs li {
    background: none !important;
    border: none !important;
    padding: 10px 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.woocommerce-tabs ul.tabs li a {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.05rem !important;
}

.woocommerce-tabs ul.tabs li.active a {
    color: var(--text-title) !important;
    border-bottom: 2px solid var(--primary) !important;
    padding-bottom: 8px !important;
}

.woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 20px 0 !important;
    color: var(--text-secondary) !important;
}

/* Quantity inputs */
.woocommerce .quantity .qty {
    background-color: var(--bg-tertiary) !important;
    border: var(--glass-border) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    width: 60px !important;
    height: 44px !important;
    padding: 0 !important;
    text-align: center !important;
}

/* Toast/Popup Alert */
.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--accent-cyan);
    border-radius: 8px;
    padding: 15px 25px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2000;
    transform: translateY(100px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

.toast-notification.show {
    transform: translateY(0);
    opacity: 1;
}

.toast-icon {
    color: var(--accent-cyan);
    font-size: 1.2rem;
}

#toast-msg {
    color: var(--text-title);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Footer Section */
.main-footer {
    background-color: var(--bg-secondary);
    border-top: var(--glass-border);
    padding: 80px 0 30px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
    gap: 40px;
    margin-bottom: 50px;
}

.brand-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 15px;
    margin-bottom: 20px;
    max-width: 320px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: var(--text-secondary);
    font-size: 1.2rem;
    transition: var(--transition);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.social-links a:hover {
    color: #fff;
    background-color: var(--primary);
    transform: translateY(-2px);
}

.footer-grid h4 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 8px;
}

.footer-grid h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: var(--accent-cyan);
}

.footer-grid ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.footer-grid ul a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
}

.footer-grid ul a:hover {
    color: #fff;
    padding-left: 5px;
}

.footer-newsletter-col p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 18px;
}

.newsletter-form {
    display: flex;
    border: var(--glass-border);
    border-radius: 6px;
    overflow: hidden;
}

.newsletter-form input {
    flex-grow: 1;
    background-color: var(--bg-tertiary);
    border: none;
    padding: 10px 15px;
    color: var(--text-title);
    font-size: 0.85rem;
}

.newsletter-form input:focus {
    outline: none;
}

.newsletter-form .btn {
    border-radius: 0;
    padding: 10px 18px;
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.trademark-disclaimer {
    max-width: 900px;
    line-height: 1.4;
}

/* ==========================================
   COMPREHENSIVE RESPONSIVENESS SYSTEM (ALL DEVICES)
   Płynne dopasowanie: Desktop, Laptop, Tablet, Smartfon, Mały ekran
   ========================================== */

/* Zapobieganie poziomemu scrollowaniu na wszystkich urządzeniach */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative;
}

img, video, iframe, svg {
    max-width: 100%;
    height: auto;
}

/* TABLETY I MNIEJSZE LAPTOPY (do 1024px) */
@media (max-width: 1024px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Pasek górny Top-Bar */
    .header-top-bar .container {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    .top-bar-left, .top-bar-right {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Główny nagłówek */
    .header-container {
        flex-wrap: wrap;
        gap: 12px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Pasek ikonkowego menu nawigacyjnego na tabletach */
    .nav-links,
    .main-header .nav-links,
    .main-header .elementor-widget-icon-list,
    .main-header .elementor-icon-list-items {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        width: 100% !important;
        padding: 6px 2px !important;
        margin: 4px 0 0 0 !important;
        order: 3;
    }

    .nav-links::-webkit-scrollbar,
    .main-header .elementor-widget-icon-list::-webkit-scrollbar,
    .main-header .elementor-icon-list-items::-webkit-scrollbar {
        display: none !important;
    }

    .nav-links a, .nav-link,
    .main-header .elementor-icon-list-item a,
    .main-header .elementor-icon-list-item {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 20px;
        padding: 6px 14px !important;
        font-size: 0.88rem !important;
        color: #ffffff !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    body.light-theme .nav-links a,
    body.light-theme .nav-link,
    body.light-theme .main-header .elementor-icon-list-item a,
    body.light-theme .main-header .elementor-icon-list-item {
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        color: #0f172a !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    }

    /* Hero Section */
    .hero-section {
        padding: 60px 0 45px 0;
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 35px;
    }
    
    .hero-content {
        align-items: center;
    }
    
    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .hero-trust {
        justify-content: center;
    }

    /* Produkty & Kategorie Tabs */
    .products-section {
        padding: 60px 0;
    }

    .categories-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 4px 4px 10px 4px;
        margin-bottom: 30px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .categories-tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 8px 18px;
        font-size: 0.9rem;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 22px;
    }

    /* Sekcja SEO & Kolumny */
    .guide-row-2col,
    .guide-steps-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .guide-platforms-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* SMARTFONY & PHABLETY (do 768px) */
@media (max-width: 768px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .main-header {
        padding: 8px 0;
    }
    
    .header-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .logo {
        font-size: 1.35rem !important;
    }
    
    .search-bar-container {
        order: 4;
        width: 100%;
        margin-top: 6px;
    }

    .search-bar-container input {
        padding: 9px 15px 9px 40px;
        font-size: 0.85rem;
    }

    /* Menu ikonkowe na smartfonach - horyzontalny swipe bar */
    .nav-links,
    .main-header .nav-links,
    .main-header .elementor-widget-icon-list,
    .main-header .elementor-icon-list-items {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        width: 100% !important;
        padding: 6px 0 !important;
        order: 3;
    }

    .nav-links a, .nav-link,
    .main-header .elementor-icon-list-item a,
    .main-header .elementor-icon-list-item {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 20px;
        padding: 5px 12px !important;
        font-size: 0.82rem !important;
        color: #ffffff !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    body.light-theme .nav-links a,
    body.light-theme .nav-link,
    body.light-theme .main-header .elementor-icon-list-item a,
    body.light-theme .main-header .elementor-icon-list-item {
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        color: #0f172a !important;
    }

    .header-mobile-cta {
        padding: 6px 14px !important;
        font-size: 12px !important;
    }
    
    /* Typografia sekcji */
    .hero-content h1 {
        font-size: 2.1rem;
        line-height: 1.25;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-trust {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .section-header {
        margin-bottom: 30px;
    }

    .section-header h2 {
        font-size: 1.85rem;
    }

    .section-header p {
        font-size: 0.95rem;
    }

    /* Produkty */
    .products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .product-card {
        padding: 16px;
    }

    .product-image-container {
        height: 160px;
    }

    /* Rabat & Promo sekcja */
    .rabat-container,
    .promo-card {
        padding: 24px 18px;
    }

    .rabat-title {
        font-size: 1.7rem;
    }

    .coupon-box {
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    .coupon-box .btn {
        width: 100%;
    }

    /* FAQ */
    .faq-question {
        padding: 16px 18px;
        font-size: 1rem;
    }

    .faq-answer {
        padding: 0 18px 16px 18px;
        font-size: 0.92rem;
    }

    /* Opinie */
    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* SEO Sekcja (Dlaczego Warto) */
    .seo-guide-section {
        padding: 55px 0;
    }

    .seo-guide-header {
        margin-bottom: 35px;
    }

    .seo-guide-header h2 {
        font-size: 1.75rem;
    }

    .guide-lead {
        font-size: 1.02rem !important;
    }

    .guide-features-grid,
    .guide-platforms-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .guide-feature-card,
    .guide-step-card,
    .guide-platform-card {
        padding: 24px 18px !important;
    }

    .guide-card-box,
    .guide-security-box,
    .guide-summary-box {
        padding: 24px 18px !important;
    }

    .summary-highlight-pill {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 14px 16px;
    }

    .summary-actions {
        flex-direction: column;
        gap: 10px;
    }

    .summary-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Modale i Koszyk */
    .modal-content {
        padding: 18px;
        width: 95%;
        max-height: 88vh;
    }

    .modal-product-header {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .modal-product-img {
        height: 140px;
    }

    /* Stopka */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
}

/* BARDZO MAŁE EKRANY (do 420px) */
@media (max-width: 420px) {
    .logo {
        font-size: 1.22rem !important;
    }

    .header-actions {
        gap: 6px;
    }

    .theme-toggle-btn,
    .cart-btn {
        width: 32px;
        height: 32px;
    }

    .hero-content h1 {
        font-size: 1.85rem;
    }

    .section-header h2 {
        font-size: 1.6rem;
    }

    .guide-badge {
        font-size: 11px !important;
        padding: 6px 14px !important;
    }

    .product-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .action-buttons {
        width: 100%;
        justify-content: space-between;
    }

    .action-buttons .btn {
        flex-grow: 1;
    }
}

/* WooCommerce Products Grid integration */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

ul.products::before,
ul.products::after {
    display: none !important;
}

/* WooCommerce Products Archive Header & Ordering */
.woocommerce-products-header {
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
}

.woocommerce-products-header__title {
    font-size: 2.8rem !important;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--primary) 50%, var(--accent-pink) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
}

.woocommerce-result-count {
    color: var(--text-secondary) !important;
    font-size: 0.95rem !important;
    margin-bottom: 25px !important;
    float: left;
}

.woocommerce-ordering {
    margin-bottom: 25px !important;
    float: right;
}

.woocommerce-ordering select {
    background-color: var(--bg-tertiary) !important;
    border: var(--glass-border) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    padding: 8px 16px !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    cursor: pointer;
    transition: var(--transition);
}

.woocommerce-ordering select:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

/* Clear WooCommerce floats */
.woocommerce-container-wrap::after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================
   BREVO (SENDINBLUE) NEWSLETTER FORM STYLES
   ========================================== */

/* Remove default background, borders and shadows of the Brevo box */
.sib-form #sib-container {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* Style the headers/texts inside Brevo form */
.sib-form .sib-form-block p,
.sib-form .sib-form-block h1,
.sib-form .sib-form-block h2,
.sib-form .sib-form-block h3 {
    font-family: 'Outfit', sans-serif !important;
    color: var(--text-title, #ffffff) !important;
}

/* Hide labels and specifications that are not needed visually */
.sib-form .entry__label, 
.sib-form .entry__specification {
    display: none !important;
}

/* Style the Email Input field */
.sib-form input.input {
    width: 100% !important;
    background-color: var(--bg-tertiary, #13141f) !important;
    border: var(--glass-border, 1px solid rgba(255, 255, 255, 0.06)) !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    color: var(--text-primary, #ffffff) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    height: auto !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: var(--transition, all 0.3s) !important;
}

.sib-form input.input:focus {
    border-color: var(--primary, #8a2be2) !important;
    box-shadow: 0 0 10px var(--primary-glow, rgba(138, 43, 226, 0.2)) !important;
}

/* Placeholders styling */
.sib-form input.input:-ms-input-placeholder { color: var(--text-secondary, #9ea4c1) !important; opacity: 0.6; }
.sib-form input.input::placeholder { color: var(--text-secondary, #9ea4c1) !important; opacity: 0.6; }

/* Opt-in Consent Text and Checkbox */
.sib-form .sib-optin {
    margin-top: 15px !important;
    font-family: 'Inter', sans-serif !important;
    text-align: left !important;
}

.sib-form .sib-optin p, 
.sib-form .sib-optin span {
    color: var(--text-secondary, #9ea4c1) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.sib-form .sib-optin input[type="checkbox"] {
    accent-color: var(--primary, #8a2be2) !important;
    cursor: pointer !important;
}

/* Submit Button - Neon Purple/Pink Gradient */
.sib-form button.sib-form-block__button {
    width: 100% !important;
    background: linear-gradient(135deg, var(--primary, #8a2be2) 0%, var(--accent-pink, #ff007f) 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 14px 20px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--transition, all 0.3s) !important;
    box-shadow: 0 4px 15px var(--primary-glow, rgba(138, 43, 226, 0.3)) !important;
    margin-top: 15px !important;
    text-transform: none !important;
    display: inline-block !important;
}

.sib-form button.sib-form-block__button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px var(--accent-pink-glow, rgba(255, 0, 127, 0.4)) !important;
    opacity: 0.95 !important;
}

/* Success/Error Panels styling */
.sib-form .sib-form-message-panel {
    border-radius: 8px !important;
    padding: 12px 15px !important;
    margin-bottom: 20px !important;
    font-family: 'Inter', sans-serif !important;
}

/* ==========================================
   SEO GUIDE & INFORMATION SECTION STYLES
   ========================================== */

.seo-guide-section {
    padding: 80px 0;
    position: relative;
    z-index: 1;
}

.seo-guide-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 50px auto;
}

.guide-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    background: rgba(138, 43, 226, 0.12);
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 242, 254, 0.25);
    margin-bottom: 18px;
}

.seo-guide-header h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 2.35rem;
    font-weight: 700;
    color: var(--text-title);
    margin-bottom: 16px;
    line-height: 1.25;
}

.guide-lead {
    font-size: 1.08rem;
    color: var(--text-primary);
    line-height: 1.65;
    margin-bottom: 12px;
}

.guide-lead-sub {
    font-size: 0.96rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* 4 Key Advantages Grid */
.guide-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
    margin-bottom: 45px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 50px;
}

.guide-feature-card,
.seo-guide-section .guide-feature-card {
    background: #111322 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 18px !important;
    padding: 30px 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    overflow: hidden;
}

.guide-feature-card::before,
.seo-guide-section .guide-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #8a2be2, #00f2fe);
    opacity: 0.9;
}

.guide-feature-card:hover,
.seo-guide-section .guide-feature-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(0, 242, 254, 0.6) !important;
    box-shadow: 0 18px 40px rgba(138, 43, 226, 0.25), 0 0 25px rgba(0, 242, 254, 0.2) !important;
}

.guide-feature-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.guide-feature-icon.cyan-glow {
    background: rgba(0, 242, 254, 0.18);
    color: #00f2fe;
    border: 1px solid rgba(0, 242, 254, 0.5);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.3);
}

.guide-feature-icon.purple-glow {
    background: rgba(138, 43, 226, 0.22);
    color: #c084fc;
    border: 1px solid rgba(138, 43, 226, 0.5);
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.3);
}

.guide-feature-icon.pink-glow {
    background: rgba(255, 0, 127, 0.2);
    color: #ff007f;
    border: 1px solid rgba(255, 0, 127, 0.5);
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.3);
}

.guide-feature-icon.gold-glow {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.5);
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

.guide-feature-card h3 {
    font-size: 1.22rem !important;
    font-family: 'Outfit', sans-serif !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.guide-feature-card p {
    font-size: 0.98rem !important;
    color: #e2e8f0 !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

.guide-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(138, 43, 226, 0.5), rgba(0, 242, 254, 0.5), transparent);
    margin: 55px 0;
}

/* 2 Column Boxes (Co otrzymujesz & Dla kogo) */
.guide-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 50px;
}

.guide-card-box,
.seo-guide-section .guide-card-box {
    background: #111322 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 20px !important;
    padding: 40px 34px !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45) !important;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.guide-card-box:hover,
.seo-guide-section .guide-card-box:hover {
    border-color: rgba(0, 242, 254, 0.45) !important;
    box-shadow: 0 18px 45px rgba(0, 242, 254, 0.15) !important;
}

.guide-box-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.guide-box-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.4), rgba(255, 0, 127, 0.4));
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 0 18px rgba(138, 43, 226, 0.35);
}

.guide-box-header h3,
.guide-card-box h3 {
    font-size: 1.45rem !important;
    font-family: 'Outfit', sans-serif !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.guide-box-desc {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
    font-weight: 500 !important;
}

.guide-box-subtitle {
    font-weight: 800 !important;
    color: #00f2fe !important;
    font-size: 1.02rem !important;
    margin-bottom: 16px !important;
    letter-spacing: 0.3px;
}

.guide-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 26px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.guide-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1rem;
    color: #ffffff !important;
    line-height: 1.55;
    font-weight: 500;
}

.guide-checklist li i {
    color: #00f2fe;
    margin-top: 3px;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.guide-info-note {
    margin-top: auto;
    padding: 16px 22px;
    border-radius: 12px;
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid rgba(0, 242, 254, 0.35);
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.96rem;
    color: #ffffff !important;
    line-height: 1.55;
    font-weight: 500;
}

.guide-info-note i {
    color: #00f2fe;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.guide-info-note.highlight {
    background: rgba(138, 43, 226, 0.16);
    border-color: rgba(138, 43, 226, 0.45);
    color: #ffffff !important;
    font-weight: 500;
}

.guide-info-note.highlight i {
    color: #ff007f;
}

/* 3-Step Process */
.guide-steps-section {
    margin-bottom: 50px;
}

.guide-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 38px;
}

.guide-step-card,
.seo-guide-section .guide-step-card {
    background: #111322 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 18px !important;
    padding: 34px 26px !important;
    position: relative;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    transition: var(--transition);
}

.guide-step-card:hover,
.seo-guide-section .guide-step-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(138, 43, 226, 0.7) !important;
    box-shadow: 0 18px 45px rgba(138, 43, 226, 0.3) !important;
}

.step-badge {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 15px;
    border-radius: 8px;
    background: linear-gradient(135deg, #8a2be2 0%, #ff007f 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.45);
    margin-bottom: 20px;
}

.step-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #191c2f;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #00f2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 20px;
}

.guide-step-card h4 {
    font-size: 1.3rem !important;
    font-family: 'Outfit', sans-serif !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.guide-step-card p {
    font-size: 0.98rem !important;
    color: #cbd5e1 !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* Platforms Catalog Showcase */
.guide-platforms-section {
    margin-bottom: 50px;
}

.guide-platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 38px;
}

.guide-platform-card,
.seo-guide-section .guide-platform-card {
    background: #111322 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 18px !important;
    padding: 30px 24px !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.guide-platform-card:hover,
.seo-guide-section .guide-platform-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6) !important;
}

.netflix-theme:hover { border-color: rgba(229, 9, 20, 0.6) !important; box-shadow: 0 18px 40px rgba(229, 9, 20, 0.25) !important; }
.disney-theme:hover { border-color: rgba(0, 99, 229, 0.6) !important; box-shadow: 0 18px 40px rgba(0, 99, 229, 0.25) !important; }
.hbo-theme:hover { border-color: rgba(153, 51, 255, 0.6) !important; box-shadow: 0 18px 40px rgba(153, 51, 255, 0.25) !important; }
.others-theme:hover { border-color: rgba(0, 242, 254, 0.6) !important; box-shadow: 0 18px 40px rgba(0, 242, 254, 0.25) !important; }

.platform-header {
    margin-bottom: 16px;
}

.platform-tag {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 12px;
}

.netflix-theme .platform-tag {
    background: rgba(229, 9, 20, 0.25);
    color: #ff4b55;
    border: 1px solid rgba(229, 9, 20, 0.5);
}

.disney-theme .platform-tag {
    background: rgba(0, 99, 229, 0.25);
    color: #5c96ff;
    border: 1px solid rgba(0, 99, 229, 0.5);
}

.hbo-theme .platform-tag {
    background: rgba(138, 43, 226, 0.25);
    color: #d8b4fe;
    border: 1px solid rgba(138, 43, 226, 0.5);
}

.others-theme .platform-tag {
    background: rgba(0, 242, 254, 0.25);
    color: #00f2fe;
    border: 1px solid rgba(0, 242, 254, 0.5);
}

.guide-platform-card h4 {
    font-size: 1.25rem !important;
    font-family: 'Outfit', sans-serif !important;
    color: #ffffff !important;
    margin: 0 0 12px 0 !important;
    font-weight: 700 !important;
}

.guide-platform-card p {
    font-size: 0.96rem !important;
    color: #cbd5e1 !important;
    line-height: 1.65 !important;
    margin-bottom: 12px !important;
}

.platform-sub {
    font-size: 0.9rem !important;
    color: #94a3b8 !important;
    line-height: 1.6 !important;
    margin-top: auto !important;
    padding-top: 14px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.12) !important;
}

.guide-mini-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guide-mini-list li {
    font-size: 0.94rem;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.guide-mini-list li i {
    color: #00f2fe;
    font-size: 0.9rem;
}

/* Security Box */
.guide-security-box,
.seo-guide-section .guide-security-box {
    background: #111322 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 20px !important;
    padding: 40px 34px !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45) !important;
}

.security-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.22);
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.5);
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.25);
    margin-bottom: 18px;
}

.guide-security-box h3 {
    font-size: 1.45rem !important;
    font-family: 'Outfit', sans-serif !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    margin-bottom: 14px !important;
}

.guide-security-box > p {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    margin-bottom: 24px !important;
    font-weight: 500;
}

.security-points {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.security-point {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.security-point i {
    color: #4ade80;
    font-size: 1.35rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.security-point strong {
    color: #ffffff !important;
    font-size: 1.02rem;
    font-family: 'Outfit', sans-serif;
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
}

.security-point p {
    font-size: 0.94rem !important;
    color: #cbd5e1 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Summary / CTA Box */
.guide-summary-box,
.seo-guide-section .guide-summary-box {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3) 0%, rgba(255, 0, 127, 0.25) 100%) !important;
    border: 1px solid rgba(138, 43, 226, 0.55) !important;
    border-radius: 20px !important;
    padding: 40px 34px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 16px 45px rgba(138, 43, 226, 0.25) !important;
    display: flex;
    flex-direction: column;
}

.summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 18px;
    align-self: flex-start;
}

.guide-summary-box h3 {
    font-size: 1.45rem !important;
    font-family: 'Outfit', sans-serif !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    margin-bottom: 14px !important;
}

.summary-lead {
    font-size: 1.08rem !important;
    color: #ffffff !important;
    line-height: 1.7 !important;
    margin-bottom: 12px !important;
    font-weight: 500;
}

.summary-sub {
    font-size: 0.98rem !important;
    color: #e2e8f0 !important;
    line-height: 1.65 !important;
    margin-bottom: 22px !important;
}

.summary-highlight-pill {
    padding: 16px 22px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 14px;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.98rem;
    margin-bottom: 28px;
    line-height: 1.55;
}

.summary-highlight-pill i {
    color: #fbbf24;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.summary-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: auto;
}

/* ==========================================
   LIGHT THEME OVERRIDES FOR SEO GUIDE (DLACZEGO WARTO)
   Gwarancja 100% ciemnego/czarnego tekstu na jasnym tle
   ========================================== */

body.light-theme .seo-guide-section {
    background: radial-gradient(circle at 50% 10%, rgba(114, 9, 183, 0.05) 0%, transparent 60%) !important;
}

/* Wymuszenie ciemnego tekstu dla wszystkich nagłówków i treści */
body.light-theme .seo-guide-section h2,
body.light-theme .seo-guide-section h3,
body.light-theme .seo-guide-section h4,
body.light-theme .seo-guide-section .elementor-heading-title,
body.light-theme .seo-guide-header h2,
body.light-theme .guide-feature-card h3,
body.light-theme .guide-box-header h3,
body.light-theme .guide-card-box h3,
body.light-theme .guide-step-card h4,
body.light-theme .guide-platform-card h4,
body.light-theme .guide-security-box h3,
body.light-theme .guide-summary-box h3,
body.light-theme .security-point strong {
    color: #0f172a !important;
}

/* Treści główne, akapity, opisy */
body.light-theme .seo-guide-section p,
body.light-theme .seo-guide-section .guide-lead,
body.light-theme .seo-guide-section .guide-box-desc,
body.light-theme .seo-guide-section .guide-security-box > p,
body.light-theme .seo-guide-section .summary-lead,
body.light-theme .seo-guide-section .elementor-widget-text-editor p {
    color: #0f172a !important;
}

body.light-theme .seo-guide-section .guide-lead-sub,
body.light-theme .seo-guide-section .guide-feature-card p,
body.light-theme .seo-guide-section .guide-step-card p,
body.light-theme .seo-guide-section .guide-platform-card p,
body.light-theme .seo-guide-section .security-point p,
body.light-theme .seo-guide-section .platform-sub,
body.light-theme .seo-guide-section .summary-sub,
body.light-theme .seo-guide-section .elementor-widget-icon-box .elementor-icon-box-description {
    color: #334155 !important;
}

/* Plakietki i odznaki (Badges) */
body.light-theme .guide-badge,
body.light-theme .seo-guide-section .guide-badge {
    background: rgba(138, 43, 226, 0.12) !important;
    color: #0f172a !important;
    border: 1px solid rgba(138, 43, 226, 0.35) !important;
    box-shadow: 0 2px 8px rgba(138, 43, 226, 0.08) !important;
}

body.light-theme .guide-badge i,
body.light-theme .seo-guide-section .guide-badge i {
    color: #7c3aed !important;
}

body.light-theme .badge-new {
    background: rgba(138, 43, 226, 0.12) !important;
    color: #0f172a !important;
    border: 1px solid rgba(138, 43, 226, 0.35) !important;
}

body.light-theme .badge-new i {
    color: #7c3aed !important;
}

body.light-theme .step-badge,
body.light-theme .seo-guide-section .step-badge {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
}

body.light-theme .security-badge,
body.light-theme .seo-guide-section .security-badge {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #15803d !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    box-shadow: none !important;
}

body.light-theme .summary-badge,
body.light-theme .seo-guide-section .summary-badge {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #0f172a !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

/* Listy punktowane i checkmarki */
body.light-theme .guide-checklist li,
body.light-theme .guide-checklist li span,
body.light-theme .seo-guide-section .elementor-widget-icon-list .elementor-icon-list-text {
    color: #0f172a !important;
}

body.light-theme .guide-checklist li i {
    color: #7c3aed !important;
}

body.light-theme .guide-box-subtitle {
    color: #6d28d9 !important;
}

body.light-theme .guide-mini-list li {
    color: #0f172a !important;
}

body.light-theme .guide-mini-list li i {
    color: #0d9488 !important;
}

/* Notatki informacyjne i pigułki */
body.light-theme .guide-info-note,
body.light-theme .guide-info-note span {
    background: rgba(124, 58, 237, 0.08) !important;
    border-color: rgba(124, 58, 237, 0.25) !important;
    color: #0f172a !important;
}

body.light-theme .guide-info-note i {
    color: #7c3aed !important;
}

body.light-theme .guide-info-note.highlight,
body.light-theme .guide-info-note.highlight span {
    background: rgba(217, 4, 115, 0.08) !important;
    border-color: rgba(217, 4, 115, 0.25) !important;
    color: #0f172a !important;
}

body.light-theme .guide-info-note.highlight i {
    color: #d90473 !important;
}

body.light-theme .summary-highlight-pill,
body.light-theme .summary-highlight-pill span {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #0f172a !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .summary-highlight-pill i {
    color: #d97706 !important;
}

/* Tła kart w sekcji SEO */
body.light-theme .guide-feature-card,
body.light-theme .seo-guide-section .guide-feature-card,
body.light-theme .guide-card-box,
body.light-theme .seo-guide-section .guide-card-box,
body.light-theme .guide-step-card,
body.light-theme .seo-guide-section .guide-step-card,
body.light-theme .guide-platform-card,
body.light-theme .seo-guide-section .guide-platform-card,
body.light-theme .guide-security-box,
body.light-theme .seo-guide-section .guide-security-box {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 30px rgba(31, 38, 135, 0.08) !important;
}

body.light-theme .guide-summary-box,
body.light-theme .seo-guide-section .guide-summary-box {
    background: linear-gradient(135deg, rgba(114, 9, 183, 0.12) 0%, rgba(217, 4, 115, 0.12) 100%) !important;
    border-color: rgba(114, 9, 183, 0.3) !important;
    box-shadow: 0 10px 30px rgba(31, 38, 135, 0.08) !important;
}

/* Ikony */
body.light-theme .guide-feature-icon.cyan-glow {
    background: rgba(0, 153, 184, 0.12) !important;
    color: #0099b8 !important;
    border-color: rgba(0, 153, 184, 0.3) !important;
    box-shadow: none !important;
}

body.light-theme .guide-feature-icon.purple-glow {
    background: rgba(114, 9, 183, 0.12) !important;
    color: #7209b7 !important;
    border-color: rgba(114, 9, 183, 0.3) !important;
    box-shadow: none !important;
}

body.light-theme .guide-feature-icon.pink-glow {
    background: rgba(217, 4, 115, 0.12) !important;
    color: #d90473 !important;
    border-color: rgba(217, 4, 115, 0.3) !important;
    box-shadow: none !important;
}

body.light-theme .guide-feature-icon.gold-glow {
    background: rgba(217, 119, 6, 0.12) !important;
    color: #d97706 !important;
    border-color: rgba(217, 119, 6, 0.3) !important;
    box-shadow: none !important;
}

body.light-theme .step-icon {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #7c3aed !important;
}

body.light-theme .guide-box-icon {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.15), rgba(255, 0, 127, 0.15)) !important;
    color: #7c3aed !important;
    border: 1px solid rgba(138, 43, 226, 0.3) !important;
    box-shadow: none !important;
}

/* Tagi platform */
body.light-theme .netflix-theme .platform-tag {
    background: rgba(229, 9, 20, 0.12) !important;
    color: #991b1b !important;
    border-color: rgba(229, 9, 20, 0.3) !important;
}

body.light-theme .disney-theme .platform-tag {
    background: rgba(0, 99, 229, 0.12) !important;
    color: #1e40af !important;
    border-color: rgba(0, 99, 229, 0.3) !important;
}

body.light-theme .hbo-theme .platform-tag {
    background: rgba(138, 43, 226, 0.12) !important;
    color: #5b21b6 !important;
    border-color: rgba(138, 43, 226, 0.3) !important;
}

body.light-theme .others-theme .platform-tag {
    background: rgba(13, 148, 136, 0.12) !important;
    color: #115e59 !important;
    border-color: rgba(13, 148, 136, 0.3) !important;
}

/* ==========================================
   RESPONSIVE & MOBILE SWIPE STYLES FOR SEO GUIDE SECTION
   Fix dla widoku mobilnego:
   - "Dla kogo są konta premium?" w pełni widoczne (100% szerokości, czytelny układ)
   - "KROK 3 Odbierz dostęp" w pełni widoczny ze swipem (horyzontalny scroll-snap)
   - "Wszystkie konta premium w jednym miejscu" w pełni widoczne (100% szerokości)
   - Horyzontalny touch-swipe z płynnym przyciąganiem dla kroków, platform i korzyści
   ========================================== */

@media (max-width: 992px) {
    .guide-row-2col {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        margin-bottom: 35px !important;
    }
    
    .guide-platforms-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .seo-guide-section {
        padding: 45px 0 !important;
    }

    .seo-guide-header {
        margin-bottom: 28px !important;
    }

    .seo-guide-header h2 {
        font-size: 1.65rem !important;
        line-height: 1.3 !important;
    }

    .guide-divider {
        margin: 32px 0 !important;
    }

    /* 2-kolumnowe sekcje (Co otrzymujesz & Dla kogo oraz Bezpieczeństwo & Podsumowanie) */
    .guide-row-2col {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 30px !important;
    }

    .guide-card-box,
    .seo-guide-section .guide-card-box,
    .guide-security-box,
    .seo-guide-section .guide-security-box,
    .guide-summary-box,
    .seo-guide-section .guide-summary-box {
        width: 100% !important;
        padding: 26px 18px !important;
        box-sizing: border-box !important;
    }

    .guide-box-header h3,
    .guide-card-box h3,
    .guide-security-box h3,
    .guide-summary-box h3 {
        font-size: 1.25rem !important;
    }

    .guide-box-desc,
    .guide-security-box > p,
    .summary-lead {
        font-size: 0.96rem !important;
        line-height: 1.6 !important;
    }

    .guide-checklist {
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .guide-checklist li {
        font-size: 0.92rem !important;
        gap: 10px !important;
    }

    .guide-info-note {
        padding: 14px 16px !important;
        font-size: 0.9rem !important;
    }

    /* Horyzontalny swipe dla 4 Głównych Zalet */
    .guide-features-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 14px !important;
        padding: 4px 4px 16px 4px !important;
        margin-bottom: 28px !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(0, 242, 254, 0.5) rgba(255, 255, 255, 0.05) !important;
    }

    .guide-feature-card,
    .seo-guide-section .guide-feature-card {
        flex: 0 0 82% !important;
        min-width: 260px !important;
        max-width: 85% !important;
        scroll-snap-align: center !important;
        padding: 22px 18px !important;
        box-sizing: border-box !important;
    }

    /* Horyzontalny swipe dla 3 Kroków (Jak kupić konto premium) */
    .guide-steps-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 16px !important;
        padding: 6px 4px 18px 4px !important;
        margin-top: 20px !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(138, 43, 226, 0.6) rgba(255, 255, 255, 0.05) !important;
    }

    .guide-step-card,
    .seo-guide-section .guide-step-card {
        flex: 0 0 85% !important;
        min-width: 270px !important;
        max-width: 88% !important;
        scroll-snap-align: center !important;
        padding: 24px 18px !important;
        box-sizing: border-box !important;
    }

    .guide-step-card h4 {
        font-size: 1.18rem !important;
    }

    .guide-step-card p {
        font-size: 0.92rem !important;
    }

    /* Horyzontalny swipe dla Platform (Netflix, Disney+, HBO Max, Pozostałe) */
    .guide-platforms-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 16px !important;
        padding: 6px 4px 18px 4px !important;
        margin-top: 20px !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(138, 43, 226, 0.6) rgba(255, 255, 255, 0.05) !important;
    }

    .guide-platform-card,
    .seo-guide-section .guide-platform-card {
        flex: 0 0 85% !important;
        min-width: 270px !important;
        max-width: 88% !important;
        scroll-snap-align: center !important;
        padding: 24px 18px !important;
        box-sizing: border-box !important;
    }

    .guide-platform-card h4 {
        font-size: 1.18rem !important;
    }

    .guide-platform-card p {
        font-size: 0.92rem !important;
    }

    /* Stylizowane paski przewijania na mobile */
    .guide-features-grid::-webkit-scrollbar,
    .guide-steps-grid::-webkit-scrollbar,
    .guide-platforms-grid::-webkit-scrollbar {
        height: 5px !important;
        display: block !important;
    }

    .guide-features-grid::-webkit-scrollbar-track,
    .guide-steps-grid::-webkit-scrollbar-track,
    .guide-platforms-grid::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.06) !important;
        border-radius: 10px !important;
    }

    .guide-features-grid::-webkit-scrollbar-thumb,
    .guide-steps-grid::-webkit-scrollbar-thumb,
    .guide-platforms-grid::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, #8a2be2, #00f2fe) !important;
        border-radius: 10px !important;
    }

    body.light-theme .guide-features-grid::-webkit-scrollbar-track,
    body.light-theme .guide-steps-grid::-webkit-scrollbar-track,
    body.light-theme .guide-platforms-grid::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.08) !important;
    }

    body.light-theme .guide-features-grid::-webkit-scrollbar-thumb,
    body.light-theme .guide-steps-grid::-webkit-scrollbar-thumb,
    body.light-theme .guide-platforms-grid::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, #7c3aed, #0099b8) !important;
    }
}

@media (max-width: 480px) {
    .guide-card-box,
    .seo-guide-section .guide-card-box,
    .guide-security-box,
    .seo-guide-section .guide-security-box,
    .guide-summary-box,
    .seo-guide-section .guide-summary-box {
        padding: 20px 14px !important;
    }

    .guide-feature-card,
    .guide-step-card,
    .guide-platform-card {
        flex: 0 0 88% !important;
        min-width: 250px !important;
        padding: 20px 14px !important;
    }

    .guide-box-header h3,
    .guide-card-box h3,
    .guide-security-box h3,
    .guide-summary-box h3 {
        font-size: 1.15rem !important;
    }

    .summary-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .summary-actions .btn {
        width: 100% !important;
        justify-content: center;
    }
}