/* =========================================================
   myg-diary-input-custom.css
   myGasztro – Napló – belső input / kereső / füles nézetek
   ---------------------------------------------------------
   [BLOCK A] INPUT – 4 FÜLES KERESŐ FELSŐ TABSOR DIZÁJN
   Cél:
   - a kereső alatti 4 fül kapja meg ugyanazt a vizuális nyelvet,
     mint a daily nézet alsó 4 ikon-gombja
   - 1 sorban legyen a 4 tab
   - ikon felül, felirat alul
   - aktív fül narancs hangsúlyt kapjon
   - csak CSS, HTML piszkálás nélkül

   HTML célpont:
   .myg-diary-input__tabs
   .myg-diary-input__tab
   .myg-diary-input__tab--active

   MIT HOL ÁLLÍTS:
   ---------------------------------------------------------
   DESKTOP / ALAP:
   - height: 86px;          ← tab magasság
   - width/height: 36px;    ← ikon méret
   - font-size: 14px;       ← felirat méret
   - font-weight: 600;      ← felirat vastagság
   - color: #56606b;        ← inaktív felirat szín
   - active color: #f28c28; ← aktív felirat szín

   MOBIL:
   - height: 68px;          ← mobil tab magasság
   - width/height: 38px;    ← mobil ikon méret
   - font-size: 13px;       ← mobil felirat méret
   - gap: 5px;              ← ikon és felirat közti távolság
   ========================================================= */

/* 1) Tabs konténer – 4 egyenlő oszlop */
#myg-diary-app .myg-diary-input__tabs{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 0 18px 0 !important;   /* <<< alsó tér a tabsor alatt */
}

/* 2) Alap tab – desktop / általános */
#myg-diary-app .myg-diary-input__tab{
  position: relative !important;
  min-width: 0 !important;
  width: 100% !important;

  height: 86px !important;         /* <<< DESKTOP/ALAP TAB MAGASSÁG */
  min-height: 86px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;             /* <<< ikon és felirat közti rés */

  padding: 10px 8px 8px !important;
  margin: 0 !important;

  border-radius: 18px !important;
  border: 1px solid rgba(20,34,56,0.08) !important;
  background: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;

  color: transparent !important;   /* eredeti szöveg elrejtése */
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;

  -webkit-tap-highlight-color: transparent !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

/* Ha a plugin / theme bármit betesz a gombba, ne zavarjon */
#myg-diary-app .myg-diary-input__tab > *{
  display: none !important;
}

/* 3) Ikon – alap */
#myg-diary-app .myg-diary-input__tab::before{
  content: "" !important;
  display: block !important;
  width: 36px !important;          /* <<< DESKTOP/ALAP IKON MÉRET */
  height: 36px !important;
  flex: 0 0 36px !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: .96 !important;
}

/* 4) Felirat – alap */
#myg-diary-app .myg-diary-input__tab::after{
  display: block !important;
  font-size: 14px !important;      /* <<< DESKTOP/ALAP FELIRAT MÉRET */
  line-height: 1.1 !important;
  font-weight: 600 !important;     /* <<< FELIRAT VASTAGSÁG */
  color: #56606b !important;       /* <<< INAKTÍV FELIRAT SZÍN */
  letter-spacing: 0 !important;
  text-align: center !important;
}

/* 5) Tabonként ikon + felirat */
#myg-diary-app .myg-diary-input__tab[data-tab="food"]::before{
  background-image: url("https://mygasztro.hu/wp-content/uploads/kaloria.png") !important;
}
#myg-diary-app .myg-diary-input__tab[data-tab="food"]::after{
  content: "Étel" !important;
}

#myg-diary-app .myg-diary-input__tab[data-tab="saved-meal"]::before{
  background-image: url("https://mygasztro.hu/wp-content/uploads/etkezes.png") !important;
}
#myg-diary-app .myg-diary-input__tab[data-tab="saved-meal"]::after{
  content: "Étkezés" !important;
}

#myg-diary-app .myg-diary-input__tab[data-tab="recipe"]::before{
  background-image: url("https://mygasztro.hu/wp-content/uploads/myreceptek.png") !important;
}
#myg-diary-app .myg-diary-input__tab[data-tab="recipe"]::after{
  content: "Recept" !important;
}

#myg-diary-app .myg-diary-input__tab[data-tab="custom"]::before{
  background-image: url("https://mygasztro.hu/wp-content/uploads/egyedi.png") !important;
}
#myg-diary-app .myg-diary-input__tab[data-tab="custom"]::after{
  content: "Egyedi" !important;
}

/* 6) Hover / active press */
#myg-diary-app .myg-diary-input__tab:hover{
  transform: translateY(-1px) !important;
}

#myg-diary-app .myg-diary-input__tab:active{
  transform: translateY(1px) scale(0.985) !important;
}

/* 7) AKTÍV TAB
   Itt kapja meg ugyanazt a narancs hangsúlyt, mint a napi nézetben a kiemelések */
#myg-diary-app .myg-diary-input__tab.myg-diary-input__tab--active{
  border: 2px solid rgba(242,140,40,0.48) !important; /* <<< vastagabb, de még elegáns */
  background: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;
}

#myg-diary-app .myg-diary-input__tab.myg-diary-input__tab--active::after{
  color: #f28c28 !important;       /* <<< AKTÍV FELIRAT SZÍN */
  font-weight: 700 !important;     /* <<< AKTÍV FELIRAT VASTAGSÁG */
}

/* opcionális: aktív ikon picit élénkebb */
#myg-diary-app .myg-diary-input__tab.myg-diary-input__tab--active::before{
  opacity: 1 !important;
}

/* 8) Mobil – direkt felülírás */
@media (max-width: 520px){

  #myg-diary-app .myg-diary-input__tabs{
    gap: 8px !important;           /* <<< MOBIL TABOK KÖZTI RÉS */
    margin: 0 0 16px 0 !important;
  }

  #myg-diary-app .myg-diary-input__tab{
    height: 68px !important;       /* <<< MOBIL TAB MAGASSÁG */
    min-height: 68px !important;

    padding: 7px 4px 6px !important;
    gap: 5px !important;           /* <<< ikon és felirat közti távolság */
    border-radius: 16px !important;
  }

  #myg-diary-app .myg-diary-input__tab::before{
    width: 38px !important;        /* <<< MOBIL IKON MÉRET */
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  #myg-diary-app .myg-diary-input__tab::after{
    font-size: 13px !important;    /* <<< MOBIL FELIRAT MÉRET */
    font-weight: 600 !important;
    line-height: 1.05 !important;
    color: #56606b !important;
  }

  #myg-diary-app .myg-diary-input__tab.myg-diary-input__tab--active::after{
    color: #f28c28 !important;
    font-weight: 700 !important;
  }
}

/* 9) Extra szűk mobil */
@media (max-width: 380px){
  #myg-diary-app .myg-diary-input__tabs{
    gap: 6px !important;
  }

  #myg-diary-app .myg-diary-input__tab{
    height: 64px !important;
    min-height: 64px !important;
    padding: 6px 3px 5px !important;
    gap: 4px !important;
  }

  #myg-diary-app .myg-diary-input__tab::before{
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  #myg-diary-app .myg-diary-input__tab::after{
    font-size: 11px !important;
    font-weight: 600 !important;
  }
}

/* =========================================================
   [BLOCK A] vége
   ========================================================= */