/* ====================================================================
   01) ELREJTÉSEK (CÍMSOR + ALCÍM)
   ==================================================================== */
.myg-recipe-upload-wrapper .upload-header,
.myg-recipe-upload-wrapper .myg-upload-header,
header.entry-header {
    display: none !important;
}

/* ====================================================================
   02) FŐ WRAPPER (FEHÉR DOBOZ)
   ==================================================================== */
.myg-recipe-upload-wrapper {
    max-width: 1120px;
    margin: 2.5rem auto 4rem;
    padding: 2.75rem 3rem 3rem;
    background: #ffffff;
    border-radius: 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
}

/* ====================================================================
   03) NARANCS CSÍK ÉS SZEKCIÓK
   ==================================================================== */
.myg-form-section {
    margin-top: 3rem !important;
    clear: both !important;
}

.myg-form-section:first-of-type { margin-top: 0 !important; }

.myg-section-header, 
.myg-form-section > h2, 
.myg-form-section > h3 {
    border-bottom: 3px solid #ff8a3d !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

/* ====================================================================
   04) RECEPT NEVE + SZÁMLÁLÓ (FIXÁLVA)
   ==================================================================== */
.myg-form-group:has(input[name*="name"]), 
.myg-form-group[data-name="recipe-name"] {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

/* A számláló pozíciója - atombiztosan jobbra */
.myg-form-group span[class*="count"], 
.myg-form-group .character-counter {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background: rgba(136, 136, 136, 0.1) !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    color: #888 !important;
}

/* ====================================================================
   05) ALAPADATOK – 4 EGYFORMA MEZŐ ÉS EGYSÉGES ELRENDEZÉS
   ==================================================================== */

/* 1) A rács kényszerítése 4 egyenlő oszlopra */
.myg-basic-info .myg-form-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.1rem !important; 
    align-items: flex-start !important;
}

/* 2) A recept neve (első elem) kiterjesztése és a felirat távolsága (12px) */
.myg-basic-info .myg-form-grid > .myg-form-group:first-child {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.myg-basic-info .myg-form-grid > .myg-form-group:first-child label {
    margin-bottom: 12px !important; /* Itt a kért 12px-es távolság a névnél */
    font-weight: 600 !important;
}

/* 3) A 4 kis mező belső elrendezése (Név felül, mező alatta) */
.myg-basic-info .myg-form-grid > .myg-form-group:not(:first-child) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* 4) A 4 kis mező neveinek (label) formázása */
.myg-basic-info .myg-form-grid > .myg-form-group:not(:first-child) label {
    display: block !important;
    margin-bottom: 8px !important;
    min-height: 1.2rem !important; 
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/* 5) Beviteli mezők ALAP stílusa (nem a focus) */
.myg-basic-info .myg-form-grid .myg-form-group input,
.myg-basic-info .myg-form-grid .myg-form-group select {
    width: 100% !important;
    height: 48px !important; 
    padding: 0 12px !important;
    border-radius: 15px !important;
    /* Csak sima border-t adjunk, ne !important-tal, hogy a focus felül tudja írni! */
    border: 1px solid rgba(0, 0, 0, 0.1); 
    box-sizing: border-box !important;
}

/* ====================================================================
   06) HOZZÁVALÓK ÉS MIKROFON (TISZTÍTVA)
   ==================================================================== */
.myg-ingredient-search {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.myg-voice-btn {
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
    background: #ff8a3d !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.myg-voice-btn svg path { fill: white !important; }

/* Találati lista doboza */
.myg-ingredient-results {
    width: 100% !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    z-index: 999 !important;
}

/* ====================================================================
   07) MOBIL NÉZET
   ==================================================================== */
@media (max-width: 768px) {
    .myg-basic-info .myg-form-grid {
        grid-template-columns: 1fr !important;
    }
    .myg-recipe-upload-wrapper { padding: 1.5rem !important; }
}

/* ====================================================================
   TELJESEN GLOBÁLIS FOCUS ÁLLAPOT – MINDEN MEZŐRE ÉRVÉNYES
   ==================================================================== */

/* Ez a rész minden mezőt narancsra színez, ha belelépünk */
.myg-recipe-upload-wrapper input:focus,
.myg-recipe-upload-wrapper select:focus,
.myg-recipe-upload-wrapper textarea:focus,
.myg-form-grid input:focus,
.myg-form-grid select:focus,
input:focus, 
select:focus, 
textarea:focus {
    outline: none !important;
    border: 2px solid #ff8a3d !important; /* Kicsit vastagabb 2px-es keret a jobb láthatóságért */
    box-shadow: none !important;
    background-color: #ffffff !important;
    transition: border-color 0.2s ease-in-out !important;
}