/* --- VARIABLES --- */
:root {
    /* Brand Colors */
    --page-color: #800D00;
    --page-color-bright: #FF0C00;
    --primary-success: #00C70A;
 
        /* Heavy Bag - Deep Red to Bright Red */
        --HeavyBag: #800D00;
        --HeavyBag-bright: #FF0C00;

        /* Shadow Boxing - Magenta/Pink Tones */
        --ShadowBoxing: #7F2440;
        --ShadowBoxing-bright: #E34174;

        /* Weight Training - Warm Earthy Browns */
        --WeightTraining: #5e2600;
        --WeightTraining-bright: #cd763c;

        /* Pads or Mitts - Deep Blue to Sky Blue */
        --PadsorMitts: #2652A6;
        --PadsorMitts-bright: #3780FF;

        /* Sparring - Steel Blue to Light Blue */
        --Sparring: #56799A;
        --Sparring-bright: #8ECCNF;

    /* Plan Start - Bright Blue to Dark Navy */
    --Plan-Free: #575757;
    --Plan-Free-bright: #8a8a8a;
    /* Plan Start - Bright Blue to Dark Navy */
        --Plan-Starter: #2577FA;
        --Plan-Starter-bright: #1E3E81;

        /* Plan Growth - Purple to Deep Violet */
        --Plan-Growth: #4F14A0;
        --Plan-Growth-bright: #4600C0;

        /* Plan Pro - Bronze to Golden Orange */
        --Plan-Pro: #C88C32;
        --Plan-Pro-bright: #FFD300;
    
    /* Neutrals */
    --white: #ffffff;
    --black: #000000;
    --gray-vlight: #a2a2ab;
    --gray-light: #8E8E93;
    --gray-mid: #333336;      /* Combined #333 and #333336 */
    --gray-dark: #2f2f2f;
    --gray-deep: #1c1c1e;     /* Combined #1c1c1e, #1a1a1a, and #171717 */
    --gray-black: #080808;
    
    /* Functional */
    --error: var(--page-color-bright);
    --success: var(--primary-success);
    --card-bg: #121212;
    --border: #2c2c2e;
    --input-focus-bg: #252528;
}

/* --- GLOBAL BASE --- */
*, *:before, *:after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    background-color: var(--gray-deep);
}

body {
    background: linear-gradient(to bottom right, var(--gray-dark), var(--gray-deep));
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--white);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    display: flex;
    justify-content: center;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* --- Mode Classes --- */

.HeavyBag {
    background-color: var(--HeavyBag);
    color: white;
}
.HeavyBag.bright {
    background-color: var(--HeavyBag-bright);
}

.ShadowBoxing {
    background-color: var(--ShadowBoxing);
    color: white;
}
.ShadowBoxing.active {
    background-color: var(--ShadowBoxing-bright);
}

.WeightTraining {
    background-color: var(--WeightTraining);
    color: white;
}
.WeightTraining.active {
    background-color: var(--WeightTraining-bright);
}

.PadsorMitts {
    background-color: var(--PadsorMitts);
    color: white;
}
.PadsorMitts.active {
    background-color: var(--PadsorMitts-bright);
}

.Sparring {
    background-color: var(--Sparring);
    color: white;
}
.Sparring.active {
    background-color: var(--Sparring-bright);
}

/* --- Plan Classes --- */

.home {
    color: var(--Plan-free);
}
.PlanFree {
    background-color: var(--Plan-Free);
    color: white;
}
.PlanFree.active {
    background-color: var(--Plan-Free-bright);
}
.PlanStarter {
    background-color: var(--Plan-Starter);
    color: white;
}
.PlanStarter.active {
    background-color: var(--Plan-Starter-bright);
}

.PlanGrowth {
    background-color: var(--Plan-Growth);
    color: white;
}
.PlanGrowth.active {
    background-color: var(--Plan-Growth-bright);
}

.PlanPro {
    background-color: var(--Plan-Pro);
    color: black;
}
.PlanPro.active {
    background-color: var(--Plan-Pro-bright);
}
/* --- Mode Text Colors --- */

.text-HeavyBag {
    color: var(--HeavyBag);
    text-decoration: none;
}
.text-HeavyBag.active {
    color: var(--HeavyBag-bright);
    text-decoration: none;
}

.text-ShadowBoxing {
    color: var(--ShadowBoxing);
    text-decoration: none;
}
.text-ShadowBoxing.active {
    color: var(--ShadowBoxing-bright);
    text-decoration: none;
}

.text-WeightTraining {
    color: var(--WeightTraining);
    text-decoration: none;
}
.text-WeightTraining.active {
    color: var(--WeightTraining-bright);
    text-decoration: none;
}

.text-PadsorMitts {
    color: var(--PadsorMitts);
    text-decoration: none;
}
.text-PadsorMitts.active {
    color: var(--PadsorMitts-bright);
    text-decoration: none;
}

.text-Sparring {
    color: var(--Sparring);
    text-decoration: none;
}
.text-Sparring.active {
    color: var(--Sparring-bright);
    text-decoration: none;
}

/* --- Plan Text Colors --- */

.text-PlanStarter {
    color: var(--Plan-Starter);
    text-decoration: none;
}
.text-PlanStarter.active {
    color: var(--Plan-Starter-bright);
    text-decoration: none;
}

.text-PlanGrowth {
    color: var(--Plan-Growth);
    text-decoration: none;
}
.text-PlanGrowth.active {
    color: var(--Plan-Growth-bright);
    text-decoration: none;
}

.text-PlanPro {
    color: var(--Plan-Pro);
    text-decoration: none;
}
.text-PlanPro.active {
    color: var(--Plan-Pro-bright);
    text-decoration: none;
}
/* --- LAYOUT UTILITIES --- */
.plan-locked {
    display:hidden;
}
.container {
    width: 100%;
    max-width: 800px;
    padding-bottom: 7.5rem;
}
.title {
    padding-top: 1.75rem;
    padding-left: 1.75rem;
}

.hidden {
    display: none !important;
}

.eye-stats {
    display: inline-flex;
    align-items: center;      /* Centers SVG and text vertically */
    justify-content: center;
    gap: 4px;                 /* Space between icon and numbers */
    
    color: var(--gray-light);
    font-size: 0.6em;        /* Exactly 12px based on 16px parent */
    line-height: 1;           /* Prevents extra vertical padding */
    vertical-align: middle;   /* Aligns the whole component with surrounding text */
}

.eye-stats svg {
    display: block;           /* Removes inline whitespace gaps */
    width: 1em;             /* Scales icon relative to font size */
    height: 1em;
}

.h-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

/* --- HEADER & NAVIGATION --- */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0.625rem 0.5rem 0.625rem;
    width: 100%;
}

.app-logo {
    height: 3rem;
    width: auto;
    display: block;
}

.number-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #fff;
    font-weight: 600;
    line-height: 1;
}

.breadcrumb {
    display: flex;
    gap: 0.625rem;
    padding: 1.875rem 1.875rem 0.625rem 0.625rem;
    color: var(--gray-light);
    font-size: 0.9375rem;
}

.breadcrumb span {
    white-space: nowrap;
}

.header-title {
    font-size: 2rem;
    padding: 2rem 0.625rem 0.25rem 0.625rem;
}
.section-header-title {
    font-size: 1rem;
}
.section-sub-title {
    font-size: 0.75rem;
}

.user-greeting {
    font-size: 0.875rem;
    color: var(--gray-light);
    text-align: right;
}

.user-greeting p { margin: 0; }

.logout-link {
    text-decoration: none;
    margin-left: 0.5rem;
}

/* --- CUSTOM BUTTONS (Pick Type) --- */
.custom-button {
    position: relative;
    width: 100%;
    min-width: 25.625rem;
    max-width: 100rem;
    height: 7rem;
    border: none;
    border-radius: 0.625rem;
    overflow: hidden;
    padding: 0;
    margin-bottom: 0.625rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--black), transparent 80%);
}

.button-bg-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    opacity: 0.2;
}

.button-content {
    position: relative;
    z-index: 2;
    width: 100%;
    color: var(--white);
    padding-left: 1.875rem;
    display: flex;
    flex-direction: column;
}

.button-title {
    color: var(--white);
    font-family: sans-serif;
    font-size: 1.25rem;
    text-transform: uppercase;
    font-weight: bold;
}



    
.box-container {
    display: inline-flex; /* Changed from flex to inline-flex to sit next to text */
    align-items: flex-end;
    gap: 4px;
    height: 0.6225rem;       /* Set height relative to your text size */
    vertical-align: middle; /* This centers the container with the text line */
    margin-left: 8px;     /* Optional: space between text and boxes */
}

.box {
    width: 0.9375rem; 
    height: 0.9375rem;
    border-radius: 0.1875rem;
}

.box-1 { background-color: var(--white); }
.box-2 { background-color: var(--white); opacity: 0.5; }

.lock-icon {
    font-size: 1rem;      /* Scaled to match text height better */
    line-height: 1;
    filter: brightness(0) invert(1);
    /* Ensure the lock doesn't have extra margin */
    display: block;
}

/* --- CONTENT SECTIONS & TABLES --- */
.section-header-block {
    padding: 1em 1.25em;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-top: 1em;
}
.section-block {
    background: var(--card-bg);
    padding: 1em 1.25em;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-top: 1em;
}
.section-top{
    padding: 0 0 0 0.625em;
}
.category-header {
    padding: 0.9375rem 1.25rem;
    font-size: 1.125rem;
    color: var(--gray-light);
    font-weight: bold;
    background: var(--gray-deep);
}

.item-category {
    padding: 1.275rem 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-category span { color: var(--white); font-size: 1.2rem; }
.item-title, .sub-text { color: var(--gray-vlight); font-size: 0.75rem;}
.item-row {
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- EXPANDED INFO & SUB-ROWS --- */
.expanded-info {
    background: var(--gray-black);
    padding: 0.9375rem 1.25rem 1.25rem 1.25rem;
    border-top: 1px solid var(--gray-deep);
    display: none;
}

.info-content {
    display: flex;
    gap: 0.9375rem;
    margin-bottom: 0.9375rem;
    align-items: flex-start;
}

.video-placeholder {
    width: 10rem;
    height: 5.625rem;
    background: var(--gray-deep);
    border-radius: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
}

.info-text {
    font-size: 0.75rem;
    color: var(--gray-light);
    line-height: 1.4;
    flex: 1;
}

.breakdown-list {
    display: flex;
    flex-direction: column;
    padding-left: 0.9375rem;
}

.sub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2.75rem;
    border-bottom: 1px solid var(--gray-deep);
    position: relative;
}

.sub-row::before {
    content: "•";
    position: absolute;
    left: -0.9375rem;
    color: var(--page-color-bright);
    font-size: 1.25rem;
}

/* --- FORMS & AUTH --- */
.auth-footer{
    color: var(--gray-vlight);
font-size: 0.8rem;
    margin-left: 10px;

    }
.auth-footer a {
    color: var(--gray-vlight);
    margin-right: 20px;
        text-decoration: none;


}
.auth-container {
    width: 95%;
    border-radius: 0.75rem;
    margin: 2rem auto;
}

.auth-container h2 {
    color: var(--page-color-bright);
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.auth-container input {
    width: 100%;
    background: var(--gray-deep);
    color: var(--white);
    padding: 0.9rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

.auth-container input:focus {
    outline: none;
    border-color: var(--page-success);
    background: var(--input-focus-bg);
}

.form-row {
    display: flex;
    gap: 0.75rem;
    width: 100%;
}



.form-row input { flex: 1; min-width: 0; }

.scroll-view {
    margin-top: 1rem;
}
.address-section {
    background: color-mix(in srgb, var(--black), transparent 70%);
    padding: 1.25rem;
    border-radius: 0.625rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
}

.address-section h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--gray-light);
    margin: 0 0 1rem 0;
    letter-spacing: 1px;
}

/* --- CONTROLS & BUTTONS --- */
.filter-controls {
    display: flex;
    gap: 0.5rem;
    padding: 0.625rem;
    overflow-x: auto;
}

.filter-btn, .btn-begin, .btn-normal{
    border: none;
    font-weight: bold;
    cursor: pointer;
    color: var(--white);
    border-radius: 0.50rem;
    transition: all 0.2s;
}
.btn-register {
    border: none;
    font-weight: bold;
    cursor: pointer;
    color: var(--white);
    background: var(--page-color);
    border-radius: 0.50rem;
    transition: all 0.2s;
}
.btn-info {
    border: none;
    font-weight: bold;
    font-size: 1.25rem;
    padding: 0rem 0.75rem 0.2rem 0.75rem;
    cursor: pointer;
    color: var(--white);
    background: var(--page-color);
    border-radius: 0.50rem;
    transition: all 0.2s;
}
.card-btn{
    border: none;
    font-weight: bold;
    cursor: pointer;
    color: var(--white);
    margin:1rem;
    padding:1rem;
    border-radius: 0.50rem;
    transition: all 0.2s;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--black), transparent 90%);
}
.confirm-btn{
    border: none;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--white);
    background: var(--page-color-bright);
    margin:1rem;
    padding:1.2rem;
    border-radius: 0.50rem;
    transition: all 0.2s;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--black), transparent 60%);
}
.filter-btn { padding: 0.75rem; }
//.filter-btn.active { background: var(--page-color-bright); }
.btn-info.active { background: var(--page-color-bright); }

.btn-normal, .btn-begin { padding: 0.75rem 1.5625rem; }
.btn-begin { animation: pulse 2s infinite; }

.btn-register {
    width: 100%;
    padding: 1rem;
    text-transform: uppercase;
}
.btn-register:hover {
    background: var(--page-color-bright);
    transform: translateY(-1px);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 2.875rem;
    height: 1.5rem;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--gray-mid);
    transition: 0.2s;
    border-radius: 1.25rem;
}
.toggle-track:before {
    position: absolute;
    content: "";
    height: 1.25rem; width: 1.25rem;
    left: 0.125rem; bottom: 0.125rem;
    background-color: var(--white);
    transition: 0.2s;
    border-radius: 50%;
}
input:checked + .toggle-track { background-color: var(--page-color); }
input:checked + .toggle-track:before { transform: translateX(1.375rem); }


/* --- SYSTEM UI (Toast / Bottom Bar) --- */
#toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 90%;
    max-width: 350px;
}

.toast {
    background: var(--gray-mid);
    color: var(--white);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--black), transparent 70%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideIn 0.3s ease-out;
    border-left: 5px solid var(--primary-success);
}

.bottom-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 800px;
    background: color-mix(in srgb, var(--gray-deep), transparent 5%);
    display: flex;
    justify-content: space-between;
    padding: 1.25rem;
    border-top: 1px solid var(--gray-mid);
    z-index: 100;
}

/* --- ANIMATIONS --- */
@keyframes pulse {
    0%, 100% { transform: scale(0.98); }
    50% { transform: scale(1.04); background: var(--page-color-bright); }
}

@keyframes slideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 768px) {
    body {
        background: var(--gray-deep) !important;
        background-attachment: scroll !important;
    }
    html { background-color: var(--gray-deep) !important; }
}

@media (max-width: 480px) {
    .main-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .app-logo { height: 2.5rem; }
    .header-title { font-size: 1.5rem; padding-top: 1rem; }
    
    .auth-container { padding: 1.25rem; margin-top: 1rem; }
    .auth-container input { font-size: 16px !important; padding: 0.8rem; }
    
    .button-content { padding-left: 1rem; }
    .button-title { font-size: 1.1rem; }
}

input { transition: border-color 0.3s ease; }
.success-border { border-color: var(--success) !important; }
.error-border { border-color: var(--error) !important; }



input[type="range"] {
  accent-color: var(--page-color-bright);
}


/* 1. Full-Width Carousel Logic */
.plan-carousel {
    display: flex;
    gap: 20px;
    padding: 30px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.plan-carousel::-webkit-scrollbar { display: none; }

/* Spacer to prevent first/last card from sticking to screen edge */
.plan-carousel::before, .plan-carousel::after {
    content: '';
    flex: 0 0 20px;
}

/* 2. Individual Card Styling */
.plan-card-ui {
    flex: 0 0 280px;
    scroll-snap-align: center;
    background: #1c1c1e;
    border-radius: 16px;
    border: 2px solid rgba(255,255,255,0.1);
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

/* Header & Price Styling */
.plan-header {
    padding: 25px 20px;
    border-radius: 14px 14px 0 0;
    text-align: center;
}
.plan-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: white;
    margin: 0;
    text-transform: uppercase;
}

.price-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    color: white;
    margin-top: 10px;
}
.p-sym { font-size: 1.2rem; opacity: 0.7; transform: translateY(-12px); }
.p-amt { font-size: 3.5rem; font-weight: bold; line-height: 1; }
.p-dec { font-size: 3.5rem; font-weight: bold; line-height: 1; }
.p-per { font-size: 1rem; opacity: 0.7; }

/* 3. Floating Label Feature Box */
.feature-box {
    position: relative;
    border: 2px solid #444; /* Fallback */
    border-radius: 12px;
    margin: 30px 20px 15px 20px;
    padding: 20px 15px;
}
.extra-features {
    padding: 0 20px 20px 20px;
    }
.features {
    position: relative;
    flex-grow: 1;
    margin: 0;
    padding: 0;
}

.float-label {
    position: absolute;
    top: -11px;
    left: 12px;
    background: #1c1c1e; /* Matches card bg */
    padding: 0 10px;
    font-size: 0.75rem;
    font-weight: 900;
}

.feat-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    color: #eee;
    margin-bottom: 8px;
}

.feat-item i { font-size: 0.75rem; margin-top: 4px; }

/* 4. Action Buttons */
.stats-wrapper { --accent: ; color: #fff; padding: 1.2rem; border-radius: 12px; margin-top: 20px; font-family: sans-serif; }
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr); /* 5 items per row */
        gap: 15px;
        margin-bottom: 20px;
    }
    .stat-tile { background: #1a1a1a; padding: 10px 2px; border-radius: 8px; text-align: center; border-bottom: 2px solid #333; }
    .stat-tile.total { border-bottom-color: var(--accent); }
    .stat-tile.today { border-bottom-color: #444; background: #151515; }
    .stat-tile small { color: #666; font-size: 0.55rem; text-transform: uppercase; display: block; margin-bottom: 4px; }
    .stat-tile h2 { margin: 0; font-size: 1rem; }
    .grid-label { grid-column: span 5; font-size: 0.7rem; color: #888; margin: 10px 0 5px 0; text-transform: uppercase; letter-spacing: 1px;}

        /* --- VERIFICATION BANNER --- */
        .verify {
            width: 100vw;
            position: relative;
            left: 50%;
            right: 50%;
            margin-top: 1rem;
            margin-bottom: 1rem;
            margin-left: -50vw;
            margin-right: -50vw;
            
            background: var(--HeavyBag); /* Subtle version of --Plan-pro */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-top: 1px solid var(--HeavyBag-bright);
            padding: 1.25rem 1rem;
            text-align: center;
            z-index: 1000;
        }

        .verify h3 {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--white);
            line-height: 1.5;
        }

        .verify strong {
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-right: 5px;
        }

        .verify a {
            color: var(--white);
            font-weight: bold;
            text-decoration: none;
            display: inline-block;
            margin-top: 5px;
            padding: 2px 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .verify a:hover {
            background: var(--Plan-free);
            color: var(--black);
        }

        /* For Mobile: Ensure text doesn't feel cramped */
        @media (max-width: 480px) {
            .verify h3 { font-size: 0.85rem; }
            .verify a { display: block; margin: 10px auto 0; width: fit-content; }
        }

        .plan-expiring {
            background: #3a3a3c !important; /* Darker, neutral color */
            color: #aeaeae !important;
            border: 1px solid #48484a !important;
            cursor: default;
            pointer-events: none; /* Prevents clicking while in grace period */
        }