/* ========================================
   NYELVVÁLASZTÓ - DESKTOP ÉS MOBIL STÍLUSOK
   ======================================== */

/**
 * Nyelválasztó stílusok a Krealindo témához
 * - Desktop és mobil nyelvválasztó stílusok
 * - Kör alakú gomb, lenyíló menü, nyilakkal
 * - Reszponzív viselkedés különböző képernyőméretekre
 * - Utolsó módosítás: 2025.08.12
 */

/* ======================================
   1. DESKTOP NYELVVÁLASZTÓ STÍLUSOK
   ====================================== */

/* --------------------------------------
   1.1 Nyelvválasztó konténer
   -------------------------------------- */
.contact_language {
    position: relative;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}

/* --------------------------------------
   1.2 Nyelvválasztó alapstruktúra
   -------------------------------------- */
.language_selector {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

/* --------------------------------------
   1.3 Nyelvválasztó gomb (kör)
   -------------------------------------- */
.language_current {
    /* Kör alakú gomb méretei */
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    border-radius: 50% !important;
    
    /* Megjelenés */
    background: #a3ad6f;
    color: white;
    
    /* Flexbox középre igazítás */
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    /* Szöveg stílusok */
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    
    /* Egyéb tulajdonságok */
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    line-height: 1;
    flex-shrink: 0;
}

/* Hover állapot */
.language_current:hover {
    background: #8d9659;
}

/* --------------------------------------
   1.4 Nyelvválasztó dropdown
   -------------------------------------- */
.language_dropdown {
    /* Pozicionálás */
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    
    /* Megjelenés */
    background: white;
    min-width: 120px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
    overflow: visible;
    border: 1px solid #e0e0e0;
    
    /* Láthatóság */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 99999 !important;
}

/* --------------------------------------
   1.5 Dropdown megjelenítése interakcióra
   -------------------------------------- */
/* Hover eseményre megjelenítés */
.language_selector:hover .language_dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Keep dropdown open when hovering over it */
.language_dropdown:hover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Legacy active class support (for JS fallback) */
.language_dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* --------------------------------------
   1.6 Dropdown nyilak
   -------------------------------------- */
/* Nyíl a dropdownon (felfelé mutat a körre) */
.language_dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
    z-index: 99999;
}

/* Nyíl kerete */
.language_dropdown::after {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #e0e0e0;
    z-index: 99998;
}

/* --------------------------------------
   1.7 Dropdown linkek
   -------------------------------------- */
.language_dropdown a {
    /* Megjelenés */
    display: flex;
    align-items: center;
    padding: 12px 15px;
    
    /* Szöveg stílus */
    color: #666;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.3s ease;
    
    /* Elválasztás */
    border-bottom: 1px solid #f5f5f5;
    white-space: nowrap;
}

.language_dropdown a:last-child {
    border-bottom: none;
}

/* --------------------------------------
   1.8 Dropdown zászlók
   -------------------------------------- */
.language_dropdown a::before {
    content: '';
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-size: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Spanyol zászló */
.language_dropdown a[href*="/"]::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="3" height="2" fill="%23c60b1e"/><rect width="3" height="0.67" y="0.67" fill="%23ffc400"/></svg>');
}

/* Magyar zászló */
.language_dropdown a[href*="hu/"]::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="3" height="0.67" fill="%23ce2939"/><rect width="3" height="0.67" y="0.67" fill="%23ffffff"/><rect width="3" height="0.67" y="1.33" fill="%23477050"/></svg>');
}

/* Angol zászló */
.language_dropdown a[href*="en/"]::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"><rect width="60" height="30" fill="%23012169"/><g stroke="%23fff"><path stroke-width="6" d="m0,0 60,30m0-30L0,30"/><path stroke-width="4" d="m0,0 60,30m0-30L0,30" stroke="%23C8102E"/></g><path stroke="%23fff" stroke-width="10" d="M30,0v30M0,15H60"/><path stroke="%23C8102E" stroke-width="6" d="M30,0v30M0,15H60"/></svg>');
}

/* --------------------------------------
   1.9 Dropdown hover és aktív állapot
   -------------------------------------- */
.language_dropdown a:hover {
    background-color: #f8f8f8;
    color: #a3ad6f;
}

.language_dropdown a.current {
    background-color: #a3ad6f;
    color: white;
}

/* ======================================
   2. MOBIL NYELVVÁLASZTÓ STÍLUSOK
   ====================================== */

/* --------------------------------------
   2.1 Mobil nyelvválasztó konténer
   -------------------------------------- */
.mobile_language_wrapper {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
}

/* --------------------------------------
   2.2 Mobil nyelvválasztó gomb (kör)
   -------------------------------------- */
.mobile_language_wrapper .language_current {
    /* Kör alakú gomb méretei */
    width: 40px !important;               /* 35px-ről növelve */
    height: 40px !important;              /* 35px-ről növelve */
    min-width: 40px !important;           /* 35px-ről növelve */
    min-height: 40px !important;          /* 35px-ről növelve */
    max-width: 40px !important;           /* 35px-ről növelve */
    max-height: 40px !important;          /* 35px-ről növelve */
    border-radius: 50% !important;
    
    /* Megjelenés */
    background-color: #a3ad6f !important;
    color: white !important;
    
    /* Flexbox középre igazítás */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Szöveg stílusok */
    font-size: 13px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    
    /* Egyéb tulajdonságok */
    border: none !important;
    cursor: pointer !important;
}

/* --------------------------------------
   2.3 Mobil nyelvválasztó dropdown
   -------------------------------------- */
.mobile_language_wrapper .language_dropdown {
    /* Pozicionálás */
    position: absolute !important;
    top: calc(100% + 5px) !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    
    /* Megjelenés */
    min-width: 120px !important;
    background: white !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    border: 1px solid #e0e0e0 !important;
    
    /* Láthatóság */
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
}

/* --------------------------------------
   2.4 Mobil dropdown nyilak
   -------------------------------------- */
/* Nyíl a dropdownon (felfelé mutat a körre) */
.mobile_language_wrapper .language_dropdown::before {
    content: '' !important;
    position: absolute !important;
    top: -8px !important;
    right: 15px !important;
    left: auto !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-bottom: 8px solid white !important;
    z-index: 99999 !important;
}

/* Nyíl kerete */
.mobile_language_wrapper .language_dropdown::after {
    content: '' !important;
    position: absolute !important;
    top: -9px !important;
    right: 14px !important;
    left: auto !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-bottom: 9px solid #e0e0e0 !important;
    z-index: 99998 !important;
}

/* --------------------------------------
   2.5 Mobil dropdown megjelenítése
   -------------------------------------- */
.mobile_language_wrapper .language_selector:hover .language_dropdown,
.mobile_language_wrapper .language_dropdown.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* --------------------------------------
   2.6 Mobil dropdown linkek
   -------------------------------------- */
.mobile_language_wrapper .language_dropdown a {
    /* Megjelenés */
    display: flex !important;
    align-items: center !important;
    padding: 10px 15px !important;
    
    /* Szöveg stílus */
    color: #666 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    
    /* Elválasztás */
    border-bottom: 1px solid #f5f5f5 !important;
}

.mobile_language_wrapper .language_dropdown a:last-child {
    border-bottom: none !important;
}

/* --------------------------------------
   2.7 Mobil dropdown zászlók
   -------------------------------------- */
.mobile_language_wrapper .language_dropdown a::before {
    content: '' !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    background-size: cover !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

/* Zászlók háttérképei ugyanazok, mint a desktop verzióban */

/* --------------------------------------
   2.8 Mobil dropdown hover és aktív állapot
   -------------------------------------- */
.mobile_language_wrapper .language_dropdown a:hover {
    background-color: #f8f8f8 !important;
    color: #a3ad6f !important;
}

.mobile_language_wrapper .language_dropdown a.current {
    background-color: #a3ad6f !important;
    color: white !important;
}

/* ======================================
   3. RESZPONZÍV MÓDOSÍTÁSOK
   ====================================== */

/* --------------------------------------
   3.1 Tablet méretekre
   -------------------------------------- */
@media (max-width: 1023px) {
    .language_current {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
        max-width: 45px !important;
        max-height: 45px !important;
        font-size: 11px !important;
    }
    
    .language_dropdown {
        min-width: 110px !important;
    }
    
    .language_dropdown a {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
}

/* --------------------------------------
   3.2 Mobil méretekre
   -------------------------------------- */
@media (max-width: 767px) {
    /* A .mobile_language_wrapper stílusai már tartalmazzák a mobilnézet beállításait */
}

/* --------------------------------------
   3.3 Kis képernyős mobil
   -------------------------------------- */
@media (max-width: 480px) {
    .mobile_language_wrapper .language_current {
        width: 36px !important;           /* 30px-ről növelve */
        height: 36px !important;          /* 30px-ről növelve */
        min-width: 36px !important;       /* 30px-ről növelve */
        min-height: 36px !important;      /* 30px-ről növelve */
        max-width: 36px !important;       /* 30px-ről növelve */
        max-height: 36px !important;      /* 30px-ről növelve */
        font-size: 12px !important;       /* 10px-ről növelve */
    }
    
    .mobile_language_wrapper .language_dropdown {
        min-width: 110px !important;
    }
    
    .mobile_language_wrapper .language_dropdown a {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    .mobile_language_wrapper .language_dropdown a::before {
        width: 16px !important;
        height: 16px !important;
        margin-right: 6px !important;
    }
}

/* ======================================
   4. EGYÉB KISEGÍTŐ STÍLUSOK
   ====================================== */

/* Flexbox helyesbítés */
.columns_fluid .contact_language,
.columns_wrap .contact_language {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
}

/* Régi nyelvválasztó elrejtése */
.menu_main_language {
    display: none !important;
}

/* ======================================
   5. TOP PANEL MIDDLE MAGASSÁG CSÖKKENTÉSE
   ====================================== */

/* Top panel middle fix magasság 150px-re */
.top_panel_style_2 .top_panel_middle {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    overflow: visible !important;
}

/* Logo margók csökkentése */
.top_panel_style_2 .top_panel_middle .logo {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}

/* Content wrap padding csökkentése */
.top_panel_style_2 .top_panel_middle .content_wrap {
    padding-top: 0.5em !important;
    padding-bottom: 0.5em !important;
}

/* Contact field elemek igazítása */
.top_panel_style_2 .top_panel_middle .contact_field {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Logo kép méret visszaállítása eredeti méretre */
.top_panel_style_2 .top_panel_middle .logo img.logo_main {
    max-height: 100px !important;
    width: auto !important;
    height: auto !important;
}

/* Columns wrap vertikális középre igazítás */
.top_panel_style_2 .top_panel_middle .columns_wrap {
    align-items: center !important;
    height: 100% !important;
}

/* Logo konténer igazítása */
.top_panel_style_2 .top_panel_middle .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

/* Logo link igazítása */
.top_panel_style_2 .top_panel_middle .logo a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

/* ======================================
   6. CONTACT ICON MARGIN BEÁLLÍTÁS
   ====================================== */

/* Contact icon margin-left beállítása */
span.contact_icon {
    margin-left: 10px !important;
}

/* ======================================
   7. CONTACT PHONE LINK STÍLUSOK
   ====================================== */

/* Contact phone link margin-left és szövegméret beállítása */
.top_panel_style_2 .contact_label.contact_phone > a,
.top_panel_middle .contact_label.contact_phone > a {
    margin-left: 10px !important;
    font-size: 1.2em !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

/* Contact label konténer beállítása, hogy a nagyobb szöveg elférjen */
.top_panel_style_2 .contact_label.contact_phone,
.top_panel_middle .contact_label.contact_phone {
    min-width: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
}

/* ======================================
   8. DROPDOWN LÁTHATÓSÁG JAVÍTÁSA
   ====================================== */

/* Szülő konténerek overflow beállítása, hogy a dropdown látható legyen */
.top_panel_style_2 .top_panel_middle .content_wrap,
.top_panel_style_2 .top_panel_middle .columns_wrap,
.top_panel_style_2 .top_panel_middle .contact_language,
.top_panel_style_2 .top_panel_middle .language_selector {
    overflow: visible !important;
}

/* Contact field konténer overflow beállítása */
.top_panel_style_2 .top_panel_middle .contact_field.contact_language {
    overflow: visible !important;
}

/* Z-index beállítás a dropdown láthatóságához */
.top_panel_style_2 .top_panel_middle .contact_language,
.top_panel_style_2 .top_panel_middle .language_selector {
    position: relative !important;
    z-index: 100000 !important;
}

/* Column konténer overflow beállítása */
.top_panel_style_2 .top_panel_middle .column-1_5.contact_language {
    overflow: visible !important;
}

/* ======================================
   9. ABOUT US ELSŐ VERZIÓ - HÁTTÉRSZÍN
   ====================================== */

/* Az első About Us szekció háttérképe eltávolítva, háttérszín beállítva */
.about-us-first {
    background-image: none !important;
    background-color: #F3F2F0 !important;
}

/* ======================================
   10. ABOUT US FORDÍTOTT VERZIÓ LAYOUT
   ====================================== */

/* Biztosítja, hogy a fordított About Us szekció oszlopai oldalról oldalra jelenjenek meg desktop nézetben */
@media (min-width: 480px) {
    .about-us-reversed .columns_wrap.sc_columns.columns_nofluid.sc_columns_count_9 > .column-4_9,
    .about-us-reversed .columns_wrap.sc_columns.columns_nofluid.sc_columns_count_9 > .column-5_9 {
        display: inline-block !important;
        vertical-align: top !important;
    }
    
    .about-us-reversed .columns_wrap.sc_columns.columns_nofluid.sc_columns_count_9 > .column-4_9 {
        width: 44.44444444% !important;
    }
    
    .about-us-reversed .columns_wrap.sc_columns.columns_nofluid.sc_columns_count_9 > .column-5_9 {
        width: 55.55555556% !important;
    }
}

/* ======================================
   11. KEZDŐLAP – 3 SZOLGÁLTATÁS DOBOZ (CÍM / SZÖVEG / GOMB TÁVOLSÁGOK)
   ====================================== */

/* Cím alatti rés csökkentése (böngészőben beállított érték) */
.sc_home-param-type-a .sc_services_item_title {
    margin-bottom: 0 !important;
}

/* Szöveg közelebb a címhez, távolabb a gombtól */
.sc_home-param-type-a .sc_services_item_description p {
    margin-top: 0.15em !important;
    margin-bottom: 1.25rem !important;
}

.sc_home-param-type-a .sc_services_item_description .sc_button {
    margin-top: 0.75rem !important;
}