/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.5.1752058482
Updated: 2025-07-09 10:54:42

*/

/* --- Archetype Link Styling --- */

/* The main wrapper for the link */
.archetype-link-wrapper {
    display: inline-flex; /* Use flexbox for easy alignment */
    align-items: center; /* Vertically center the icon and text */
    background-color: #f0f2f5; /* A light, neutral background */
    border-radius: 20px; /* Creates the "pill" shape */
    padding: 4px 12px 4px 6px; /* Tweak padding for spacing */
    text-decoration: none;
    color: #333; /* Dark text color for contrast */
    font-weight: 600;
    font-size: 0.9em;
    border: 1px solid #e1e4e8;
    transition: all 0.2s ease-in-out;
    margin: 0 2px; /* Adds a little space around the link */
    vertical-align: middle; /* Helps align with surrounding text */
}

/* Add a cool hover effect */
.archetype-link-wrapper:hover {
    background-color: #e4e6eb;
    border-color: #d1d5db;
    transform: translateY(-1px); /* Slight lift on hover */
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* Styling for the small icon image (featured image thumbnail) */
.archetype-link-icon {
    width: 22px;  /* Control the size of your icon */
    height: 22px;
    max-width: 22px !important; /* Force max width to prevent oversized images */
    max-height: 22px !important; /* Force max height to prevent oversized images */
    margin-right: 8px; /* Space between icon and text */
    object-fit: cover; /* Ensures the image fills the space nicely */
    border-radius: 50%; /* Make the icon circular */
}

/* Styling for the text part of the link */
.archetype-link-name {
    line-height: 1; /* Ensures text stays centered */
}

/* Mobile responsive styles - reduce icon size, keep text readable */
@media (max-width: 768px) {
    .archetype-link-wrapper {
        padding: 4px 10px 4px 6px;
    }

    .archetype-link-icon {
        width: 20px !important; /* Smaller icon for mobile */
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin-right: 6px;
    }
}

@media (max-width: 480px) {
    .archetype-link-wrapper {
        padding: 3px 8px 3px 5px;
    }

    .archetype-link-icon {
        width: 18px !important; /* Even smaller icon for small phones */
        height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        margin-right: 5px;
    }
}



/*
=====================================================
 Custom Styling for "Our Philosophy" Page Template
=====================================================
*/

/* General page container for consistent spacing */
.philosophy-page-container .container {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

/* 1. Hero Section Styling
--------------------------------------------- */
.philosophy-hero {
    background-color: #1a1a1a; /* Dark background for impact */
    color: #ffffff;
    padding: 80px 0;
    text-align: center;
}
.philosophy-hero .entry-title {
    font-size: 3.5em;
    margin-bottom: 10px;
    color: #ffffff;
}
.philosophy-subtitle {
    font-size: 1.4em;
    color: #cccccc;
    font-style: italic;
    max-width: 700px;
    margin: 0 auto;
}

/* 2. Sticky Table of Contents
--------------------------------------------- */
.philosophy-toc {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0; /* Sticks to the top of the viewport (or below admin bar) */
    background-color: #fff;
    z-index: 1000;
    padding: 15px 0;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.philosophy-toc .container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.philosophy-toc strong {
    margin-right: 20px;
}
.philosophy-toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}
.philosophy-toc ul li {
    margin: 0 15px;
}
.philosophy-toc ul li a {
    text-decoration: none;
    color: #555;
    font-weight: 600;
    transition: color 0.2s ease;
}
.philosophy-toc ul li a:hover {
    color: #d52b1e; /* Your brand's red accent color */
}


/* 3. Main Content and Pillar Blocks
--------------------------------------------- */
.philosophy-page-container .entry-content {
    padding: 60px 0;
    font-size: 1.1em;
    line-height: 1.7;
}
.philosophy-page-container .entry-content h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}
.pillar-block {
    display: flex;
    align-items: center;
    gap: 50px; /* Space between image and text */
    margin-top: 60px;
    padding: 40px 0;
}
/* This creates the alternating "zig-zag" effect */
.pillar-block.pillar-block-right {
    flex-direction: row-reverse;
}
.pillar-block .pillar-image {
    flex: 0 0 40%; /* Image takes up 40% of the width */
}
.pillar-block .pillar-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.pillar-block .pillar-text {
    flex: 1;
}
.pillar-block .pillar-text h3 {
    font-size: 2em;
    margin-top: 0;
}

/* 4. Final Call-to-Action Section
--------------------------------------------- */
.philosophy-cta {
    background-color: #d52b1e; /* Your brand's main red color */
    color: #ffffff;
    padding: 80px 0;
    text-align: center;
}
.philosophy-cta h2 {
    font-size: 2.8em;
    color: #ffffff;
}
.philosophy-cta p {
    font-size: 1.2em;
    max-width: 600px;
    margin: 20px auto 30px;
}
.philosophy-cta .cta-button {
    background-color: #ffffff;
    color: #d52b1e;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: all 0.2s ease;
    border: 2px solid #ffffff;
}
.philosophy-cta .cta-button:hover {
    background-color: transparent;
    color: #ffffff;
    transform: scale(1.05);
}

/* 5. Mobile Responsiveness
--------------------------------------------- */
@media (max-width: 768px) {
    .philosophy-hero .entry-title { font-size: 2.5em; }
    .philosophy-subtitle { font-size: 1.2em; }
    
    /* Stack pillar blocks on mobile */
    .pillar-block, .pillar-block.pillar-block-right {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    /* Hide the sticky nav on mobile for simplicity */
    .philosophy-toc { display: none; }
}

/* ================================================
   Athletic DNA Chart Styles
   ================================================ */

.personality-chart {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.personality-chart .chart-title {
    text-align: center;
    margin-top: 0;
    margin-bottom: 35px;
    font-size: 1.5em;
}

.dna-profile-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.pillar-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.pillar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.pillar-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sp-primary-color, #343a40);
    flex: 1;
    text-align: center;
    order: 2;
    position: relative;
}

/* Labels in header for all screen sizes */
.pillar-header .pillar-label-inline {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sp-archetype-text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    padding: 4px 8px;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
}

.pillar-header .pillar-label-negative {
    order: 1;
}

.pillar-header .pillar-label-positive {
    order: 3;
}

.pillar-chart-area {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

/* Hide original labels - we're using header labels now */
.pillar-label {
    display: none;
}

.pillar-track {
    width: 100%;
    max-width: 100%;
    height: 12px;
    border-radius: 6px;
    position: relative;
    background-color: #e9ecef;
    margin: 0;
}

.pillar-track-fill {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 4px;
    width: 50% !important;
    transition: width 0.8s ease-in-out;
}

.pillar-track-fill.color-drive { 
    background-color: var(--sp-drive-color, #DC143C); 
}

.pillar-track-fill.color-competitive { 
    background-color: var(--sp-competitive-color, #f39c12); 
}

.pillar-track-fill.color-cognitive { 
    background-color: var(--sp-cognitive-color, #3498db); 
}

.pillar-track-fill.color-social { 
    background-color: var(--sp-social-color, #27ae60); 
}

/* Legacy support for old class names */
.pillar-track-fill.color-comp { 
    background-color: var(--sp-competitive-color, #f39c12); 
}

.pillar-track-fill.color-cog { 
    background-color: var(--sp-cognitive-color, #3498db); 
}

.pillar-track-fill.color-soc { 
    background-color: var(--sp-social-color, #27ae60); 
}

.pillar-marker-wrapper {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.8s ease-in-out;
}

.pillar-marker-icon {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transform: rotate(45deg);
    flex-shrink: 0;
    transition: transform 0.3s ease;
    overflow: hidden;
    border: 2px solid;
}

.pillar-marker-icon.color-drive { 
    border-color: var(--sp-drive-color, #DC143C); 
}

.pillar-marker-icon.color-competitive { 
    border-color: var(--sp-competitive-color, #f39c12); 
}

.pillar-marker-icon.color-cognitive { 
    border-color: var(--sp-cognitive-color, #3498db); 
}

.pillar-marker-icon.color-social { 
    border-color: var(--sp-social-color, #27ae60); 
}

/* Legacy support for old class names */
.pillar-marker-icon.color-comp { 
    border-color: var(--sp-competitive-color, #f39c12); 
}

.pillar-marker-icon.color-cog { 
    border-color: var(--sp-cognitive-color, #3498db); 
}

.pillar-marker-icon.color-soc { 
    border-color: var(--sp-social-color, #27ae60); 
}

.pillar-marker-icon img {
    width: 140%;
    height: 140%;
    object-fit: cover;
    transform: rotate(-45deg) scale(1.5);
    margin-left: 0%;
    margin-top: -52%;
}

.pillar-marker-wrapper:hover .pillar-marker-icon {
    transform: rotate(45deg) scale(1.15);
}

.pillar-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    margin-bottom: 10px;
    background-color: #343a40;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
}

.pillar-tooltip.is-visible {
    visibility: visible;
    opacity: 1;
}

.pillar-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #343a40 transparent transparent transparent;
}

.pillar-info-trigger {
    display: inline-block;
    position: relative;
    margin-left: 8px;
    color: #999;
    font-weight: bold;
    cursor: help;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    line-height: 14px;
    text-align: center;
    font-size: 11px;
    font-style: italic;
    top: -2px;
}

.pillar-info-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: #333;
    color: #fff;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.9em;
    line-height: 1.5;
    padding: 10px 15px;
    border-radius: 6px;
    width: 280px;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    transition: opacity 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    pointer-events: none;
}

.pillar-info-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.pillar-info-trigger:hover .pillar-info-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Mobile responsive styles for Athletic DNA Chart */
@media (max-width: 768px) {
    .personality-chart {
        padding: 20px 15px;
        margin: 0;
        border-radius: 8px;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .pillar-header {
        gap: 5px;
        margin-bottom: 10px;
    }
    
    .pillar-name {
        font-size: 1rem;
    }
    
    .pillar-header .pillar-label-inline {
        font-size: 0.6rem;
        padding: 2px 6px;
    }
    
    .pillar-track {
        height: 10px;
        border-radius: 5px;
    }
    
    .pillar-marker-icon img {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }
    
    .pillar-marker-wrapper {
        width: 24px;
        height: 24px;
    }
    
    .pillar-marker-icon {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 400px) {
    .personality-chart {
        padding: 15px 8px;
        margin: 0;
    }
    
    .pillar-header {
        gap: 3px;
        margin-bottom: 8px;
    }
    
    .pillar-name {
        font-size: 0.9rem;
    }
    
    .pillar-header .pillar-label-inline {
        font-size: 0.5rem;
        padding: 1px 4px;
    }
    
    .pillar-track {
        height: 8px;
        border-radius: 4px;
    }
    
    .pillar-marker-icon img {
        width: 16px;
        height: 16px;
    }
    
    .pillar-marker-wrapper {
        width: 20px;
        height: 20px;
    }
    
    .pillar-marker-icon {
        width: 14px;
        height: 14px;
    }
    
    .dna-profile-container {
        gap: 20px;
    }
}

/* ================================================
   Report Template Styles
   ================================================ */

/* Main Report Styles */
.report-container { 
    min-height: 90vh; 
    font-family: 'Inter', sans-serif; 
    color: #4A4A4A;
}

.report-container .entry-content p { 
    font-family: 'Georgia', serif; 
    line-height: 1.8; 
    color: #333; 
    font-size: 1.1em; 
}

.report-container h1, .report-container h2, .report-container h3, .report-container h4 { 
    font-family: 'IBM Plex Serif', serif; 
}

.report-container, .site-main { 
    max-width: 1280px; 
    margin: 0 auto; 
    box-sizing: border-box; 
}

/* Layout Fixes */
.site-main { 
    max-width: 100vw; 
    overflow-x: hidden; 
}

@media (min-width: 1280px) {
    .site-main { 
        max-width: 1280px; 
    }
}

.report-container { 
    padding: 0 15px; 
    box-sizing: border-box; 
}

/* Header and Basic Layout */
.report-header { 
    text-align: center; 
    padding: 40px 0 20px 0; 
}

.report-header h1 { 
    font-size: 2.2em; 
    margin: 0; 
    color: var(--sp-text-color, #000); 
}

.report-sidebar { 
    background-color: #f8f9fa; 
    border-radius: 8px; 
    padding: 30px; 
    margin-bottom: 30px; 
    text-align: center; 
}

.report-sidebar h2 { 
    font-size: 1.7em; 
    margin-bottom: 15px; 
}

.report-sidebar img { 
    max-width: 180px; 
    height: auto; 
    border-radius: 10px; 
    margin-bottom: 20px; 
}

.report-sidebar .archetype-meta { 
    font-size: 1.1em; 
    color: #666; 
    margin-bottom: 25px; 
    line-height: 1.6; 
}

.report-sidebar .archetype-code { 
    font-size: 2em; 
    font-weight: bold; 
    color: var(--sp-primary-color, #007bff); 
    margin-bottom: 10px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
}

.report-sidebar .social-sharing h3 { 
    font-size: 1.4em; 
    margin-bottom: 10px; 
}

.report-sidebar .social-icons { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    margin-top: 15px; 
}

.report-sidebar .social-icon { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: 45px; 
    height: 45px; 
    border-radius: 50%; 
    text-decoration: none; 
    color: #fff; 
    font-size: 1.2em; 
    transition: transform 0.2s ease, opacity 0.2s ease; 
}

.report-sidebar .social-icon:hover { 
    transform: scale(1.1); 
    opacity: 0.9; 
}

.report-sidebar .social-icon.facebook { 
    background-color: #3b5998; 
}

.report-sidebar .social-icon.twitter { 
    background-color: #1da1f2; 
}

.report-sidebar .social-icon.linkedin { 
    background-color: #0077b5; 
}

.report-sidebar .social-icon.copy { 
    background-color: #6c757d; 
}

.report-sidebar .social-icon i { 
    margin: 0; 
}

.report-main-content { 
    flex: 1; 
}

.report-dashboard { 
    display: flex; 
    flex-direction: column; 
    gap: 30px; 
}

.report-content-area { 
    font-size: 1.05em; 
    line-height: 1.8; 
    color: #333; 
}

.report-content-area h2 { 
    font-size: 2.2em; 
    color: #333; 
    margin-bottom: 20px; 
    border-bottom: 2px solid #e9ecef; 
    padding-bottom: 15px; 
}

.report-content-area h3 { 
    font-size: 1.6em; 
    color: #495057; 
    margin-top: 30px; 
    margin-bottom: 15px; 
}

.report-content-area h4 { 
    font-size: 1.3em; 
    color: #6c757d; 
    margin-top: 25px; 
    margin-bottom: 12px; 
}

.report-content-area ul { 
    margin: 20px 0; 
    padding-left: 0; 
}

.report-content-area ul {
    list-style: none; 
    margin-bottom: 12px; 
    padding-left: 20px; /* Reduced padding since no checkmarks */
    position: relative; 
    line-height: 1.6; 
}

.report-content-area li {
    list-style: none; 
    margin-bottom: 12px; 
    padding-left: 0; /* No padding needed for checkmarks */
    position: relative; 
    line-height: 1.6; 
}

.report-content-area li:before { 
    content: ''; /* Hide checkmarks in reports */
    display: none; /* Completely hide the pseudo-element */
}.chart-image-container { 
    display: flex; 
    flex-direction: row; 
    gap: 30px; 
    align-items: flex-start; 
    margin-bottom: 30px; 
}

.chart-wrapper { 
    flex: 1; 
    min-width: 0; 
}

.image-wrapper { 
    flex: 0 0 300px; 
    position: relative; 
}

.image-wrapper img { 
    width: 100%; 
    height: auto; 
    border-radius: 12px 12px 0 0; /* Rounded top corners only - matches title block */
    object-fit: cover; 
    display: block; /* Removes any spacing below image */
}

.archetype-title-block { 
    position: static; /* Changed from absolute */
    background: linear-gradient(135deg, var(--sp-primary-color, #0056b3) 0%, var(--sp-secondary-color, #004494) 100%); 
    color: #fff; 
    padding: 20px; 
    border-radius: 0 0 12px 12px; /* Rounded bottom corners only */
    text-align: center; 
    margin-top: -4px; /* Slight negative margin to connect with image */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.archetype-title-block h3 { 
    margin: 0 0 8px 0; 
    font-size: 1.5em; 
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.archetype-title-block .code { 
    font-size: 1.0em; 
    opacity: 0.95; 
    font-weight: 600; 
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    letter-spacing: 1px;
}

.report-summary-box { 
    background-color: #f8f9fa; 
    border-radius: 8px; 
    padding: 25px; 
    margin: 25px 0; 
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .chart-image-container { 
        flex-direction: column; 
    }
    
    .image-wrapper { 
        flex: 0 0 auto; 
        width: 100%; 
        max-width: 400px; 
        margin: 0 auto; 
    }
    
    .report-sidebar .social-sharing { 
        display: none; 
    }
}

/* ================================================
   Template Parts Styles
   ================================================ */

/* Strengths & Weaknesses Lists */
.side-by-side-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 20px 0;
}

.side-by-side-wrapper {
    flex: 1;
    min-width: 300px;
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.side-by-side-wrapper h4 {
    color: var(--sp-primary-color, #0056b3);
    font-size: 1.3em;
    margin-bottom: 15px;
    font-weight: 600;
}

.side-by-side-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-by-side-wrapper li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 0;
}

.report-icon {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.25em;
    flex-shrink: 0;
}

.strength-icon {
    fill: #28a745;
}

.weakness-icon {
    fill: #dc3545;
}

.energizes-icon {
    fill: #17a2b8;
}

.drains-icon {
    fill: #ffc107;
}

.default-icon {
    fill: #007bff;
}

/* Summary Grid */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    text-align: center;
    margin: 30px 0;
}

.summary-item {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.summary-item h4 {
    margin: 0 0 8px 0;
    font-size: 0.9em;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-item p,
.summary-item a {
    margin: 0;
    font-size: 1.6em;
    font-weight: bold;
    color: #343a40;
}

.summary-item a {
    color: var(--sp-primary-color, #0056b3);
    text-decoration: none;
    transition: color 0.2s ease;
}

.summary-item a:hover {
    color: var(--sp-secondary-color, #004494);
}

/* Archetype Cards */
.archetype-card {
    background-color: rgba(0,0,0,0.2);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: #F9FAFB;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
    display: block;
}

.archetype-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    text-decoration: none;
    color: #F9FAFB;
}

.archetype-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.archetype-card-content {
    padding: 20px;
}

.archetype-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.archetype-card-header h3 {
    margin: 0;
    font-size: 1.3rem;
}

.archetype-card-code {
    background-color: #374151;
    color: #FFFFFF;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    font-family: monospace;
    flex-shrink: 0;
}

.archetype-card-motto {
    margin: 0;
    color: #E5E7EB;
    font-size: 0.95rem;
    font-style: italic;
}

/* Actionable Exercises */
.actionable-exercises {
    margin: 30px 0;
}

.segment-headline {
    color: var(--sp-primary-color, #0056b3);
    font-size: 1.4em;
    margin: 30px 0 20px 0;
    font-weight: 600;
    border-bottom: 2px solid var(--sp-accent-color, #e9ecef);
    padding-bottom: 8px;
}

.exercise-item {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid var(--sp-primary-color, #0056b3);
    transition: background-color 0.2s ease;
}

.exercise-item:hover {
    background: #f1f3f4;
}

.exercise-item h5 {
    margin: 0 0 8px 0;
    color: var(--sp-primary-color, #0056b3);
    font-weight: 600;
    font-size: 1.1em;
}

.exercise-item p {
    margin: 0;
    line-height: 1.6;
    color: #495057;
}

/* Responsive adjustments for template parts */
@media (max-width: 768px) {
    .side-by-side-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .side-by-side-wrapper {
        min-width: auto;
        padding: 20px;
    }
    
    .summary-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .summary-item {
        padding: 15px;
    }
    
    .archetype-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .archetype-card-code {
        align-self: flex-end;
    }
}

/* ================================================
   Archetype Description Pages Styles
   ================================================ */

/* Font imports removed - now using system fonts via typography-system.css for better performance */

/* Core desire/fear panel */
.desire-fear-panel {
    border-top: 4px solid var(--sp-archetype-highlight, #6366f1);
}

.desire-fear-panel .panel-body {
    padding: 1.75rem;
}

.desire-fear-panel h3 {
    color: var(--sp-archetype-highlight, #6366f1);
}

/* At a glance highlight box */
.at-a-glance-box {
    background-color: var(--sp-archetype-bg-light, #f8fafc);
    border-left: 4px solid var(--sp-archetype-highlight, #6366f1);
    padding: 1.5rem;
    padding-left: 2rem;
    border-radius: 0.5rem;
    margin-bottom: 2.5rem;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.at-a-glance-box::before {
    content: 'i';
    flex-shrink: 0;
    display: inline-block;
    font-family: serif;
    font-weight: bold;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--sp-archetype-highlight, #6366f1);
    color: white;
    text-align: center;
    line-height: 1.5rem;
    font-size: 0.9rem;
}

/* CSS Grid layout for Image and Motto */
.image-motto-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

/* Prominent Motto Block */
.motto-block {
    font-family: 'Lora', serif;
    background-color: var(--sp-archetype-bg-light, #f1f5f9);
    border-left: 5px solid var(--sp-archetype-highlight, #6366f1);
    padding: 2rem 2.5rem;
    position: relative;
    text-align: center;
}

.motto-block p {
    font-size: 1.75rem;
    font-weight: 600;
    font-style: italic;
    color: var(--sp-archetype-text, #374151);
    line-height: 1.5;
    margin: 0;
}

.motto-block::before,
.motto-block::after {
    font-family: serif;
    font-size: 5rem;
    font-weight: 700;
    color: #e0e7ff;
    position: absolute;
    line-height: 1;
}

.motto-block::before {
    content: '"';
    top: 0.5rem;
    left: 0.5rem;
}

.motto-block::after {
    content: '"';
    bottom: -1.5rem;
    right: 0.5rem;
}

/* Circular Image */
.summary-image {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid white;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
}

/* Table-Style Comparison Panels */
.panel {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.04);
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.panel-body {
    padding: 1.25rem;
}

/* Page grid container for sidebar layout */
.page-grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 3rem auto 0;
}

.main-content-area {
    min-width: 0;
}

.sidebar-area {
    min-width: 0;
}

/* Fade-in animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

.fade-in-up.delay-1 { animation-delay: 0.1s; }
.fade-in-up.delay-2 { animation-delay: 0.2s; }
.fade-in-up.delay-3 { animation-delay: 0.3s; }
.fade-in-up.delay-4 { animation-delay: 0.4s; }
.fade-in-up.delay-5 { animation-delay: 0.5s; }
.fade-in-up.delay-6 { animation-delay: 0.6s; }

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

/* CTA Section */
.cta-section {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, var(--sp-primary-color, #0056b3) 0%, var(--sp-secondary-color, #004494) 100%);
    border-radius: 1rem;
    color: white;
}

.cta-button {
    display: inline-block;
    background-color: rgba(255,255,255,0.2);
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    margin-top: 1.5rem;
    transition: all 0.3s ease;
    border: 2px solid rgba(255,255,255,0.3);
}

.cta-button:hover {
    background-color: rgba(255,255,255,0.3);
    transform: translateY(-2px);
    text-decoration: none;
    color: white;
}

/* Responsive adjustments for archetype pages */
@media (max-width: 767px) {
    .image-motto-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    
    .page-grid-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .motto-block {
        padding: 1.5rem;
    }
    
    .motto-block p {
        font-size: 1.4rem;
    }
}

/* ================================================
   Blueprint Page Styles
   ================================================ */

/* New services container */
.new-services-container {
    padding-top: 40px;
    margin-top: 40px;
    border-top: 1px solid #eee;
}

/* Section divider title */
.section-divider-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
    color: #111;
}

/* Certification lists */
.certification-list {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

.certification-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    color: #555;
    font-size: 0.95rem;
}

.certification-list li::before {
    content: '✓';
    color: var(--sp-blueprint-red, #b60f0a);
    font-weight: bold;
    margin-right: 15px;
    font-size: 1.2rem;
    line-height: 1;
}

/* Pillar blocks */
.pillar-block {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
    padding: 2rem;
    background: var(--sp-blueprint-section-bg, #f9fafb);
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.pillar-block-right {
    flex-direction: row-reverse;
}

.pillar-image {
    flex: 0 0 200px;
}

.pillar-image img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.pillar-text {
    flex: 1;
}

.pillar-text h3 {
    color: var(--sp-primary-color, #0056b3);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.pillar-text p {
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Responsive for blueprint page */
@media (max-width: 768px) {
    .pillar-block,
    .pillar-block-right {
        flex-direction: column;
        text-align: center;
    }
    
    .pillar-image {
        flex: none;
        max-width: 200px;
        margin: 0 auto;
    }
}

/* ================================================
   About Page Styles
   ================================================ */

.about-page-main {
    background-color: var(--sp-about-bg-light, #FFFFFF);
    color: var(--sp-about-text-dark, #1F2937);
}

/* Hero Section */
.about-hero {
    padding: 80px 20px;
    background-color: var(--sp-about-bg-light, #F9FAFB);
}

.about-hero-inner {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .about-hero-inner {
        grid-template-columns: 250px 1fr;
        text-align: left;
        gap: 60px;
    }
}

.about-hero-image {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    border: 4px solid var(--sp-background-color, #FFFFFF);
}

.about-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-hero-content h1 {
    font-size: 3rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.2;
    color: var(--sp-about-text-dark, #1F2937);
}

.about-hero-content .subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--sp-about-accent-red, #b60f0a);
    margin-bottom: 20px;
}

.about-hero-content p {
    font-size: 1.1rem;
    color: var(--sp-about-text-muted, #6B7280);
    line-height: 1.7;
}

/* General About Section Styling */
.about-section {
    padding: 100px 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--sp-about-text-dark, #1F2937);
}

.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--sp-about-text-muted, #6B7280);
    margin-top: 0;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Credentials grid */
.credentials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.credential-item {
    text-align: center;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.credential-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.credential-item img {
    max-width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
}

/* ================================================
   Services Page Styles
   ================================================ */

.services-page-container {
    color: var(--sp-services-text-dark, #1F2937);
}

/* Services Hero Section */
.services-hero {
    background-color: var(--sp-services-bg-dark, #111827);
    background-image: linear-gradient(rgba(17, 24, 39, 0.8), rgba(17, 24, 39, 0.8)), url('https://sportpersonalities.com/wp-content/uploads/2025/07/u7537626856_Create_a_hyper-realistic_sculpture_of_an_open_not_0685372c-8be8-4342-8c72-f91537f96522_2.png');
    background-size: cover;
    background-position: center;
    padding: 120px 20px;
    text-align: center;
    color: var(--sp-services-text-light, #F3F4F6);
}

.services-hero h1 {
    font-size: 3.5rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-top: 0;
    margin-bottom: 20px;
}

.services-hero p {
    font-size: 1.25rem;
    max-width: 700px;
    margin: 0 auto 40px;
    color: var(--sp-services-text-light, #F3F4F6);
    opacity: 0.9;
}

.services-hero .cta-button {
    display: inline-block;
    background-color: var(--sp-about-accent-red, #b60f0a);
    color: #FFFFFF;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.2s, transform 0.2s;
}

.services-hero .cta-button:hover {
    background-color: #9d0d08;
    transform: translateY(-2px);
    text-decoration: none;
    color: #FFFFFF;
}

/* General Services Section Styling */
.services-section {
    padding: 100px 20px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Philosophy Intro */
.philosophy-intro {
    text-align: center;
    padding-bottom: 0;
}

.philosophy-intro h2 {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sp-about-accent-red, #b60f0a);
    margin-bottom: 15px;
}

.philosophy-intro p {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    color: var(--sp-services-text-dark, #1F2937);
}

/* Service Offerings */
.service-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
    padding: 2rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

@media (min-width: 768px) {
    .service-block {
        grid-template-columns: 200px 1fr;
        align-items: center;
    }
}

.service-image {
    text-align: center;
}

.service-image img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.service-content h3 {
    color: var(--sp-primary-color, #0056b3);
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.service-step {
    color: var(--sp-about-accent-red, #b60f0a);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    display: block;
}

.service-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--sp-services-accent-green, #10B981);
    margin: 1rem 0;
}

.service-description {
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Feature lists */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    color: #555;
}

.feature-list .icon {
    color: var(--sp-services-accent-green, #10B981);
    margin-right: 0.75rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* Service buttons */
.service-button {
    display: inline-block;
    background-color: var(--sp-primary-color, #0056b3);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    margin-top: 1rem;
}

.service-button:hover {
    background-color: var(--sp-secondary-color, #004494);
    transform: translateY(-1px);
    text-decoration: none;
    color: white;
}

.service-button.secondary {
    background-color: transparent;
    color: var(--sp-primary-color, #0056b3);
    border: 2px solid var(--sp-primary-color, #0056b3);
}

.service-button.secondary:hover {
    background-color: var(--sp-primary-color, #0056b3);
    color: white;
}

/* Responsive adjustments for services */
@media (max-width: 768px) {
    .services-hero h1 {
        font-size: 2.5rem;
    }
    
    .service-block {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .philosophy-intro p {
        font-size: 1.3rem;
    }
}

/* ================================================
   Navigation and Header Fixes for Medium Screens
   ================================================ */

/* Fix for medium screens where navigation becomes vertical */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Ensure header stays horizontal on tablets/medium screens */
    .site-header .ast-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }
    
    /* Prevent site title from going vertical */
    .site-branding {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    .site-title {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 200px !important;
    }
    
    /* Ensure navigation stays horizontal */
    .main-header-menu {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .main-header-menu .menu-item {
        display: inline-block !important;
        white-space: nowrap !important;
    }
    
    .main-header-menu .menu-item a {
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
    }
    
    /* Login text fixes */
    .ast-header-account {
        white-space: nowrap !important;
        font-size: 0.85rem !important;
    }
    
    /* Make sure header doesn't break */
    .ast-primary-header-bar {
        min-height: 60px !important;
    }
    
    /* Reduce logo size on medium screens if needed */
    .custom-logo {
        max-height: 40px !important;
        width: auto !important;
    }
}


    
    .ast-header-break-point .menu-toggle {
        display: block !important;
    }
    
    /* Fix distorted desktop menu on mobile */
    .main-header-menu.toggled-on {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
        z-index: 999 !important;
        padding: 20px !important;
    }
    
    .main-header-menu.toggled-on .menu-item {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #eee !important;
    }
    
    .main-header-menu.toggled-on .menu-item a {
        display: block !important;
        padding: 10px 0 !important;
        width: 100% !important;
        text-align: left !important;
    }
    

    
    /* Ensure site title doesn't break on mobile */
    .site-title {
        font-size: 1.2rem !important;
        line-height: 1.2 !important;
    }
}

/* Additional fixes for very wide screens */
@media (min-width: 1025px) {
    /* Make header take full width of screen */
    .site-header {
        width: 100% !important;
    }
    
    .site-header .ast-container {
        max-width: none !important;
        width: 100% !important;
        padding: 0 30px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* Give site title more space */
    .site-branding {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }
    
    .site-title {
        white-space: nowrap !important;
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        max-width: none !important;
    }
    
    /* Center navigation with proper spacing */
    .main-header-menu {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .main-header-menu .menu-item a {
        padding: 10px 15px !important;
        white-space: nowrap !important;
    }
    
    /* Account/login area */
    .ast-header-account {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}

/*
 * ===================================================================
 * V21 - FINAL (EXPLICIT FOCUS/ACTIVE OUTLINE REMOVAL)
 * ===================================================================
*/

@media only screen and (max-width: 767px) {
    .wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-595b90f0 > .uagb-container-inner-blocks-wrap {
        --inner-content-custom-width: min(100%, 767px);
        max-width: var(--inner-content-custom-width);
        width: 100%;
        flex-wrap: wrap;
        padding: 20px;
    }
}

frm-chat-wrapper {
    box-sizing: border-box;
    padding: var(--fieldset-padding);
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    margin: 0 auto !important;
}

.frm_style_formidable-style.with_frm_style .frm_compact .frm_dropzone.dz-clickable .dz-message, .frm_style_formidable-style.with_frm_style input[type=submit], .frm_style_formidable-style.with_frm_style .frm_submit input[type=button], .frm_style_formidable-style.with_frm_style .frm_submit button, .frm_form_submit_style, .frm_style_formidable-style.with_frm_style .frm-edit-page-btn {
    width: auto;
    font-size: 14px;
    height: auto;
    line-height: normal;
    text-align: center;
    background: #b60f0a;
    border-width: 1px;
    border-color: #000000;
    border-style: solid;
    color: #ffffff;
    cursor: pointer;
    font-weight: normal;
    border-radius: 8px;
    text-shadow: none;
    padding: 8px 16px;
    box-sizing: border-box;
    box-shadow: 0 1px 1px #eeeeee;
    /* margin: 10px; */
    /* margin-left: 0; */
    /* margin-right: 0; */
    vertical-align: middle;
    margin: 0 auto;
}
/* Ensure hover state is the same red color and keep button centered */
.frm_style_formidable-style.with_frm_style input[type=submit]:hover,
.frm_style_formidable-style.with_frm_style .frm_submit input[type=button]:hover,
.frm_style_formidable-style.with_frm_style .frm_submit button:hover,
.frm_form_submit_style:hover,
.frm_style_formidable-style.with_frm_style .frm-edit-page-btn:hover {
    background: #b60f0a;
    margin: 0 auto;
}

/* 1. OVERALL FIELD LAYOUT & WIDTH */
body .frm_forms .frm_likert {
    width: 100%;
    margin: 0 auto 30px auto;
    padding-bottom: 25px;
    border-bottom: 1px solid #e9e9e9;
}

/* 2. QUESTION & OPTIONS ALIGNMENT */
body .frm_forms .frm_likert .frm_form_field.vertical_radio {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
}
body .frm_forms .frm_likert .frm_form_field.vertical_radio .frm_primary_label {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #3A3A3A;
    margin-bottom: 25px;
}
body .frm_forms .frm_likert .frm_opt_container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 20px;
    margin-top: -120px;
 margin-bottom: 75px;
}

/* Set up the container for the new positioning method with gradient sizing */
.with_frm_style .frm_radio {
 position: relative;
 min-width: 54px; 
 min-height: 54px;
}

/* Gradient sizing: largest on edges, smallest in middle */
.with_frm_style .frm_radio:nth-of-type(1),
.with_frm_style .frm_radio:nth-of-type(5) {
 min-width: 58px; 
 min-height: 58px;
}

.with_frm_style .frm_radio:nth-of-type(2),
.with_frm_style .frm_radio:nth-of-type(4) {
 min-width: 54px; 
 min-height: 54px;
}

.with_frm_style .frm_radio:nth-of-type(3) {
 min-width: 50px; 
 min-height: 50px;
}


/*
 * ===================================================================
 * 3. BUTTON STYLES & BEHAVIOR
 * ===================================================================
*/

/* -- Main Input Element: Positioned to be perfectly centered with gradient sizing -- */
.with_frm_style .frm_radio input[type=radio] {
 -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    margin: 0 !important;
    background-color: transparent !important;
    border: none !important;
    cursor: pointer;
    
 position: absolute !important;
 top: 50% !important;
 left: 50% !important;
 transform: translate(-50%, -50%);
 transition: transform 0.3s ease !important;
}

/* Gradient sizing for radio buttons: largest on edges, smallest in middle */
.with_frm_style .frm_radio:nth-of-type(1) input[type=radio],
.with_frm_style .frm_radio:nth-of-type(5) input[type=radio] {
    width: 50px !important;
    height: 50px !important;
}

.with_frm_style .frm_radio:nth-of-type(2) input[type=radio],
.with_frm_style .frm_radio:nth-of-type(4) input[type=radio] {
    width: 44px !important;
    height: 44px !important;
}

.with_frm_style .frm_radio:nth-of-type(3) input[type=radio] {
    width: 38px !important;
    height: 38px !important;
}/* -- Custom Circle: Created with a ::before pseudo-element -- */
.with_frm_style .frm_radio input[type=radio]::before {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 60% !important; /* Increased from 60% to 80% for larger icons */
    transition: all 0.3s ease !important;
}

/* -- Unselected State: Green to Red Gradient Borders -- */
.with_frm_style .frm_radio:nth-of-type(1) input[type=radio]::before { border: 2px solid #ff0000 !important; }
.with_frm_style .frm_radio:nth-of-type(2) input[type=radio]::before { border: 2px solid #f75d5d !important; }
.with_frm_style .frm_radio:nth-of-type(3) input[type=radio]::before { border: 2px solid #bdc3c7 !important; }
.with_frm_style .frm_radio:nth-of-type(4) input[type=radio]::before { border: 2px solid #82e0aa !important; }
.with_frm_style .frm_radio:nth-of-type(5) input[type=radio]::before { border: 2px solid #27ae60 !important; }

/* -- Selected State: Solid Fill with Red to Green Gradient & Visible Icons -- */
.with_frm_style .frm_radio input[type=radio]:checked { 
 transform: translate(-50%, -50%) scale(1.15);
}


/* Likert Selected State: Always show icon, use correct SVGs */
.with_frm_style .frm_radio:nth-of-type(1) input[type=radio]:checked::before {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3Cline x1='30' y1='12' x2='42' y2='12'/%3E%3C/svg%3E") !important;
}
.with_frm_style .frm_radio:nth-of-type(2) input[type=radio]:checked::before {
    background-color: #f75d5d !important;
    border-color: #f75d5d !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") !important;
}
.with_frm_style .frm_radio:nth-of-type(3) input[type=radio]:checked::before {
    background-color: #bdc3c7 !important;
    border-color: #95a5a6 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3C/svg%3E") !important;
}
.with_frm_style .frm_radio:nth-of-type(4) input[type=radio]:checked::before {
    background-color: #82e0aa !important;
    border-color: #6ab87b !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") !important;
}
.with_frm_style .frm_radio:nth-of-type(5) input[type=radio]:checked::before {
    background-color: #27ae60 !important;
    border-color: #229954 !important;
    /* Double plus: two plus SVGs side by side, increased stroke-width and reduced spacing */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='24' viewBox='0 0 44 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' y1='5' x2='10' y2='19'/%3E%3Cline x1='3' y1='12' x2='17' y2='12'/%3E%3Cline x1='34' y1='5' x2='34' y2='19'/%3E%3Cline x1='27' y1='12' x2='41' y2='12'/%3E%3C/svg%3E") !important;
}


/*
 * ===================================================================
 * 4. HOVER & FOCUS EFFECTS
 * ===================================================================
*/

/* NEW: Explicitly remove outline on focus/active states */
.with_frm_style .frm_radio input[type=radio]:focus,
.with_frm_style .frm_radio input[type=radio]:active {
 outline: none !important;
 box-shadow: none !important;
}

/* -- Main Question Container Hover -- */
body .frm_forms .frm_likert .frm_form_field.vertical_radio:hover { background-color: #f2f2f2; }

/* -- Button Hover Effect (targets UNSELECTED buttons) with Red to Green -- */
.with_frm_style .frm_radio:nth-of-type(1) input[type=radio]:hover:not(:checked)::before { background-color: #fadbd8 !important; }
.with_frm_style .frm_radio:nth-of-type(2) input[type=radio]:hover:not(:checked)::before { background-color: #fdebd0 !important; }
.with_frm_style .frm_radio:nth-of-type(3) input[type=radio]:hover:not(:checked)::before { background-color: #eaeded !important; }
.with_frm_style .frm_radio:nth-of-type(4) input[type=radio]:hover:not(:checked)::before { background-color: #d5f4e6 !important; }
.with_frm_style .frm_radio:nth-of-type(5) input[type=radio]:hover:not(:checked)::before { background-color: #d4f1e4 !important; }

/* Plus/Minus Icons for HOVER State (Colored Icons) - Horizontal Layout - Lower Specificity */
.with_frm_style .frm_radio:nth-of-type(1) input[type=radio]:hover:not(:checked)::before { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='10' y2='12'/%3E%3Cline x1='14' y1='12' x2='21' y2='12'/%3E%3C/svg%3E") !important; 
}
.with_frm_style .frm_radio:nth-of-type(2) input[type=radio]:hover:not(:checked)::before { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d35400' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") !important; 
}
.with_frm_style .frm_radio:nth-of-type(3) input[type=radio]:hover:not(:checked)::before { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395a5a6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3C/svg%3E") !important; 
}
.with_frm_style .frm_radio:nth-of-type(4) input[type=radio]:hover:not(:checked)::before { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ab87b' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") !important; 
}
.with_frm_style .frm_radio:nth-of-type(5) input[type=radio]:hover:not(:checked)::before {
    /* Double plus: two plus SVGs side by side, increased stroke-width and reduced spacing, green stroke for hover */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='24' viewBox='0 0 44 24' fill='none' stroke='%23229954' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' y1='5' x2='10' y2='19'/%3E%3Cline x1='3' y1='12' x2='17' y2='12'/%3E%3Cline x1='34' y1='5' x2='34' y2='19'/%3E%3Cline x1='27' y1='12' x2='41' y2='12'/%3E%3C/svg%3E") !important;
}

/*
 * ===================================================================
 * 5. MOBILE RESPONSIVE STYLES
 * ===================================================================
*/
@media (max-width: 768px) {
    body .frm_forms .frm_likert .frm_opt_container { gap: 10px; margin-top: 0px; margin-bottom: 21px; }
    body .frm_forms .frm_likert .frm_form_field.vertical_radio .frm_primary_label { font-size: 16px; }
}

/*
 * ===================================================================
 * V21 - ADAPTED FOR SPORTPERSONALITIES CUSTOM QUIZ
 * ===================================================================
*/

/* Styles using new Customizer variables */
            .quiz-progress-bar-inner { background-color: var(--sp-quiz-progress-bar); }
            .quiz-submit-btn { background: var(--sp-quiz-submit-bg); border-color: var(--sp-quiz-submit-bg); }
            .sportpersonalities-question-answers label:nth-of-type(1) input[type=radio]:checked::before { background-color: var(--sp-quiz-radio-1-selected) !important; border-color: var(--sp-quiz-radio-1-selected) !important; }
            .sportpersonalities-question-answers label:nth-of-type(2) input[type=radio]:checked::before { background-color: var(--sp-quiz-radio-2-selected) !important; border-color: var(--sp-quiz-radio-2-selected) !important; }
            .sportpersonalities-question-answers label:nth-of-type(3) input[type=radio]:checked::before { background-color: var(--sp-quiz-radio-3-selected) !important; border-color: var(--sp-quiz-radio-3-selected) !important; }
            .sportpersonalities-question-answers label:nth-of-type(4) input[type=radio]:checked::before { background-color: var(--sp-quiz-radio-4-selected) !important; border-color: var(--sp-quiz-radio-4-selected) !important; }
            .sportpersonalities-question-answers label:nth-of-type(5) input[type=radio]:checked::before { background-color: var(--sp-quiz-radio-5-selected) !important; border-color: var(--sp-quiz-radio-5-selected) !important; }

            /* All other structural CSS remains the same */
            .sportpersonalities-quiz-question { width: 100%; margin: 0 auto 30px auto; padding-bottom: 25px; border-bottom: 1px solid #e9e9e9; display: flex; flex-direction: column; align-items: center; padding-top: 20px; border-radius: 12px; transition: all 0.3s ease; }
            .sportpersonalities-question-title { text-align: center; font-size: 18px; font-weight: 600; color: #3A3A3A; margin-bottom: 25px; }
            .sportpersonalities-question-answers { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; width: 100%; gap: 20px; }
            .sportpersonalities-question-answers span { display: none; }
            .sportpersonalities-question-answers label { position: relative; min-width: 54px; min-height: 54px; margin: 0 !important; }
            .sportpersonalities-question-answers label:nth-of-type(1), .sportpersonalities-question-answers label:nth-of-type(5) { min-width: 58px; min-height: 58px; }
            .sportpersonalities-question-answers label:nth-of-type(2), .sportpersonalities-question-answers label:nth-of-type(4) { min-width: 54px; min-height: 54px; }
            .sportpersonalities-question-answers label:nth-of-type(3) { min-width: 50px; min-height: 50px; }
            .sportpersonalities-question-answers input[type=radio] { -webkit-appearance: none !important; appearance: none !important; outline: none !important; margin: 0 !important; background-color: transparent !important; border: none !important; cursor: pointer; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); transition: transform 0.3s ease !important; }
            .sportpersonalities-question-answers label:nth-of-type(1) input[type=radio], .sportpersonalities-question-answers label:nth-of-type(5) input[type=radio] { width: 50px !important; height: 50px !important; }
            .sportpersonalities-question-answers label:nth-of-type(2) input[type=radio], .sportpersonalities-question-answers label:nth-of-type(4) input[type=radio] { width: 44px !important; height: 44px !important; }
            .sportpersonalities-question-answers label:nth-of-type(3) input[type=radio] { width: 38px !important; height: 38px !important; }
            .sportpersonalities-question-answers input[type=radio]::before { content: '' !important; display: block !important; width: 100% !important; height: 100% !important; border-radius: 50% !important; box-sizing: border-box !important; background-color: #ffffff !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 60% !important; transition: all 0.3s ease !important; }
            .sportpersonalities-question-answers label:nth-of-type(1) input[type=radio]::before { border: 2px solid #ff0000 !important; }
            .sportpersonalities-question-answers label:nth-of-type(2) input[type=radio]::before { border: 2px solid #f75d5d !important; }
            .sportpersonalities-question-answers label:nth-of-type(3) input[type=radio]::before { border: 2px solid #bdc3c7 !important; }
            .sportpersonalities-question-answers label:nth-of-type(4) input[type=radio]::before { border: 2px solid #82e0aa !important; }
            .sportpersonalities-question-answers label:nth-of-type(5) input[type=radio]::before { border: 2px solid #27ae60 !important; }
            .sportpersonalities-question-answers input[type=radio]:checked { transform: translate(-50%, -50%) scale(1.15); }
            .sportpersonalities-question-answers label:nth-of-type(1) input[type=radio]:checked::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3Cline x1='30' y1='12' x2='42' y2='12'/%3E%3C/svg%3E") !important; }
            .sportpersonalities-question-answers label:nth-of-type(2) input[type=radio]:checked::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") !important; }
            .sportpersonalities-question-answers label:nth-of-type(3) input[type=radio]:checked::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3C/svg%3E") !important; }
            .sportpersonalities-question-answers label:nth-of-type(4) input[type=radio]:checked::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") !important; }
            .sportpersonalities-question-answers label:nth-of-type(5) input[type=radio]:checked::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='24' viewBox='0 0 44 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' y1='5' x2='10' y2='19'/%3E%3Cline x1='3' y1='12' x2='17' y2='12'/%3E%3Cline x1='34' y1='5' x2='34' y2='19'/%3E%3Cline x1='27' y1='12' x2='41' y2='12'/%3E%3C/svg%3E") !important; }
            .sportpersonalities-question-answers input[type=radio]:focus, .sportpersonalities-question-answers input[type=radio]:active { outline: none !important; box-shadow: none !important; }
            .sportpersonalities-quiz-question:hover { background-color: #f2f2f2; }
            .sportpersonalities-question-answers label:nth-of-type(1) input[type=radio]:hover:not(:checked)::before { background-color: #fadbd8 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='10' y2='12'/%3E%3Cline x1='14' y1='12' x2='21' y2='12'/%3E%3C/svg%3E") !important; }
            .sportpersonalities-question-answers label:nth-of-type(2) input[type=radio]:hover:not(:checked)::before { background-color: #fdebd0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d35400' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") !important; }
            .sportpersonalities-question-answers label:nth-of-type(3) input[type=radio]:hover:not(:checked)::before { background-color: #eaeded !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2395a5a6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3C/svg%3E") !important; }
            .sportpersonalities-question-answers label:nth-of-type(4) input[type=radio]:hover:not(:checked)::before { background-color: #d5f4e6 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ab87b' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") !important; }
            .sportpersonalities-question-answers label:nth-of-type(5) input[type=radio]:hover:not(:checked)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='24' viewBox='0 0 44 24' fill='none' stroke='%23229954' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' y1='5' x2='10' y2='19'/%3E%3Cline x1='3' y1='12' x2='17' y2='12'/%3E%3Cline x1='34' y1='5' x2='34' y2='19'/%3E%3Cline x1='27' y1='12' x2='41' y2='12'/%3E%3C/svg%3E") !important; }
            .sportpersonalities-quiz-submit { text-align: center; margin-top: 30px; }
            .sportpersonalities-quiz-submit button { width: auto; font-size: 16px; height: auto; line-height: normal; text-align: center; color: #ffffff; cursor: pointer; font-weight: bold; border-radius: 8px; text-shadow: none; padding: 12px 24px; box-sizing: border-box; box-shadow: 0 2px 4px rgba(0,0,0,0.1); vertical-align: middle; margin: 0 auto; transition: background-color 0.2s ease; }
            .sportpersonalities-quiz-submit button:hover { background: #9c0d09; border-color: #9c0d09; }
            @media (max-width: 768px) { .sportpersonalities-question-answers { gap: 10px; } .sportpersonalities-question-title { font-size: 16px; } }
            .quiz-progress { margin-bottom: 30px; }
            .quiz-progress-bar { width: 100%; height: 10px; background-color: #e9ecef; border-radius: 5px; overflow: hidden; }
            .quiz-progress-bar-inner { height: 100%; border-radius: 5px; transition: width 0.4s ease-in-out; }
            .quiz-progress-text { text-align: right; margin-top: 8px; font-size: 14px; color: #6c757d; }
            .quiz-page { display: none; }
            .quiz-page.active { display: block; }
            .quiz-navigation { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; }
            .quiz-nav-btn, .quiz-submit-btn { padding: 10px 25px; font-size: 16px; font-weight: bold; border: 2px solid #0056b3; background-color: #0056b3; color: #fff; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; }
            .quiz-nav-btn.prev-btn { background-color: transparent; color: #0056b3; }
            .quiz-nav-btn:hover, .quiz-submit-btn:hover { background-color: #004494; border-color: #004494; }
            .quiz-nav-btn.prev-btn:hover { background-color: #f0f7ff; color: #004494; }
            .quiz-submit-btn:hover { background: #9c0d09; border-color: #9c0d09; }

/* ================================================
   SportPersonalities Form Fields Styling
   ================================================ */

.sportpersonalities-form-field {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
}

.sportpersonalities-field-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.required {
    color: #e74c3c;
    font-weight: bold;
}

.field-description {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
    font-style: italic;
}

.sportpersonalities-field-input {
    margin-top: 1rem;
}

.sportpersonalities-field-input input[type="text"],
.sportpersonalities-field-input input[type="email"],
.sportpersonalities-field-input input[type="phone"],
.sportpersonalities-field-input input[type="number"],
.sportpersonalities-field-input input[type="url"],
.sportpersonalities-field-input input[type="date"],
.sportpersonalities-field-input textarea,
.sportpersonalities-field-input select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    background: white;
}

.sportpersonalities-field-input input:focus,
.sportpersonalities-field-input textarea:focus,
.sportpersonalities-field-input select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.radio-option,
.checkbox-option {
    display: block;
    margin-bottom: 0.75rem;
    cursor: pointer;
    position: relative;
    padding-left: 2rem;
}

.radio-option input[type="radio"],
.checkbox-option input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
}

.radio-option span,
.checkbox-option span {
    font-size: 1rem;
    color: #333;
}

.binary-options {
    display: flex;
    gap: 2rem;
}

.binary-options .radio-option {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding-left: 0;
}

.binary-options .radio-option input[type="radio"] {
    position: static;
    margin-right: 0.5rem;
    width: auto;
    height: auto;
}

/* Form field responsive adjustments */
@media (max-width: 768px) {
    .sportpersonalities-form-field {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .binary-options {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Accessibility: Ensure adequate touch target sizes (48x48px minimum) */
.menu-link,
nav a,
.main-navigation a,
.footer-widget a {
    min-height: 48px;
    min-width: 48px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
}