/* Global Styles */  
* {  
   box-sizing: border-box;  
   margin: 0;  
   padding: 0;  
}  
  
body {  
   font-family: Arial, sans-serif;  
   line-height: 1.6;  
   color: #333;  
   background-color: #f9f9f9;  
}  
  
.container {  
   max-width: 1200px;  
   margin: 40px auto;  
   padding: 20px;  
   background-color: #fff;  
   border: 1px solid #ddd;  
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
   border-radius: 10px;  
   display: flex;  
   flex-wrap: wrap;  
   justify-content: space-between;  
}  
  
.slider-container {  
   padding: 1px;  
   position: relative;  
   width: 100%;  
}  
  
.button-group {  
   display: flex;  
   flex-wrap: nowrap;  
   justify-content: flex-start;  
   margin-bottom: 20px;  
   overflow-x: auto;  
   padding: 10px;  
}  
  
button {  
   margin: 10px;  
   padding: 15px 30px;  
   border: none;  
   border-radius: 20px;  
   background-color: #007bff;  
   color: #fff;  
   cursor: pointer;  
   font-size: 16px;  
   transition: background-color 0.2s ease-in-out;  
}  
  
button:hover {  
   background-color: #0056b3;  
}  
  
.slider-controls {  
   position: absolute;  
   bottom: 0;  
   right: 0;  
   display: flex;  
   justify-content: space-between;  
   width: 100%;  
   padding: 10px;  
   background-color: #fff;  
   border-top: 5px solid #002247;  
}  
  
.slider-controls i {  
   font-size: 24px;  
   cursor: pointer;  
}  
  
#colorButtonsContainer {  
   display: flex;  
   flex-wrap: nowrap;  
   justify-content: flex-start;  
}  
  
#colorButtonsContainer button {  
   margin: 10px;  
   padding: 15px 30px;  
   border: none;  
   border-radius: 20px;  
   background-color: #007bff;  
   color: #fff;  
   cursor: pointer;  
   font-size: 16px;  
   transition: background-color 0.2s ease-in-out;  
}  
  
#colorButtonsContainer button:hover {  
   background-color: #0056b3;  
}  
  
.input-table {  
   width: 60%;  
   padding: 20px;  
}  
  
.a4-table {  
   width: 40%;  
   padding: 20px;  
   border: 5px solid #007bff;  
}  
  
.a4-page {  
   width: 100%;  
   height: 200px;  
   margin: 10px;  
   border: 1px solid #ddd;  
   padding: 10px;  
   overflow: auto;  
}  
  
.cover-box {  
   width: 100%;  
   height: calc(100% / 3);  
   margin: 10px;  
   padding: 10px;  
   overflow: hidden;  
   box-sizing: border-box;  
}  
  
.cover-box img {  
   width: 100%;  
   height: auto;  
   object-fit: contain;  
}  
  
/* Print Styles */  
@media print {  
   @page {  
      size: A4;  
      margin: 0;  
   }  
   .container {  
      width: 100%;  
      margin: 0;  
      padding: 0;  
      border: none;  
      box-shadow: none;  
   }  
   .button-group {  
      display: none;  
   }  
   #colorSection, #quantitySection, #orderList, #generateBtn, #printBtn {  
      display: none;  
   }  
   #pagesContainer {  
      width: 100%;  
      height: 100%;  
      margin: 0;  
      padding: 0;  
   }  
   .a4-page {  
      width: 210mm;  
      height: 297mm;  
      margin: 0;  
      border: none;  
   }  
   .cover-box {  
      width: 100%;  
      height: calc(100% / 3);  
      margin: 0;  
      padding: 0;  
      overflow: hidden;  
      box-sizing: border-box;  
   }  
   .cover-box img {  
      width: 100%;  
      height: auto;  
      object-fit: contain;  
      transform: scaleX(-1);  
      transform-origin: 50% 50%;  
   }  
}  
  
/* Responsive Design */  
@media (max-width: 768px) {  
   .container {  
      max-width: 90%;  
      margin: 20px auto;  
   }  
   .button-group {  
      flex-wrap: wrap;  
   }  
}  
  
@media (max-width: 480px) {  
   .container {  
      max-width: 100%;  
      margin: 10px auto;  
   }  
   .button-group {  
      flex-wrap: wrap;  
   }  
   button {  
      padding: 10px 20px;  
   }  
}