/*
Theme Name: Sons of Calisthenics Custom
Theme URI: https://tienda.sonsofcalisthenics.com
Description: A custom minimalist theme for Sons of Calisthenics shop renovation.
Author: Antigravity
Version: 1.0.1
Text Domain: soc-custom
*/

/* Import Google Fonts - Backup method to ensure fonts load */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

:root {
    /* Colors - Sons of Calisthenics Brand (Matching original site exactly) */
    /* Header */
    --color-header: #cfcfcf;
    --color-primary: #0a0e17;
    /* Almost black background */
    --color-secondary: #1a2332;
    /* Dark navy for cards and sections */
    --color-accent: #00d9ff;
    /* Bright cyan for primary accents, buttons, and highlights */
    --color-accent-hover: #00b8d4;
    /* Slightly darker cyan on hover */
    --color-accent-secondary: #1e3a5f;
    /* Dark blue for secondary elements */
    --color-text-main: #334155;
    /* Dark grey for text on white backgrounds */
    --color-text-light: #ffffff;
    /* Pure white text for dark backgrounds */
    --color-text-cyan: #00d9ff;
    /* Bright cyan for links and highlights */
    --color-text-muted: #94a3b8;
    /* Muted grey for secondary text */
    --color-border: #1e3a5f;
    /* Dark blue borders */
    --color-surface: #ffffff;
    /* White surface */
    --color-card-bg: rgba(26, 35, 50, 0.6);
    /* Semi-transparent dark blue for cards */
    --color-bg-main: #f8fafc;
    --color-bg-gradient-start: #f8fafc;
    --color-bg-gradient-end: #e2e8f0;
    --color-heading: #0a0e17;
    /* Dark heading for light mode */

    /* Typography */
    --font-heading: 'Bebas Neue', sans-serif;
    /* Condensed bold for headings */
    --font-body: 'Inter', sans-serif;
    /* Clean sans-serif for body */

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 14rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 12px;
    --radius-lg: 24px;
}

/* Dark Theme Variables */
[data-theme="dark"] {
    --color-primary: #0a0e17;
    --color-secondary: #1a2332;
    --color-text-main: #e2e8f0;
    --color-text-light: #ffffff;
    --color-text-muted: #cbd5e1;
    --color-border: #2d3748;
    --color-surface: #1a2332;
    --color-card-bg: rgba(26, 35, 50, 0.9);
    --color-bg-main: #0a0e17;
    --color-bg-gradient-start: #0a0e17;
    --color-bg-gradient-end: #1a2332;
    --color-header: #ffffff;
    --color-heading: #ffffff;
    /* White heading for dark mode */
}

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

body {
    font-family: var(--font-body) !important;
    color: var(--color-text-main);
    background: linear-gradient(135deg, var(--color-bg-gradient-start) 0%, var(--color-bg-gradient-end) 100%);
    /* Gradient background with theme support */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background 0.3s ease, color 0.3s ease;
    min-height: 100vh;
}

[data-theme="dark"] body {
    background: linear-gradient(135deg, var(--color-bg-gradient-start) 0%, var(--color-bg-gradient-end) 100%);
    background-color: var(--color-bg-main);
    /* Fallback */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    /* Bebas is bold by default */
    line-height: 1.1;
    margin-bottom: var(--spacing-sm);
    color: var(--color-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    animation: fadeInUp 0.6s ease-out;
}

/* Modern fade-in animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulse animation for accents */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

a {
    color: var(--color-header);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

a:hover {
    color: var(--color-accent);
    transform: translateY(-2px);
}

/* Modern link underline effect */
a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
    transition: width 0.3s ease;
}

a:hover::after {
    width: 100%;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: var(--radius-md);
    /* More rounded for modern look */
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    font-family: var(--font-body);
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Modern button gradient overlay */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
    color: #fff;
    border: none;
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 217, 255, 0.4);
    animation: pulse 0.5s ease;
}

.btn-outline {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
    backdrop-filter: blur(10px);
}

.btn-outline:hover {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(10, 14, 23, 0.3);
}

/* =========================================
   SINGLE PRODUCT PAGE STYLES - CUSTOM
   ========================================= */

/* --- Container & Layout --- */
.single-product-container {
    padding-top: 80px;
    /* Space for fixed header */
    background: var(--color-bg-main);
    color: var(--color-text-main);
}

.product-hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

/* Background gradient effect for Hero */
.product-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(0, 217, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.product-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* --- Gallery Image --- */
.product-gallery img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-gallery img:hover {
    transform: scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 217, 255, 0.15);
}

/* --- Product Info Content --- */
.product-title {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 20px rgba(0, 217, 255, 0.1);
    color: #ffffff !important;
}

.product-short-description {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
    font-weight: 300;
}

.product-key-features {
    display: flex;
    gap: 20px;
    margin-bottom: 2.5rem;
}

.product-key-features .feature {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #fff;
}

.product-price-cta {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.product-price-cta .price {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--color-accent);
    margin: 0;
}

/*.btn-primary,
.single_add_to_cart_button {
    padding: 18px 40px;
    font-size: 1.1rem;
    min-width: 250px;
}*/

form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    width: 100%;
}

form.cart div.quantity {
    display: inline-block;
}

form.cart div.quantity input.qty {
    width: 90px;
    padding: 16px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 1.1rem;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 600;
    transition: all 0.3s ease;
    height: 57px; /* Matches button height */
}

form.cart div.quantity input.qty:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
}

/* Hide native number spin buttons for cleaner look if desired, or keep them. We'll keep them but styled by browser default */
form.cart div.quantity input[type=number]::-webkit-inner-spin-button, 
form.cart div.quantity input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}

form.cart button.single_add_to_cart_button,
.woocommerce form.cart button.single_add_to_cart_button {
    padding: 0 40px;
    height: 57px;
    line-height: 57px;
    font-size: 1.1rem;
    min-width: 250px;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
    color: #000 !important;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 0;
}

form.cart button.single_add_to_cart_button:hover,
.woocommerce form.cart button.single_add_to_cart_button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 217, 255, 0.4);
}

.btn-primary:hover,
.single_add_to_cart_button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 217, 255, 0.4);
    animation: pulse 0.5s ease;
}

/* --- "Who is this for" Section --- */
.section-who {
    background: #0f141e;
    /* Slightly different dark bg */
    padding: 100px 0;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
}

.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
}

.grid-2-col h3 {
    font-size: 1.5rem;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.check-list,
.cross-list {
    list-style: none;
    padding: 0;
}

.check-list li,
.cross-list li {
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
    color: #cbd5e1;
}

.check-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: bold;
}

.cross-list li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: #ef4444;
    font-weight: bold;
}

/* --- "Results" Section --- */
.section-results {
    padding: 100px 0;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.result-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    transition: transform 0.3s ease;
}

.result-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-accent);
}

.result-card h3 {
    color: var(--color-accent);
    margin-bottom: 15px;
    font-size: 1.8rem;
}

.result-card p {
    color: #cbd5e1;
    line-height: 1.6;
}

/* --- Details Section --- */
.section-details {
    background: #0f141e;
    padding: 80px 0;
}

.details-content {
    max-width: 800px;
    margin: 0 auto;
    color: #cbd5e1;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .product-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .product-title {
        font-size: 3rem;
    }

    .product-price-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .single_add_to_cart_button {
        width: 100%;
    }
}

@media (max-width: 768px) {

    .grid-2-col,
    .results-grid {
        grid-template-columns: 1fr;
    }

    .product-hero {
        padding-top: 100px;
        /* More space on mobile */
    }
}

/* =========================================
   HOMEPAGE REORGANIZATION STYLES
   ========================================= */

/* --- Membership Feature Section --- */
.membership-feature {
    background: linear-gradient(135deg, #0a0e17 0%, #1e3a5f 100%);
    border: 1px solid rgba(0, 217, 255, 0.2);
    border-radius: 20px;
    padding: 0;
    margin-bottom: 4rem;
    display: flex;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    position: relative;
    /* Neon glow effect */
    box-shadow: 0 0 30px rgba(0, 217, 255, 0.05);
}

.membership-content {
    flex: 1;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.membership-image {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

.membership-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.membership-feature:hover .membership-image img {
    transform: scale(1.05);
}

.badge-premium {
    display: inline-block;
    background: var(--color-accent);
    color: #000;
    padding: 5px 12px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-bottom: 20px;
    align-self: flex-start;
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.5);
}

.membership-content h3 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
}

.membership-description {
    font-size: 1.1rem;
    color: #cbd5e1;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.membership-benefits {
    list-style: none;
    padding: 0;
    margin-bottom: 2.5rem;
}

.membership-benefits li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 500;
}

.membership-benefits li span {
    color: var(--color-accent);
    font-weight: bold;
}

/* Button Glow Effect */
.btn-glow {
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
    animation: pulse 2s infinite;
}

/* --- Categories Grid (3 Columns) --- */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.home-category-card {
    background: var(--color-card-bg);
    /* Use theme variable */
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    backdrop-filter: blur(10px);
}

.home-category-card:hover {
    transform: translateY(-10px);
    border-color: var(--color-accent);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.card-image {
    height: 250px;
    overflow: hidden;
    position: relative;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.home-category-card:hover .card-image img {
    transform: scale(1.1);
}

.card-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-content h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #fff;
}

.card-content p {
    color: #94a3b8;
    margin-bottom: 20px;
    flex-grow: 1;
}

.btn-link {
    color: var(--color-accent);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-top: auto;
}

.btn-link:hover {
    color: #fff;
}

/* Featured Badge for Cards */
.home-category-card.featured {
    border: 1px solid var(--color-accent);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.1);
}

.featured-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--color-accent);
    color: #000;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 0.8rem;
    border-radius: 4px;
    z-index: 2;
}

/* --- Horizontal Card (Merchandising) --- */
.categories-grid.single-row {
    grid-template-columns: 1fr;
    max-width: 900px;
    margin: 0 auto;
}

.home-category-card.horizontal-card {
    flex-direction: row;
    align-items: center;
    height: auto;
}

.horizontal-card .card-image {
    width: 40%;
    height: 250px;
}

.horizontal-card .card-content {
    width: 60%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .membership-feature {
        flex-direction: column;
    }

    .membership-image {
        min-height: 250px;
        order: -1;
        /* Image on top on mobile */
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-category-card.horizontal-card {
        flex-direction: column;
    }

    .horizontal-card .card-image,
    .horizontal-card .card-content {
        width: 100%;
    }

    .horizontal-card .card-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: 1fr;
    }

    .membership-content {
        padding: 30px;
    }

    .membership-content h3 {
        font-size: 2rem;
    }
}

/* =========================================
   MEMBERSHIP SALES PAGE STYLES
   ========================================= */

/* --- Hero Section --- */
.membership-hero {
    position: relative;
    height: 85vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    background: url('https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    /* Use a powerful image from assets */
    overflow: hidden;
}

.membership-hero .hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(10, 14, 23, 0.9) 0%, rgba(10, 14, 23, 0.6) 100%);
    z-index: 1;
}

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

/* Forzar que el texto en el hero de membresía sea siempre claro, ya que el fondo es oscuro */
.membership-hero h1,
.membership-hero p {
    color: #ffffff !important;
}

.badge-premium-hero {
    background: var(--color-accent);
    color: #000;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    display: inline-block;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
}

.cta-group {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

/* --- Value Stack Section --- */
.value-stack-section {
    background: var(--color-bg-main);
    position: relative;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
}

/* --- Professional Value Cards --- */
.value-card-pro {
    background: var(--color-card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
}

.value-card-pro:hover {
    transform: translateY(-10px);
    border-color: var(--color-accent);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 217, 255, 0.1);
}

.value-card-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.value-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.value-card-pro:hover .value-card-image img {
    transform: scale(1.05);
}

.value-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(10, 14, 23, 1) 0%, rgba(10, 14, 23, 0.3) 50%, transparent 100%);
    z-index: 1;
}

.value-card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    margin: 0;
    color: #fff;
    font-size: 1.8rem;
    z-index: 2;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.value-card-pro:hover .value-card-title {
    transform: translateY(0);
    color: var(--color-accent);
}

.value-card-content {
    padding: 30px;
    flex: 1;
}

.value-card-content p {
    color: var(--color-text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

.value-card-content h3 {
    display: none;
    /* In case any stray h3 is left */
}

.mini-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mini-list li {
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #94a3b8;
    position: relative;
    padding-left: 15px;
}

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

/* --- Stats Section --- */
.stats-section {
    background: #0f141e;
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    gap: 40px;
}

.stat-item .number {
    display: block;
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-accent);
    font-family: var(--font-heading);
    line-height: 1;
    margin-bottom: 10px;
}

.stat-item .label {
    font-size: 1.1rem;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Pricing Section --- */
.pricing-section {
    background: radial-gradient(circle at center, rgba(30, 58, 95, 0.2) 0%, transparent 70%);
}

.pricing-card-wrapper {
    max-width: 500px;
    margin: 0 auto;
}

.pricing-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(10, 14, 23, 0.9) 100%);
    border: 2px solid var(--color-accent);
    border-radius: 30px;
    padding: 60px 40px;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 217, 255, 0.1);
}

.popular-tag {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: #000;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.9rem;
    box-shadow: 0 5px 15px rgba(0, 217, 255, 0.4);
}

.pricing-card h3 {
    font-size: 2rem;
    margin-bottom: 30px;
    color: #fff;
}

.pricing-card .price {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 10px;
    color: #fff;
}

.pricing-card .currency {
    font-size: 2rem;
    margin-top: 10px;
    font-weight: 600;
}

.pricing-card .amount {
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

.pricing-card .period {
    font-size: 1.2rem;
    align-self: flex-end;
    margin-bottom: 15px;
    color: #94a3b8;
}

.billing-info {
    color: #94a3b8;
    margin-bottom: 40px;
    font-size: 0.9rem;
}

.benefits-list {
    text-align: left;
    margin-top: 40px;
    list-style: none;
    padding: 0;
}

.benefits-list li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 15px;
}

.benefits-list li::before {
    content: '✓';
    color: var(--color-accent);
    font-weight: bold;
    font-size: 1.2rem;
}

/* --- FAQ Section --- */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.faq-item h4 {
    margin-bottom: 15px;
    color: #fff;
}

.faq-item p {
    color: #94a3b8;
    line-height: 1.6;
}

/* --- Responsive --- */
@media (max-width: 768px) {

    .value-grid,
    .stats-grid,
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .pricing-card {
        padding: 40px 20px;
    }

    .cta-group {
        flex-direction: column;
        width: 100%;
    }

    .cta-group .btn {
        width: 100%;
    }
}

/* =========================================
   CHECKOUT PAGE STYLES
   ========================================= */

.checkout-wrapper {
    padding: 40px;
}

/* --- Layout --- */
.woocommerce-checkout .col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
    float: none;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 768px) {
    .woocommerce-checkout .col2-set {
        grid-template-columns: 1fr;
    }
}

/* --- Form Fields --- */
.woocommerce-checkout label {
    color: #cbd5e1;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.select2-container--default .select2-selection--single {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding: 12px 15px;
    border-radius: 8px;
    height: auto;
    font-size: 1rem;
}

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

.select2-dropdown {
    background-color: #0f141e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff;
}

.select2-results__option[aria-selected=true] {
    background-color: var(--color-accent) !important;
    color: #000 !important;
}

/* --- Headings --- */
.woocommerce-checkout h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

/* --- Order Review Table --- */
.woocommerce-checkout-review-order-table {
    border: none !important;
    margin-bottom: 30px;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px 0;
    color: #cbd5e1;
}

.woocommerce-checkout-review-order-table thead th {
    color: var(--color-accent);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.woocommerce-checkout-review-order-table strong {
    color: #fff;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    border-top: 2px solid var(--color-accent);
    border-bottom: none;
    padding-top: 20px;
    font-size: 1.2rem;
    color: #fff;
}

.woocommerce-checkout-review-order-table .order-total .amount {
    color: var(--color-accent);
    font-weight: 800;
}

/* --- Payment Methods --- */
#payment {
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 10px;
    padding: 20px;
}

#payment ul.payment_methods {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 0 !important;
}

#payment ul.payment_methods li {
    background: transparent !important;
}

#payment ul.payment_methods li label {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

#payment div.payment_box {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ccc !important;
    margin-bottom: 20px !important;
}

#payment div.payment_box p {
    margin-bottom: 0;
}

#place_order {
    background: var(--color-accent);
    color: #000;
    font-weight: 800;
    padding: 15px 30px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
    margin-top: 20px;
    transition: all 0.3s ease;
}

#place_order:hover {
    background: #fff;
    box-shadow: 0 0 20px var(--color-accent);
    transform: translateY(-2px);
}

/* --- Notices & Login --- */
.woocommerce-info,
.woocommerce-error,
.woocommerce-message {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border-top: 3px solid var(--color-accent) !important;
}

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

.woocommerce-form-coupon,
.woocommerce-form-login {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

/* =========================================
   CHECKOUT REFINEMENTS & FORCE DARK MODE
   ========================================= */

/* --- Force Inputs Dark (Specific Overrides) --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
#add_payment_method table.cart .product-quantity .quantity .qty,
.woocommerce .quantity .qty,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-checkout .woocommerce-form-coupon .input-text {
    background-color: #141a26 !important;
    /* Solid dark color better for autofill */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* --- Fix WebKit Autofill White Background --- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #141a26 inset !important;
    -webkit-text-fill-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* --- Coupon Button --- */
.woocommerce button[name="apply_coupon"],
.woocommerce-page button[name="apply_coupon"] {
    background-color: var(--color-accent) !important;
    color: #000 !important;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    padding: 12px 24px;
    height: auto;
}

.woocommerce button[name="apply_coupon"]:hover {
    background-color: #fff !important;
    color: #000 !important;
}

/* --- Stripe / Credit Card Container --- */
/* Note: We can only style the container. The iframe contents are controlled by Stripe JS settings */
.wc-stripe-elements-field,
.wc-stripe-ibe-element {
    background-color: #141a26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 5px;
    padding: 10px;
    color: #fff;
}

/* Hide the default white background some plugins add */
fieldset {
    background-color: transparent !important;
    border: none !important;
}

/* Select2 Dropdowns (Country/State) */
.select2-container--default .select2-selection--single {
    background-color: #141a26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
}

/* Checkbox Terms */
.woocommerce-form__label-for-checkbox span {
    color: #cbd5e1;
}

.woocommerce-checkbox-input {
    accent-color: var(--color-accent);
}

/* Order Review Table Fixes */
.woocommerce-checkout-review-order-table th {
    background-color: transparent !important;
}

/* =========================================
   CHECKOUT FINAL FIX (ID-BASED SELECTORS)
   ========================================= */

/* Target ALL specific billing fields by ID to ensure overrides */
#billing_first_name,
#billing_last_name,
#billing_company,
#billing_country,
#billing_address_1,
#billing_address_2,
#billing_city,
#billing_state,
#billing_postcode,
#billing_phone,
#billing_email,
#order_comments,
.woocommerce-input-wrapper input[type="text"],
.woocommerce-input-wrapper input[type="email"],
.woocommerce-input-wrapper input[type="tel"],
.woocommerce-input-wrapper textarea,
.select2-selection--single {
    background-color: #141a26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    height: auto !important;
    /* Allow padding to define height */
}

/* Fix for Select2 Height */
.select2-container .select2-selection--single {
    height: 58px !important;
    padding: 0 !important;
    /* wrapper padding handled by flex alignment */
    display: flex !important;
    align-items: center !important;
}

.select2-selection__rendered {
    color: #fff !important;
    padding-left: 20px !important;
}

.select2-selection__arrow {
    height: 58px !important;
    top: 0 !important;
    right: 15px !important;
}

/* Focus States */
#billing_first_name:focus,
#billing_last_name:focus,
#billing_company:focus,
#billing_address_1:focus,
#billing_address_2:focus,
#billing_city:focus,
#billing_postcode:focus,
#billing_phone:focus,
#billing_email:focus,
#order_comments:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.2) !important;
}

/* Fix Autofill specifically for these IDs */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #141a26 inset !important;
    -webkit-text-fill-color: #fff !important;
    border-radius: 12px !important;
}

/* Ensure labels are visible */
.woocommerce-checkout label {
    color: #fff !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* =========================================
   CHECKOUT: TEXTAREA & PAYMENTS REFINEMENTS
   ========================================= */

/* --- Order Notes Textarea --- */
#order_comments {
    min-height: 150px !important;
    /* Approx 5-6 rows */
    resize: vertical !important;
}

/* --- Your Order Section --- */
#order_review_heading {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.woocommerce-checkout-review-order {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 30px;
    margin-top: 20px;
}

.woocommerce-checkout-review-order-table {
    margin-bottom: 0 !important;
    border: none !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 20px 0 !important;
    color: #cbd5e1 !important;
}

.woocommerce-checkout-review-order-table thead th {
    color: var(--color-accent) !important;
    font-size: 0.9rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    border-top: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: none !important;
    font-size: 1.3rem !important;
    color: #fff !important;
    padding-top: 25px !important;
}

.woocommerce-checkout-review-order-table .order-total .amount {
    color: var(--color-accent) !important;
    font-weight: 800 !important;
    text-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
}

/* --- Payment Methods Styling --- */
#payment {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 30px;
}

#payment ul.payment_methods {
    border: none !important;
    padding: 0 !important;
}

.wc_payment_method {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 15px !important;
    padding: 20px !important;
    transition: all 0.3s ease;
}

.wc_payment_method:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.wc_payment_method label {
    margin-bottom: 0 !important;
    font-size: 1.1rem !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    gap: 10px;
}

/* Custom Radio Buttons for Payment */
.wc_payment_method input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    margin: 0 !important;
    position: relative;
    cursor: pointer;
    background: transparent !important;
    flex-shrink: 0;
}

.wc_payment_method input[type="radio"]:checked {
    border-color: var(--color-accent);
}

.wc_payment_method input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--color-accent);
}

/* Payment Box Description */
#payment .payment_box {
    background-color: transparent !important;
    color: #94a3b8 !important;
    padding: 15px 0 0 30px !important;
    /* Indent to align with text */
    font-size: 0.95rem;
    margin: 0 !important;
}

#payment .payment_box::before {
    display: none !important;
    /* Hide the arrow */
}

/* Place Order Button Container */
.form-row.place-order {
    background: rgba(20, 26, 38, 0.8);
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 16px 16px;
    margin-top: 0;
}

/* --- Terms & Conditions Checkbox --- */
.woocommerce-terms-and-conditions-wrapper {
    margin: 20px 0;
    padding: 0 10px;
}

.woocommerce-form__label-for-checkbox span {
    color: #cbd5e1 !important;
    font-size: 0.95rem;
}

.woocommerce-form__label-for-checkbox .woocommerce-terms-and-conditions-checkbox-text {
    display: inline-block;
    margin-left: 8px;
}

/* Custom Checkbox for Terms */
.woocommerce-form__label-for-checkbox input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    background-color: #141a26 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    position: relative !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    top: 5px;
    /* Visual alignment */
}

.woocommerce-form__label-for-checkbox input[type="checkbox"]:checked {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-size: 14px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* =========================================
   CHECKOUT: ORDER REVIEW CARD (REINFORCED)
   ========================================= */

/* The Container Card */
#order_review,
.woocommerce-checkout-review-order {
    background-color: rgba(26, 33, 47, 0.8) !important;
    /* Semi-transparent dark card */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 40px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px);
    margin-top: 30px !important;
}

/* The Table */
#order_review table.shop_table,
.woocommerce-checkout-review-order-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    /* Ensure table is transparent on the card */
    border: none !important;
    margin: 0 0 30px 0 !important;
}

/* Header Row */
#order_review table.shop_table thead th,
.woocommerce-checkout-review-order-table thead th {
    background-color: rgba(0, 217, 255, 0.1) !important;
    /* Cyan tint */
    color: var(--color-accent) !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 1px !important;
    padding: 15px !important;
    border-bottom: 2px solid var(--color-accent) !important;
    border-radius: 6px 6px 0 0;
    /* Rounded top corners */
}

/* Body Rows */
#order_review table.shop_table tbody td,
.woocommerce-checkout-review-order-table tbody td {
    padding: 20px 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
    font-size: 1rem !important;
}

#order_review table.shop_table tbody strong,
.woocommerce-checkout-review-order-table tbody strong {
    color: #fff !important;
}

/* Footer Rows (Subtotal, Tax, etc) */
#order_review table.shop_table tfoot th,
.woocommerce-checkout-review-order-table tfoot th,
#order_review table.shop_table tfoot td,
.woocommerce-checkout-review-order-table tfoot td {
    padding: 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
}

/* Total Row */
#order_review table.shop_table .order-total th,
.woocommerce-checkout-review-order-table .order-total th {
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-bottom: none !important;
    font-size: 1.5rem !important;
    color: #fff !important;
    padding-top: 25px !important;
}

#order_review table.shop_table .order-total td,
.woocommerce-checkout-review-order-table .order-total td {
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-bottom: none !important;
    padding-top: 25px !important;
}

#order_review table.shop_table .order-total .amount,
.woocommerce-checkout-review-order-table .order-total .amount {
    font-size: 2rem !important;
    color: var(--color-accent) !important;
    font-weight: 800 !important;
    text-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
    display: block;
}

/* Adjust Payment Section Margin inside the Card */
#payment {
    margin-top: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 30px !important;
}

/* =========================================
   CHECKOUT: CORRECT SELECTORS (NO IDs/CLASSES)
   The table and UL have NO classes/IDs.
   They live inside .checkout-wrapper.glass-panel
   ========================================= */

/* --- "Tu Pedido" Heading --- */
#order_review_heading {
    font-size: 1.6rem !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin: 50px 0 25px 0 !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid var(--color-accent) !important;
}

/* --- Order Review Table (plain <table> inside glass-panel) --- */
.checkout-wrapper table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 30px !important;
}

.checkout-wrapper table thead th {
    background: rgba(0, 217, 255, 0.08) !important;
    color: var(--color-accent) !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 1.5px !important;
    padding: 18px 20px !important;
    border-bottom: 2px solid rgba(0, 217, 255, 0.2) !important;
    text-align: left !important;
}

.checkout-wrapper table tbody td {
    padding: 18px 20px !important;
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-size: 1rem !important;
}

.checkout-wrapper table tfoot th,
.checkout-wrapper table tfoot td {
    padding: 15px 20px !important;
    color: #94a3b8 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Total row */
.checkout-wrapper table tfoot tr:last-child th,
.checkout-wrapper table tfoot tr:last-child td {
    border-top: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: none !important;
    padding-top: 20px !important;
    font-size: 1.4rem !important;
    color: #fff !important;
}

.checkout-wrapper table tfoot tr:last-child td strong,
.checkout-wrapper table tfoot tr:last-child td bdi {
    color: var(--color-accent) !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    text-shadow: 0 0 15px rgba(0, 217, 255, 0.3);
}

/* --- Payment Methods (plain <ul> <li> inside glass-panel) --- */
.checkout-wrapper>form>ul,
.checkout-wrapper ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 30px 0 !important;
}

.checkout-wrapper>form>ul>li,
.checkout-wrapper ul>li {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 20px 25px !important;
    margin-bottom: 12px !important;
    transition: all 0.3s ease !important;
}

.checkout-wrapper ul>li:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Payment Radio Buttons */
#payment_method_bacs,
#payment_method_stripe,
#payment_method_stripe_klarna,
#payment_method_stripe_eps,
#payment_method_stripe_bancontact,
#payment_method_stripe_ideal {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    background: transparent !important;
    cursor: pointer !important;
    position: relative !important;
    vertical-align: middle !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

#payment_method_bacs:checked,
#payment_method_stripe:checked,
#payment_method_stripe_klarna:checked,
#payment_method_stripe_eps:checked,
#payment_method_stripe_bancontact:checked,
#payment_method_stripe_ideal:checked {
    border-color: var(--color-accent) !important;
}

#payment_method_bacs:checked::after,
#payment_method_stripe:checked::after,
#payment_method_stripe_klarna:checked::after,
#payment_method_stripe_eps:checked::after,
#payment_method_stripe_bancontact:checked::after,
#payment_method_stripe_ideal:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    height: 10px !important;
    background: var(--color-accent) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px var(--color-accent) !important;
}

/* Payment Labels */
.checkout-wrapper ul>li>label {
    color: #fff !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    vertical-align: middle !important;
}

/* Payment description text */
.checkout-wrapper ul>li>p {
    color: #94a3b8 !important;
    font-size: 0.9rem !important;
    margin: 12px 0 0 34px !important;
    line-height: 1.6 !important;
}

/* Stripe fieldsets */
.checkout-wrapper fieldset {
    border: none !important;
    background: transparent !important;
    padding: 10px 0 0 34px !important;
    margin: 0 !important;
}

/* --- Checkboxes (save payment, etc.) --- */
#wc-stripe-new-payment-method,
#wc-stripe_klarna-new-payment-method {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    background-color: #141a26 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    position: relative !important;
    vertical-align: middle !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

#wc-stripe-new-payment-method:checked,
#wc-stripe_klarna-new-payment-method:checked {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-size: 14px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Checkbox labels */
.checkout-wrapper fieldset label {
    color: #cbd5e1 !important;
    font-size: 0.95rem !important;
    vertical-align: middle !important;
}

/* =========================================
   CHECKOUT: INPUT FIELDS LAYOUT FIX
   Inputs are inline-block 249px by default.
   Wrappers are <p> with IDs like #billing_first_name_field
   ========================================= */

/* Force ALL inputs inside checkout to be full-width */
.checkout-wrapper input[type="text"],
.checkout-wrapper input[type="email"],
.checkout-wrapper input[type="tel"],
.checkout-wrapper input[type="number"],
.checkout-wrapper input[type="password"],
.checkout-wrapper select,
.checkout-wrapper textarea {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    background-color: #141a26 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    font-family: var(--font-body) !important;
}

/* Focus glow */
.checkout-wrapper input[type="text"]:focus,
.checkout-wrapper input[type="email"]:focus,
.checkout-wrapper input[type="tel"]:focus,
.checkout-wrapper input[type="number"]:focus,
.checkout-wrapper input[type="password"]:focus,
.checkout-wrapper select:focus,
.checkout-wrapper textarea:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.15) !important;
    outline: none !important;
}

/* Placeholder text */
.checkout-wrapper input::placeholder,
.checkout-wrapper textarea::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
    font-style: italic;
}

/* Field wrapper spacing (<p> tags with billing IDs) */
#billing_first_name_field,
#billing_last_name_field,
#billing_company_field,
#billing_country_field,
#billing_address_1_field,
#billing_address_2_field,
#billing_city_field,
#billing_state_field,
#billing_postcode_field,
#billing_phone_field,
#billing_email_field {
    margin-bottom: 20px !important;
}

/* All field wrappers full-width single column */
#billing_first_name_field,
#billing_last_name_field,
#billing_company_field,
#billing_country_field,
#billing_address_1_field,
#billing_address_2_field,
#billing_city_field,
#billing_state_field,
#billing_postcode_field,
#billing_phone_field,
#billing_email_field {
    display: block !important;
    width: 100% !important;
}

/* Labels inside field wrappers */
.checkout-wrapper form label {
    color: #fff !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
    display: block !important;
    letter-spacing: 0.3px;
}

/* Required asterisk */
.checkout-wrapper form label abbr,
.checkout-wrapper form label .required {
    color: var(--color-accent) !important;
    text-decoration: none !important;
    font-weight: 700;
}

/* Section headings (Detalles de facturación, etc.) */
.checkout-wrapper form h3 {
    color: #fff !important;
    font-size: 1.4rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin: 10px 0 30px 0 !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Textarea for order notes */
#order_comments {
    width: 100% !important;
    min-height: 150px !important;
    resize: vertical !important;
}

/* Autofill override */
.checkout-wrapper input:-webkit-autofill,
.checkout-wrapper input:-webkit-autofill:hover,
.checkout-wrapper input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px #141a26 inset !important;
    -webkit-text-fill-color: #fff !important;
    border-radius: 12px !important;
    caret-color: #fff !important;
}

/* Select dropdown styling */
.checkout-wrapper select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    cursor: pointer !important;
}

/* =========================================
   CHECKOUT: VALIDATION ERROR NOTICES
   ========================================= */
.woocommerce-error {
    background: rgba(220, 38, 38, 0.15) !important;
    border: 1px solid rgba(220, 38, 38, 0.4) !important;
    border-radius: 12px !important;
    padding: 20px 25px !important;
    margin-bottom: 30px !important;
    list-style: none !important;
    color: #fca5a5 !important;
}

.woocommerce-error li {
    padding: 5px 0 !important;
    color: #fca5a5 !important;
    font-size: 0.95rem !important;
}

.woocommerce-error li strong {
    color: #fff !important;
}

.woocommerce-error::before {
    color: #ef4444 !important;
}

.woocommerce-message {
    background: rgba(0, 217, 255, 0.1) !important;
    border: 1px solid rgba(0, 217, 255, 0.3) !important;
    border-radius: 12px !important;
    padding: 20px 25px !important;
    margin-bottom: 30px !important;
    color: #fff !important;
}

.woocommerce-info {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 20px 25px !important;
    margin-bottom: 30px !important;
    color: #cbd5e1 !important;
}

/* ========================================= */
/* WOOCOMMERCE DASHBOARD & COMMUNITY TAB */
/* ========================================= */

.soc-dashboard-welcome {
    background: #0f131a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2.5rem;
    margin-bottom: 2rem;
}

.soc-dashboard-welcome h2 {
    color: #fff;
    margin-bottom: 0.5rem;
    font-size: 2rem;
}

.soc-dashboard-welcome p {
    color: #94a3b8;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.dashboard-quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.quick-link-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quick-link-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-5px);
    border-color: rgba(0, 217, 255, 0.3);
}



.ql-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.quick-link-card h3 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
}

.quick-link-card p {
    color: #cbd5e1;
    font-size: 0.9rem;
    margin-bottom: 0;
    line-height: 1.4;
}



/* Dashboard User Greeting Box */
.dashboard-greeting-box {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.user-greeting-icon {
    background: rgba(0, 217, 255, 0.1);
    color: var(--color-accent);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-greeting-icon svg {
    width: 40px;
    height: 40px;
}

.user-greeting-text h2 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 0.2rem;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
}

.user-greeting-text p {
    font-size: 1.1rem;
    color: #94a3b8;
    margin-bottom: 0;
}

/* Adjusting Quick Links icons SVG */
.ql-icon {
    margin-bottom: 1.5rem;
    color: #fff;
}

.quick-link-card:hover .ql-icon {
    color: var(--color-accent);
}



/* Hide default WooCommerce dashboard message */
.woocommerce-MyAccount-content>p:first-of-type,
.woocommerce-MyAccount-content>p:nth-of-type(2) {
    display: none !important;
}

/* Membership Pricing Grid */
.pricing-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    width: 100%;
    margin-top: 40px;
}

.pricing-grid .pricing-card-wrapper {
    flex: 1 1 350px;
    max-width: 500px;
    margin: 0;
}