.cart-total2 {
      display: flex;
      /*+placement: 4px -106px;*/
      position: relative;
      left: 4px;
      top: -106px;
      width: 65px;
}

.custom-alert {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
      z-index: 100000;
}

.custom-alert-content {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      text-align: center;
      animation: slideIn 0.3s ease-out;
      z-index: 100001;
}

.custom-alert-title {
      font-size: 24px;
      margin-bottom: 10px;
}

.custom-alert-message {
      font-size: 18px;
      margin-bottom: 20px;
}

.custom-alert-button {
      background-color: #3085D6;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
}

@keyframes slideIn {
      from {
            transform: translateY(-50px);
            opacity: 0;
      }
      
      to {
            transform: translateY(0);
            opacity: 1;
      }
}

.burger-menu {
      display: none;
      flex-direction: column;
      cursor: pointer;
      width: 3%;
      background-color: #FFFFFF;
      text-align: center;
      height: 31px;
      padding-top: 9px;
      padding-left: 9px;
      position: absolute;
}

.bar {
      width: 25px;
      height: 3px;
      background-color: #3C3C3C;
      margin: 3px 0;
}

.menu {
      display: none;
      position: absolute;
      background-color: #E9E9E9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 12px 16px;
      z-index: 1;
}

.menu a {
      display: block;
      color: black;
      padding: 8px 0 8px 14px;
      text-decoration: none;
}

.menu a:hover {
      background-color: #ADADAD;
}

.yellow-background {
      color: #0000CD;
      font-weight: bold;
      font-size: 15px;
      text-align: left;
      margin-top: 0px;
      margin-left: 1%;
      width: 100%;
      overflow: auto;
}

.yellow-background2 {
      color: #0000CD;
      font-weight: bold;
      font-size: 21px;
      text-align: right;
}

.show-menu {
      display: block;
}

.overlay2 {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999999;
}

#overlay2 {
}

.content {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      width: 45%;
      max-width: 38%;
      text-align: center;
      height: 35%;
      left: 31%;
      position: absolute;
      top: 25%;
}

.btn {
      margin: 0 10px;
      padding: 10px 20px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      background-color: #007BFF;
      color: white;
      font-weight: bold;
      transition: background-color 0.3s;
}

.kotak span {
      user-select: none;
      font-size: ;
}

.gtix {
      font-size: 12px;
      background-color: #FF0606;
      padding-left: 5px;
      padding-right: 5px;
      padding-bottom: 4px;
      /*+border-radius: 8px;*/
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      -khtml-border-radius: 8px;
      border-radius: 8px;
      position: absolute;
      color: #FFFFFF;
      padding-top: 5px;
      /*+placement: 32% -82px;*/
      position: relative;
      left: 32%;
      top: -82px;
      border: 1px solid #FFFFFF;
}

.gti {
      text-align: center;
      font-size: 14px;
      padding-top: 0;
      /*+placement: 3px -29px;*/
      position: relative;
      left: 3px;
      top: -29px;
}

button#btn_no.btn {
      background-color: #F52C2C;
}

.btn:hover {
      background-color: #0056B3;
}

/* Animasi loading */
@keyframes spin {
      0% {
            transform: rotate(0deg);
      }
      
      100% {
            transform: rotate(360deg);
      }
}

#loading-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 99999999;
}

.spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      border: 5px solid #F3F3F3;
      border-top: 5px solid #3498DB;
      border-radius: 117%;
      width: 70px;
      height: 70px;
      animation: spin 1s linear infinite;
}

.amodal-content {
      background-color: #FEFEFE;
      margin: 15% auto 15% 21%;
      padding: 20px;
      border: 1px solid #888;
      width: 51%;
      font-size: 25px;
      color: #7A030F;
      height: 314px;
}

.aclose {
      color: #AAA;
      float: right;
      font-size: 28px;
      font-weight: bold;
}

.aclose:hover, .aclose:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
}

.aok {
      width: 117px;
      padding-right: 0;
      margin-right: 7px;
      background-color: #069F5C;
      margin-left: 7%;
      margin-top: 16px;
      color: #FFFFFF;
}

.acancel {
      background-color: #F31E29;
      width: 118px;
      margin-left: 17%;
      color: #FFFFFF;
}

.asubtotal {
      width: 20%;
      font-size: 23px;
      margin-left: 7%;
      color: #000000;
      position: absolute;
}

div.map_label {
      height: 42px;
      background-color: #F90C0C;
      font-size: 32px;
      position: absolute;
      color: #FFFFFF;
      z-index: 9999;
      padding-left: 10px;
      /*+box-shadow: 0 0 44px;*/
      -moz-box-shadow: 0 0 44px;
      -webkit-box-shadow: 0 0 44px;
      box-shadow: 0 0 44px;
      /*+border-radius: 5px;*/
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 5px;
      text-align: center;
}

div#appz {
      z-index: 1000000;
      position: absolute;
      background-color: #BDBDBD;
      padding: 20px;
      border-radius: 8px;
      width: 997px;
      margin-top: -16px;
}

div.pp-judul {
      position: absolute;
      width: 100%;
      text-align: center;
      font-size: 42px;
}

.pp-ok button {
      width: 98px;
      margin-top: 43px;
      background-color: ;
}

.pp-ok .pp-cancel {
      background-color: #F10000;
}

.pp-controls .pp-bawah {
      background-color: #5285DF;
}

.modal {
      display: flex;
      /* Use flexbox for centering */
      justify-content: center;
      /* Center horizontally */
      align-items: center;
      /* Center vertically */
      position: fixed;
      /* Fixed position to cover the whole screen */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      /* Semi-transparent background */
      z-index: 20000;
      /* High z-index to overlay other elements */
}

.mm-popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #B1B1B1;
      width: 800px;
      height: 500px;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      z-index: 18661;
}

.mm-header {
      padding: 0px 20px;
      background: #F8F9FA;
      border-bottom: 1px solid #EAEAEA;
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.mm-title {
      font-size: 18px;
      font-weight: 600;
      color: #2C3E50;
      margin: 0;
}

.mm-close-btn {
      background: none;
      border: none;
      font-size: 48px;
      cursor: pointer;
      padding: 0px 8px;
      border-radius: 4px;
      transition: all 0.2s;
      color: #000000;
}

.mm-close-btn:hover {
      background: #EEE;
      color: #333;
}

.mm-content {
      padding: 22px;
      flex-grow: 1;
      overflow-y: auto;
      background-color: ;
}

.mm-button-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: repeat(4, 1fr);
      gap: 12px;
      height: 384px;
}

.mm-btn {
      padding: 10px;
      border: 1px solid #E0E0E0;
      background: white;
      color: #333;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      height: 68px;
}

.mm-btn:hover {
      background: #F8F9FA;
      border-color: #D0D0D0;
      transform: translateY(-1px);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

.mm-main-btn {
      background: #2196F3;
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 15px;
      font-weight: 500;
      transition: all 0.2s;
      box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);
}

.mm-main-btn:hover {
      background: #1976D2;
      box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
      transform: translateY(-1px);
}

.mm-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(2px);
      display: flex;
      justify-content: center;
      align-items: center;
      animation: mm-fade-in 0.2s ease-out;
      z-index: 100;
}

x.mm-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(2px);
      display: flex;
      justify-content: center;
      align-items: center;
      animation: mm-fade-in 0.2s ease-out;
      z-index: 100000;
}

@keyframes mm-fade-in {
      from {
            opacity: 0;
      }
      
      to {
            opacity: 1;
      }
}

.mm-popup {
      animation: mm-slide-in 0.2s ease-out;
      width: 70%;
      height: 586px;
}

@keyframes mm-slide-in {
      from {
            transform: translate(-50%, -48%);
            opacity: 0;
      }
      
      to {
            transform: translate(-50%, -50%);
            opacity: 1;
      }
}

.modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
}

/* Modal Container */
.bill-container {
      background: white;
      padding: 0px 20px 30px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      text-align: center;
      max-width: 463px;
      width: 144%;
      height: 86%;
      color: ;
      font-size: 0px;
}

.bill-content {
      white-space: pre;
      font-family: 'Courier New', monospace;
      font-size: 15px;
      line-height: 1.2;
      background-color: #EDEDED;
      padding: 16px 20px 20px;
      border: 1px solid #DDD;
      border-radius: 12px;
      margin-bottom: 11px;
      color: #223B98;
      /*+box-shadow: 4px 4px 19px #B5B5B5;*/
      -moz-box-shadow: 4px 4px 19px #B5B5B5;
      -webkit-box-shadow: 4px 4px 19px #B5B5B5;
      box-shadow: 4px 4px 19px #B5B5B5;
      text-align: left;
      width: 424px;
      border-bottom: 1px solid black;
      height: 74%;
      overflow: scroll;
}

h1 {
      text-align: center;
      color: #333;
      margin-bottom: 20px;
      font-size: 24px;
}

.modal-btn {
      display: inline-block;
      padding: 12px 20px 10px;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
}

.modal-btn:hover {
      background-color: #0056B3;
}

.text-uppercase {
      text-transform: uppercase;
      /*+placement: ;*/
      position: relative;
      left: 0;
      top: 0;
}

.check-icon {
      display: inline-block;
      color: #008CFB;
      /* Warna biru, bisa disesuaikan */
      margin-left: 35px;
      font-weight: bolder;
}

.blue-background {
      color: #1900F5;
      width: 266px;
}

.red-background {
      color: #FF0A0A;
      font-size: 16px;
      width: 68%;
      font-style: normal;
      font-weight: bold;
}

.black-background {
      color: #000000;
      width: 45%;
}

.p_modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
}

.p_modal-container {
      background-color: white;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      min-width: 300px;
      text-align: center;
}

.p_modal-icon {
      font-size: 4em;
      margin-bottom: 10px;
      color: #000;
}

.p_modal-icon.success {
      color: green;
}

.p_modal-icon.error {
      color: red;
}

.p_modal-icon.warning {
      color: orange;
}

.p_modal-button {
      padding: 10px 20px;
      border: none;
      color: white;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
      border-radius: 5px;
      /*+placement: ;*/
      position: relative;
      left: 0;
      top: 0;
}

.p_modal-button.p_confirm {
      background-color: green;
      margin-right: 5px;
}

.p_modal-button.p_cancel {
      background-color: red;
}

.p_btn {
      padding: 10px;
      margin: 5px;
      border: none;
      border-radius: 5px;
      color: white;
      cursor: pointer;
}

.p_btn.p_btn-primary {
      background-color: blue;
}

.p_btn.p_btn-success {
      background-color: green;
}

.p_btn.p_btn-danger {
      background-color: red;
}

.p_btn.p_btn-warning {
      background-color: orange;
      color: black;
}

.p_btn.p_btn-info {
      background-color: lightblue;
      color: black;
}

.confirm-modal-container {
      width: 95%;
      padding: 1.5rem 0rem 0.3rem;
      min-width: 193px;
      border-radius: 16px;
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
      /* Efek Kaca Buram (Frosted Glass) */
      max-width: 423px;
      background-color: #FFFFFF;
}

.confirm-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 24px;
      background-color: #4A55A2;
      /* Biru Gelap */
      color: white;
}

.confirm-header h3 {
      margin: 0;
      font-size: 1.1rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
}

.confirm-close-btn {
      background: none;
      border: none;
      color: white;
      font-size: 1.8rem;
      cursor: pointer;
      line-height: 1;
      padding: 0;
}

.confirm-body {
      padding: 0px 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      /* Abu-abu terang */
      width: ;
}

.confirm-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 1rem;
}

.confirm-label {
      color: #555;
      padding-top: 11px;
}

.confirm-value {
      font-weight: 600;
      color: #333;
}

.confirm-value.highlight {
      color: #28A745;
      /* Hijau */
      font-size: 1.2rem;
}

.confirm-info {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      background-color: #E9F7FF;
      /* Biru muda */
      border-radius: 8px;
      border: 1px solid #BDE0FE;
      color: #0056B3;
      font-size: 0.9rem;
      margin-top: 16px;
}

.confirm-info i {
      font-size: 1.2rem;
}

.confirm-actions {
      display: flex;
      gap: 12px;
      padding: 16px 24px;
      background-color: #F5F7F8;
}

.confirm-btn {
      flex: 1;
      padding: 12px;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
}

.confirm-btn.btn-primary {
      background-color: #28A745;
      /* Hijau */
      color: white;
}

.confirm-btn.btn-primary:hover {
      background-color: #218838;
}

.confirm-btn.btn-secondary {
      background-color: #E9ECEF;
      color: #495057;
      border: 1px solid #CED4DA;
}

.confirm-btn.btn-secondary:hover {
      background-color: #D3D9DF;
}

.confirm-footer {
      padding: 12px 24px;
      text-align: center;
      font-size: 0.85rem;
      color: #888;
      background-color: #FFFFFF;
      border-top: 1px solid #E9ECEF;
}

.acustom-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      /* Tiga baris ini adalah kunci untuk membuatnya ke tengah */
      display: flex;
      justify-content: center;
      /* Tengah secara horizontal */
      align-items: center;
      /* Tengah secara vertikal */
      z-index: 10000;
}

.toast-notification {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 12px 20px;
      border-radius: 8px;
      color: white;
      font-size: 1rem;
      font-weight: 500;
      z-index: 9999;
      opacity: 1;
      transition: opacity 0.5s ease-in-out;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.toast-notification.success {
      background-color: #4CAF50;
      /* Hijau */
}

.toast-notification.error {
      background-color: #F44336;
      /* Merah */
}

/* +++ CSS DITAMBAHKAN DI SINI +++ */
.sold-out-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.6);
      /* Latar belakang putih transparan */
      /* Efek blur untuk browser modern */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
}

.sold-out-overlay img {
      max-width: 90%;
      max-height: 90%;
      object-fit: contain;
}

/* +++ AKHIR DARI CSS TAMBAHAN +++ */
.kiosk-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      z-index: 50000;
      display: flex;
      justify-content: center;
      align-items: center;
}

.kiosk-modal-container {
      background-color: #FFF;
      border-radius: 8px;
      width: 90%;
      max-width: 800px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      overflow: hidden;
}

.kiosk-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 20px;
      background-color: #E8E5E5;
      border-bottom: 0px solid #DDD;
}

.kiosk-modal-header h3 {
      margin: 0;
      font-size: 1.2em;
}

.kiosk-close-btn {
      background: none;
      border: none;
      font-size: 1.8em;
      cursor: pointer;
      width: 43px;
}

.kiosk-modal-body {
      padding: 20px;
}

.kiosk-search-bar input {
      width: 98%;
      padding: 10px;
      font-size: 1em;
      margin-bottom: 15px;
      border: 1px solid #BEBEBE;
      border-radius: 4px;
}

.kiosk-table-container {
      max-height: 60vh;
      overflow-y: auto;
}

.kiosk-table-container table {
      width: 100%;
      border-collapse: collapse;
}

.kiosk-table-container th, .kiosk-table-container td {
      padding: 12px;
      border-bottom: 1px solid #EEE;
      text-align: left;
}

.kiosk-table-container tbody tr {
      cursor: pointer;
}

.kiosk-table-container tbody tr:hover {
      background-color: #F0F8FF;
}

.kiosk-loading {
      text-align: center;
      padding: 40px;
}
