:root {
    --bg-color: #ffffff;       /* Page Background */
    --card-bg: #eb6d2f;        /* Orange Cards */
    --accent: #a82b23;         /* Dark Red Accents */
    --nav: #fed2a5;            /* Nav Color */
    --text-color: #ffffff;     /* White Text */
    --gap-size: 12px;
    --radius: 24px;
}

@font-face {
    font-family: 'Hidayatullah';
    src: url('../assets/Fonts/hidayatullah Demo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* Ensure HTML doesn't overflow horizontally on mobile */
html {
    overflow-x: hidden;
    width: 100%;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

body {
    background-color: var(--bg-color);
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}

/* --- PERFORMANCE BOOSTER --- */
/* Select all direct children EXCEPT the header to avoid fixed position bugs */
.main-container > *:not(.header-card) {
    will-change: transform, opacity;
    transform: translateZ(0); 
}

.header-card {
    grid-area: header;
    height: 100%;
    width: 100%;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px; /* Standard Padding */
    position: relative;
    z-index: 1000;
    background-image: url('../assets/images/nav-img.png');

}

.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;
}

.nav-pills {
    background-color: transparent;
    padding: 10px;
    border-radius: 50px;
    display: flex;
    gap: 10px;
    align-items: center;
    border: none;
}

.nav-pills a {
    text-decoration: none;
    color: var(--bg-color);
    padding: 5px 20px;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: 0.3s;
}

.nav-pills a.active{
    background-color: transparent;
    color: var(--bg-color);
    border: 1px solid var(--bg-color);
}




/* =========================================
   GLOBAL FOOTER STYLES (Finalized)
   ========================================= */

.footer-card {
    grid-area: footer;
    border-radius: var(--radius); 
    background-image: url('../assets/images/nav-img.png');
    display: flex;
    align-items: center;
    padding: 0; 
    color: var(--text-color);
    overflow: hidden; 
    border: none;
    min-height: 80px;
}

/* 1. Common Flex Properties (Updated) */
/* ADDED .footer-shairan here so it behaves like the others */
.footer-brand, .footer-social, .footer-copyright, .footer-shairan {
    flex: 1; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Essential for the line to stick */
}

/* 2. BRAND (Left Block) - Contains Email & Social inside */
.footer-brand { 
    font-size: 0.7rem; 
    color: var(--bg-color); 
    padding-left: 30px; 
    justify-content: flex-start; /* Aligns content to the left */
    gap: 20px; /* Space between Email and Social Links */
}

.footer-email {
    display: flex;
    flex-direction: column;
}

.footer-social { 
    flex: none;          /* Don't stretch, just fit content */
    display: flex;       /* Aligns text and icons in a row */
    align-items: center; /* Vertically centers them */
    gap: 15px;           /* Space between "Keep in touch" and icons */
}

/* Style the text */
.footer-social span {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bg-color);
}

/* Style the icons */
.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;           /* FIX: Removed margin-top */
    color: var(--bg-color);
    transition: transform 0.2s ease;
}

.footer-social a:hover {
    transform: scale(1.1);
}
/* 3. MIDDLE (Copyright Text) */
.footer-shairan {
    font-size: 0.6rem; 
    color: var(--bg-color); 
    /* The separator line will attach to the right side of this box */
}

/* 4. RIGHT (Powered By) */
.footer-copyright { 
    font-size: 0.6rem; 
    opacity: 0.8; 
    color: var(--bg-color); 
    padding-right: 30px; 
    justify-content: flex-end; /* Aligns content to the right */
}
.footer-copyright span {
    margin-right: 10px;
    margin-bottom: 5px;
}
/* --- SEPARATORS --- */

/* Line 1: After the Brand/Social Section (Left) */
.footer-brand::after {
    content: "";
    position: absolute;
    right: 0;        
    top: 25%;        
    height: 50%;     
    width: 1px;      
    background-color: rgba(255, 255, 255, 0.4); 
}

/* Line 2: After the Shairan Text Section (Middle) */
.footer-shairan::after {
    content: "";
    position: absolute;
    right: 0;        
    top: 25%;        
    height: 50%;     
    width: 1px;      
    background-color: rgba(255, 255, 255, 0.4); 
}



@media (min-width: 769px) and (max-width: 1000px) {
    
    .footer-social {
        /* Switch to Grid to create the "Triangle" stack */
        display: grid !important;
        grid-template-columns: auto auto; /* Two columns for the icons */
        justify-content: center;
        align-content: center;
        gap: 8px;          /* Space between icons */
        row-gap: 4px;      /* Space between text and icons */
        
        /* Ensure it doesn't stretch too wide */
        flex: none;
        width: auto;
    }

    /* Force the text to span across the top */
    .footer-social span {
        grid-column: 1 / -1; /* Spans both icon columns */
        text-align: center;
        width: 100%;
        margin: 0;
        font-size: 0.65rem; /* Slightly smaller to fit nicely */
        white-space: nowrap;
    }

    /* Center the icons in their grid cells */
    .footer-social a {
        display: flex;
        justify-content: center;
        margin: 0;
    }
    
    /* Optional: Reduce the gap in the parent container so it doesn't look too spread out */
    .footer-brand {
        gap: 10px; 
        padding-left: 20px; /* Give it a bit more breathing room on the left */
    }
}





/* =========================================
   GLOBAL MOBILE FOOTER
   ========================================= */
@media (max-width: 768px) {
body {
        /* 1. Remove Padding */
        padding: 0; 
        
        /* 2. CRITICAL FIX: Disable Flex Centering */
        display: block; 
        
        /* 3. Allow Scrolling */
        height: auto; 
        min-height: 100vh;
        overflow-x: hidden;
    }

.footer-card {
        /* FIX: Changed '0px 20px 90px 0px' to '0px 0px 90px 0px' */
        /* This removes the extra gap on the right side */
        margin: 0px 0px 90px 0px !important;
        
        /* 1. Force Row Layout */
        display: flex !important;
        flex-direction: row !important; 
        justify-content: space-between;
        align-items: center;
        border-radius: 20px;
        /* 2. Tight Padding to maximize space */
        padding: 0 12px; 
        gap: 2px;
        
        height: 50px; 
        min-height: auto;
    }

    /* Reset ALL Children (Added .footer-shairan) */
    .footer-brand, .footer-copyright, .footer-shairan {
        flex: 1; /* Share space equally */
        margin: 0;
        padding: 0;
        height: 100%;
        display: flex;
        align-items: center;
    }
.footer-brand, .footer-shairan {
        position: relative; /* Ensure the line sticks to this box */
    }

    /* 2. Show the Dividers (Overriding the previous 'display: none') */
    .footer-brand::after, .footer-shairan::after {
        display: block !important; /* Force them to show */
        content: "";
        position: absolute;
        right: 0;
        
        /* Adjust height for the smaller mobile footer */
        top: 20%;      /* Start slightly lower */
        height: 60%;   /* Make line shorter than the box height */
        width: 1px;    /* Thin line */
        background-color: rgba(255, 255, 255, 0.3); /* Slightly transparent white */
    }
    
    /* Optional: Fix spacing so text doesn't hit the line */
    .footer-shairan {
        padding: 0 5px; /* Add tiny padding inside the middle box */
    }

    /* --- LEFT: Brand Name --- */
    .footer-brand { 
        justify-content: flex-start;
        font-size: 0.6rem; 
        font-weight: 800; 
        line-height: 1;
        white-space: nowrap;
    }
    /* Hide the email address on mobile, just show "Shairan Cafe" */
    .footer-email span { display: none; } 
    /* 1. Hide the Brand Name/Email (The old left side) */
    .footer-email { 
        display: none !important; 
    }

    /* 2. Show and Style the Social Section (The new left side) */
    .footer-social {
        /* Make it visible */
        display: grid !important;
        
        /* 2 Columns: One for each icon */
        grid-template-columns: auto auto; 
        justify-content: start;
        align-content: center;
        gap: 0px;
        /* Spacing */
        row-gap: 3px;     /* Space between text and icons */
        
        /* Position */
        margin-right: auto; 
        padding-left: 0;
        flex: 1;
    }

    /* Force the "Keep in touch" text to span across the top row */
    .footer-social span {
        grid-column: 1 / -1; /* Spans both columns */
        display: block !important;
        font-size: 0.45rem;
        font-weight: 600;
        opacity: 0.9;
        margin: 0;
        padding-left: 10px;
    }

    /* CRITICAL: Turn off the old CSS-generated text */
    .footer-social::before {
        content: none !important;
        display: none !important;
    }

    /* Reset margins for icons so they fit in the grid cells */
    .footer-social a {
        margin: 0 !important;
    }
    .footer-social a svg {
        width: 10px;
        height: 10px;
        margin: 0;
        padding: 0;
    }

    /* Hide the <br> tag that was in your HTML */
    .footer-social br { display: none; }

    /* --- MIDDLE: Copyright Text (The missing part) --- */
    .footer-shairan {
        justify-content: center;
        font-size: 0.35rem; /* Tiny text */
        text-align: center;
        white-space: normal; /* Allow 2 lines if needed */
        line-height: 1.1;
        opacity: 0.8;
    }

    /* --- RIGHT: Powered By --- */
    .footer-copyright {
        justify-content: flex-end;
        flex-direction: column; /* Stack "Powered by" on top of Logo */
        align-items: flex-end;
        justify-content: center;
        text-align: right;
        font-size: 0.35rem;
    }
    
    .footer-copyright span {
        margin: 0;
        margin-bottom: 2px;
        opacity: 0.7;
    }

    /* Tiny Logo */
    .footer-copyright img {
        width: auto !important; 
        height: 12px !important; /* Fixed height */
        max-width: 40px;
        margin: 0;
    }



        /* --- NAVBAR --- */
    .nav-pills {
        position: fixed; bottom: 30px; left: 50%;
        transform: translateX(-50%);
        width: 96%; max-width: 400px; height: 50px;
        background-image: url('assets/images/nav-img.png');
        border-radius: 50px; padding: 5px;
        display: flex; justify-content: space-between; align-items: stretch;
        gap: 3px; z-index: 10000; pointer-events: auto;

    }
    .nav-pills a {
        flex: 1; font-size: 0.65rem; text-decoration: none; padding: 0 2px;
        background-color: transparent; color: white;
        border-radius: 40px; display: flex; align-items: center; justify-content: center;
        transition: 0.2s ease;
    }
    .nav-pills a.active {
        border: 1px solid var(--bg-color);
        transform: scale(1.02); 
    }
}