@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;450&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Poppins, sans-serif;
}
a{
  text-decoration: none;
}
*{-webkit-tap-highlight-color:transparent}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0CB37D;
  color: white;
  padding: 15px 20px;
  
}

.header-title {
  font-size: 17px;
  font-weight: bold;
}

.header-icons {
  display: flex;
  gap: 15px;
}

.header-icons i {
  font-size: 19px;
  cursor: pointer;
}

/* Navbar Tabs */
.boxutama{
  position: relative;
  background: #0CB37D;
  width:100%;
  padding:7px 12px 12px 12px;

}
.tabs {
  display: flex;
  justify-content: center;
  background: white;
  height:45px;
  width:100%;
  padding: 0px 5px 0px 5px;
  border-radius: 15px;
}

.tab-button1 {
  flex: 1;
  padding: 2px;
line-height: 10px;
  min-height: 35px;
  max-height: 40px;
  margin-top:5px;
border: none;
  background: transparent;
  color: #1f1f1f;
  font-size: 14px;

  transition: background 0.3s;
}

.tab-button1.active {
  background: orange;
  border-radius: 15px;
  color:#fff;
  font-weight: 600;
}

/* Kontainer utama */
.tab-container {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  position: relative;
  margin: auto;
}

/* Halaman tab */
.tabs-content {
  display: flex;
  width: 200%;
  transition: transform 0.3s ease-in-out;
}

.tab-page {
  width: 100vw;
  flex-shrink: 0;
  padding: 20px;
  box-sizing: border-box;

}

/* RESPONSIF */
@media (max-width: 600px) {
  .tab-button1 {
    font-size: 12px;
    padding: 10px;
  }

  .header-title {
    font-size: 14px;
  }

  .header-icons i {
    font-size: 19px;
    color:white;
  }

  .tab-container {
    max-width: 100vw;
  }

  .tab-page {
    width: 100vw;
  }
}
label {
  background: white;
  top:20px;
  font-weight: 600;
  padding:0px 7px 0px 7px;
  font-size:10px;
  left:10px;
  position: relative;
}
#ojekCustomerName, #ojekCustomerPhone, #ojekDestination,#ojekDistance,#ojekTotalPrice, #notes, #orderNote,placeholder{
  font-size:10px;
}
#userLocation, #ojekPickupLocation,placeholder{
  font-size:10px;
}
#customerName,#customerPhone,select{
  font-size: 10px;
}

.containerrr {
    width: 100%;
    max-width: 400px;
    background: white;
    padding: 14px;
    margin: 10px auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
.containerrrr {
    width: 100%;
    max-width: 400px;
    background: white;
    padding: 14px;
    margin: 10px auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

input, button {
    width: 99%;
    padding: 15px;
    margin: 10px 0;
    border: 1px solid #0CB37D;
    border-radius: 15px;
    font-family: Poppins, sans-serif;
}

button {
    background: #0CB37D;
    color: white;
    font-size: 13px;
    cursor: pointer;
}

button:hover {
    background-color: #0CB37D;
}

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

.modal-content {
    background: white;
    padding: 10px;
    border-radius: 10px;
    margin-top:-75%;
    width: 90%;
    max-width: 450px;
    text-align: left;
}

#map {
    width: 100%;
    height: 400px;
    border-radius: 10px;
}

.close {
    float: right;
    font-size: 22px;
    cursor: pointer;
}
#searchBox {
    width: 90%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: left;
}
#searchBox, button {
    width: 92%;
    padding: 13px;
    margin: 10px 0;
    border: 2px solid #0CB37D;
    border-radius: 15px;
    text-align: center;
    font-size: 10px;
}
#searchBox, #pickupLocation, placeholder{
  font-size:8px;
  text-align:left;
}

button {
    background-color: orange;
    color: white;
    border: none;
    cursor: pointer;
    width:100%;
    font-weight:600;
    font-size:13px;
}


.box1{
  margin-top:16px;
  background:white;
  border-radius:15px;
  border: 2px solid #0CB37D
}
    select{
     width: 100%;
      padding: 15px;
     margin: 10px 0;
     border-radius: 15px;
    border: 1px solid #0CB37D;
    background: white;
    }

        .product-list {
            margin-top: 10px;
        }

        .product-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px;
            font-size: 10px;
            border-bottom: 1px solid #0CB37D;
        }

        .quantity-controls {
            display: flex;
            align-items: center;
            font-size: 11px;
        }

        .quantity-controls button {
            padding:4px 7px 4px 7px;
            font-size: 11px;
            font-weight:600;
            cursor: pointer;
            border: none;
            background-color: orange;
            color: black;
            border-radius: 15px;
            margin: 0 6px;
        }

        .quantity-controls button:hover {
            background-color:#0CB37D;
        }
        .total-info{
  margin-top:16px;
  background:white;
  border-radius:15px;
  padding:10px;
  border: 2px solid #0CB37D
        }

        .total-price,.total-distance,.shipping-cost,.grand-total{
            font-weight: 600;
            margin-top: 5px;
            text-align: left;
            font-size:10px;
        }
        /*Video panduan*/
        .sidebar {
            width: 250px;
            background: white;
            height: 100vh;
            padding: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            position: fixed;
            left: 0;
            top: 0;
        }
        .sidebar h2 {
            font-size: 20px;
            margin-bottom: 20px;
        }
        .sidebar ul {
            list-style: none;
        }
        .sidebar ul li {
            padding: 10px;
            cursor: pointer;
        }
        .sidebar ul li:hover {
            background: #f1f1f1;
        }
        
        /* Konten utama */
        .main-content {
            margin-left: 270px;
            width: 100%;
            padding: 20px;
        }
        h2 {
            margin-bottom: 20px;
        }
        .video-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        .video-box {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            padding: 10px;
            text-align: center;
            transition: 0.3s;
        }
        .video-box:hover {
            transform: scale(1.02);
        }
        .video-title {
            font-weight: bold;
            margin: 1px 0;
            font-size: 16px;
        }
        video {
            width: 100%;
            height: 180px;
            border-radius: 5px;

        }
        .controls {
            display: flex;
            justify-content: space-between;
            margin-top: 0px;
        }

        .fullscreen {
            background-color: #0CB37D;
            color: white;
        }
       .downloadd {
            background-color: orange;
            color: white;
        }


        /* Responsif */
        @media (max-width: 768px) {
            .sidebar {
                display: none;
            }
            .main-content {
                margin-left: 0;
            }
            .video-container {
                grid-template-columns: 1fr;
            }
        }
        /*Pendaftaran*/
.terms {
    display: flex;
    align-items: center;
    margin-top:30px;
    gap: 2px; /* Jarak antara checkbox dan teks */
}

.terms input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.terms label {
    font-size: 12px;
    cursor: pointer;
    top:-2px;
}
        .warning-box {
            background-color: #ffcc00;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 15px;
            font-size:12px;
        }
        #closeTime,#openTime{
          background: white;
        }