/* ===== IDLE OVERLAY ===== */
#idleOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* DARKER BLUR */
    backdrop-filter: blur(12px);
    background: rgba(0, 0, 0, 0.75);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 9999;
    transition: 0.4s ease;
}

.startText {
    font-size: 48px;
    font-weight: bold;
    color: white;
    text-align: center;
    animation: blink 1.2s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ===== BACKGROUND ===== */
body {
    margin: 0;
    font-family: "Segoe UI", sans-serif;
    background: radial-gradient(circle at top, #3b82f6, #0f172a);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* ===== CONTAINER ===== */
.container {
    width: 90%;
    max-width: 800px; /* INCREASED from 600px to give the big text room to stretch */
    padding: 50px; /* Added a bit more inner padding for a premium feel */
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(25px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    text-align: center;
    /* The height adjusts automatically based on the content inside! */
}

/* ===== LOGO ===== */
.logo {
    width: 200px; /* Slightly larger to balance the new big text */
    margin-bottom: 15px;
    cursor: pointer;
    filter: drop-shadow(0px 10px 10px rgba(0,0,0,0.3)); /* Adds a cool 3D shadow to the image */
}

/* ===== TEXT ===== */
.company {
    font-size: 42px; /* MASSIVE text (up from 28px) */
    font-weight: 900; /* Extra thick */
    line-height: 1.2; /* Keeps the spacing tight if it drops to a second line */
    letter-spacing: 1px; /* Spreads the letters out slightly for a cleaner look */
    margin-bottom: 30px;
    color: #ffffff;
    text-shadow: 0px 6px 15px rgba(0, 0, 0, 0.6); /* Deep shadow to make it pop off the background */
}

h1 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #cbd5e1; /* A slightly softer silver/white so it doesn't fight the main company name */
}

/* ===== UPGRADED MASSIVE BUTTONS ===== */
.btn {
    display: block;
    width: 100%;
    padding: 30px 20px; /* Massive touch target */
    font-size: 32px; /* Huge text */
    font-weight: 900; /* Extra bold */
    border: none;
    border-radius: 20px; /* Modern, rounded edges */
    margin-top: 25px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Deep 3D shadow */
    transition: all 0.1s ease-in-out; /* Smooth animation */
}

/* The "Tap" Animation */
.btn:active {
    transform: scale(0.97) translateY(6px); /* Shrinks and pushes down */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Shadow gets smaller when pressed */
}

/* Colors and Gradients */
.reg {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8); /* Vibrant blue gradient */
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* Makes white text pop */
    border: 2px solid #60a5fa; /* Light blue highlight border */
}

.prio {
    background: linear-gradient(135deg, #fbbf24, #d97706); /* Rich gold gradient */
    color: #1e3a8a; /* Dark navy text for high contrast */
    border: 2px solid #fcd34d; /* Bright yellow highlight border */
}

.connect {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    font-size: 18px; /* Slightly smaller for admin buttons */
    padding: 15px;
}

/* ===== ADMIN PANEL ===== */
#adminPanel {
    display: none;
    margin-top: 20px;
}

/* ===== STATUS ===== */
.status {
    margin-top: 15px;
    font-size: 14px;
    opacity: 0.7;
}

/* =========================================
   PRINT SPECIFIC STYLES (48mm width / 58mm Roll)
========================================= */

/* 🔥 FOOLPROOF FIX: Hide the receipt on the screen globally by default */
#printTicketArea { 
    display: none !important; 
}

@media print {
    /* NUCLEAR RESET: Strip all margins and padding */
    * {
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Hide the main Kiosk UI from the printer */
    body > *:not(#printTicketArea) { 
        display: none !important; 
    }
    
    /* Tell Chrome this is a continuous 58mm roll */
    @page {
        size: 58mm auto; 
        margin: 0mm !important;
    }

    html, body {
        background: white;
        width: 58mm;
    }

    /* The Receipt Container */
    #printTicketArea {
        display: block !important; 
        width: 58mm; 
        position: absolute; 
        top: 0; 
        left: 0;
        font-family: 'Courier New', Courier, monospace, sans-serif;
        color: black;
        text-align: center;
        line-height: 1.2; 
    }

    /* Logo perfectly snapped to the top */
    .print-logo {
        width: 60px; 
        height: auto;
        display: block;
        margin: 0 auto 5px auto !important; 
        filter: grayscale(100%) contrast(150%); 
    }

    /* Typography */
    .p-bold { font-weight: bold; font-size: 13px; }
    .p-normal { font-size: 12px; margin-bottom: 3px !important; } /* Please Wait called */
    .p-normal2 { font-size: 20px; margin-bottom: 3px !important; } /* Waiting: */
    .p-large { font-size: 25px; font-weight: bold; margin-top: 5px !important; }
    
    /* The main Queue Number */
    .p-huge { font-size: 80px; font-weight: bold; margin: 5px 0 !important; line-height: 1; }
    
    /* Horizontal Lines */
    .p-divider { border-top: 1px dashed black; margin: 6px 0 !important; }