:root {
  --primary-color: #111;
  --secondary-color: #fff;
  --accent-color: #f39c12;
  --background-color: #f4f4f4;
  --font-family: "Arial, sans-serif";
}
:root {
  --colorprimary: #cc6900;
  --colorsecondary: #faf1ea;
  --coloraccent-1: #7e431b;
  --coloraccent-2: red;
  --ff: "Arial, sans-serif";
  --h1: bold 54px/64px var(--ff);
  --h2: bold 36px/36px var(--ff);
  --h3: bold 24px/30px var(--ff);
  --links: bold 18px/18px var(--ff);
  --p: 18px/30px var(--ff);
  --subtext: 12px/20px var(--ff);
  --transition: 0.3s ease-in-out;
}

a {
  /* color: #fff; */
  text-decoration: none;
  font-weight: 500;
}

/* .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  padding: 20px;
} */

.card {
  color: #222;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hidden {
  display: none;
}

button {
  border: none;
  cursor: pointer;
}
button:hover {
  background: var(--coloraccent-1);
}

.auth-section {
  max-width: 400px;
  margin: 80px auto;
  padding: 30px;
  background: var(--colorsecondary);
  border-radius: 12px;
  box-shadow: 0 2px 12px var(--accent-color);
  text-align: center;
}
input::placeholder {
  color: white;
}
.auth-section h2 {
  margin-bottom: 20px;
}

.auth-form input {
  width: 100%;
  padding: 10px 15px;
  margin: 10px 0;
  border-radius: 8px;
  border: 1px solid var(--coloraccent-1);
  font-size: 16px;
  color: #fff;
}

.auth-form button {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}
.auth-form button:hover {
  background: var(--coloraccent-1);
}

.auth-section p {
  margin-top: 15px;
}
.auth-section a {
  color: #111;
  text-decoration: none;
  font-weight: 500;
}

/* .editors_button {
  background: #111;
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
  font-size: 11px;
} */
/* 🔥 7. Full clean professional input style */
input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid white;
  border-radius: 8px;
  background: var(--accent-color);
  color: white;
  outline: none;
  transition: 0.2s;
}

input:focus {
  border-color: var(--coloraccent-1);
  background-color: var(--accent-color);
}
input:-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--colorprimary) inset;
  -webkit-text-fill-color: white;
}

input {
  border: none;
  outline: none;
  background: transparent;
}
/* ----------------------------------------------------- */
/* buttons home */
.btn_fuck {
  background-color: var(--coloraccent-1);
  color: white;
}
/* header */
/* bottom-nav */
.icon {
  width: 20px;
  height: 20px;
  /* color: #333; */
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 6px;
  color: #333;
  text-decoration: none;
  transition: 0.2s;
}
.icon-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--accent-color);
}
.search-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-input {
  padding: 6px 10px;
  /* border: 1px solid #ccc; */
  border-radius: 6px;
}

.hidden {
  display: none;
}
.topbar {
  display: flex;
  justify-content: space-between; /* push left & right */
  align-items: center;
  padding: 8px 20px;
  background-color: var(--colorprimary);
  color: white;
  font-size: 14px;
}

.topbar a {
  color: white;
  text-decoration: none;
  margin-left: 15px;
}

.topbar a:hover {
  text-decoration: underline;
}
/* ----------------------------------------------------- */
/* footer  */

footer {
  background: var(--colorprimary);
  width: 100%;
  color: #fff;
  /* padding: 10px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: var(--primary-color);
  padding: 60px 150px 10px 150px;
}
.footer-bottom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.footer-top_text {
}

/* index page */

/* ------------------responsive web app--------------- */
/* Extra small devices (phones, 600px and down) */
/* Mobile first */
/* إزالة الهوامش الافتراضية من الصفحة */
* {
  /* margin: 0;
  padding: 0; */
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%; /* مهم جداً */
  overflow-x: hidden; /* يمنع التمرير الأفقي إذا كان هناك عنصر عريض */
}

/* جعل الـ main يغطي كل الشاشة */
main {
  width: 100vw; /* 100% من عرض الشاشة */
  /* height: 100vh; */
  /* 100% من ارتفاع الشاشة */
  background-color: white; /* لون تجريبي */
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.container {
  width: 100vw; /* 100% من عرض الشاشة */
  /* height: 100vh; */
  /* 100% من ارتفاع الشاشة */
  background-color: var(--colorsecondary); /* لون تجريبي */
  color: var(--primary-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.admin_core {
  display: flex;
  flex-direction: row;
}
.admin_btn {
  background-color: var(--coloraccent-1);
  border: 1px solid #ccc;
  color: white;
}
.hero_feat_p1 {
  color: #333;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.hero_feat_p1_desc {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section_slider {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: var(--colorsecondary);
  /* padding: 10px 130px 10px 130px; */
}
.section_product {
  width: 100%;
  color: var(--primary-color);
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* padding: 10px 130px 10px 130px; */
}
.section_product_pict {
  padding: 10px 30px 10px 30px;
}
.section_product_desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 30px 10px 30px;
}
/* tables */
/* edit_products_by_cat */
.edit_products_by_cat {
  padding: 20px;
  background: var(--colorsecondary);
}
.edit_products_by_cat table {
  width: 100%;
  border-collapse: collapse;
  background: var(--colorprimary);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.edit_products_by_cat th {
  background: #111;
  color: white;
  padding: 12px;
  text-align: right; /* Arabic support */
  font-weight: 600;
}
.edit_products_by_cat td {
  padding: 12px;
  border-bottom: 1px solid #eee;
  text-align: right;
}
.edit_products_by_cat td {
  padding: 12px;
  border-bottom: 1px solid #eee;
  text-align: right;
}
.edit_products_by_cat tr:hover {
  background: var(--accent-color);
}
.edit_products_by_cat a {
  display: inline-block;
  padding: 6px 10px;
  background: #007bff;
  color: white;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  margin-right: 5px;
  transition: 0.2s;
}

.edit_products_by_cat a:hover {
  background: #0056b3;
}
.edit_products_by_cat button {
  padding: 6px 10px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: 0.2s;
}

.edit_products_by_cat button:hover {
  background: #a71d2a;
}
.edit_products_by_cat td form {
  display: inline;
}
.edit_products_by_cat table {
  font-family: Arial, sans-serif;
}

.edit_products_by_cat td,
.edit_products_by_cat th {
  font-size: 14px;
}
/* SEC1 */
header {
  /* position: relative; */
  background: var(--colorsecondary);
  /* border: 2px SOLID orange; */
  color: #222;
  /* padding: 10px; */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nav-links a {
  color: #222;
}
/* ENDSEC1 */
.logo_header {
  height: 70px;
  width: 260px;
}
.navbar {
  /* border: 2px SOLID rgb(107, 101, 90); */
  background: var(--colorsecondary);
  color: black;
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* للسماح للقائمة بالانتقال للسطر الجديد */
  justify-content: space-between;
  align-items: center;
}
.logo img {
  height: 50px;
}

/* Mobile First: الروابط مخفية بشكل افتراضي */
.nav-links {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 10px;
  background-color: #111;
}

.nav-links.show {
  display: flex;
}

.nav-links div {
  width: 100%;
  /* background-color: #444; */
  display: flex;
  justify-content: center;
  padding: 5px;
}
.nav-links div a {
  color: white;
  font-size: 20px;
  text-decoration: none;
  padding: 5px;
}

/* زر الهامبورغر ظاهر دائمًا في الموبايل */
.hamburger {
  display: block;
  font-size: 25px;
  cursor: pointer;
}

/* Media query للشاشات الكبيرة */
@media (min-width: 769px) {
  .hamburger {
    display: none; /* نخفي الهامبورغر */
  }

  .nav-links {
    display: flex; /* تظهر كـ row */
    flex-direction: row;
    gap: 15px;
    width: auto;
    background-color: transparent;
  }
}

/* SEC2 */
.hero {
  width: 100%;
  height: 80vh; /* مثلاً 80% من ارتفاع الشاشة */

  color: #fff;
}
/* ENDSEC2 */
/* SEC3 */
.categories {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  padding: 10px 0px 10px 0px;
}
/* ENDSEC3 */
/* catrgory cll to action  */
.category_btn_back,
.category_btn_QR {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 16px;
  border-radius: 8px;

  font-size: 14px;
  font-weight: 500;

  text-decoration: none;
  cursor: pointer;

  transition: all 0.2s ease;
}
.category_btn_back {
  background-color: var(--coloraccent-1);
  border: 1px solid #ccc;
  color: white;
}

.category_btn_back:hover {
  background-color: var(--accent-color);
  border-color: white;
}
.category_btn_QR {
  background-color: var(--coloraccent-1);
  color: #fff;
  border: none;
}

.category_btn_QR:hover {
  background-color: var(--accent-color);
}
a {
  text-decoration: none; /* remove underline */
  color: inherit; /* use parent text color */
}
/* ----------------------------------------------------- */
.flex {
  display: flex;
  flex-direction: column;
  color: #111;
  gap: 10px;
}
/* .flex h3 {
  text-align: center;
} */

/* .nav {
  position: absolute;
  top: 0;
  left: 0;
  background: #111;
  border: 2px solid red;
  color: #fff;
  padding: 0px;
  display: flex;

  flex-direction: column;
  justify-content: center;
  align-items: center;
} */
/* Section styling */

/* .section {
  background-color: #4f46e5; 
  color: white;
  padding: 2rem;
  text-align: center;
  border-radius: 10px;
  font-size: 1.2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.section:hover {
  transform: translateY(-5px);
} */

/*------------------------------- admin page---------------- */
.admin {
  width: 100%;
  height: 80vh; /* مثلاً 80% من ارتفاع الشاشة */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 0px 10px 0px;
}

.admin-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.productForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

/*------------------- contact page------------ */

.contact {
  width: 100%;
  height: 80vh; /* مثلاً 80% من ارتفاع الشاشة */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  /* padding: 10px 0px 10px 0px; */
}
.contact-from {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.contact-from div input textarea {
  padding: 30px 25px;
  /* width: 100px; */
  background-color: var(--coloraccent-1);
  display: flex;
  justify-content: center;
  align-items: center;
}

input {
  padding: 10px 45px;
  border: none;
  background-color: var(--coloraccent-1);
  color: #fff;
}
textarea {
  padding: 10px 45px;
  border: none;
  background-color: var(--coloraccent-1);
  color: #fff;
}

/* category page */
.category {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 10px 10px 10px;
}
.category_products {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  padding: 10px 0px 10px 0px;
}
.category_heading {
  width: 100%;
  display: flex;

  justify-content: center;
  align-items: center;

  background-color: var(--colorsecondary);
}
.category_back_download_links {
  display: flex;
  flex-direction: row;
}
.products_section_product_image {
  width: 100%;
}
.product-card {
  color: #222;
  background: #fff;
  /* padding: 20px; */
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.product-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* .product-card div {
  color: #222;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
} */
/* category page */

/* edit category page */

.edit-category-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.edit-category-table-head {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 50px;
  padding: 10px 20px 10px 20px;
}

.edit-category-table-row {
  border: 2px solid black;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 35px;
  padding: 10px 10px;
}
.row-buttons {
  display: flex;
  flex-direction: row;
  padding: 10px 10px;
  justify-content: center;
  align-items: center;
  gap: 20px;
  align-self: flex-end;
}

/* edit-category-form page */

/* --------------------------------------the big --------------refactoring */

/*-------- login page and  register--------- */