/* ================= MOBILE HEADER ================= */

.mobile-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  background-image :linear-gradient(315deg, #b7e176 30%, #225902 70%); 
  z-index: 1000;

  display: flex;
  align-items: center;
  padding: 0 8px;
  box-sizing: border-box;
}

.mobile-header .left,
.mobile-header .center,
.mobile-header .right {
  display: flex;
  align-items: center;
}

.mobile-header .center {
  flex: 1;
  margin-left: 6px;
}

/* Material icons only white */
.mobile-header .material-icons {
  font-size: 22px;
  color: darkgreen;
}

/* Font awesome icons normal */
.mobile-header .fa {
  color: #333;
}

/* Search form */
.mobile-header form {
  display: flex;
  align-items: center;
}

/* ================= SECOND HEADER ================= */

.mobile-navbar {
  position: fixed;
  top: 44px;
  left: 0px;
  width: 100%;
  height: 40px;
  background: #f8ffef;
  box-shadow: 0 3px 10px #5f9132;
  z-index: 1001;

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  box-sizing: border-box;
}

.mobile-navbar .left-icons {
  display: flex;
  align-items: center;
  gap: 15px;
  color:#477b1f;
   
}

/* iOS text zoom fix */
body {
  -webkit-text-size-adjust: 100%;
}

/* ===== SEARCH ALIGN & COLOR FIX (CLEAN) ===== */

.mobile-header .right {
  display: flex;
  align-items: center;        /* vertical center */
  justify-content: center;    /* 🔥 CENTER align */
  flex: 1;                    /* take remaining space */
  margin-top:17px;
  margin-right:-10px;
}

/* search form */
.mobile-header .right form {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* search input */
.mobile-header .right input[type="text"] {
  height: 28px;
  font-size: 14px;
}

/* search icon */
.mobile-header .fa-search {
  color: darkgreen;
  font-size: 18px;
}

/* close icon */
.mobile-header .fa-times {
  color: red;
  font-size: 18px;
}

/* buttons */
.mobile-header .right button {
  background: none;
  border: none;
  padding: 4px;
  display: flex;
  align-items: center;
}