@charset "utf-8";
/* CSS Document */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: url("../image/main_background01.jpg"); font-family: Arial, Helvetica, sans-serif; }
a { text-decoration: none; }

/* HEADER */
header { background:rgba(255,255,255,0.1); width: 100%; position: fixed; top: 0; left: 0; height: 90px; }
header.scrolled { background: rgba(255,255,255,1); transition: 1s; border-bottom: 1px solid #EEEEEE; }
.header-wrapper { width: 100%; display: flex; align-items: center; justify-content: space-between; }
#hd_msg { display: none; position: absolute; }
#hd_msg img { width: 200px; }
#header_menu_btn { cursor: pointer; margin: 20px; border: none; padding: 0; }
#header_menu img { border: 1px dotted fF0000; }
#header_login { position: relative; margin: 20px; }
#header_login span { }
#header_login img { }
.logo img { width: 70px; margin: 10px; flex-grow: 1; }

.nav { position: absolute; top: 90px; left: 0; width: 100%; display: none; }
.nav ul { }
.nav ul li { border-bottom: 1px dotted #CCCCCC; background: rgba(255,255,255,1); transition: 1s; }
.nav a { display: block; width: 100%; height: 100%; padding: 10px; color: #000000; font-size: 1.2rem; font-weight: 700; transition: 0.2s; }
.nav a:hover { color: #FFFFFF; background: #FF0000; transition: 2s; }

/* MAIN */
main { }
#main_wrapper { max-width: 1200px; margin: 0 auto; }
.hsp { height: 120px; }
.category_sec { width: 96%; padding: 10px; border-radius: 10px; background: #fff; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); margin-bottom: 20px; }
.category_title { margin: 20px; }
.category_title img { width: 300px; }
.item { border: 1px solid #EEEEEE; margin: 0 auto; margin-bottom: 20px; text-align: center; padding: 10px; border-radius: 20px; display: flex; justify-content: space-around; align-items: center; }
.item_img { width: 40%; border-radius: 10px; padding: 5px; }
.item_img img { width: 100%; border-radius: 10px; border: 1px #EEEEEE solid; }
.item_detail { width: 60%; display: flex; flex-direction: column; }
.item_name { font-size: 1rem; font-weight: 700; padding: 10px; }
.item_basic { width: 90%; font-size: 0.7rem; font-weight:100; border-top: 1px dotted #EEEEEE; text-align: left; padding: 5px; margin: 0 auto; }

.size-options { display: flex; justify-content: center; align-items: center; font-size: 0.7rem; padding: 5px;  }

.item_b { border-top: 1px solid #EEEEEE; padding: 10px; width: 90%; margin: 0 auto; }
.item_price { width: 40%; font-size: 1rem; font-weight: 800; color: red; }
.addBtn { background: #598257; font-size: 1.2rem; color: #FFFFFF; margin: 0 auto; padding: 5px; border-radius: 5px; border: none; cursor: pointer;  margin-left: 10px; }

.hsp { height: 150px; }

/* FOOTER */

footer { position: fixed; width: 100%; left: 0px; bottom: 0px; background: #598257; box-shadow: 5px 0 5px 2px #FFFFFF; }
footer::after { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#footer_wrapper { width: 100%; max-width: 1200px; margin: 0 auto; }
#bottom_logo img { width: 80px; padding: 10px; }
#order-title { width: 80%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #FFFFFF; text-align: center; font-weight: bold; padding: 10px; border-bottom: 1px dotted #DDDDDD; margin: 0 auto; }
#order_updown { background: none; border: none; margin: 10px; }
.order-list { width: 90%; position: relative; flex-grow: 1; display: flex; flex-direction: column; align-items: center; padding: 5px; margin: 0 auto;  }
.order-item { width: 100%;  background: #FFFFFF; border-radius: 10px; padding: 5px; margin: 1%; display:flex; align-items: center; }
.order-name { font-size: 0.8rem; color: #598527; flex-grow: 1; padding: 5px; margin-left: 10px; }
.order-qty { display: block; width: 70px; text-align: right; }
.qty-btn { background: #598257; color: #FFFFFF; font-size: 1rem; border: none; border-radius: 3px; width: 15px; margin: 2px; }
.qty-value { border: 1px dotted #FF0000; }
.order-price { width: 30px; text-align: right; color: #FF0000; }

.total-area { width: 80%; font-size: 0.8rem; background: #FFFFFF; color: #000000; padding: 5px; border-radius: 5px; text-align: center; margin: 0 auto; margin-bottom: 10px; }
#totalPrice { font-size: 1rem; color: #FF0000; font-weight: bold; }
#priceformat { font-size: 1rem; color: #FF0000; font-weight: bold; }
.pay-btn { background: #FF0000; color: #FFFFFF; border: none; padding: 10px; border-radius: 10px; font-size: 1.2rem; cursor: pointer; margin: 1%; font-weight: bold; text-align: center; }
.pay-btn:hover { background: #FFFFFF; color: #598527; }


/* RESPONSIVE */
@media (min-width: 470px)
{
	header { height: 100px; }
	.nav { top: 100px; }
	.logo { order: 0; flex-grow: 1; }
	.logo img { width: 80px; flex-grow: 1; }
	#header_login { order: 1; margin: 10px; }
	#header_menu_btn { order: 2; margin: 10px; margin-right: 20px; }
	.category_title img { width: 400px; }
}

@media (min-width: 768px)
{
	header { height: 120px; }
	.logo { order: 0; flex-grow: 1; }
	.logo img { width: 100px; padding: 10px; margin: 10px; }
	.nav { position: relative; display: block; order: 1; top: 0; left: 0; }
	.nav ul { position: relative; display: flex; flex-direction: row; justify-content: flex-end; }
	.nav ul li { list-style: none; border-bottom: none; }
	.nav ul li a {  font-size: 1rem; }
	#header_login { order: 2; margin: 10px; }
	#header_menu_btn { display: none;  }
	.category_title img { width: 500px; }
}

@media (min-width: 1024px)
{
	header { height: 140px; }
	.logo { }
	.logo img { width: 120px; padding: 10px; margin: 10px; }
	.nav {  }
	.nav ul { }
	.nav ul li { }
	.nav ul li a {  font-size: 1.2rem; }
	#header_login {  }
	#header_menu_btn {   }
	.category_title img { width: 600px; }

}

@media (min-width: 1200px)
{
	header { height: 160px; }
	#hd_msg { position: relative; display: block; order: 0; width: 200px; }
	.logo { position: relative; order: 1; flex-grow: 1; }
	.logo img { width: 130px; padding: 15px; margin: 15px; }
	.nav { order: 2; justify-content: flex-end;  }
	.nav ul { }
	.nav ul li { }
	.nav ul li a {  font-size: 1.3rem; }
	#header_login {  }
	#header_menu_btn {   }
	
	.category_sec { display: flex; flex-direction: row; justify-content: space-around; }
	.category_title img { width: 800px; }
	.item { margin: 10px; width: 20%; }
	
	#header_login { position: relative; margin: 40px; }
	#header_login span { width: 60px; }
	#header_login img { width: 60px; }
	.hsp { height: 240px; }
}


/* RESPONSIVE END */



/* order_confirm.php */
#order_confirm_box { width: 96%; margin: 0 auto; background: #fafafa; border: 1px solid #ddd; border-radius: 10px; padding: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.desc { text-align: center; font-size: 1rem; font-weight: bold; color: #FF0000; margin-bottom: 10px; }
.order_info { border-radius: 20px; margin: 5px; padding: 5px; width: 100%; }
.order_num { padding: 10px; text-align: center;  font-size: 0.8rem; }
.order_list { width: 100%; border-collapse: collapse; margin: 0px; }
.order_list th, .order_list td { border: 1px solid #ccc; padding: 10px; text-align: center; font-size: 0.7rem; }
.order_list th { background: #f2f2f2; }
.oc_total { text-align: right; font-weight: bold; font-size: 1.2em; margin: 10px; color: #FF0000; }

.payment_box { margin: 0 auto; display: flex; width: 90%; justify-content: center; align-items: center; background: #f8f8f8; padding: 5px; border-radius: 10px; text-align: center; flex-wrap: wrap; }
.payment_box label { margin: 0; font-size: 0.8em; }
.confirm_buttons { text-align: center; padding: 10px; border-top: 1px solid #666666;  border-bottom : 1px solid #666666; }
.edit-btn { background: #007bff; color: white; border: none; padding: 0.5rem; border-radius: 8px; font-size: 0.7rem; margin-left: 10px; cursor: pointer; }
.cancel-btn { background: #28a745; color: white; border: none; padding: 0.5rem; border-radius: 8px; font-size: 0.7rem; margin-left: 10px; cursor: pointer; }

#order_ok { width: 100%; padding: 10px; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; text-align: center; }
.confirm-btn { background: #dc3545; color: white; border: none; padding: 1rem; border-radius: 8px; font-size: 1.3em; cursor: pointer; }

.confirm-btn:hover, .cancel-btn:hover, .edit-btn:hover { opacity: 0.9; }
/* order_confirm.php */

/* order_complete.php */
#order_c_msg { text-align: center; padding: 10px; font-size: 1.5rem; color: #FF0000; }
.order_c_detail { width: 96%; background: #fafafa; border: 1px solid #ddd; border-radius: 10px; padding: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); margin-bottom: 20px; }
.order_c_dmsg { text-align: center; font-size: 1.2rem; border-bottom: 1px dotted #EEEEEE; margin: 5px;  }
#order_c_detail p { text-align: left; font-size: 1rem; }
.orderlist_title { text-align: center; padding: 10px; border-top: 1px dotted #EEEEEE; }
.section-title { text-align: center; font-size: 1.3rem; font-weight: bold; color: #000000; margin: 10px; }
.receipt { width: 100%; }
.receipt th, td {  border: 1px solid #ccc; padding: 10px; text-align: center;  }
.print-btn { background: #BBBBBB; color: white; border: none; padding: 5px; border-radius: 8px; font-size: 1rem; cursor: pointer; text-align: center; }
.order_c_homebtn { background: #FF0000; color: white; border: none; padding: 10px; border-radius: 10px; font-size: 1.3rem; cursor: pointer; text-align: center; }
/* order_compkete.php */