/* ==========================================================================
   SZOLGÁLTATÁSOK SZEKCIÓ (A global.css-be illesztve vagy külön fáljként)
   ========================================================================== */

/* Fő szekció konténer - Átveszi a global.css finom krémszínű hátterét */
.services-section {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* 
   Elrendezés konténer - Rugalmas sor elrendezés. 
   Ha az elemek nem férnek el egymás mellett, automatikusan új sorba törnek.
*/
.services-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    gap: 40px;
}

/* Bal oldali lista navigáció */
.services-list {
    flex-grow: 1;
    flex-basis: 280px; /* Az ideális szélesség, ami alatt már törni fog */
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.services-list li {
    width: 100%;
}

/* Szolgáltatás gombok - Öröklik a global.css letisztult formáját */
.service-btn {
    width: 100%;
    text-align: left;
    padding: 18px 24px;
    background-color: #ffffff;
    border: 1px solid #ddd5c8; /* Harmonizál a global form elemeivel */
    border-radius: 14px; /* Illeszkedik a kártyák és formok lekerekítéséhez */
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f1f1f;
    transition: all 0.25s ease;
}

/* Egérmutató hatás asztali gépeken */
@media (hover: hover) {
    .service-btn:hover {
        background-color: #faf7f2;
        border-color: #3d7d3e; /* A global.css fő zöld színe */
        color: #3d7d3e;
        transform: translateY(-2px); /* Átvéve a global gomb animációkból */
    }
}

/* Aktív, kiválasztott szolgáltatás gomb stílusa */
.service-btn.active {
    background: #3d7d3e; /* Global elsődleges zöld */
    border-color: #3d7d3e;
    color: #ffffff;
}

/* Jobb oldali részletes tartalom panel - Átveszi a termékkártyák stílusát */
.services-details-wrapper {
    flex-grow: 1.6;
    flex-basis: 450px; /* Ha a képernyő keskenyebb, ez a blokk új sorba ugrik */
    padding: 35px;
    background-color: #ffffff;
    border-radius: 20px; /* Megegyezik a .product-card lekerekítésével */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Global kártya árnyék */
    transition: opacity 0.4s ease;
}

/* Panelek alaphelyzetben rejtve a JavaScript váltáshoz */
.service-detail-panel {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Aktív panel megjelenítése */
.service-detail-panel.active {
    display: block;
    opacity: 1;
}

/* Képtároló - Illeszkedik a global.css termékkép logikájához */
.service-detail-panel .image-container {
    width: 100%;
    height: 280px;
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 25px;
    box-shadow: 0 8px 12px rgba(18, 16, 13, 0.08);
}

.service-detail-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Szolgáltatás címe és leírása a panelen belül */
.service-detail-panel h3 {
    font-size: 1.8rem;
    color: #1f1f1f;
    margin-bottom: 15px;
}

.service-detail-panel p {
    font-size: 1.15rem;
    line-height: 1.6; /* Kényelmes, olvasható sorköz a részletes leírásnak */
    color: #555;
}