:root {
  --color-beige: #e9e1d7;       /* picit sötétebb bézs */
  --color-turkiz: #63a8a8;      /* világosabb, frissebb türkiz */
  --color-turkiz-dark: #4f9191; /* a világoshoz passzoló közép árnyalat */
  --color-dark: #2b2b2b;        /* mély, neutrális sötétszürke */
    --font-logo: 'Dancing Script', cursive;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Montserrat', sans-serif;
}
body { font-family: var(--font-body); color: #555;}

a { color: var(--color-turkiz); text-decoration: none; transition: color 0.3s ease; }
main {overflow-x: hidden; }
.btn-primary { background-color: var(--color-turkiz); border-color: var(--color-turkiz); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--color-turkiz-dark); border-color: var(--color-turkiz-dark); }
.bg-beige { background-color: var(--color-beige) !important; }
.text-turkiz { color: var(--color-turkiz) !important; }
.logo { font-family: var(--font-logo); font-size: 2.2rem; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; }
.section-title { position: relative; margin-bottom: 4rem; text-align: center;}
.section-title::after { content: ''; display: block; width: 60px; height: 3px; background-color: var(--color-turkiz); margin: 1rem auto 0; }
.navbar { transition: all 0.4s ease; }
.navbar.scrolled { background-color: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 2px 15px rgba(0,0,0,0.05); padding-top: 0.75rem; padding-bottom: 0.75rem; }
.navbar.solid-bg { background-color: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 2px 15px rgba(0,0,0,0.05); }
.navbar-nav .nav-link { font-weight: 600; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; }
.hero { background-color: var(--color-beige); padding-top: 150px; padding-bottom: 80px; overflow: hidden; }
.hero-images-container { position: relative; min-height: 500px; }
.hero-img { position: absolute; max-width: 40%; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); animation: float 6s ease-in-out infinite; }
.hero-img-1 { top: 0; left: 10%; max-width: 50%; }
.hero-img-2 { top: 30%; right: 0; max-width: 45%; animation-delay: -2s; }
.hero-img-3 { bottom: 0; left: 30%; max-width: 35%; animation-delay: -4s; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
.filter-btn-group .btn { border-radius: 50px; margin: 0 5px 10px; font-weight: 600; }
.filter-btn-group .btn.active { background-color: var(--color-turkiz); color: white; border-color: var(--color-turkiz); }
.product-card { transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #e0e0e0; cursor: pointer; }
.product-card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }
.product-card img { height: 280px; width: 100%; object-fit: contain; padding: 1rem; }
.product-item { display: none; }
.product-item.show { display: block; animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-header { border-bottom: 1px solid #dee2e6; }
.modal-body h6 { color: var(--color-turkiz); font-weight: 700; margin-top: 1.5rem; }
.modal-footer { border-top: 1px solid #dee2e6; }
.accordion-button:not(.collapsed) { color: white; background-color: var(--color-turkiz); }
.package-card { border: 1px solid #ddd; border-radius: 0.5rem; transition: all 0.3s ease; overflow: hidden; background-color: #fff; }
.package-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.1); transform: translateY(-5px); }
.package-card .card-header { background-color: var(--color-turkiz); color: white; font-weight: 700; font-size: 1.25rem; }
.package-card .price { font-size: 2.5rem; font-weight: 700; color: var(--color-dark); }
.package-card .points { font-size: 1.1rem; color: #777; }
.featured-section { background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://i.imgur.com/vHq1Q4y.jpg'); background-size: cover; background-position: center; background-attachment: fixed; }
/* Parallax szekció szövegének jobb olvashatósága */
.featured-section h2,
.featured-section p {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.footer a { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.3s ease; }
.footer a:hover { color: var(--color-turkiz); }
.page-header { padding: 8rem 0 4rem 0; background-color: var(--color-beige); }
.post-card { border: 1px solid #e0e0e0; box-shadow: 0 5px 15px rgba(0,0,0,0.03); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.post-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.07); }
.post-card .card-img-top { height: 250px; object-fit: cover; }
.post-meta { font-size: 0.85rem; }
.widget { border: 1px solid #e0e0e0; }
.widget .list-group-item { border: none; padding-left: 0; padding-right: 0; }
.widget a { text-decoration: none; color: var(--color-dark); transition: color 0.2s; }
.widget a:hover { color: var(--color-turkiz); }
.post-header { padding-top: 120px; padding-bottom: 2rem; }
.post-content .post-body h2, .post-content .post-body h3 { margin-top: 2.5rem; margin-bottom: 1.5rem; }
.post-content .post-body blockquote { border-left: 4px solid var(--color-turkiz); padding-left: 1.5rem; font-style: italic; color: #777; background-color: #f8f9fa; }
.post-tags a { text-decoration: none; background-color: #f1f1f1; padding: 0.3rem 0.8rem; border-radius: 5px; color: #555; font-size: 0.9rem; display: inline-block; margin-bottom: 5px;}
.post-tags a:hover { background-color: #e0e0e0; }
.author-box { background-color: var(--color-beige); border-radius: 10px; }
.navbar-toggler { border: none; }
.navbar-toggler:focus { box-shadow: none; }

/* ADMIN BAR FIX */
body.admin-bar #main-nav {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar #main-nav {
        top: 46px;
    }
}

/* Oldalsáv kereső widget finomhangolása */
.widget_search .card-body {
    padding: 0.75rem; /* Kisebb padding, ha szükséges */
}

/* Ha teljesen széltől szélig akarod, akkor használd ezt: */
/*
.widget_search .card-body {
    padding: 0;
}
.widget_search .form-control,
.widget_search .btn {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}
.widget_search .form-control {
    border-top: 0;
}
.widget_search .btn {
    border-bottom: 0;
}
*/


/* =========================================================================
   EGYEDI BEJEGYZÉS OLDAL STÍLUSAI (AMI EDDIG HIÁNYZOTT)
   ========================================================================= */

.post-header {
    padding-top: 120px; /* Helyet hagy a fix menünek */
    padding-bottom: 2rem;
}

.post-meta {
    font-size: 0.9rem;
}

/* A bejegyzés törzsében lévő elemek stílusa */
.post-body h2,
.post-body h3 {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

.post-body blockquote {
    border-left: 4px solid var(--color-turkiz);
    padding-left: 1.5rem;
    font-style: italic;
    color: #777;
    background-color: #f8f9fa; /* A minta alapján egy kis háttérszín */
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Címkék stílusa */
.post-tags a {
    text-decoration: none;
    background-color: #f1f1f1;
    padding: 0.3rem 0.8rem;
    border-radius: 5px;
    color: #555;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 5px;
}

.post-tags a:hover {
    background-color: #e0e0e0;
}

/* Szerzői doboz stílusa */
.author-box {
    background-color: var(--color-beige);
    border-radius: 10px;
}

/* Hozzászólások alap stílusai */
.comment-list {
    list-style: none;
    padding-left: 0;
}
.comment-form .form-control {
    background-color: #f8f9fa;
}


/* TERMÉK MODÁL - STICKY KÉP DESKTOPON */
@media (min-width: 768px) {
    .modal-dialog-scrollable .modal-body .row {
        align-items: flex-start; /* Fontos a helyes igazításhoz */
    }
    
    .modal-body .col-md-5 {
        position: -webkit-sticky; /* Safari kompatibilitás */
        position: sticky;
        top: 20px; /* Milyen magasan "ragadjon meg" a kép a modál tetejétől */
    }
}

.navbar .language-switcher .dropdown-item img,
.navbar .dropdown-toggle img {
    /* Biztosítja, hogy a zászlók egyformák legyenek és ne torzuljanak */
    height: 15px; /* Magasságot is állítunk, hogy arányos maradjon */
    width: 20px;
    object-fit: cover;
    border-radius: 2px;
}

/* ==========================================================================
   Videó Szekció
   ========================================================================== */
.video-mockup {
  position: relative;
  max-width: 350px; /* Maximum szélesség, hogy ne nyúljon túl nagyra */
  margin: 0 auto; /* Középre igazítás */
  border: 8px solid #343a40; /* Sötét keret */
  border-radius: 20px; /* Lekerekített sarkok */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden; /* A belső videó ne lógjon ki a keretből */
  background-color: #343a40; /* Háttérszín, amíg a videó tölt */
}

.video-element {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px; /* A videó sarkai is legyenek lekerekítve */
}

/* =========================================================================
   MOBIL MENÜ HÁTTÉR JAVÍTÁSA
   ========================================================================= */

/* Csak mobil nézetben lép érvénybe (Bootstrap 'lg' töréspontja alatt) */
@media (max-width: 991.98px) {
    .navbar-collapse {
        /* Háttér és árnyék, mint a görgetett menünél, hogy egységes legyen */
        background-color: rgba(255, 255, 255, 0.98);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        
        /* Térköz, hogy ne tapadjanak a szélekre a linkek */
        padding: 1rem;
        margin-top: 1rem; /* Kis távolság a logótól */
        border-radius: 0.5rem; /* Lekerekített sarkok a szebb kinézetért */
    }

    /* Opcionális, de ajánlott: A menüpontok középre igazítása és jobb térköz a lenyitott menüben */
    .navbar-nav {
        text-align: center;
    }

    .navbar-nav .nav-item {
        margin: 0.5rem 0;
    }
}

/* =========================================================================
   PAGE PRELOADER STYLES
   ========================================================================= */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: var(--color-beige); /* A háttér a te bézs színed lesz */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.7s ease, visibility 0.7s ease; /* Finom eltűnés */
    opacity: 1;
    visibility: visible;
}

#preloader .loader {
    position: relative;
    width: 100px;
    height: 100px;
}

/* Ez lesz a pulzáló "fodrozódás" effekt */
#preloader .loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-turkiz); /* Az animáció a te türkiz színedet használja */
    border-radius: 50%;
    opacity: 0.6;
    animation: ripple 1.8s infinite ease-in-out;
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Opcionális: A logó megjelenítése középen */
#preloader .loader-logo {
    font-family: var(--font-logo);
    font-size: 2.5rem; /* A logó méretéhez igazítva */
    color: var(--color-turkiz-dark); /* Sötétebb türkiz, hogy elüssön */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; /* A fodrozódás felett legyen */
}

/* Amikor az oldal betöltött, elrejtjük a preloader-t */
body.loaded #preloader {
    opacity: 0;
    visibility: hidden;
}

/* =========================================================================
   TERMÉK TIMELINE BŐVÍTETT STÍLUSOK
   ========================================================================= */

/* A fejléc (cím, leírás) stílusai */
.timeline-header {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* A H2 címsor ugyanúgy néz ki, mint a többi section-title */
.timeline-header .section-title {
    margin-bottom: 1.5rem; /* Kisebb margó, mert közelebb van a tartalomhoz */
}

.timeline-description p:last-child {
    margin-bottom: 0;
}

/* A timeline konténer stílusai változatlanok */
.product-timeline-container {
    overflow-x: auto;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
}

.product-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    position: relative;
    counter-reset: timeline-counter;
}

.product-timeline::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 20px;
    right: 20px;
    height: 2px;
    background-color: #e9ecef;
    z-index: 1;
}

.timeline-step {
    flex: 1;
    text-align: center;
    position: relative;
    padding-top: 50px;
    min-width: 120px;
    cursor: pointer;
    z-index: 2;
}

.timeline-step .timeline-step-number {
    counter-increment: timeline-counter;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #495057;
    transition: all 0.3s ease;
}

.timeline-step .timeline-step-number::before {
    content: counter(timeline-counter);
}

.timeline-step .timeline-step-title {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
    margin-top: 10px;
    transition: color 0.3s ease;
}

/* === JAVÍTÁS: A TÉMA SZÍNEINEK HASZNÁLATA === */
.timeline-step:hover .timeline-step-number,
.timeline-step.active .timeline-step-number {
    background-color: var(--color-turkiz); /* Arany szín lecserélve türkizre */
    border-color: var(--color-turkiz);
    color: #fff;
}

.timeline-step:hover .timeline-step-title,
.timeline-step.active .timeline-step-title {
    color: var(--color-turkiz-dark); /* Sötétebb szöveg helyett sötétebb türkiz */
    font-weight: 600;
}