/* =========================================================
   CUSTOM MOBILE RESPONSIVE STYLES
   Overrides for JGA Football Nexus on small screens
   ========================================================= */

/* CLOUDFLARE TURNSTILE WIDGET STYLING */
.cf-turnstile {
    margin-bottom: 20px !important;
    display: inline-block !important;
}

/* GLOBAL EXECUTIVE BUTTON STYLING (ALL GOLD & OUTLINE BUTTONS) */
.primary-button, 
.secondary-button, 
.w-button, 
.primary-button.cc-jumbo-button, 
.primary-button.secciones, 
.btn-reveal-inscripcion,
a.primary-button, 
a.secondary-button {
    padding: 18px 42px !important;
    min-height: 56px !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    letter-spacing: 1.8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 18px rgba(229, 193, 88, 0.35) !important;
    box-sizing: border-box !important;
    margin: 6px 0 !important;
}

.primary-button:hover, 
.secondary-button:hover, 
.w-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(255, 255, 255, 0.4) !important;
}

@media screen and (max-width: 767px) {
    
    /* 0. GLOBAL OVERFLOW SAFETY NET */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }
    
    /* 1. HERO SECTIONS & TYPOGRAPHY */
    .hero-inner {
        padding: 80px 15px 50px 15px !important;
    }
    
    .hero-inner h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    .hero-inner p {
        font-size: 1rem !important;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Premium Home Hero Polish */
    .intro-content.cc-homepage {
        width: 100% !important;
        padding: 60px 15px 40px 15px !important;
        text-align: center !important;
    }
    
    .heading-jumbo {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }
    
    .paragraph-bigger {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 30px !important;
        opacity: 0.9 !important;
    }
    
    .motto-wrap {
        text-align: center !important;
        padding: 0 15px !important;
    }
    
    .heading-jumbo-small {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }

    /* 2. GRID LAYOUTS (Fix overflow horizontally) */
    .w-layout-grid,
    .content-section > .container > div[style*="display: grid"] {
        grid-template-columns: 1fr !important; /* Stack elements vertically */
        grid-template-areas: none !important;
        gap: 30px !important;
    }
    
    /* Ensure no specific grid item forces a column */
    #w-node-_0e2190ce-ccfd-5d66-3d58-3e22ee268995-1bc0a58a,
    #w-node-_0e2190ce-ccfd-5d66-3d58-3e22ee268997-1bc0a58a,
    #w-node-_0e2190ce-ccfd-5d66-3d58-3e22ee2689a2-1bc0a58a,
    #w-node-_0e2190ce-ccfd-5d66-3d58-3e22ee2689a4-1bc0a58a,
    #w-node-_0e2190ce-ccfd-5d66-3d58-3e22ee2689af-1bc0a58a,
    #w-node-_54cb9f0d-c20c-9a75-81a3-b6f6f37e1a11-1bc0a58a,
    #w-node-_54cb9f0d-c20c-9a75-81a3-b6f6f37e1a1f-1bc0a58a {
        grid-area: auto !important;
        grid-column: 1 / -1 !important;
    }
    
    /* EPC METHOD SECTION FIX: Reorder items to group by column logically */
    .div-block-2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .div-block-2 > * {
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Pillar 1: Image, Heading, Paragraph */
    .div-block-2 > :nth-child(1) { order: 1; max-width: 150px !important; margin: 0 auto !important; }
    .div-block-2 > :nth-child(4) { order: 2; font-size: 1.5rem !important; margin-bottom: 10px !important;}
    .div-block-2 > :nth-child(7) { order: 3; margin-bottom: 40px !important; }
    
    /* Pillar 2: Image, Heading, Paragraph */
    .div-block-2 > :nth-child(2) { order: 4; max-width: 150px !important; margin: 0 auto !important; }
    .div-block-2 > :nth-child(5) { order: 5; font-size: 1.5rem !important; margin-bottom: 10px !important;}
    .div-block-2 > :nth-child(8) { order: 6; margin-bottom: 40px !important; }
    
    /* Pillar 3: Image, Heading, Paragraph */
    .div-block-2 > :nth-child(3) { order: 7; max-width: 150px !important; margin: 0 auto !important; }
    .div-block-2 > :nth-child(6) { order: 8; font-size: 1.5rem !important; margin-bottom: 10px !important;}
    .div-block-2 > :nth-child(9) { order: 9; margin-bottom: 40px !important; }

    /* 3. CONTENT BOXES & TEXT */
    .content-section {
        padding: 50px 15px !important;
    }

    .content-section > .container > div > div {
        padding: 20px !important;
    }
    
    .home-section-wrap, .derecha {
        text-align: left !important;
        width: 100% !important;
    }
    
    .content-section h3 {
        font-size: 1.2rem !important;
    }
    
    .paragraph-light {
        width: 100% !important;
        max-width: 100% !important;
    }

    .container-2 {
        padding: 0 15px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    
    .cta-wrap {
        padding: 0 !important;
    }

    /* 4. CAMPUS POPUP (Detail panel) */
    .sede-panel {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
        border-radius: 12px !important;
    }
    
    .sede-section {
        flex-direction: column !important;
        gap: 5px !important;
        align-items: flex-start !important;
    }
    
    .sede-section h3 {
        width: 100% !important;
        margin-bottom: 5px !important;
        font-size: 1rem !important;
    }

    /* 5. LEGAL PAGES */
    .legal-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    .legal-section .container {
        padding: 20px !important;
    }
    .legal-section h1 {
        font-size: 1.8rem !important;
    }
    .legal-section h2 {
        font-size: 1.1rem !important;
    }
    
    /* 6. GLOBAL NAVBAR & FOOTER */
    .navbar-2 {
        height: auto !important;
    }

    .navbar-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 15px !important;
        height: auto !important;
    }
    
    .mobile-menu-toggle {
        display: block !important;
        order: 2; /* Force toggle to the right */
    }
    
    .navbar-left {
        order: 1; /* Force logo to the left */
    }

    .navbar-menu {
        display: none !important; /* Hidden by default */
        order: 3; /* Drop below the row */
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
        padding: 20px 0 !important;
        width: 100%;
    }

    .navbar-right {
        display: none !important; /* Hidden by default */
        order: 4; /* Drop below the menu */
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        padding-bottom: 20px !important;
        width: 100%;
    }
    
    .navbar-menu.mobile-open, .navbar-right.mobile-open {
        display: flex !important;
    }
    
    /* 7. GLOBAL IMAGE RESPONSIVENESS */
    .image-4 {
        max-width: 220px !important; /* Scale text logo down on mobile */
        height: auto !important; /* CRITICAL: Prevent vertical squishing */
    }
    
    .image-3 {
        max-width: 45px !important; /* Scale icon logo down */
        height: auto !important;
    }
    
    .campus-image {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .div-block-12 img {
        max-width: 80% !important;
        height: auto;
    }
}

/* 8. CENTERING ACCESO A NEXUS BUTTON TEXT */
.navbar-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
.navbar-button-text {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

/* Extra small devices */
@media screen and (max-width: 479px) {
    .heading-jumbo {
        font-size: 2.2rem !important;
    }
    
    .heading-jumbo-small {
        font-size: 1.8rem !important;
    }
    
    .section-heading {
        font-size: 1.6rem !important;
    }
    
    .hero-inner h1 {
        font-size: 1.6rem !important;
    }
}

/* GLOBAL BUTTON TEXT CENTERING */
.primary-button, .secondary-button, .w-button, button[type="submit"], input[type="submit"], #loginForm button {
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 9. EPC INSCRIPCION FUNNEL MOBILE POLISH */
@media screen and (max-width: 767px) {
    #inscripcion {
        margin-top: 30px !important;
        padding: 0 10px !important;
    }

    /* Step Progress Indicator Bar */
    .funnel-steps {
        margin-bottom: 15px !important;
        padding: 0 10px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .funnel-steps .bar-bg, .funnel-steps #funnel-progress-bar {
        top: 15px !important;
        height: 3px !important;
    }
    .funnel-steps .circle {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.88rem !important;
        margin-bottom: 0 !important;
        border-width: 2px !important;
    }
    /* Hide the individual word labels under circles on mobile to eliminate overlap 100% */
    .funnel-steps .lbl {
        display: none !important;
    }
    /* Show the dynamic mobile active step badge */
    #mobile-step-title {
        display: block !important;
    }

    /* Step Containers Padding & Box Sizing */
    .funnel-step-panel > div {
        padding: 18px 12px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .funnel-step-panel h3 {
        font-size: 1.1rem !important;
        margin-bottom: 16px !important;
        line-height: 1.3 !important;
    }

    /* Step 1 Form Grid & Info Box Anti-Overflow Fix */
    .step1-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #sede-horario-info-box {
        padding: 14px 12px !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    #sede-horario-info-box > div:first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
    }
    #info-box-sede-title {
        font-size: 0.9rem !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
    #info-box-plazas {
        font-size: 0.72rem !important;
        padding: 3px 8px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .sede-info-details-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .sede-info-details-grid > div {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
    #info-box-horario, #info-box-lugar {
        font-size: 0.82rem !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        display: block !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Step 2 & 3 Plan and Matricula Cards */
    .selectable-matricula, .selectable-plan {
        padding: 16px 14px !important;
        border-radius: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .selectable-matricula > div:first-child span:first-child {
        font-size: 0.8rem !important;
        letter-spacing: 0.3px !important;
        overflow-wrap: break-word !important;
    }
    .selectable-matricula-price {
        margin-top: 6px !important;
        display: flex !important;
        align-items: baseline !important;
        flex-wrap: wrap !important;
        gap: 2px 6px !important;
    }
    .selectable-matricula-price .price-val {
        font-size: 1.45rem !important;
    }
    .selectable-matricula-price .price-tag {
        font-size: 0.76rem !important;
    }
    .selectable-matricula h4, .selectable-plan h4 {
        font-size: 1.1rem !important;
    }
    .selectable-matricula .indicator-dot, .selectable-plan .indicator-dot {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }

    /* Step Action Buttons (Volver / Siguiente) */
    .funnel-step-panel div[style*="justify-content: space-between"] {
        flex-direction: column-reverse !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .funnel-step-panel button, 
    .funnel-step-panel .primary-button, 
    .funnel-step-panel .btn-secondary {
        width: 100% !important;
        min-height: 52px !important;
        margin: 0 !important;
        font-size: 0.88rem !important;
        box-sizing: border-box !important;
    }

    /* Step 4 Inputs & Checkboxes */
    #step-container-4 div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    #step-container-4 label[style*="cursor: pointer"] {
        padding: 12px !important;
        gap: 10px !important;
    }
    #step-container-4 label span {
        font-size: 0.82rem !important;
        line-height: 1.4 !important;
    }
}

/* 10. PLAYER PORTAL (DASHBOARD.PHP) MOBILE EXECUTIVE POLISH */
@media screen and (max-width: 767px) {
    /* Dashboard Page Header */
    .page-header {
        padding: 25px 15px 15px 15px !important;
        text-align: center !important;
    }
    .page-title h2 {
        font-size: 1.5rem !important;
        margin-top: 4px !important;
    }

    /* Sidebar Navigation Menu on Mobile */
    .dashboard-sidebar {
        padding: 12px !important;
        margin-bottom: 20px !important;
    }
    .sidebar-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    .sidebar-menu a {
        padding: 12px 14px !important;
        font-size: 0.85rem !important;
        justify-content: flex-start !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Dashboard Main Cards */
    .dashboard-card {
        padding: 18px 14px !important;
        border-radius: 10px !important;
        margin-bottom: 20px !important;
    }
    .dashboard-title {
        font-size: 1.2rem !important;
        margin-bottom: 18px !important;
    }

    /* Performance Radar Chart Box */
    .chart-container-box {
        min-height: 290px !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    #chart-score-subtitle {
        font-size: 0.88rem !important;
    }
    #chart-score-subtitle span {
        padding: 4px 12px !important;
        font-size: 0.78rem !important;
    }

    /* Structure Navigation Pills Below Chart */
    div[style*="justify-content: center; gap: 10px"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .pill-btn {
        width: 100% !important;
        padding: 10px 14px !important;
        font-size: 0.82rem !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    .pill-badge {
        font-size: 0.72rem !important;
        padding: 3px 8px !important;
    }

    /* Coach Observations Cards */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* History Items & Details Breakdown */
    .history-item {
        padding: 14px !important;
        border-radius: 8px !important;
    }
    details div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Payment History Table */
    .payments-table th, .payments-table td {
        padding: 10px 8px !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
    }
}