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


/* --- GRID LAYOUT FIX (Products) --- */
.main-container {
    display: grid;
    width: 100%;
    max-width: 1200px;
    height: 90vh;
    gap: 20px;
    
    /* FIX: Added 'auto' at the end for the footer */
    grid-template-rows: 80px 1fr 80px; 
    grid-template-columns: 1fr;
    
    /* FIX: Added 'footer' area */
    grid-template-areas: 
        "header"
        "stage"
        "footer";
}





/* --- THE CORNER CUTOUTS --- */
/* These are peach-colored squares with inverted border-radius */
.shape-corner {
    position: absolute;
    width: 80px;  /* Size of the "bite" */
    height: 70px;
    background-color: var(--page-bg); /* Matches body background */
    z-index: 2; /* Sits on top of the red stage */
}


.corner-bl {
    bottom: -20px; left: 45%;
    background-color: var(--card-bg);
    border-radius:0% 0% 100% 100%; /* Creates inverted curve */
}
.corner-br {
    top: 0; right: 44%;
        background-color: var(--bg-color);
    border-radius: 0% 0% 20px 20px; /* Creates inverted curve */
    width: 200px;
    height: 30px;
}

/* --- THE BOTTOM NOTCH --- */
.shape-notch {
    position: absolute;
    bottom: -35px;
    
    /* Center using calc */
    left: calc(5% - 70px); 
    
    /* Remove the old transform property */
    /* transform: translateX(-50%); */ 
    
    width: 140px;
    height: 70px;
    background-color: var(--stage-bg);
    border-radius: 0 0 140px 140px;
    z-index: 2;
}
#product-title{
    font-size: 3rem;
    margin-bottom: 10px;
    line-height: 1.1;
    color: white;
    font-family: 'Hidayatullah',sans-serif; 
}
#product-title span {
    color: #eb6d2f;
}

.product-logo{
    position: absolute;
    top: 20px;
    left: 20px;
    width: 80px;
    height: 80px;
    z-index: 10;
}
/* 4. CONTENT STYLING (Matching Reference) */

/* Bubbly Background Text */
.bg-text {
    position: absolute;
    top: 28%; /* Moved up slightly */
    right: -10%;
    transform: translate(-50%, -50%);
    font-size: 13rem;
    font-weight: 900;
    color: var(--text-white);
    z-index: 1;
    opacity: 0.9;
    pointer-events: none;
    white-space: nowrap;
    /* Optional: Add a text shadow for more pop */
    text-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* --- 1. THE STAGE (Container) --- */
.product-stage {
    grid-area: stage;
    border-radius: var(--radius);
    
    /* Crucial for containing the "Background" image */
    position: relative;
    overflow: hidden; 
    
    /* Remove old background colors/images */
    background-color: transparent;
    /* Flex is no longer needed for centering since we use absolute positioning */
    display: block; 
}

/* --- 2. THE IMAGE (Acting as Background) --- */
.product-visual {
    /* Absolute positioning fills the entire stage */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Puts the image at the very back */
    z-index: 0; 
    
    /* Removes any previous transforms/margins */
    transform: none;
    margin: 0;
    padding: 0;
}

.product-visual img {
    width: 100%;
    height: 100%;
    
    /* 'cover' makes it act exactly like background-size: cover */
    object-fit: cover; 
    
    /* Optional: Dim the image slightly so text pops */
    filter: brightness(0.8); 
    transition: transform 0.5s ease;
}

/* --- 3. LAYER THE CONTENT ON TOP --- */
.bg-text {
    z-index: 1; /* Sits on top of the image */
    opacity: 0.15; /* Make it subtle */
    mix-blend-mode: overlay; /* Cool effect blending with the image */

}

/* The Title & Description */
.product-info-float {
    position: absolute;
    z-index: 10; /* Highest priority */
    
    /* Position text at bottom left */
    bottom: 50px;
    left: 50px;
    
    /* Reset previous centering styles */
    top: auto;
    transform: none;
    
    /* Ensure text is readable on top of image */
}

/* Nav Buttons */
.nav-arrow {
    z-index: 20; /* Must be clickable */
    background-color: white;
}

#product-desc{
    font-size: 0.5rem;
    margin-bottom: 30px;
    color: white;
    width: 300px;
}

.product-info-float h2 { font-size: 2rem; margin-bottom: 15px; line-height: 1.1; }
.product-info-float p { font-size: 0.8rem; opacity: 0.9; margin-bottom: 30px; }
.cta-btn {
    padding: 15px 35px;
    border-radius: 50px;
    border: none;
    background: var(--text-white);
    color: var(--stage-bg);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
}
.cta-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

/* Navigation Arrows (White circle style) */
/* Navigation Arrows (White circle style) */
/* --- 1. THE SIDE CUTOUTS (The "Bite" Effect) --- */
.side-cutout {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;  /* Size of the curve */
    height: 100px;
    background-color: var(--page-bg); /* MUST match body background (Peach) */
    border-radius: 50%; /* Makes it a circle */
    z-index: 2; /* Sits on top of the red stage */
}

.cutout-left {
    left: -50px; /* Push it halfway out to create the curve */
}

.cutout-right {
    right: -50px; /* Push it halfway out */
}


/* --- 2. UPDATED NAVIGATION ARROWS --- */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Inverted colors based on your request */
    background-image: url('../assets/images/bg-3.png');
    color: var(--text-white, #ffffff);    /* White Arrow */
    border: 2px solid var(--page-bg); /* Optional: Adds a tiny border to separate it */
    
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20; /* Must be higher than the cutout! */
    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Adjust SVG size inside */
.nav-arrow svg {
    width: 24px;
    height: 24px;
}

/* Hover Effect */


/* Position them exactly in the center of the cutout */
.prev { left: 0px; } 
.next { right: 0px; }








/* =========================================
   MOBILE LAYOUT (Transparent Navbar + Full BG)
   ========================================= */
@media (max-width: 768px) {

    /* 1. GRID (No space reserved for header) */
.main-container {
        /* Row 1: Stage (Takes remaining space) */
        /* Row 2: Footer (Sizes automatically based on content + margins) */
        grid-template-rows: 1fr auto; 
        
        grid-template-areas: 
            "stage"
            "footer";
            
        height: 100vh;
        gap: 0;
        width: 100%;
    }

    /* 2. TRANSPARENT FLOATING NAVBAR */
    .header-card, header {
        display: flex !important;
        position: absolute; /* Float on top of image */
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        
        background: transparent !important; /* See-through */
        box-shadow: none !important; /* Remove shadow */
        border: none !important;
        
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        z-index: 50; /* Ensure it stays on top of image */
    }
    
    /* Scale down logo slightly for mobile */
    .logo-circle {
        display: none;
    }

    /* 3. THE STAGE (Full Screen) */
    .product-stage {
        grid-area: stage;
        
        /* Size of the card relative to the screen */
        width: 90%; 
        height: 85%; /* Slightly reduced to give breathing room from footer */
        
        /* --- THE CENTERING MAGIC --- */
        align-self: center;   /* Centers vertically in the '1fr' row */
        justify-self: center; /* Centers horizontally */
        margin: 0;            /* Remove auto margins to let Grid handle alignment */
        /* ------------------------- */

        display: block; 
        position: relative;
        overflow: hidden;
        border-radius: var(--radius); 
        padding: 0;
        
        /* Optional: Add shadow to make it pop off the background */
    }

    /* 4. THE IMAGE */
    .product-visual {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 0; 
        transform: none !important; 
    }

    .product-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover; 
        filter: brightness(0.7);
    }

    /* 5. TEXT INFO */
    .product-info-float {
        position: absolute;
        z-index: 10;
        bottom: 25px;
        left: 20px;
        top: auto;
        transform: none;
        width: 65%; 
        text-align: left;
        padding: 0;
        margin: 0;
    }
.footer-card {
        /* Top: 0 | Right: 15px | Bottom: 90px | Left: 15px */
        /* The 90px bottom margin pushes the footer UP so it sits above your Nav Pills */
        margin: 0px 15px 90px 15px !important;
        
        display: flex !important;
        flex-direction: row !important; 
        justify-content: space-between;
        align-items: center;
        
        padding: 0 10px; 
        gap: 2px;
        
        height: 50px; 
        min-height: auto;
        
        /* Ensure it sits on top of the background image */
        z-index: 40; 
        position: relative;
    }
    
    .product-info-float h2 { 
        font-size: 1.8rem; 
        margin-bottom: 5px; 
        color: white; 
    }
    
    .product-info-float p { 
        font-size: 0.8rem; 
        color: rgba(255,255,255,0.9); 
        margin: 0;
        display: block;
    }
    #product-title{
        font-size: 1.5rem;
    }
    #product-desc{
        font-size: 0.4rem;
        padding-right: 20px;
        margin-bottom: 15px;
    }
    /* 6. BACKGROUND TEXT */
    .bg-text {
        align-content: end;
        display: block !important;
        position: absolute;
        top: 25%; 
        transform: translate(-50%, -50%);
        font-size: 20vw; 
        font-weight: 900;
        color: white;
        z-index: 1;
        opacity: 0.7;
        pointer-events: none;
    }

    /* 7. NAV ARROWS */
    .nav-arrow {
        position: absolute;
        z-index: 30;
        top: 50%; 
        transform: translateY(-50%);
        bottom: auto; 
        width: 45px; 
        height: 45px;
        background: var(--bg-color);
        border-radius: 50%;
    }

    .nav-arrow svg {
        color: var(--accent);
    }
    .prev { left: -4%; right: auto; }
    .next { right: -4%; left: auto; }

    /* 8. HIDE DECORATIONS */
    .shape-corner, .side-cutout, .shape-notch,
    .corner-tl, .corner-tr, .corner-bl, .corner-br { 
        display: none !important; 
    }
}