/* Reset default margins */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
}

.split-container {
  display: flex;
  height: 100%;
}

.left-panel {
  flex: 9; /* Takes up 80% */
  background-color: #3498db; /* Blue */
  color: white;
  padding: 9px;
}

.right-panel {
  flex: 1; /* Takes up 20% */
  background-color: #2ecc71; /* Green */
  color: white;
  padding: 5px;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 1rem;
}

    /* Modal styles */
    .modala {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: black;
    }
    .modala-content {
      position: relative;
      top: 5%;
      margin: auto;
      padding: 1px;
      background-color:black;

      text-align: center;
    }
    .close {
      position: absolute;
      top: 5px;
      right: 10px;
      font-size: 20px;
      cursor: pointer;
    }
	
body {
    background-image: url('menu/bg.JPG');
    background-size: cover; /* Makes the background cover the entire page */
    background-position: center; /* Centers the image */
	
}

	        .containerx {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 5px;
			margin-left:10px;
        }
        .column1 {
            border: solid 0px black;
			border-radius:5px;
            padding: 10px;
			margin-bottom: 1px;
			min-height: 215px;
			margin-left:5px;
			color: red;
        }
        .column3 {
           
            padding: 10px;
			height: auto;	
			margin-bottom: 5px;
        }
        .column2 {
            border: solid 0px black;
			border-radius:5px;
            padding: 5px;
			height: auto;	
			margin-bottom: 2px;
			margin-top: 5px;
        }
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}


/* Modal Content */
.modal-content {
	background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%); margin: 1% auto; /* Centered */
    padding: 2px;
    border: 1px solid #888;
    width: 35%; /* Could be more or less depending on your needs */
	max-width:720PX;
	margin-bottom: 20px;
	text-align:center;
	margin-top:100px;
	
}


/* The Close Button */
.close-btn {
    color: black;
    float: right;
    font-size: 12px;
    font-weight: bold;


    display: inline-block; /* Makes the button inline but still block-level for styling */
    text-align: center; /* Centers text inside the button */
    margin-left: auto; /* Pushes the button to the right */
    margin-right: 40px; /* Ensures it stays centered */
}

}

.close-btn:hover,
.close-btn:focus {
    color: blue;
    text-decoration: none;
    cursor: pointer;
}

    .pos-header h1 {
        color: yellow;  /* Set text color to red */
		background: red;
    }
	
	        #daily-sales {
            text-align: center;
			color:#2ecc71;
        }
        .product {
            width: 154px;
            height: 150px;
            text-align: center;
            position: relative;
            margin: 3px;
            cursor: pointer;
			border-radius:5px;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			
			
		}
		.product:hover {
			transform: scale(1.08); /* Scales the product by 10% */
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow */
			
		}
        .logo {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.3s;
			border-radius:5px;
			border: 1px solid white;
        }
        .sold-out-message {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 0, 0, 0.7);
            color: white;
            font-size: 20px;
            padding: 10px;
            border-radius: 5px;
        }

        .sold-out-visible {
            display: block; /* Show the "SOLD OUT" message */
        }

        .product.disabled {
            opacity: 0.5;
            pointer-events: none;
        }
		
		
		/* "SOLD OUT" overlay */
        .sold-out1 {
            position: absolute;
            top: 0;
            left: 0;
            color:yellow;
            font-size: 15px;
            font-weight: bold;
            text-align: center;
            border-radius: 5px;
            width: 100%;
            height: 100%;
			font-family: arial, sans-serif;
			margin-top:5px;
			text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
        }

    /* CSS for blinking text */
    @keyframes blink {
      0% { opacity: 1; }
      50% { opacity: 0; }
      100% { opacity: 1; }
    }

    /* Button style */
    .blinking-button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: black;
      border: 2px solid black; 
      border-radius: 5px;
      cursor: pointer;
      animation: blink 1s infinite;
    }

    /* Optional hover effect */
    .blinking-button:hover {
      background-color: #45a049;
    }
	
	/* Scale on hover */
button {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

button:hover {
    
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	color: blue;
}
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
}



/* Heading */
h3 {
    text-align: center;
    color: #333;
    font-size: 1.5rem;
}

h6 {
    text-align: center;
    color: #888;
    font-size: 0.9rem;
    margin-top: -10px;
}

/* Form input */
.form-group {
    margin-bottom: 20px;
}

input[type="number"] {
    width: 200px;
	height: 33px;
    padding: 1px;
    font-size: 20px;
    border: 1px solid #ccc;
    border-radius: 1px;
    outline: none;
}

input[type="number"]:focus {
    border-color: #007bff;
}

button img {
    margin-right: 10px;
    vertical-align: middle;
}

.hidden {
    display: none;
}

.text-center {
    text-align: center;
}

#qrcode {
    text-align: center;
    margin-top: 20px;
}

/* QR Code Button */
#generate_qr {
    width: 100%;
    padding: 12px;
    background: linear-gradient(0deg, rgba(7,232,250,1) 0%, rgba(246,15,253,1) 85%, rgba(0,22,255,1) 100%);
    color: white;
    border-radius: 30px;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
}

#generate_qr:hover {
    background: linear-gradient(0deg, rgba(7,232,250,1) 0%, rgba(246,15,253,1) 100%, rgba(0,22,255,1) 100%);
    transform: scale(1.05);
}


.counter {
  background-color: gray;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 260px;
  min-height: 50px;
  margin-bottom: 10px;
}

.counterpayment {
  background-color: blue;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 260px;
  margin-bottom: 10px;
  height: 80px;
}
.countercart {
  background-color: white;                  /*White background for clarity */
  padding: 5px;                            /* Inner spacing */
  border-radius: 5px;                      /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);/* Subtle drop shadow */
  width: 260px;                            /* Fixed width */
  height: 500px;                       /* Minimum height */
  margin-bottom: 10px;                     /* Space below the element */
  color: red;                              /* Text color */
  overflow-y: auto;                        /* Scrollable vertically */
}



  .scroll-box {
  width: 100%;
  max-width: 100%;
  height: 97vh;
  overflow: auto;
  border: none;
        }

/* Add a visual "badge" to items added multiple times */
h2 {
  background-color: red;
  text-align: center;
}

.countercart {
  scrollbar-width: thin;                   /* For Firefox */
  scrollbar-color: #ccc transparent;       /* Scrollbar color */

  /* Optional - For WebKit browsers (Chrome, Edge, Safari) */
}
.countercart::-webkit-scrollbar {
  width: 6px;
}
.countercart::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}
.countercart::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

@media (max-width: 600px) {
  .countercart {
    width: 90%;
    height: auto;
    max-height: 300px;
  }
}