/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
    scroll-behavior: smooth
}

body{
    background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
    color:#fff;
    padding:20px;
    user-select: none;
}



/* HEADER MAIN */
.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
    margin-bottom:20px;

    background:rgba(0,0,0,0.35);
    backdrop-filter:blur(12px);
    border-radius:14px;

    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 8px 30px rgba(0,0,0,0.3);
}

/* LEFT */
.header-left{
    display:flex;
    flex-direction:column;
}

.logo{
    font-size:22px;
    font-weight:bold;
    color:#ff7800;
}

.tagline{
    font-size:12px;
    opacity:0.7;
}

/* CENTER SEARCH */
.header-center{
    flex:1;
    display:flex;
    justify-content:center;
}

.header-center input{
    width:65%;
    max-width:420px;
    padding:10px;
    border-radius:25px;
    border:none;
    outline:none;
    background:rgba(255,255,255,0.9);
    /* color:black; */
}


/* RIGHT SIDE */
.header-right{
    display:flex;
    align-items:center;
    gap:15px;
}

/* INFO */
.header-info{
    display:flex;
    flex-direction:column;
    font-size:13px;
    text-align:right;
}

/* THEME BUTTON */
#themeToggle{
    padding:8px 14px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:16px;

    background:linear-gradient(45deg,#ff9800,#ff5722);
    color:#fff;

    transition:0.3s;
}

#themeToggle:hover{
    transform:scale(1.1);
}
/* HEADING */
h1{
    text-align:center;
    margin-bottom:20px;
    font-size:30px;
}

/* MAIN CONTAINER */
.container{
    display:flex;
    gap:20px;
    align-items:flex-start;
    flex-wrap:wrap;
}

/* LEFT PANEL */
.left{
    flex:1;
    min-width:320px;
    max-height:80vh;
    overflow-y:auto;
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(10px);
    padding:20px;
    border-radius:15px;
    box-shadow:0 8px 25px rgba(0,0,0,0.3);
    animation:fadeIn 0.8s ease;
}

.left h2{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* INPUT */
input{
    width:100%;
    padding:10px;
    margin:8px 0;
    border-radius:8px;
    border:none;
    outline:none;
    background:#f1f1f1;
}

/* BUTTON */
button{
    width:100%;
    padding:10px;
    margin-top:10px;
    border:none;
    border-radius:8px;
    background:linear-gradient(45deg,#ff9800,#ff5722);
    /* background: transparent; */
    color:#fff;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
}

button:hover{
    transform:scale(1.04);
    box-shadow:0 5px 15px rgba(0,0,0,0.3);
}

/* PRODUCTS GRID */
.products{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:15px;
    margin-top:10px;
}

/* PRODUCT CARD */
.product{
    background:#fff;
    color:#ff7800;
    padding:12px;
    border-radius:12px;
    text-align:center;
    cursor:pointer;
    transition:0.3s;
        font-weight: bold;

}

.product:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 20px rgba(0,0,0,0.3);
  

    

}

/* IMAGE FIX (NO CUT) */
.product img{
    width:100%;
    height:120px;
    object-fit:contain;
    background:#fff;
    padding:5px;
}

/* PRODUCT TEXT */
.product p{
    margin:5px 0;
    font-size:14px;
      color:blue;
      font-weight: normal;
      font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    
    
}


/* BILL PANEL */
.bill{
    flex:0.9;
    min-width:350px;
    max-height:80vh;
    overflow-y:auto;
    background:#fff;
    color:#000;
    padding:20px;
    border-radius:15px;
    box-shadow:0 8px 25px rgba(0,0,0,0.3);
    animation:slideUp 0.8s ease;
}

/* SHOP HEADER */
.shop-header{
    text-align:center;
}


.shop-header img{
    border-radius:50%;
}

/* TABLE */
table{
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
}

table th{
    background:#f5f5f5;
}

table th, table td{
    padding:8px;
    border-bottom:1px solid #ddd;
    text-align:center;
    font-size:13px;
}

/* TOTAL */
h3{
    margin-top:10px;
    color:#ff5722;
}

/* THANKS */
.thanks{
    text-align:center;
    margin-top:10px;
    font-weight:bold;
    color:green;
}

/* BUTTONS */
.buttons{
    margin-top:20px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.buttons button{
    flex:1;
}

/* SCROLLBAR */
::-webkit-scrollbar{
    width:6px;
}
::-webkit-scrollbar-thumb{
    background:#ff9800;
    border-radius:10px;
}

/* DISABLED PRODUCTS */
.products.disabled{
    pointer-events:none;
    opacity:0.4;
    filter:blur(3px);
}

.products.active{
    pointer-events:auto;
    opacity:1;
    filter:blur(0);
}

/* ANIMATIONS */
@keyframes fadeIn{
    from{opacity:0; transform:translateY(20px);}
    to{opacity:1; transform:translateY(0);}
}

@keyframes slideUp{
    from{opacity:0; transform:translateY(40px);}
    to{opacity:1; transform:translateY(0);}
}

/* RESPONSIVE */
@media(max-width:768px){

    .container{
        flex-direction:column;

    }

    .bill{
        max-height:none;
        margin-right: 2rem;

    }

    .left{
        max-height:none;
         margin-right: 1.3rem;
                

    }
  
    .header-center #searchHeader{
        display: none;
    }
        .header-right #themeToggle{
            font-size: 10px;
        }
    .header-left .logo{
        font-size: 10px;
    }

    .buttons{
        flex-direction:column;
        padding-left: 2rem;
    }
   
}


@media print {
    body * {
        visibility: hidden !important;
    }

    #bill, #bill * {
        visibility: visible !important;
    }

    /* Center the bill and increase width */
    #bill {
        position: absolute !important;
        top: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 400px !important;       /* Increase from 300px to 400px */
        max-height: none !important;
        overflow: visible !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 15px !important;      /* thoda bada padding */
        font-family: 'Segoe UI', sans-serif !important;
        font-size: 13px !important;    /* thoda bada font */
        line-height: 1.3 !important;
        color: #000 !important;
    }

    /* Compact shop header */
    #bill .shop-header {
        text-align: center !important;
        margin-bottom: 5px !important;
    }

    #bill .shop-header img {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 5px !important;
    }

    #bill .shop-header h2 {
        font-size: 16px !important;
        margin: 2px 0 !important;
    }

    #bill .shop-header p {
        font-size: 12px !important;
        margin: 1px 0 !important;
    }

    #bill hr {
        margin: 3px 0 !important;
        border: 0.5px solid #ccc !important;
    }

    #bill > div {
        margin: 3px 0 !important;
        font-size: 12px !important;
    }

    #bill table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin: 3px 0 !important;
        font-size: 12px !important;
    }

    #bill table th, #bill table td {
        border: 0.5px solid #ddd !important;
        padding: 4px 6px !important;
        text-align: center !important;
    }

    #bill table th {
        background: #f5f5f5 !important;
        font-weight: bold !important;
    }

    #bill h3 {
        font-size: 14px !important;
        color: #ff5722 !important;
        margin: 3px 0 !important;
    }

    #bill .thanks, #bill p {
        font-size: 12px !important;
        margin: 3px 0 !important;
        text-align: center !important;
    }

    html, body {
        height: auto !important;
        overflow: hidden !important;
    }
}
/* LIGHT MODE */
.light-mode{
    background:#f5f5f5;
    color:#000;
}
.light-mode *{
    font-family: cursive;
}

.light-mode .left,
.light-mode .header{
    background:#ffffff;
    color:#000;
}

.light-mode .product{
    background:#fafafa;
}

.light-mode .bill{
    background:#ffffff;
}

.light-mode .footer-box h4{
    color:green;
     font-family:cursive;
}
.light-mode .footer-box h3{
    color:green;
    font-family:cursive;
}
.light-mode .footer-box #para{
    color:rgb(70, 4, 184);
    
}
.light-mode .footer-box a:hover{
    color:#ff7800;
}
.light-mode .footer-box p:hover span{
    color:green;
}
.light-mode .footer-box p span{
    color:#ff7800;
}
.light-mode .footer-bottom  span{
    color:green;
        font-size: 1.1rem;
        font-weight: bold;

}
.light-mode .footer-box #link{
    color:blue;
}
.light-mode .footer-box #git{
    color:black;
}
.light-mode .footer-box #insta{
    color:red;
    font-weight: bolder;
}
.light-mode .footer{
    border:none;
    outline: none;
    box-shadow: none;
    background: white;
}


.light-mode .footer-box a{
    color:black;
    
}

/* footer  */

.footer{
    margin-top:40px;
    background:rgba(0,0,0,0.3);
    padding:30px 20px;
    border-radius:12px;
    backdrop-filter:blur(10px);
}

.footer-container{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
}

.footer-box{
    flex:1;
    min-width:200px;
}

.footer-box h3, .footer-box h4{
    margin-bottom:10px;
    color:#ff7800;
}
.footer-box #link{
    color:white;
}

.footer-box #git{
    color:rgb(9, 148, 247);
}
.footer-box #insta{
    color:red;
    font-weight: bold;
}
.footer-box p{
    margin:5px 0;
    font-size:14px;
    cursor:pointer;
    transition: .4s;
    /* color:wheat; */

}
    .footer-box #para{
        color:white;
        font-size: 12px;
        
    }


.footer-box  span{
    color:#ff7800;
    font-weight:bold;
}

.footer-box  p:hover span{
    color:white;
    font-weight:bold;
}

.footer-box  p:hover{
    color:#ff7800;
    padding-left: 1.5rem;
    transition: .4s;
    font-weight: bold;
}
.footer-box p a{
    color:white;
    text-decoration: none;
}
.footer-box p a:hover{
    color:#ff7800;
}

.footer-bottom{
    text-align:center;
    margin-top:20px;
    font-size:14px;
    border-top:1px solid rgba(255,255,255,0.2);
    padding-top:10px;
}
.footer-bottom span{
    color:#ff7800;
    font-size: 1.1rem;
}
/* res footer  */
@media(max-width:768px){
    .footer-container{
        flex-direction:column;
        text-align:center;
    }
}

/* APPLE STYLE HEADER */
.header{
    position:sticky;
    top:0;
    z-index:1000;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 20px;
    margin-bottom:20px;

    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border-radius:12px;
    border:1px solid rgba(255,255,255,0.15);
    box-shadow:0 8px 25px rgba(0,0,0,0.3);
}

/* LOGO */
.logo{
    font-size:20px;
    font-weight:bold;
    letter-spacing:1px;
}

/* RIGHT SIDE */
.header-right{
    display:flex;
    align-items:center;
    gap:15px;
}

/* SEARCH */
.header input{
    padding:8px 12px;
    border-radius:8px;
    border:none;
    outline:none;
}

/* CLOCK BOX */
.clock-box{
    text-align:center;
}

/* DIGITAL CLOCK */
.clock{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:16px;
    font-weight:bold;
    color:#ff7800;
    /* text-shadow:0 0 5px #00ffcc; */
}

/* BLINKING COLON */
.colon{
    animation:blink 1s infinite;
}

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

/* DATE */
.date{
    font-size:12px;
    opacity:0.8;
}

/* THEME BUTTON */
.theme-btn{
    padding:6px 10px;
    border-radius:6px;
    cursor:pointer;
}