/* * ----------------------------------------------------
 * GLOBAL STYLES AND RESETS
 * ----------------------------------------------------
 */
:root {
    /* Theme Colors (Purple/Lime) */
    --primary: #6753D4; 
    --secondary: #FAFE03; 
    --info: #51A8D2; /* For info/rules buttons */
    --dark: #33353F;
    --border-radius-base: 0.5rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Using Inter font for modern look */
    font-family: 'Inter', sans-serif; 
}

/* Ensure full viewport height for responsive layout management */
html, body {
    height: auto;
    min-height: 100vh;
    padding: 0; /* Removing redundant padding from body */
}

body {
    /* Preserving user's background image style */
    background: url('https://eatm.in/wp-content/uploads/2025/02/WhatsApp-Image-2025-01-28-at-09.45.04_62eda28c.jpg') no-repeat center center/cover;
    /* Flex alignment to center the main container on desktop */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* * ----------------------------------------------------
 * CONTAINER & RESPONSIVE DUAL-PANEL LAYOUT
 * ----------------------------------------------------
 */

.container {
    width: 90%; /* Increased from 80% for better mobile fill */
    max-width: 1000px; /* Slightly increased max-width */
    padding: 0; /* Removed padding here, added it inside sections */
    background-color: transparent; /* Set transparency for the wrapper */
    border-radius: var(--border-radius-base);
    border-radius: 50px;
    
    /* Desktop Default: Side-by-Side (Row) */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* Prevent wrapping on desktop */
    justify-content: center;
    align-items: stretch; /* Stretch sections to fill container height */
    
    /* Applying the semi-transparent background and blur to the container wrapper */
    background-color: rgba(192, 197, 202, 0.473);
    backdrop-filter: blur(5px);
    overflow: hidden; /* Ensures rounded corners look clean */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Soft shadow */
}

/* --------------------
 * Section 1: Logo/Info Panel (Preserves user's styling)
 * -------------------- */
.logo-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* Vertical spacing maintained */
    align-items: center;
    flex: 1; /* Takes equal space on desktop */
    padding: 40px 30px; /* Added internal padding */
    /* margin-bottom: 10px; */
    color: var(--dark);
    /* Adding a contrasting background to clearly separate panels */
    background: rgba(255, 250, 255, 0.596); 
}

/* Image rendering improvements */
.logo {
  display: block;        /* avoid inline gaps */
  width: 140px;          /* default desktop size comes from earlier rules */
  max-width: 70vw;       /* cap relative to viewport */
  height: auto;
}
.logo p {
    align-items: center;
    justify-content: center;
}

/* Smaller mobile scaling with space above */
@media (max-width: 576px) {
  .logo {
    width: 120px;
    max-width: 60vw;
    margin-top: 6px;     /* add a bit of breathing room from the container top */
    margin-bottom: 14px;
  }
}


.welcome-text {
    margin-top: 10px;
    padding: 10px 20px;
    color: var(--dark);
    border: none;
    border-radius: 5px;
    font-weight: bold;
}

.logo-section .rule {
    list-style: disc;
    text-align: left;
    margin-left: 20px;
    margin-bottom: 10px;
}

/* --------------------
 * Section 2: Login Form Panel (Preserves user's styling)
 * -------------------- */
.login-section {
    min-width: 45%; /* Slightly increased size for forms */
    width: 50%;
    flex: 1.2; /* Takes a bit more space on desktop */
    padding: 40px 30px; /* Added internal padding */
    background: rgba(255, 255, 255, 0.9); /* Opaque white for form clarity */
    border-radius: var(--border-radius-base);
    text-align: center;
    backdrop-filter: blur(0px); /* Blur only on the container, not the form itself */
}

/* * ----------------------------------------------------
 * FORM AND BUTTON STYLES (ENHANCED)
 * ----------------------------------------------------
 */

form input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: var(--border-radius-base);
    transition: border-color 0.2s;
}
form input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 5px rgba(103, 83, 212, 0.3);
}

/* Primary Button Styling (Using Purple Theme) */
form button,
form input[type="submit"] {
    width: 100%;
    padding: 12px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--border-radius-base);
    cursor: pointer;
    font-weight: 600;
    margin-top: 20px;
    transition: background 0.2s ease-in-out, transform 0.1s;
}

form button:hover,
form input[type="submit"]:hover {
    background: #513eab; /* Darker primary */
    transform: translateY(-1px);
}

.forgot-password,
.btn-link {
    display: block;
    text-align: right;
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--primary);
    text-decoration: none;
}

.forgot-password:hover,
.btn-link:hover {
    text-decoration: underline;
    color: #513eab;
}

.rules-btn {
    width: 100%;
    padding: 10px;
    background-color: var(--info);
    color: white;
    border: none;
    border-radius: var(--border-radius-base);
    cursor: pointer;
    margin: 10px 0;
}
.rules-btn:hover {
    background-color: #3b8bb5;
}


/* * ----------------------------------------------------
 * MOBILE RESPONSIVENESS (MAX-WIDTH: 992px)
 * Two-container load: Stacks elements vertically.
 * ----------------------------------------------------
 */
/* Prevent clipping and ensure vertical flow on mobile */
@media (max-width: 992px) {
  .container {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    width: 100%;
    padding: 0;
    /* Remove overflow to avoid cutting off logo/top lines when stacked */
    overflow: visible;
    backdrop-filter: none; /* reduce GPU-heavy effect on mobile */
    background-color: rgba(255, 255, 255, 0); /* softer backdrop for readability */
    border-radius: 10px;
  }

  .logo-section, .login-section {
    width: 100%;
    padding: 22px 18px; /* slightly tighter than desktop */
    box-shadow: none;   /* cleaner on mobile */
  }

  /* Ensure text isn't jammed at the top */
  .logo-section {
    margin-top: none;
    border-radius: 10px;
  }
}
    
    /* Info Panel (Logo Section) now takes full width, and is clearly the top section */
    .logo-section {
        width: 100%;
        flex: auto;
        padding: 30px 20px;
        /* Applying the primary color as a full-width header block on mobile */
        background: var(--primary);
        color: white;
        border-radius: 0;
        text-align: left;
    }

    .logo-section .welcome-text {
        color: var(--secondary); /* Highlight text with lime */
    }
    .logo-section .rule {
        color: #fff;
    }
    .logo-section p {
        color: #ddd;
    }

    /* Login Section (Form) appears after the Info Panel */
    .login-section {
        width: 100%;
        flex: auto;
        padding: 30px 20px;
        background: #fff;
        border-radius: 0;
    }

    /* Adjust the visitor counter for the mobile layout */
    .visitor-counter {
        margin-top: 20px;
        font-size: 0.9em;
    }


/* * ----------------------------------------------------
 * GENERAL RESPONSIVENESS (Forms/Tables)
 * These rules apply globally to improve form and table readability 
 * on smaller screens, regardless of login form state.
 * ----------------------------------------------------
 */

/* General form adjustments for small screens */
@media (max-width: 768px) {
    /* Adjust form group labels/inputs for stacking */
    .form-group.row .col-lg-4,
    .form-group.row .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: left;
        padding-left: 15px; 
        padding-right: 15px;
        margin-bottom: 5px; 
    }

    /* Ensure table responsiveness (using existing Bootstrap classes) */
    .table-responsive {
        border: 1px solid #eee;
        border-radius: var(--border-radius-base);
    }
    
    /* Buttons in table action columns or footers */
    .table-responsive .btn {
        display: block; 
        width: 100%;
        margin-bottom: 5px;
    }
}

/* Further refinements for very small mobile devices */
@media (max-width: 480px) {
    .logo {
        width: 100px;
    }
    h2, h3, h4 {
        font-size: 1.4em; /* Slightly smaller headings for readability */
    }
    .login-section {
        padding: 20px 15px;
    }
    form input, 
    form button,
    form input[type="submit"] {
        padding: 10px;
    }
}
/* Right panel (login) styling */
.login-section {
    flex: 1;
    padding: 40px 30px;
    background: rgba(255,255,255,0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Form inputs */
.login-section input[type="email"],
.login-section input[type="password"],
.login-section input[type="text"] {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border-radius: var(--border-radius-base);
    border: 1px solid #ccc;
    font-size: 1em;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 15px;
    border-radius: var(--border-radius-base);
    border: none;
    cursor: pointer;
    font-size: 1em;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-info { background: var(--info); color: #fff; }
.btn-link { background: none; border: none; color: var(--primary); text-decoration: underline; cursor: pointer; }

/* Responsive Layout */
@media (max-width: 992px) {
    .container {
        flex-direction: column;
        max-width: 95%;
    }
    .logo-section, .login-section {
        flex: none;
        width: 100%;
        padding: 20px;
    }
    .logo { width: 120px; }
}

/* Right panel (login) styling */
.login-section {
    flex: 1;
    padding: 40px 30px;
    background: rgba(255,255,255,0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Form inputs */
.login-section input[type="email"],
.login-section input[type="password"],
.login-section input[type="text"] {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border-radius: var(--border-radius-base);
    border: 1px solid #ccc;
    font-size: 1em;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 15px;
    border-radius: var(--border-radius-base);
    border: none;
    cursor: pointer;
    font-size: 1em;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-info { background: var(--info); color: #fff; }
.btn-link { background: none; border: none; color: var(--primary); text-decoration: underline; cursor: pointer; }

/* Responsive Layout */
@media (max-width: 992px) {
    .container {
        flex-direction: column;
        max-width: 95%;
        border-radius: 20px;
    }
    .logo-section, .login-section {
        flex: none;
        width: 100%;
        padding: 20px;
    }
    .logo { width: 120px; }
}

@media (max-width: 576px) {
    .welcome-text { 
        font-size: 1em; 
        text-align: center;
    }
    .login-section input, 
    .login-section button, 
    .login-section .btn {
        font-size: 0.9em;
        padding: 10px;
    }
    .logo {
        width: 100px;
        margin-bottom: 15px;
    }
    .visitor-counter {
        font-size: 0.9em;
        padding: 8px;
    }
    .rules-section {
        font-size: 0.85em;
        max-height: 200px;
    }
}

/* Extra small devices (portrait phones <400px) */
@media (max-width: 400px) {
    .container {
        width: 100%;
        margin: 0;
        border-radius: none;
        box-shadow: none;
    }
    .logo-section {
        margin-bottom: 10px;
        
    }
    .logo-section, .login-section {
        padding: 15px;
        border-radius: 15px;
    }
    .welcome-text { 
        font-size: 1em; 
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    .login-section h2 {
        font-size: 1.2em;
    }
    .login-section input {
        font-size: 0.85em;
        padding: 8px;
    }
    .btn {
        font-size: 0.85em;
        padding: 8px 12px;
    }
}