/* --------- ÁLTALÁNOS --------- */
body {
    margin: 0;
    padding: 0;
    font-family: "Trebuchet MS", sans-serif;
    background: #0e0e0e;
    color: #e3e3e3;
}

h1, h2, h3 {
    color: #f0d97a;
    text-shadow: 0 0 8px rgba(255, 215, 100, 0.4);
}

a {
    text-decoration: none;
    color: inherit;
}

/* --------- HEADER / LOGO + MENÜ --------- */
header {
    background: linear-gradient(180deg, #151515, #0a0a0a);
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid #2a2a2a;
}

.logo img {
    width: 180px;
    filter: drop-shadow(0 0 10px #9c7d1f);
}

/* MENÜ */
.main-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-menu ul li {
    display: inline-block;
    margin: 0 20px;
}

.main-menu ul li a {
    color: #f0d97a;
    font-size: 18px;
    text-shadow: 0 0 6px rgba(255, 215, 100, 0.3);
    transition: 0.2s;
}

/* --------- FŐOLDAL --------- */

/* **ITT VOLT A HIBA → display:flex SZÉTBASZTA A LAYOUTOT** */
main {
    display: block !important;
    width: 100% !important;
    margin-top: 40px !important;
}

/* --------- FORMA ELEMEK --------- */
.form-container {
    width: 400px;
    margin: 80px auto;
    padding: 30px;
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(255, 215, 100, 0.1);
}

.captcha-box {
    display: inline-block;
    padding: 8px 15px;
    background: #222;
    border-radius: 6px;
    letter-spacing: 3px;
    font-weight: bold;
    margin-bottom: 8px;
}

.msg {
    background: #2d2d2d;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    color: #ff8080;
    text-align: center;
    border: 1px solid #aa3333;
}

/* --------- METIN2 MODERN FEJLÉC --------- */

.mt2-header {
    position: relative;
    padding: 80px 0 50px;
    background: radial-gradient(circle at 50% 0%, #4a1c00 0%, #050505 60%, #000 100%);
}

.mt2-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.mt2-logo img {
    width: 260px;
    max-width: 80%;
    margin: 0 auto 22px auto;
    display: block;
    filter: drop-shadow(0 0 18px rgba(255, 180, 90, 0.9));
}

/* NAV PANEL */
.mt2-nav-panel {
    max-width: 1150px;
    margin: 0 auto;
    padding: 16px 28px 18px 28px;
    border-radius: 40px;
    background: radial-gradient(circle at 50% 0%, #281306 0%, #100704 65%, #050203 100%);
    border: 2px solid #d49335;
    box-shadow:
        0 0 22px rgba(0,0,0,0.9),
        0 0 18px rgba(255,175,70,0.55),
        inset 0 0 16px rgba(0,0,0,0.85);
}

.mt2-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.mt2-nav-left,
.mt2-nav-right {
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* MENÜ */
.mt2-nav-left li a {
    position: relative;
    font-size: 18px;
    color: #f7d89b;
    text-shadow: 0 0 8px rgba(255, 205, 120, 0.7);
    padding: 4px 4px;
}

.mt2-nav-left li.active a::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 26px;
    height: 3px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #ffeb9a, #ffbb3e);
}

/* GOMBOK */
.mt2-btn {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}

.mt2-btn-gold {
    background: linear-gradient(135deg, #ffdf86, #ffb437);
    color: #3b2206 !important;
}

.mt2-btn-dark {
    background: linear-gradient(135deg, #3b3b3b, #242424);
    color: #f3f3f3 !important;
}

.mt2-btn-red {
    background: linear-gradient(135deg, #b02424, #6f0d0d);
    color: #fff !important;
}

/* --------- DOBOSZOK --------- */

.mt2-box {
    max-width: 650px !important;
    margin: 40px auto !important;
    padding: 45px 45px 55px 45px;
    border-radius: 28px;

    background: radial-gradient(circle at 50% 0%, #241204 0%, #120802 70%, #080402 100%);
    border: 2px solid #d49335;

    box-shadow:
        0 0 25px rgba(255,180,70,0.45),
        inset 0 0 25px rgba(0,0,0,0.85),
        inset 0 0 60px rgba(0,0,0,0.85);

    /* **ITT A FIX, AMI MEGSZÜNTETI A SZÉTCSÚSZÁST** */
    display: block !important;
    float: none !important;
}

.mt2-box-inner h1 {
    font-size: 42px;
    font-weight: 700;
    color: #ffe6a7;
}

.mt2-box-glow {
    margin: 25px auto 0 auto;
    height: 3px;
    width: 70%;
    border-radius: 99px;
    background: linear-gradient(90deg,
        rgba(0,0,0,0),
        #ffde82,
        #ffb53a,
        #ffde82,
        rgba(0,0,0,0));
}

/* FOOOOOOOOOOTER FIX (NEM MÁSZIK FEL MELLÉ) */
footer {
    width: 100% !important;
    display: block !important;
    clear: both !important;
}
/* ======== METIN2 ARANY–BARNA KERET (PROFIL OLDAL) ======== */

.mt2-frame {
    max-width: 1100px;
    margin: 40px auto;
    padding: 35px 40px;
    border-radius: 30px;

    background: radial-gradient(circle at 50% 0%, #281306 0%, #120802 70%, #080402 100%);
    border: 2px solid #d49335;

    box-shadow:
        0 0 25px rgba(255,180,70,0.45),
        inset 0 0 25px rgba(0,0,0,0.85),
        inset 0 0 60px rgba(0,0,0,0.85);
}

/* Alsó fénycsík */
.mt2-frame-glow {
    margin: 25px auto 0 auto;
    height: 3px;
    width: 70%;
    border-radius: 99px;

    background: linear-gradient(90deg,
        rgba(0,0,0,0),
        #ffde82,
        #ffb53a,
        #ffde82,
        rgba(0,0,0,0)
    );

    box-shadow:
        0 0 14px rgba(255,215,130,1),
        0 0 25px rgba(255,180,70,0.9);
}
/* ===== METIN2 ARANY–BARNA KERET A STORY OLDALRA ===== */

.mt2-frame {
    width: 700px;
    max-width: 90%;
    margin: 40px auto;
    padding: 45px 45px 55px 45px;
    border-radius: 28px;

    background: radial-gradient(circle at 50% 0%, #281306 0%, #120802 70%, #080402 100%);
    border: 2px solid #d49335;

    box-shadow:
        0 0 25px rgba(255,180,70,0.45),
        inset 0 0 25px rgba(0,0,0,0.85),
        inset 0 0 60px rgba(0,0,0,0.85);
}

/* Alsó fénycsík */
.mt2-frame-glow {
    margin: 25px auto 0 auto;
    height: 3px;
    width: 70%;
    border-radius: 99px;

    background: linear-gradient(90deg,
        rgba(0,0,0,0),
        #ffde82,
        #ffb53a,
        #ffde82,
        rgba(0,0,0,0));
    box-shadow:
        0 0 14px rgba(255,215,130,1),
        0 0 25px rgba(255,180,70,0.9);
}
.gold-frame {
    max-width: 900px;
    margin: 40px auto;
    border: 1px solid #d4a33a;
    border-radius: 18px;
    box-shadow:
        0 0 18px rgba(255,190,80,0.4),
        0 0 24px rgba(255,150,50,0.3);
    background: #0d0d0d;
    padding: 30px 20px;
}
#welcomePopup {
    position: fixed;
    top: 25px;
    right: -400px;
    background: linear-gradient(90deg, #6fff8a, #d4ffb8);
    color: #000;
    padding: 15px 25px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 0 20px rgba(111,255,138,0.5);
    z-index: 9999;
    transition: right 0.6s ease;
    border: 2px solid #0f0;
}
.mt2-social {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 12px;
}

.mt2-social img {
    height: 1.8em;          /* automatikusan igazodik a menü magasságához */
    width: auto;            /* arányosan méretezett */
    object-fit: contain;    /* nem torzul */
    filter: drop-shadow(0 0 6px #d79235);
    transition: 0.2s ease-in-out;
}

.mt2-social img:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 10px #ffcc66);
    cursor: pointer;
}


/* === KAPCSOLÓ GOMB STÍLUS === */
.theme-toggle {
    border: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    background: #222;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}

.theme-toggle i {
    font-size: 16px;
}

.theme-toggle:hover {
    background: #333;
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.theme-toggle.is-on {
    background: linear-gradient(135deg, #d32f2f, #2e7d32);
    box-shadow: 0 0 12px rgba(211, 47, 47, 0.7);
}

/* ===========================
   KARÁCSONYI TÉMA – ALAP
   body.theme-xmas AKTIVÁLJA
=========================== */

body.theme-xmas {
    /* Sötét, de karácsonyi hangulatú háttér */
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.15) 0, transparent 55%),
        radial-gradient(circle at bottom, rgba(255,0,0,0.15) 0, transparent 55%),
        #050812;
    color: #f5f5f5;
}

/* Fő konténerek, dobozok */
body.theme-xmas .card,
body.theme-xmas .panel,
body.theme-xmas .box,
body.theme-xmas .content-wrapper {
    background: rgba(10, 10, 15, 0.95);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.85);
}

/* NAVBAR / HEADER példák – igazítsd a saját class-okhoz */
body.theme-xmas header,
body.theme-xmas .navbar,
body.theme-xmas .topbar {
    background: linear-gradient(135deg, #8b0000, #0b3d24);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Linkek */
body.theme-xmas a {
    color: #ffdf7e;
}

body.theme-xmas a:hover {
    color: #ffe8a7;
    text-shadow: 0 0 7px rgba(255, 223, 126, 0.8);
}

/* Gombok */
body.theme-xmas .btn,
body.theme-xmas button,
body.theme-xmas input[type="submit"] {
    background: linear-gradient(135deg, #d32f2f, #2e7d32);
    border: none;
    color: #fff;
    box-shadow: 0 0 10px rgba(211, 47, 47, 0.7);
}

body.theme-xmas .btn:hover,
body.theme-xmas button:hover,
body.theme-xmas input[type="submit"]:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

/* Inputok */
body.theme-xmas input,
body.theme-xmas select,
body.theme-xmas textarea {
    background: rgba(8, 8, 14, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Karácsonyi “fényfüzér” a header tetején */
body.theme-xmas .xmas-lights {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 30px;
    pointer-events: none;
    background-image:
        radial-gradient(circle, #ff5252 3px, transparent 4px),
        radial-gradient(circle, #ffeb3b 3px, transparent 4px),
        radial-gradient(circle, #4caf50 3px, transparent 4px),
        radial-gradient(circle, #29b6f6 3px, transparent 4px);
    background-size: 40px 30px;
    background-position: 0 15px, 10px 15px, 20px 15px, 30px 15px;
    animation: xmasLightsBlink 1.6s infinite alternate;
    opacity: 0.9;
}

/* Ha headered van .site-header class-szal pl., adj neki relative-et */
.site-header,
header,
.navbar {
    position: relative;
}

/* Villogás animáció */
@keyframes xmasLightsBlink {
    0% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* Egyszerű hó animáció (CSS only, enyhe) */
body.theme-xmas::before,
body.theme-xmas::after {
    content: "";
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    background-image:
        radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 20% 40%, rgba(255,255,255,0.6), transparent),
        radial-gradient(3px 3px at 30% 10%, rgba(255,255,255,0.7), transparent),
        radial-gradient(3px 3px at 80% 20%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 50% 90%, rgba(255,255,255,0.7), transparent),
        radial-gradient(3px 3px at 90% 80%, rgba(255,255,255,0.9), transparent);
    animation: snowFall 16s linear infinite;
    z-index: 1;
    mix-blend-mode: screen;
}

body.theme-xmas::after {
    opacity: 0.6;
    animation-duration: 26s;
}

/* Hó “hullás” animáció */
@keyframes snowFall {
    0% {
        transform: translateY(-10%);
    }
    100% {
        transform: translateY(10%);
    }
}

/* Biztosítsuk, hogy a tartalom a hó fölé kerüljön */
body.theme-xmas #page,
body.theme-xmas .wrapper,
body.theme-xmas main {
    position: relative;
    z-index: 2;
}