@import url("components/header.css");
@import url("components/items.css");
@import url("components/slider.css");
@import url("components/footer.css");

/* base */
 .base {
     display: grid;
     grid-template-columns: 100%;
     grid-template-rows: 100px minmax(800px ,1fr) 150px;
     grid-template-areas: "header" "main" "footer";
 }	 

 .header {
     grid-area: header;
}
 .main {
     grid-area: main;
}
 .footer {
     grid-area: footer;
}

 
/* Side menu */

 #container {
     margin: 0 auto;
     text-align: left;
     border: 1px solid rgb(3, 55, 92);
     background-color: var(--header-bg);
     position: relative;
}
 #nav-general {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     position: absolute;
     top: 0;
     right: 0;
}
 #nav-general li {
     background-color: rgb(201, 130, 20);
     border: 1px solid rgb(0, 0, 0);
     margin: 5px 2px;
}
 #nav-general li a, #nav-general li form button, #nav-general li button {
     color: white;
     display: block;
     font-size: 14px;
     padding: 2px 5px;
     text-align: center;
     text-decoration: none;
     white-space: nowrap;
     background-color: transparent;
     border: none;
     cursor: pointer;
}
 #nav-general li a:hover, #nav-general li form button:hover, #nav-general li button:hover {
     background-color: white;
     color: rgb(3, 55, 92);
}
 
 .welcome-message {
     width: 100%;
     background: var(--header-bg);
     color: white;
     padding: 15px;
     font-size: 22px;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;

}

 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 98;
     display: none;
     transition: opacity 0.3s ease;
	 
}

/* القائمة الجانبية وتحكم القائمة الفرعية */
 .sidemenubox {
	background-color:var(--header-bg);;
	color:var(--header-bg-text);;
     width: auto;
     height:100%;
     min-width: 240px;
     position: absolute;
     transition: right 0.5s ease, left 0.5s ease;
     top: 0;
     display: flex;
     flex-direction: column;
     z-index: 100;
     padding: 0px;
}
 .sidemenubox.right {
     right: -80%;
     left: auto;
}
 .sidemenubox.left {
     left: -700%;
     right: auto;
}
 .sidemenubox.right.show {
     right: 0;
}
 .sidemenubox.left.show {
     left: 0;
}

 .main-menu, .submenu ul {
	 color: var(--header-bg-text);
     list-style: none;
     padding: 0;
     margin: 0;
}
 .main-menu li, .submenu ul li {
     padding: 15px;
     border-bottom: 1px solid var(--header-bg-text);
     color: var(--header-bg-text);
	 background-color:var(--header-bg);
     cursor: pointer;
}
 .main-menu li label, .main-menu li a {
     color: var(--header-bg-text);
	 background-color:var(--header-bg);
     text-decoration: none;
     display: block;
}
 .expand {
     float: right;
}
 .submenu {
     display: none;
     width: 100%;
     position: relative;
}

/* عرض القائمة الفرعية عند تفعيل الـ checkbox */
 #toggle-products:checked ~ .products, #toggle-services:checked ~ .services, #toggle-contact:checked ~ .contact {
     display: block;
}
/* إخفاء القائمة الرئيسية عند عرض الفرعية */
 #toggle-products:checked ~ .main-menu, #toggle-services:checked ~ .main-menu, #toggle-contact:checked ~ .main-menu {
     display: none;
}

.back-btn {
    display: block;
    background: #333;
    color: white;
    padding: 12px;
    font-size: 16px;
    cursor: pointer;
    text-align: left;
    font-weight: bold;
}
 .submenu ul li a {
     color: var(--text-color);
     text-decoration: none;
     display: block;
     padding: 10px;
}
 .submenu ul {
     list-style: none;
     padding: 0;
     margin: 0;
}
 
 
.theme {
	background-color:var(--header-bg);
  grid-area: theme;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.theme-label {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-color: var(--base-bg);
  color: white;
  font-size: 18px;
  text-align: center;
  line-height: 32px;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
}


.theme input[type="checkbox"] {
  display: none;
}



@media (max-width: 576px) {
     .base {
         grid-template-rows: auto;
		 width: 100%;
    }
     .headerP {
		 width: 100%;
         grid-template-columns: auto auto auto auto auto;
         grid-template-rows: 50px 40px auto;
         grid-template-areas: "ham logo sign orders cart" "search search search search theme" "menu menu menu menu menu";
		 justify-content: stretch;
    }
	
	.ham div{
		width:auto-fit;
	}
     .all-label {
         display: none;
    }
     .menu-button .text {
         display: none;
    }
     .logo img {
         height :30px;
    }
     .menu-button:hover {
         border: 2px solid transparent;
    }
    /* Dropdown adjustments for mobile if needed */
     .dropdown-content {
         min-width: 140px;
    }
     .menuheader {
         display: flex;
         flex-wrap: wrap;
         gap:1px;
		 padding:4px;
     }

	.theme {
	background-color:var(--header-bg);
	}

}