@import url('./global/colors.php');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');

* {
	margin: 0;
}

body {
	font-family: 'Poppins', sans-serif;
	background-color: var(--semi-grey);
}

/* LOADING */
.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.logo {
    width: 100px; /* Sesuaikan ukuran logo */
    height: auto; /* Biarkan tinggi menyesuaikan agar logo tidak terdistorsi */
}

.main-content {
    display: none;
}

/* Responsif pada perangkat dengan lebar maksimal 600px */
@media screen and (max-width: 600px) {
    .loading-container {
        padding: 10px; /* Berikan ruang padding yang lebih sedikit pada elemen loading */
    }

    .logo {
        width: 100px; /* Ubah ukuran logo untuk tampilan perangkat seluler */
    }
}
/* LOADING */


.width {
	width: 75%;
	margin: 0 auto;
}

a {
	text-decoration: none;
	color: var(--orange);
}

/* HEADER */

header {
	width: 100%;
	padding: 20px 0;
	background-color: var(--orange);
	position: fixed;
	-webkit-box-shadow: 0px 2px 2px 0px var(--deep-orange);
	-moz-box-shadow: 0px 2px 2px 0px var(--deep-orange);
	box-shadow: 0px 2px 2px 0px var(--deep-orange);
	z-index: 2;
}

.tag_header {
	width: 100%;
	padding: 5px 0;
	background-color: var(--semi-orange);
	/* opacity: 0.2; */
	margin-top: -20px;
	margin-bottom: 20px;
	color: var(--white);
}

.jumlah_users_admin {
    width: 100%;
    padding: 15px 20px;
    background-color: var(--orange);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .jumlah_users_admin h1 {
    font-size: 15px;
    font-weight: 500;
    color: var(--white);
  }

.add_button_adm {
    width: 100%;
    padding: 15px 0;
    background-color: var(--white);
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--semi-black);
    transition: 0.2s;
  }

.add_button_adm p {
    font-size: 15px;
    font-weight: 500;
    margin-right: 10px;
  }

.isi_tag_header_lr {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
}

.d_isi_tag_header_lr {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.d_isi_tag_header_lr img {
	height: 25px;
	margin-right: 10px;
	vertical-align: middle;
}

.d_isi_tag_header_lr p {
	font-size: 14px;
	font-weight: 500;
}

.d_isi_tag_header_lr a {
	font-size: 14px;
	font-weight: 500;
	color: var(--white);
}

.isi_tag_header {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.back_header {
	width: 100%;
	height: 145px;
}

.header {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.logo_header {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.box_search_header {
	flex: 1;
	position: relative;
	margin: 0 40px;
}

.search_header {
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
	background-color: var(--white);
	border-radius: 50px;
	-webkit-box-shadow: 1px 1px 5px 1px var(--deep-orange);
	-moz-box-shadow: 1px 1px 5px 1px var(--deep-orange);
	box-shadow: 1px 1px 5px 1px var(--deep-orange);
	display: flex;
	flex-direction: row;
	align-items: center;
}

.menu_header {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.svg_logo_header {
	height: 35px;
}

.logo_header p {
	color: var(--white);
	margin-left: 15px;
	font-size: 23px;
	font-weight: 500;
	display: none;
}

.search_header input {
	font-family: 'Poppins', sans-serif;
	flex: 1;
	height: 40px;
	padding: 0 15px;
	border: 0;
	font-size: 13px;
	outline: none;
	background-color: transparent;
}

.box_icon_search {
	height: 100%;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	display: flex;
	align-items: center;
	margin-right: 15px;
}

.box_icon_search i {
	color: var(--orange);
	font-size: 20px;
}

.profile_menu_header {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.profile_menu_header a {
	color: var(--white);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.profile_menu_header p {
	color: var(--white);
	font-size: 15px;
	font-weight: 400;
	text-decoration: none;
	margin: 0 10px;
}

.box_icon_menu_header {
	width: 30px;
	height: 30px;
	margin-right: 30px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.box_icon_menu_header p {
	padding: 1px 6.5px;
	background-color: var(--white);
	position: absolute;
	color: var(--orange);
	font-weight: 600;
	font-size: 11px;
	left: 5px;
	top: -5px;
	border-radius: 15px;
	border: 2px solid var(--orange);
}

.profile_menu_header i {
	font-size: 30px;
	color: var(--white);
}

.profile_menu_header h5 {
	font-size: 29px;
	color: var(--white);
	margin-top: -2px;
	font-weight: normal;
}

.box_img_menu_header {
	width: 30px;
	height: 30px;
}

.box_img_menu_header img {
	width: 30px;
	height: 30px;
	border-radius: 30px;
	object-fit: cover;
}

.res_search_header {
	width: 100%;
	box-sizing: border-box;
	background-color: var(--white);
	position: absolute;
	margin-top: 10px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 4px 0px var(--border-grey);
	-moz-box-shadow: 0px 0px 4px 0px var(--border-grey);
	box-shadow: 0px 0px 4px 0px var(--border-grey);
	display: none;
	padding: 6px 0;
}

.loading_res_search_header {
	height: 30px;
	margin: 40px 0;
	display: none;
}

#isi_res_search_header {
	display: none;
}

/* NOTIFIKASI */


/* FOOTER */

footer {
	width: 100%;
	padding: 45px 0px 38px 0px;
	background-color: var(--white);
	margin-top: 30px;
}

.footer {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 45px;
	padding-bottom: 30px;
	border-bottom: 2px solid var(--semi-grey);
}

.footer_grid {
	width: 100%;
	box-sizing: border-box;
}

.footer_grid h1 {
	font-size: 15px;
	font-weight: 600;
	color: var(--semi-black);
	margin-bottom: 20px;
}

.footer_grid a {
	font-size: 13.5px;
	font-weight: 400;
	color: var(--semi-black);
}

.footer_grid p {
	margin: 7px 0px;
}

.footer_grid i {
	font-size: 18px;
	margin-right: 8px;
}

.footer_grid img {
	width: 55px;
	margin-right: 8px;
	margin-bottom: 8px;
}

.footer_sosmed {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 13px;
}

.isi_footer_sosmed {
	width: 100%;
	/* background-color: blue; */
	display: flex;
	font-display: row;
	align-items: center;
}

.copyright {
	text-align: center;
	margin-top: 30px;
	font-size: 15px;
	color: var(--grey);
}

/* LIST PRODUK */

.list_produk {
	width: 100%;
	background-color: var(--white);
	position: relative;
	outline: 2px solid #0000;
	border-radius: 10px;
}

.list_produk:hover {
	outline-color: var(--orange);
}

.text_list_produk {
	width: 100%;
	padding: 13px 15px 15px 15px;
	float: left;
	box-sizing: border-box;
}

.list_produk img {
  width: 100%;
  height: 195px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}


.box_judul_list_produk {
	width: 100%;
	height: 43px;
}

.box_judul_list_produk p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--black);
	font-size: 14px;
}

.box_harga_list_produk {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 15px;
	align-items: center;
}

.box_harga_list_produk h1 {
	font-size: 15px;
	color: var(--orange);
	font-weight: 500;
}

.box_harga_list_produk span {
	font-size: 13px;
}

.box_harga_list_produk p {
	font-size: 11.5px;
	color: var(--black);
}

.box_icon_1 {
	position: absolute;
	margin-top: 5px;
	color: var(--white);
	left: 0px;
	background-color: var(--orange);
	font-weight: 600;
	font-size: 11px;
	padding: 2px 5px;
	border-radius: 0 50px 50px 0;
}

.box_icon_1_2 {
	position: absolute;
	margin-top: 5px;
	color: var(--white);
	left: 0px;
	background-color: #f2300c;
	font-weight: 600;
	font-size: 11px;
	padding: 2px 5px;
	border-radius: 0 50px 50px 0;
}

.box_icon_1_2_3 {
	position: absolute;
	margin-top: 30px;
	color: var(--white);
	left: 0px;
	background-color: #ff8f00;
	font-weight: 600;
	font-size: 11px;
	padding: 2px 5px;
	border-radius: 0 50px 50px 0;
}

.box_icon_2 {
	position: absolute;
	background: #f2300c;
	text-align: center;
	margin-top: 5px;
	color: var(--white);
	font-weight: 600;
	font-size: 11px;
	border-radius: 0;
	right: 0px;
	padding: 2px 5px;
	border-radius: 50px 0 0 50px;
}

.box_icon_1 p {
	color: var(--white);
	font-weight: 600;
	font-size: 11px;
}

.box_icon_2 p {
	color: var(--white);
	font-weight: 600;
	font-size: 11px;
}

.box_icon_5 {
	color: #fff;
	font-weight: 600;
	font-size: 11px;
	border-radius: 0;
	width: 100%;
	bottom: 118px;
	position: absolute;
	text-align: right;
	right: 10px;
}

.box_icon_3 {
	position: absolute;
	right: 0px;
	background-color: #fffffff7;
	padding: 2px 5px;
	border-radius: 50px 0 0 50px;
	font-weight: 600;
	font-size: 11px;
	bottom: 115px;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.box_icon_4 {
	bottom: 115px;
	position: absolute;
	left: 0px;
	background-color: #00000069;
	padding: 2px 5px;
	border-radius: 0 50px 50px 0;
	color: #fff;
	font-weight: 600;
	font-size: 11px;
}

.box_nama {
	background-color: var(--orange);
	padding: 4px 5px;
	color: #fff;
	font-weight: 600;
	font-size: 11px;
	display: flex;
	justify-content: space-between;
	border-radius: 0px 0px 0px 0px;
}

.list_lokasi {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 2px 15px 2px 15px;
	box-sizing: border-box;
	background: #e8e8e8;
	color: #555;
	font-size: 11px;
	position: absolute;
	bottom: 0;
	border-radius: 0 0 10px 10px;
}

/* Tambahan CSS */

.box_12 {
	position: relative;
	padding: 1px;
	display: flex;
	bottom: 0;
}

.satu {
	color: var(--white);
	background-color: var(--orange);
	font-weight: 600;
	font-size: 11px;
	padding: 2px 5px;
	border-radius: 0 50px 50px 0;
	padding-right: 10px;
	z-index: 1;
	position: relative;
}

.dua {
	color: var(--white);
	background-color: var(--red);
	font-weight: 600;
	font-size: 11px;
	border-radius: 0 50px 50px 0;
	position: relative;
	margin-left: -10px;
	padding-left: 15px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 9px;
}

/* Media query untuk layar dengan lebar maksimum 768px */
@media screen and (max-width: 768px) {

	.satu,
	.dua {
		font-size: 9px;
		/* Ubah ukuran font untuk responsif */

	}
}


.box_ov_gambar_p {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	position: absolute;
	top: 10px;
	right: 5px;
	z-index: 1;
}

.box_wishlist {
	width: 25px;
	height: 25px;
	background-color: var(--semi-grey);
	border-radius: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.wishlist_active {
	font-size: 15px;
	margin-top: 1px;
	color: var(--orange);
	cursor: pointer;
}

.wishlist_nonactive {
	font-size: 15px;
	margin-top: 1px;
	color: var(--grey);
	cursor: pointer;
}

.wishlist_active_an {
	font-size: 15px;
	margin-top: 1px;
	color: var(--orange);
	cursor: pointer;
	animation: love_wishlist 0.2s;
}

@keyframes love_wishlist {
	50% {
		font-size: 30px;
	}
}

.wishlist_hidden {
	display: none;
}






.box_ov_gambar_p {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	position: absolute;
	top: 10px;
	right: 5px;
	z-index: 1;
}

.box_w3ishlist {
	width: 25px;
	height: 25px;
	background-color: var(--semi-grey);
	border-radius: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.w3ishlist_active {
	font-size: 15px;
	margin-top: 1px;
	color: var(--orange);
	cursor: pointer;
}

.w3ishlist_nonactive {
	font-size: 15px;
	margin-top: 1px;
	color: var(--grey);
	cursor: pointer;
}

.w3ishlist_active_an {
	font-size: 15px;
	margin-top: 1px;
	color: var(--orange);
	cursor: pointer;
	animation: love_w3ishlist 0.2s;
}

@keyframes love_w3ishlist {
	50% {
		font-size: 30px;
	}
}

.w3ishlist_hidden {
	display: none;
}

.box_w4ishlist {
	width: 25px;
	height: 25px;
	background-color: var(--semi-grey);
	border-radius: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.w4ishlist_active {
	font-size: 15px;
	margin-top: 1px;
	color: var(--orange);
	cursor: pointer;
}

.w4ishlist_nonactive {
	font-size: 15px;
	margin-top: 1px;
	color: var(--grey);
	cursor: pointer;
}

.w4ishlist_active_an {
	font-size: 15px;
	margin-top: 1px;
	color: var(--orange);
	cursor: pointer;
	animation: love_w4ishlist 0.2s;
}

@keyframes love_w4ishlist {
	50% {
		font-size: 30px;
	}
}

.w4ishlist_hidden {
	display: none;
}







.box_harga_list_produk1 {
	width: 100%;
	display: flex;
	flex-direction: row;
	margin-bottom: 25px;
	align-items: center;
}

.box_harga_list_produk1 p {
  font-size: 0.86rem;
  color: var(--semi-black);
  font-weight: 500;
  letter-spacing: 0.1px;
}


.back_share_produk {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: var(--bg-transparent-black);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
        
    
}

.share_produk {
	width: 450px;
	padding: 30px;
	box-sizing: border-box;
	background-color: var(--white);
	border-radius: 3px;
	position: relative;
}

.share_produk h1 {
	font-size: 18px;
	color: var(--black);
	font-weight: 600;
}

.box_link_produk {
	width: 100%;
	margin-top: 30px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: 15px;
}

.isi_link_produk {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 25px;
	cursor: pointer;
}

.bg_lp_link {
	background-color: var(--orange);
	color: var(--white);
}

.bg_lp_wa {
	background-color: #25d366;
	color: var(--white);
}

.bg_lp_fb {
	background-color: #3b5998;
	color: var(--white);
}

.bg_lp_twitter {
	background-color: #1da1f2;
	color: var(--white);
}

#ico_selesai_copy_p {
	display: none;
}

.close_sp {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 23px;
	color: var(--orange);
	cursor: pointer;
}

/* Responsif untuk layar yang lebih kecil */
@media screen and (max-width: 768px) {
	.list_lokasi {
		font-size: 9px;
		/* Ubah ukuran font sesuai kebutuhan */
		order: 1;
		/* Ubah urutan tampilan menjadi paling bawah */
		border-radius: 0 0 6px 6px;
	}
}


#img-verif {
	width: 15px;
	height: auto;
	vertical-align: middle;
	float: none;
}

/* TAMBAHAN */

.home__lower__banners__items {
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	background: #fff;
	padding: 10px;
	margin-top: 30px;
}

.home__lower__banners__items img {
	height: 150px;
	width: auto;
}

/* BOTTOM NAVIGATION */

.back_bot_nav {
	width: 100%;
	height: 50px;
	margin-top: 15px;
	display: none;
}

.bot_nav_cover {
	display: none;
}

.bot_nav {
	width: 100%;
	padding: 8px 0;
	position: fixed;
	bottom: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 5px;
	box-sizing: border-box;
	background-color: var(--white);
	-webkit-box-shadow: 0px -1px 2px 0px var(--border-grey);
	-moz-box-shadow: 0px -1px 2px 0px var(--border-grey);
	box-shadow: 0px 1px 5px 0px #c8c8c861;
	transform: translateZ(0);
	/* Trigger hardware acceleration for smoother rendering */
	z-index: 9999;
	/* Pastikan menu tampil di atas konten lain */
}

.isi_bot_nav {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.isi_bot_nav i {
	font-size: 25px;
	color: var(--grey);
}

.isi_bot_nav p {
	font-size: 10px;
	margin-top: 3px;
	font-weight: 500;
	color: var(--grey);
}

.isi_bot_nav h4 {
	font-size: 22px;
	color: var(--orange);
}

.isi_bot_nav h5 {
	font-size: 10px;
	margin-top: 3px;
	font-weight: 500;
	color: var(--orange);
}

.isi_bot_nav h3 {
	position: absolute;
	background-color: var(--orange);
	color: var(--white);
	font-size: 9px;
	font-weight: 600;
	padding: 1px 5px;
	border-radius: 10px;
	margin-top: -5px;
	margin-left: 25px;
	border: 2px solid var(--white);
}

/* BELUM LOGIN */

.belum_login {
	width: 100%;
	background-color: var(--white);
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 140px 30px;
	box-sizing: border-box;
}

.belum_login img {
	height: 110px;
}

.belum_login h1 {
	font-size: 18px;
	color: var(--black);
	font-weight: 500;
	margin-top: 25px;
	text-align: center;
}

.login_belum_login {
	width: 200px;
	height: 48px;
	background-color: var(--orange);
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	outline: none;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 25px;
}

.login_belum_login p {
	font-size: 15px;
	font-weight: 500;
	color: var(--white);
}

/* ADMIN */

.admin {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: row;
}

.header_responsive_admin {
	width: 100%;
	height: 55px;
	background-color: var(--white);
	position: fixed;
	display: none;
	border-bottom: 1px solid var(--semi-grey);
	flex-direction: row;
	align-items: center;
	padding: 0 10px;
	box-sizing: border-box;
}

.header_responsive_admin i {
	font-size: 20px;
	color: var(--black);
}

.header_responsive_admin p {
	font-size: 18px;
	color: var(--black);
	font-weight: 500;
	margin-left: 15px;
}

.menu_admin {
	width: 310px;
	height: 100%;
	background-color: var(--white);
	box-sizing: border-box;
	padding: 50px 40px;
	overflow: auto;
}

.content_admin {
	flex: 1;
	height: 100%;
	background-color: var(--semi-grey);
	box-sizing: border-box;
	padding: 50px;
	overflow: auto;
}

.menu_profile_admin {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.menu_profile_admin img {
	width: 38px;
	height: 38px;
	object-fit: cover;
	border-radius: 45px;
}

.menu_profile_admin p {
	font-size: 16px;
	font-weight: 600;
	color: var(--orange);
	margin-left: 20px;
}

.menu_list {
	width: 100%;
	margin-top: 50px;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 30px;
}

.menu_list_isi {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.menu_list_isi_active {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.box_icon_menu_list_isi {
	width: 19px;
	/* background-color: red; */
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -3px;
}

.menu_list_isi i {
	font-size: 19px;
	color: var(--grey);
	opacity: 0.55;
}

.menu_list_isi p {
	margin-left: 20px;
	font-size: 14px;
	font-weight: 500;
	color: var(--black);
}

.menu_list_isi_active i {
	font-size: 19px;
	color: var(--orange);
}

.menu_list_isi_active p {
	margin-left: 20px;
	font-size: 14px;
	font-weight: 500;
	color: var(--orange);
}

.line_menu_list {
	width: 100%;
	height: 1px;
	background-color: var(--border-grey);
	/* margin-top: 30px; */
}

.title_content_admin {
	font-size: 23px;
	font-weight: 600;
	color: var(--black);
}

.isi_content_admin {
	width: 100%;
	margin-top: 20px;
}

/* COMPONENT */

.p_input {
	font-size: 14px;
	font-weight: 500;
	color: var(--grey);
	margin-bottom: 5px;
}

.input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--border-grey);
	padding: 10px 13px;
	border-radius: 3px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	color: var(--black);
	outline: none;
	resize: none;
	background-color: var(--white);
}

.select {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--border-grey);
	padding: 10px 13px;
	border-radius: 3px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	color: var(--black);
	outline: none;
	background-color: var(--white);
}

.textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--border-grey);
	padding: 13px;
	border-radius: 3px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	color: var(--black);
	outline: none;
	resize: none;
	background-color: var(--white);
}

.button {
	width: 100%;
	height: 48px;
	background-color: var(--orange);
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	outline: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

.button p {
	font-size: 15px;
	font-weight: 700;
	color: var(--white);
    font-family: 'Poppins', sans-serif;
}

.button img {
	width: 27px;
	height: 27px;
}

/* POPUP CONFIRM */

.back_popup_confirm {
	width: 100%;
	height: 100vh;
	background-color: var(--bg-transparent-black);
	position: fixed;
	z-index: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
}

.popup_confirm {
	width: 320px;
	padding: 25px;
	box-sizing: border-box;
	background-color: var(--white);
	border-radius: 3px;
}

.head_popup_confirm {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.head_popup_confirm i {
	font-size: 30px;
	color: var(--orange);
}

.head_popup_confirm p {
	font-size: 15px;
	color: var(--black);
	margin-left: 15px;
	font-weight: 600;
}

.popup_confirm h5 {
	font-size: 14px;
	color: var(--semi-black);
	font-weight: 500;
	margin-top: 25px;
}

.box_button_popup_confirm {
	width: 100%;
	margin-top: 25px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 15px;
}

.button_cancel_popup_confirm {
	width: 100%;
	height: 38px;
	border-radius: 3px;
	background-color: var(--border-grey);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.button_cancel_popup_confirm p {
	font-size: 15px;
	font-weight: 600;
	color: var(--black);
}

.button_confirm_popup_confirm {
	width: 100%;
	height: 38px;
	border-radius: 3px;
	background-color: var(--orange);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.button_confirm_popup_confirm p {
	font-size: 15px;
	font-weight: 600;
	color: var(--white);
}

.button_confirm_popup_confirm img {
	height: 20px;
	display: none;
}

#res {
	display: none;
}

.box_back_button {
	display: none;
}

/* RESPONSIVE */

/* CSS untuk layar kecil atau ponsel */
@media (max-width: 480px) {
	.home__lower__banners__items {
		display: block;
		/* Mengubah tampilan menjadi satu kolom */
		padding: 15px;
	}

	.home__lower__banners__items img {
		height: auto;
		/* Biarkan tinggi gambar disesuaikan dengan kontennya */
		width: 49%;
		/* Bagi lebar parent menjadi 2 kolom */
		max-width: none;
		/* Hapus batasan lebar maksimum */
		margin: 5px auto;
		/* Atur jarak antara gambar */

	}
}

@media only screen and (max-width: 900px) {
	.share_produk {
		width: 100%;
		margin: 0 15px;
		padding: 20px;
	}

	.tag_header {
		display: none;
	}

	.logo_header {
		display: none;
	}

	.box_search_header {
		margin: 0px 30px 0px 0px;
	}

	.box_menu_admin {
		width: 100%;
		height: 100vh;
		background-color: var(--bg-transparent-black);
		position: fixed;
		display: none;
		z-index: 99999;
	}

	.menu_admin {
		width: 280px;
		padding: 30px;
	}

	.content_admin {
		padding: 10px;
		margin-top: 55px;
	}

	.header_responsive_admin {
		display: flex;
	}
}

@media only screen and (max-width: 600px) {
	.width {
		width: 100%;
	}

	header {
		padding: 10px 0;
	}

	.back_header {
		height: 63px;
	}

	.menu_header {
		display: none;
	}

	.search_header {
		margin: 0 15px;
	}

	.res_search_header {
		margin: 5px 15px;
	}

	.search_header input {
		height: 32px;
		font-size: 11.5px;
		padding: 0 12px;
		width: 100%;
	}

	.box_icon_search i {
		font-size: 18px;
	}

	footer {
		display: none;
	}

	.list_produk {
		border: 2px solid var(--semi-grey);
		box-sizing: border-box;
		border-radius: 8px;
		/* Tambahkan efek bayangan */
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.09);
		/* Ubah nilai shadow sesuai kebutuhan */
	}


	.list_produk img {
		/* Atur ukuran gambar untuk layar yang lebih kecil */
		height: 170px;
        border-radius: 8px 8px 0 0;
	}

	.text_list_produk {
		padding: 7px 10px 10px 10px;
	}

	.box_judul_list_produk {
		height: 37px;
	}

	.box_judul_list_produk p {
		font-size: 0.86rem;
		font-weight: 500;
	}

	.box_harga_list_produk h1 {
		font-size: 16px;
		font-weight: 600;
	}

	.box_harga_list_produk span {
		font-size: 14px;
	}

	.box_harga_list_produk p {
		font-size: 12px;
		font-weight: 500;
	}

	.back_bot_nav {
		display: block;
	}

	.bot_nav_cover {
		display: block;
	}

	.belum_login {
		margin-top: 0;
	}

	.belum_login img {
		height: 90px;
	}

	.belum_login h1 {
		font-size: 16px;
	}

	.login_belum_login {
		width: 180px;
		height: 43px;
	}

	.login_belum_login p {
		font-size: 14px;
		font-weight: 500;
		color: var(--white);
	}

	.box_back_button {
		height: 40px;
		padding: 0 0 0 15px;
		display: flex;
		align-items: center;
		color: var(--white);
		font-size: 22px;
		cursor: pointer;
	}

	.box_back_button img {
		height: 32px;
	}

	.box_harga_list_produk p {
		font-size: 11.5px;
		color: var(--black);
	}

	.box_icon_1 p {
		font-size: 11px;
	}

	.box_icon_2 p {
		font-size: 11px;
	}

	.box_icon_5 {
		bottom: 100px;
	}

	.box_icon_3 {
		bottom: 100px;
		font-weight: 600;
		font-size: 11px;
	}

	.box_icon_4 {
		bottom: 100px;
		color: #fff;
		font-weight: 600;
		font-size: 11px;
	}

}