/* --- GLOBAL VARIABLES & THEME --- */
:root {
    --jma-gold: #f3b01c;
    --dark-bg: #000000;
    --grey-bg: #333333;
    --white: #ffffff;
    --text-muted: #cccccc;
    --text-dark: #333333;
}

body {
    margin: 0;
    padding: 0;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

p {
    font-size: 16px;
    line-height: 20px;
    margin: 0 0 12px 0;
}



.updateMsg{
    color:white;
    display:none;
}
/* Base Page Overrides */
.page {
    padding: 0 !important;
    color: var(--white);
    overflow-x:hidden;
}
    .page.bg {
        padding: 0 !important;
        margin: 0;
        color: var(--white);
        width: 100%;
        /* 1. Pin strictly to the top-left corner */
        background-image: url(https://jeffmartin.services/assets/bkg-image.png);
        background-position: left top;
        background-repeat: no-repeat;
        /* 2. Forces the image to stay its actual, native pixel size */
        background-size: auto;
        /* 3. CRITICAL: The container must have a height, otherwise it collapses to 0px */
        min-height: 100vh;
        display: block;
    }

.text-side ul {
    padding-left: 0;
    margin-left: 20px; /* Gives the bullets just enough room to sit cleanly under the text */
}

.LGPageTxt {
    font-weight: 300;
    margin-bottom: 20px;
    font-size: 50px;
    line-height: 54px;
}


.subPageTxt {
    font-weight: 300;
    font-size: 50px;
    line-height: 50px;
    margin: -4px 0 20px 0;
}

.subBoldTxt {
    font-size: 26px;
    line-height: 30px;
    font-weight: 400;
    margin-bottom: 48px;
}

.goldTxt {
    color: var(--jma-gold);
    font-size: 26px;
    line-height: 30px;
    margin: 0 0 12px 0;
}

/* Update these specific classes in your pages.css */
.btn-outline,
.btn-main {
    /* Use the padding from the 'Create Your Account' button */
    padding: 14px 30px 15px 30px;
    /* Ensure font size is consistent */
    font-size: 16px;
    /* Standardize height calculation */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Shared aesthetics */
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 0; /* Keep square edges per your screenshot */
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--jma-gold);
    color: var(--white);
}

.btn-main {
    background: var(--jma-gold);
    border: 1px solid var(--jma-gold);
    color: var(--white);
    /* Remove text-transform: capitalize; to match the other button */
}

    /* Hover States */
    .btn-main:hover {
        border: 1px solid white;
    }

.btn-outline:hover {
    border: 1px solid var(--white);
}


.hero {
    position: relative;
    display: flex;
    padding-top: 88px;
    width: 100%;
    min-height: 850px; /* Tall enough to show the full background image */
}


.hero-content h1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.hero-content {
    max-width: 790px; /* Allow slightly more room for the heading */
    flex: 1;
}


.auth-box {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

    .auth-box input {
        padding: 10px;
        border: none;
        width: 200px;
    }

.hero-sidebar {
    position: absolute;
    right: 120px; /* Adjust this % to move it left or right */
    top: 290px; /* Adjust this % to move it up or down */
    width: 380px; /* Control the size of the video thumb here */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px; /* Spacing between video and the bottom badge */
    z-index: 10;
}

.video-thumb {
    width: 100%;
    position: relative;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: transform 0.3s ease;
}

    .video-thumb:hover {
        transform: translateY(-5px); /* Adds a slight lift effect */
    }

    .video-thumb img {
        width: 100%;
        display: block;
    }

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
}

.content-block {
    padding-top: 140px;
    padding-right: 150px;
    padding-left: 107px;
    padding-bottom: 190px;
    display: flex;
    align-items: flex-start; /* Pins both text and image rows to the top */
    gap: 152px;
    height: auto; /* Let the container grow as tall as the image */
}

.text-side {
    flex: 1.2;
    align-self: flex-start;
    min-width: 640px;
}


.dark-section {
    background: var(--dark-bg);
}

.grey-section {
    background: #3e3d3e;
}

.image-side {
    flex: 1;
    align-self: flex-start;
    min-width: 574px;
}

    .image-side img {
        width: 100%;
        height: auto;
        display: block;
    }

/* ---SETTINGS FORM STYLES --- */
.settings-container {
    max-width: 560px;
    padding: 54px 0 30px 0;
}

/* --- GLOBAL VARIABLES & THEME --- */
:root {
    --jma-gold: #f3b01c;
    --dark-bg: #000000;
    --grey-bg: #333333;
    --white: #ffffff;
    --text-muted: #cccccc;
    --text-dark: #333333;
}

/* Base Page Overrides */
.page {
    padding: 0 !important;
    background-color: var(--dark-bg);
    color: var(--white);
    margin-left: 0px;
}

.pageContent {
    margin-left: 107px;
    width: calc(100% - 107px);
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0px;
    box-sizing: border-box;
}

#ProgressAccountName{
    height:48px;
}
/* --- SETTINGS CONTAINER --- */
.welcome-text {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.instruction {
    font-size: 16px;
    margin-bottom: 30px;
}

/* --- FORM GRID LAYOUT --- */

/* --- SETTINGS FORM GRID LAYOUT UPDATED --- */
#settingsForm,
.referral-form,
#referralForm {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr)); /* Strict 12-column system */
    gap: 10px; /* Consistent spacing between fields */
}

    /* Base input & select styles for both forms */
    #settingsForm input[type="text"],
    #settingsForm input[type="tel"],
    #settingsForm input[type="email"],
    #settingsForm select,
    .referral-form input,
    .referral-form select {
        box-sizing: border-box;
        grid-column: span 12;
        padding: 12px;
        border: none;
        background-color: var(--white);
        color: var(--text-dark);
        font-family: inherit;
        font-size: 1rem;
        height: 46px;
        appearance: none;
        width: 100%; /* Forces elements to fill their allocated grid tracks */
    }

        /* --- Specific Field Spans to ensure perfect alignment --- */

        /* First Name and Last Name (Strict 50/50 split) */
        #firstname,
        #lastname,
        .referral-form input[placeholder*="First"],
        .referral-form input[placeholder*="Last"] {
            grid-column: span 6 !important;
        }

        /* Address fields remain full width */
        #address1,
        #address2,
        .referral-form input[placeholder*="Address"] {
            grid-column: span 12;
        }

        /* City spans exactly 6 columns (Matches First Name width) */
        #city,
        .referral-form input[placeholder*="City"] {
            grid-column: span 6 !important;
        }

/* State and Zip are grouped directly in the grid layout */
#state {
    grid-column: span 2 !important; /* Spans 2 grid columns */
}

#zip,
.referral-form input[placeholder*="Zip"] {
    grid-column: span 4 !important; /* Spans 4 grid columns. Together 2 + 4 = 6 (Matches Last Name width) */
}

/* Phone takes 4 columns to match the visual flow */
#phone,
.referral-form input[placeholder*="Phone"] {
    grid-column: span 4 !important;
}




.comm-prefs {
    grid-column: span 12;
    margin-top: 25px;
}



.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
}

    .checkbox-item input {
        appearance: none;
        /* Reduced from 18px to 14px */
        width: 14px;
        height: 14px;
        border: 1px solid var(--jma-gold);
        margin-right: 12px;
        background: transparent;
        cursor: pointer;
        position: relative;
        /* Ensures the box stays square in flex layouts */
        flex-shrink: 0;
    }

        .checkbox-item input:checked::after {
            content: '';
            position: absolute;
            /* Sized to fit inside the 14px container with the border */
            width: 8px;
            height: 8px;
            background: var(--jma-gold);
            /* Centering the inner square */
            top: 2px;
            left: 2px;
        }

/* --- VIDEO MODAL STYLES --- */
.video-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
}

.modal-content {
    position: relative;
    width: 80%;
    max-width: 900px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
}

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.close-modal {
    position: absolute;
    top: -40px;
    right: 0;
    color: var(--white);
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

    .close-modal:hover {
        color: var(--jma-gold);
    }

/* Ensure the thumb looks clickable */
.video-thumb {
    cursor: pointer;
    transition: 0.3s;
}

    .video-thumb:hover {
        transform: scale(1.02);
    }


/* --- REFERRAL FORM STYLES --- */
.referral-container {
    max-width: 560px;
    padding: 54px 0 30px 0;
}

.referral-form {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 15px;
}

.form-group {
    grid-column: span 12;
    display: flex;
    flex-direction: column;
}

    .form-group.half {
        grid-column: span 6;
    }

    .form-group.two-thirds {
        grid-column: span 8;
    }

    .form-group.small {
        grid-column: span 2;
    }

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    padding: 12px;
    border: 1px solid var(--white);
    background-color: var(--white);
    color: var(--text-dark);
    /* Change 300px to 100% to fill the grid container */
    width: 100%;
    box-sizing: border-box; /* This ensures padding doesn't break the 100% width */
    font-family: inherit;
    margin-bottom: 6px;
}

/* Optional: Give the textarea a minimum height since it's for notes */
textarea {
    min-height: 100px;
    resize: vertical; /* Allows users to expand it downwards only */
}

.radio-section {
    grid-column: span 12;
    margin-top: 20px;
}

.radio-option {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    cursor: pointer;
}

    .radio-option input {
        margin-right: 10px;
        accent-color: var(--jma-gold);
    }

/* --- UNIVERSAL RADIO/CHECKBOX STYLING --- */

/* Hide default browser input */
.custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* The square white box */
.radio-box {
    height: 18px; /* Sized to match Account Settings look */
    width: 18px;
    border: 1px solid var(--jma-gold);
    display: inline-block;
    margin-right: 15px;
    position: relative;
    flex-shrink: 0;
}

/* The Orange Inner Square (appears when checked) */
.custom-radio input:checked ~ .radio-box::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    background: var(--jma-gold);
}

.radio-option {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.radio-label {
    font-size: 1rem;
    color: var(--white);
}

.radio-label {
    font-size: 1rem;
    color: var(--white);
}





/* DISABLED The square white box */


.disableradio-label {
    font-size: 1rem;
    color: #888;
}

.disableradio-option {
    display: inline-flex;
    align-items: center;
    margin-top:6px;
    margin-bottom: 12px;
    margin-right: 12px;
    cursor: pointer;
}





.badge {
    margin-top: 36px;
}

.btn-row {
    display: flex;
    gap: 15px;
    margin: 30px 0 80px 0;
    display: flex;
    gap: 15px;
    margin: 30px 0 76px 0;
}



.btn-submit {
    grid-column: span 12; /* Forces the button to take its own row */
    justify-self: start; /* Keeps the button from stretching too wide */
    background: transparent;
    border: 2px solid var(--jma-gold);
    color: var(--white);
    padding: 12px 40px; /* Added horizontal padding for a better shape */
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
    width: auto; /* Overrides the 100% width from the previous fix */
}

/* Add this to force the note to a new line */
.footer-note {
    grid-column: span 12;
    margin-top: 20px;
}

.footer-note-italic {
    grid-column: span 12;
    margin-top: 20px;
    font-style:italic;
}


/* --- PROGRESS TRACKER STYLES --- */
.progress-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    padding: 40px 10%;
}

.progress-columns-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 1.8fr; /* Gives left column slightly more visual room */
    gap: 40px; /* Space between left and right column */
    width: 100%;
    box-sizing: border-box;
}

.sidebar-column {
    padding-top: 82px;
    max-width: 400px;
}



/* Left Column Layout */
.main-content-column {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width:500px;
}

.account-header h1 {
    font-size: 32px;
    font-weight: 400;
    margin: 0 0 24px 0;
}

.account-header {
    grid-column: span 2;
}

.search-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.account-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 16px;
    line-height: 24px;
    color: white;
}

    .account-stats strong {
        color: var(--white);
    }

.input-group {
    display: flex;
    align-items: center;
}

    .input-group input {
        padding: 10px;
        width: 200px;
        border: none;
        font-weight: bold;
    }

.btn-arrow {
  margin-left:12px;
    background-image: url('../assets/refresh-arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    width: 29px;
    height: 26px;
}

/* Timeline */
.timeline-list {
    list-style: none;
    padding: 0;
}

.timeline-item {
    margin-bottom: 15px;
    position: relative;
    padding-left: 25px;
}

    .timeline-item::before {
        content: ''; /* Remove the text character */
        position: absolute;
        left: 0;
        top: 5px; /* Fine-tune this value to align it vertically with your text line-height */
        /* Set dimensions to match your asset file */
        width: 14px;
        height: 11px;
        /* Link your asset background image */
        background-position: center;
        visibility:hidden;
    }

.timeline-item-visible::before {
    visibility: visible;
}

.timeline-item-visible.completed::before {
    content: url('../assets/mini-carrot.png'); /* Adjust the relative path if your assets folder is structured differently */
    visibility: visible;
 
}
    .timeline-item.completed {
        font-weight: bold;
    }

    .timeline-item.pending {
        color: #888;
        font-style: italic;
    }

/* Donut Chart */
.tracker-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.donut-chart {
    position: relative;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: conic-gradient(var(--jma-gold) 0% 75%, #777 75% 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

    .donut-chart::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        background: #000;
        border-radius: 50%;
    }

.donut-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.percent-text {
    font-size: 3rem;
    font-weight: bold;
    display: block;
}

/*PROGRESS */
.progress-container {
    display: block !important; /* Reverts structural layout behavior back to box model standard */
    padding: 0 !important; /* Removes conflicting grid layout definitions safely */
}

.tracker-title {
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 30px;
}

.progress-circle {
    position: relative;
    width: 300px;
    height: 300px;
    margin-left: 0;
}

.progress-ring {
    width: 100%;
    height: 100%;
}

.progress-ring__circle-background,
.progress-ring__circle {
    fill: none;
    stroke-width: 30; /* Width of the progress ring */
}

/* The dark gray track of the progress circle */
.progress-ring__circle-background {
    stroke: #666; /* Gray background color */
}

/* The animated orange progress ring */
.progress-ring__circle {
    stroke: #f3ae20; /* Orange progress color */
    transform: rotate(-90deg); /* Start animation from the top */
    transform-origin: 150px 150px; /* Transform from the center of the SVG */
    transition: stroke-dashoffset 0.8s ease; /* Smooth transition animation */
}

/* Central text container */
.central-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.percentage {
    font-size: 40px;
    font-weight: bold;
}

.label {
    font-size: 16px;
    margin-top: -5px; /* Adjust spacing between number and label */
}





@media (max-width: 1500px) {
    .site-header {
        padding-left: 48px;
    }

    .content-block {
        padding-left: 48px;
    }



    .pageContent {
        margin-left: 48px;
    }
}


@media (max-width: 1450px) {

    .hero-content {
        max-width: 47vw; /* Allow slightly more room for the heading */
        flex: 1;
    }

    .hero-sidebar {
        padding-left: 40px
    }

    .image-side {
        min-width: 35.875vw;
    }

    .content-block {
        gap: 6.5vw;
        padding-top: 8.75vw;
        padding-right: 9.375vw;
        padding-bottom: 11.875vw;
    }


    .text-side {
        min-width: 50vw;
    }


}



    @media (max-width: 1160px) {

        .hero-content {
            max-width: 98%; /* Allow slightly more room for the heading */
            flex: 1;
        }

        .hero-sidebar {
            padding-left: 40px
        }

        .image-side {
            min-width: 45%;
        }

        .hero-sidebar {
            padding-left: 0px;
        }

        .content-block {
            gap: 30px;
            padding-top: 40px;
            padding-right: 0px;
            padding-bottom: 50px;
        }

        .text-side {
            max-width: 90%;
            min-width: unset;
        }

        .hero-sidebar {
            position: relative;
            right: unset; /* Adjust this % to move it left or right */
            top: unset; /* Adjust this % to move it up or down */
            width: unset; /* Control the size of the video thumb here */
            max-width: 574px;
        }



        .image-side {
            position: relative;
            right: unset; /* Adjust this % to move it left or right */
            top: unset; /* Adjust this % to move it up or down */
            width: unset; /* Control the size of the video thumb here */
            max-width: 574px;
            padding-top: 20px;
            padding-bottom: 20px;
        }
    }


    @media (max-width: 1000px) {
            .hero {
                padding-top: 10px;
            }
        .referral-container {
            padding-top: 6px;
        }
        .settings-container {
            padding-top: 6px;
        }

    }

    @media (max-width: 920px) {
        .site-header {
            padding-left: 10px;
        }

        .content-block {
            padding-left: 10px;
        }

        .pageContent {
            margin-left: 10px;
            width: calc(100% - 50px);
        }


    }


    @media (max-width: 1024px) {

        .progress-columns-wrapper {
            grid-template-columns: 1fr; /* Fallback to standard stacked view on small screens */
            gap: 40px;
        }

        .sidebar-column {
            padding-top: 0;
            gap: 40px;
        }

        .content-block {
            padding-left: 30px;
            padding-top: 30px;
            padding-right: unset;
            gap: 0px;
        }

        .pageContent {
            margin-left: 30px;
        }




        .hero, .content-block, .progress-container {
            flex-direction: column;
            grid-template-columns: 1fr;
        }

        .hero-sidebar, .image-side {
            align-items: flex-start;
            order: 2;
        }

        .text-side {
            order: 1;
        }



        .account-header {
            grid-column: span 1;
        }

        .brand-wrap {
            display: none;
        }
    }

    @media (max-width: 700px) {
        .text-side {
            min-width: unset;
        }

        .image-side {
            min-width: unset;
            width: calc(100% - 30px);
        }
    }






    /* --- RESPONSIVE --- */
    @media (max-width: 768px) {
     /*   .page {
            margin-left: 0;
            padding: 20px !important;
        }*/

        #firstname, #lastname, #city, #state, #zip, #phone {
            grid-column: span 12;
        }
    }




    @media (max-width: 600px) {
        .form-group.half, .form-group.two-thirds, .form-group.small {
            grid-column: span 12;
        }

        .btn-submit {
            grid-column: span 12;
        }
    }