@import url("../global.css");

/* --- 2. THE GRID LAYOUT --- */
/* --- 2. THE GRID LAYOUT (Fixed) --- */
.main-container {
    display: grid;
    width: 100%;  
    height: 90vh; 
    max-width: 1200px;
    gap: var(--gap-size);
    
    /* FIX: Added 'auto' at the end for the Footer row */
    grid-template-rows: 80px 1fr 2fr 80px;
    grid-template-columns: 1fr 1fr 1fr; 
    
    /* FIX: Added "footer" area at the bottom */
    grid-template-areas: 
        "header header header"
        "stat1  stat2  stat3"
        "form   form   form"
        "footer footer footer";
}


.logo-circle {
    width: 60px;
    height: 60px; /* Fixed height for consistency */
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* --- CARD GENERIC STYLE --- */
.card {
    background-image: url('../assets/images/bg-3.png');
    border-radius: var(--radius);
    position: relative;
    padding: 20px;
    color: var(--text-color);
    display: flex;
}

/* --- ROW 1: STAT BOXES --- */
#stat-1 { grid-area: stat1; }
#stat-2 { grid-area: stat2; }
#stat-3 { grid-area: stat3; }

.card-content.centered {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.big-icon { font-size: 4rem; font-weight: 900; line-height: 1; color: var(--pill-color); }
.label { opacity: 0.8; margin-top: 5px; font-weight: 600;}


/* --- ROW 2: BIG FORM BOX --- */
.big-form-box {
    grid-area: form;
    overflow: hidden; /* Prevents overflow */
}

.form-layout {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 40px;
}

.form-intro {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px;
}
.form-intro h2 { font-size: 4rem; margin: 0; line-height: 1; color: var(--pill-color); }
.form-intro p { opacity: 0.8; font-size: 0.7rem; max-width: 300px; }

/* Form Styles */
.wireframe-form {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    padding-right: 20px;
}
.form-row { display: flex; gap: 20px; }
.input-wrapper { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.input-wrapper label { font-size: 0.8rem; opacity: 0.7; margin-left: 10px; }
.input-wrapper input, .input-wrapper textarea {
    background: rgba(0,0,0,0.2);
    border: none;
    border-radius: 15px;
    padding: 12px 15px;
    color: white;
    font-family: inherit;
    outline: none;
}

/* --- PLACEHOLDER STYLING --- */
.input-wrapper input::placeholder,
.input-wrapper textarea::placeholder {
    color: var(--bg-color); 
    opacity: 1; 
}

.input-wrapper textarea { resize: none; height: 100%; }
.input-wrapper.full { flex-grow: 1; }

.submit-pill {
    /* Position it absolutely in the corner */
    position: absolute;
    bottom: -10px; 
    right: -10px;
    
    /* Visual Styling */
    background-image: url('../assets/images/bg-3.png');
    color: var(--text-color);
    border: 10px solid var(--bg-color);
    padding: 12px 30px; /* Made slightly wider */
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    width: auto; /* Allow auto width or fixed, up to you */
    min-width: 150px;
    transition: 0.3s;
}

.submit-pill:hover {
    transform: scale(1.05);
}

/* --- THE "DETACHED PILL" --- */
.detached-pill {
    position: absolute;
    background-image: url('../assets/images/bg-3.png');
    color: var(--card-bg);
    padding: 8px 25px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 10;
}
.bottom-right { bottom: 20px; right: 20px; } /* Kept inside card for cleanliness */
.top-right { top: 20px; right: 20px; }




/* --- MOBILE FIX --- */
@media (max-width: 768px) {
    
    /* 1. HIDE THE TOP HEADER */
.header-card {
        background: transparent !important; /* No background image/color */
        height: 0 !important;               /* No height */
        padding: 0 !important;              /* No padding */
        margin: 0 !important;
        border: none !important;
        pointer-events: none;               /* Let clicks pass through the empty top area */
        overflow: visible !important;       /* Allow the fixed nav to stick out */
    }

    /* 2. Hide the Logo specifically */
    .logo-circle {
        display: none !important;
    }

    /* 3. Ensure Bottom Nav is Clickable */
    .nav-pills {
        pointer-events: auto; /* Re-enable clicking on the buttons */
        /* Note: Position fixed is already handled in your global.css */
    }

    /* ... (Rest of your mobile styles for form/stats) ... */
    .main-container {
        height: auto;
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
        padding-top: 20px;
    }

    /* 2. Container Adjustments */
    .main-container {
        height: auto;
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
        padding-top: 20px; /* Add some space at top since header is gone */
    }

    /* ... (Keep your existing Stat Box & Form styles below) ... */
    .stat-box { height: 150px; }
    .big-form-box { height: auto; padding: 30px; }
    .form-layout { flex-direction: column; }
    
    .form-row {
        display: flex;
        flex-direction: row; 
        gap: 10px;           
        width: 100%;
    }

    .form-intro h2 {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }
    
    .input-wrapper {
        flex: 1;            
        min-width: 0;        
    }

    .input-wrapper input, .input-wrapper textarea {
        width: 100%;
        box-sizing: border-box;
        font-size: 0.8rem;   
        padding: 10px;       
    }
    
    .input-wrapper.full {
        width: 100%;
        margin-top: 5px;
    }
}