:root {
    --bg-color: #0b0f19; /* 0b0f19; */
    --card-bg: #111827;
    --text-color: #f3f4f6;
    --text-muted: #9ca3af;
	--accent-color: #8db249;
	--accent-hover: #739439;
    --border-color: #1f2937;
    --danger-color: #ef4444;
    --success-color: #22c55e;
	--holder-color: #4b5563;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.container { width: 100%; max-width: 580px; text-align: center; }
.logo-link { text-decoration: none; color: inherit; display: inline-block; }

.logo {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -2px;
}
.logo span { color: var(--accent-color); }
.tagline { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 2rem; }

.box {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
	margin: 8px 0;
}

.tool-selector, .lang-selector, .auth-bar {
	margin: 4px;
}

.form-group, .result-group {
    display: flex;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    padding: 6px;
    border-radius: 12px;
    transition: border-color 0.2s;
}
.form-group:focus-within { border-color: var(--accent-color); }

input[type="url"], input[type="text"] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-size: 1rem;
    padding: 12px 16px;
}
input::placeholder { color: var(--holder-color); }

button {
    background-color: var(--accent-color);
    color: white;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 0 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
button:hover { background-color: var(--accent-hover); }

.alert {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.95rem;
    text-align: left;
}
.alert-danger { background-color: rgba(239, 68, 68, 0.1); border: 1px solid var(--danger-color); color: var(--danger-color); }
.alert-success { background-color: rgba(34, 197, 94, 0.1); border: 1px solid var(--success-color); color: var(--success-color); }
	
.stats-panel { margin-top: 24px; border-top: 1px solid var(--border-color); padding-top: 20px; text-align: left; }
.stat-item { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 0.95rem; }
.stat-label { color: var(--text-muted); }
.stat-value { font-weight: 600; }
.truncate { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.btn-secondary {
    display: inline-block;
    margin-top: 20px;
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
}
.btn-secondary:hover { text-decoration: underline; }
.footer { margin-top: 3rem; font-size: 0.85rem; color: var(--text-muted); }

@media (max-width: 480px) {
    .form-group, .result-group { flex-direction: column; background: transparent; border: none; padding: 0; }
    input { background: rgba(255,255,255,0.02); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 8px; padding: 14px; }
    button { padding: 14px; border-radius: 8px; }
    .truncate { max-width: 180px; }
}

.turnstile-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    min-height: 65px; /* Megakadályozza az oldal ugrálását betöltődéskor */
}

.lang-selector, .tool-selector {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.lang-selector a, .tool-selector a {
    color: var(--text-muted);
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center; /* Függőlegesen középre zárja a zászlót és a szöveget */
    gap: 8px; /* Távolság a zászló és a felirat között */
}

.lang-selector a:hover, .tool-selector a:hover {
    color: var(--text-color);
    border-color: var(--holder-color);
}

.lang-selector a.active, .tool-selector a.active {
    background-color: rgba(34, 197, 94, 0.15);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* ÚJ: Fix méret és finom lekerekítés a kis SVG zászlóknak */
.flag-icon {
    width: 18px;
    height: 13.5px; /* Megtartja a 4x3-as képarányt */
    border-radius: 2px;
    object-fit: cover;
    display: inline-block;
}

.lang-selector .fi {
    width: 18px;
    height: 13.5px;
    border-radius: 2px;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.2); /* Egy minimális keret, hogy a fehér sávok elüssenek a sötét háttértől */
    display: inline-block;
}

/* ==========================================================================
   ONLINE NÉVJEGYKÁRTYA FORM (ECARD) SAJÁT STÍLUSAI
   ========================================================================== */
.ecard-group {
    margin-bottom: 15px;
}

/* Az ecard alapértelmezett input mezői */
.ecard-input {
    width: 100%;
    padding: 14px 16px;
    background-color: #1e293b;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: #ffffff;
    font-size: 1rem;
    box-sizing: border-box;
    display: block;
    outline: none;
    transition: border-color 0.2s;
}
.ecard-input:focus {
    border-color: var(--accent-color);
}

/* Egyedi Link/Slug tároló */
.ecard-slug-container {
    margin-bottom: 20px;
}
.ecard-slug-box {
    display: flex;
    align-items: center;
    background-color: #1e293b;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding-left: 14px;
    box-sizing: border-box;
    width: 100%;
}
.ecard-slug-box input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 14px 14px 14px 4px !important;
    color: #ffffff;
    font-size: 1rem;
}

/* Közösségi média konténer csoport */
.ecard-social-box {
    background: rgba(0, 0, 0, 0.15);
    padding: 20px;
    border-radius: 10px;
    border: 1px dashed var(--border-color);
    margin-bottom: 20px;
}

/* Közösségi média belső kisebb inputjai */
.ecard-input-social {
    width: 100%;
    padding: 11px 14px;
    background-color: #1e293b;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.9rem;
    box-sizing: border-box;
    display: block;
    margin-bottom: 10px;
    outline: none;
    transition: border-color 0.2s;
}
.ecard-input-social:last-child {
    margin-bottom: 0;
}
.ecard-input-social:focus {
    border-color: var(--accent-color);
}

/* Nagy zöld gomb az ecard számára */
.ecard-btn {
    width: 100%;
    background-color: #84cc16;
    color: #1e3a8a;
    border: none;
    padding: 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 700;
    transition: opacity 0.2s, background-color 0.2s;
    display: block;
    white-space: nowrap;
}
.ecard-btn:hover {
    background-color: #a3e635;
}

.btn-submit-full {
    width: 100%;
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600; /* Ugyanaz a súly, mint a shorten gombnál */
    transition: background 0.2s;
    display: block;
    white-space: nowrap;
    text-align: center;
}

.btn-submit-full:hover {
    background-color: var(--accent-hover); /* Sötétebb zöld hover állapot */
}

/* Közösségi ikonok finomhangolása a labelen belül */
.ecard-social-label i {
    color: var(--text-muted); /* Alapból szürke, mint a szöveg */
    font-size: 1.05rem;       /* Optimális ikonméret */
    margin-right: 8px;        /* Távolság az ikon és a felirat között */
    display: inline-block;
    vertical-align: middle;
}

/* Ha a beviteli mező fókuszba kerül, az ikon is kapja meg az egyedi zöld kiemelést */
.ecard-social-field:focus-within i {
    color: var(--accent-color);
    transition: color 0.2s;
}

/* ==========================================================================
   NYILVÁNOS NÉVJEGYKÁRTYA PROFIL STÍLUSAI
   ========================================================================== */
.vcard-profile {
    padding: 10px 5px;
    text-align: center;
}

/* Kör alakú profilkép egyedi szegéllyel */
.vcard-avatar-wrapper {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background-color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vcard-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Név és beosztás */
.vcard-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.vcard-title {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    font-weight: 400;
}

/* Számláló badge */
.vcard-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #64748b;
    background: rgba(255, 255, 255, 0.03);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    margin-bottom: 30px;
}

/* Link gombok listája (egymás alatt, jól koppintható méretben) */
.vcard-links-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    margin: 0 auto;
}

/* Egyedi közösségi gomb stílus */
.vcard-link-btn {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background-color: #1e293b;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    text-decoration: none !important;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    text-align: left;
}

/* Ikonok formázása a gombon belül */
.vcard-link-btn i {
    font-size: 1.25rem;
    margin-right: 14px;
    color: var(--text-muted);
    transition: color 0.2s;
    display: inline-flex;
}

/* Hover állapot: a gomb kerete és az ikon felveszi a zöld arculati színt */
.vcard-link-btn:hover {
    border-color: var(--accent-color);
    background-color: rgba(141, 178, 73, 0.05); /* Nagyon finom zöld háttér villanás */
    transform: translateY(-1px); /* Minimális lebegő effekt */
}

.vcard-link-btn:hover i {
    color: var(--accent-color);
}

/* ==========================================
   MOBILBARÁT (RESPONSIVE) FINOMÍTÁSOK
   ========================================== */

@media screen and (max-width: 768px) {
    /* 1. Fő konténer bélése, hogy ne ragadjon a képernyő széléhez */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    /* 2. Az űrlapok (Shorten / Ecard) befogadó dobozai */
    form, .form-container, .tool-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    /* 3. Beviteli mezők (Inputok, Textarea-k, Select-ek) */
    input[type="text"], 
    input[type="url"], 
    input[type="email"], 
    input[type="password"], 
    select, 
    textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px !important; /* Vastagabb, ujjal könnyebben bökhető */
        font-size: 16px !important; /* iOS automatikus zoom letiltása */
        margin-bottom: 12px !important;
    }

    /* 4. Gombok méretezése mobilon */
    button, .btn-primary, .btn-secondary {
        width: 100% !important; /* Mobilon teljes szélességűek lesznek a gombok */
        padding: 14px !important;
        font-size: 1rem !important;
        box-sizing: border-box !important;
        display: block !important;
        text-align: center;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }

    /* 5. Eszközválasztó gombok (Shorten / Ecard) egymás alá rendezése */
    /* Mivel a layout.php-ban ezek egymás mellett vannak, mobilon jobb egymás alatt */
    .tool-selector, div[style*="display: flex"] {
        display: flex !important;
        flex-direction: column !important; /* Egymás alá rakja őket */
        gap: 10px !important;
        width: 100% !important;
    }

    /* 6. Cloudflare Turnstile középre igazítása és túlfolyás gátlása */
    .cf-turnstile, .email-tw-container, div[id^="tw-container-"] {
        max-width: 100% !important;
        overflow-x: auto !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* 7. Nyelvválasztó (zászló ikonok) elrendezése */
    .lang-selector {
        justify-content: center !important;
        margin-bottom: 20px !important;
    }

    /* 8. Logo kép átméretezése, ha túl nagy lenne */
    .logo-img {
        max-width: 300px !important;
        height: auto !important;
    }
	    
    /* ... (a korábbi szabályok maradhatnak, de ezt mindenképp add hozzá vagy írd felül) ... */

    /* 1. A linkrövidítő beviteli sora (ahol az input és a gomb van) */
    /* Reszponzívvá tesszük, hogy mobilon egymás alá ugorjanak, ne egymás mellett nyomorogjanak */
    .shorten-form-row, 
    form[action*="shorten"] div,
    .container div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 12px !important;
    }

    /* 2. Kifejezetten a hosszú URL beviteli mező */
    input[name="longurl"],
    input[type="url"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important; /* Megakadályozzuk, hogy bármi összenyomhassa */
        display: block !important;
        font-size: 16px !important; /* iOS zoom fix */
        padding: 14px 12px !important;
        box-sizing: border-box !important;
    }

    /* 3. A rövidítő gomb az input alatt */
    input[name="longurl"] + button,
    form[action*="shorten"] button {
        width: 100% !important;
        margin-left: 0 !important; /* Ha volt bal oldali margó az asztali nézet miatt */
        margin-top: 5px !important;
        padding: 14px !important;
        display: block !important;
    }
	
}

.login-btn {
	display: inline-flex;
	align-items: center;
	background: #fff;
	color: #1f2937;
	padding: 8px 12px;
	border-radius: 6px;
	text-decoration: none !important;
	font-weight: bold;
	font-size: 0.85rem;
	box-shadow: 0 2px 4px rgba(0,0,0,0.15);
	transition: background 0.2s;
    width: 120px !important;
    height: 30px !important;	
}

.login-btn:hover{
	background: var(--accent-color);
}

.disabled-link {
    pointer-events: none; /* Megakadályozza a kattintást */
    opacity: 0.5;         /* Halványítja az elemet */
    cursor: not-allowed;  /* Tiltó kurzor ikont tesz rá */
}

.auth-buttons-container {
	display: flex; 
	flex-direction: row; 
	justify-content: center; /* Ez rendezi őket középre */
	flex-wrap: wrap;         /* Ha kicsi a hely, törje őket új sorba */
	gap: 15px; 
	width: 100%; 
	max-width: 600px;        /* Kicsit szélesebb, hogy elférjen 3 gomb */
	margin: 20px auto;	
}

.telegram-login-wrapper {
    /* Ugyanolyan méret, mint a többi gombod */
    width: 120px; 
    height: 30px;
}

.btn-login-telegram:hover, 
.btn-login-telegram.hover-state {
	background: var(--accent-color);
}

#telegram-widget-container iframe {
    width: 120px !important;
    height: 30px !important;
}