/* =========================================================
   GBG NEON METAVERSE
   PREMIUM ADMIN / SIM PANEL THEME
   ========================================================= */

:root {
    --bg: #0a0a0a;
    --bg-soft: #0f0f0f;
    --panel: #111111;
    --panel-light: #171717;

    --orange: #ff8a00;
    --orange-bright: #ff9d2e;
    --orange-dark: #ff5a00;

    --pink: #ff0055;
    --pink-hot: #ff0066;
    --magenta: #ff00aa;

    --cyan: #00e5ff;
    --blue: #00aaff;

    --green: #00ff33;
    --green-soft: #39ff14;

    --red: #ff1744;

    --text: #eeeeee;
    --text-soft: #aaaaaa;
    --border: #292929;

    --radius: 10px;

    --neon-orange:
        0 0 5px rgba(255, 138, 0, .55),
        0 0 15px rgba(255, 100, 0, .30);

    --neon-pink:
        0 0 5px rgba(255, 0, 100, .65),
        0 0 18px rgba(255, 0, 100, .35);

    --neon-cyan:
        0 0 5px rgba(0, 229, 255, .60),
        0 0 15px rgba(0, 170, 255, .30);

    --neon-green:
        0 0 5px rgba(0, 255, 50, .60),
        0 0 15px rgba(0, 255, 50, .30);
}


/* =========================================================
   GLOBAL
   ========================================================= */

html {
    background: var(--bg);
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", sans-serif;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(255, 100, 0, .10),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #090909 0%,
            #0c0c0c 100%
        );

    color: var(--text);
}


/* =========================================================
   HEADER
   ========================================================= */



/* =========================================================
   MAIN MENU
   ========================================================= */

.main-menu ul {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;
    flex-wrap: wrap;

    gap: 12px; /* Αυξήθηκε η απόσταση μεταξύ των κουμπιών για να αναπνέουν καλύτερα */
}

.main-menu a {
    display: block;

    /* ΑΛΛΑΓΗ: Από 12px 20px, το κάναμε 15px 25px για να μεγαλώσουν κι άλλο τα κουτάκια */
    padding: 15px 25px; 

    background:
        linear-gradient(
            180deg,
            #181818,
            #101010
        );

    color: #ffb15c;

    text-decoration: none;

    border: 1px solid #333;

    border-radius: 6px; /* Μεγάλωσα ελαφρώς τη γωνία για να ταιριάζει με το μεγαλύτερο μέγεθος */

    /* ΑΛΛΑΓΗ: Από 16px, το κάναμε 18px για να είναι ολοκάθαρα τα γράμματα */
    font-size: 18px; 

    transition:
        .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.main-menu a:hover {
    color: #fff;

    border-color: var(--orange);

    background:
        linear-gradient(
            180deg,
            #24170d,
            #111
        );

    box-shadow: var(--neon-orange);

    transform: translateY(-1px);
}

/* ΜΕΓΕΘΟΣ ΓΙΑ ΤΑ ΕΙΚΟΝΙΔΙΑ */
.main-menu .nav-icon {
    font-size: 20px; /* Μεγαλύτερα εικονίδια για να συμβαδίζουν με τα γράμματα */
    margin-right: 8px; /* Λίγο περισσότερος χώρος ανάμεσα στο σύμβολο και τη λέξη */
    vertical-align: middle; /* Ευθυγράμμιση στο κέντρο με το κείμενο */
}


/* =========================================================
   CONTENT
   ========================================================= */

.site-content {
    max-width: 1400px;

    margin: 0 auto;

    padding: 25px;
}


/* =========================================================
   STANDARD PANEL
   ========================================================= */

.panel {
    position: relative;

    background:
        linear-gradient(
            145deg,
            #151515 0%,
            #0d0d0d 100%
        );

    border: 1px solid var(--orange);

    box-shadow:
        0 0 5px rgba(255, 120, 0, .45),
        0 0 18px rgba(255, 80, 0, .18),
        inset 0 0 20px rgba(255, 100, 0, .025);

    padding: 18px;

    border-radius: var(--radius);

    margin-bottom: 20px;

    overflow: hidden;
}


/* Neon top line */

.panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--orange),
            var(--pink),
            var(--orange),
            transparent
        );

    box-shadow:
        0 0 8px var(--orange),
        0 0 15px var(--pink);

    opacity: .9;
}


/* =========================================================
   PANEL HEADER
   ========================================================= */

.panel-header {
    margin: -18px -18px 18px;

    padding: 12px 16px;

    background:
        linear-gradient(
            90deg,
            #ff5a00 0%,
            #ff2500 45%,
            #ff0055 100%
        );

    color: #fff;

    font-weight: 800;

    font-size: 17px;

    letter-spacing: .3px;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, .7);

    box-shadow:
        0 4px 15px rgba(255, 0, 70, .25);
}


/* =========================================================
   PANEL VARIANTS
   ========================================================= */

.panel-orange {
    border-color: var(--orange);
    box-shadow: var(--neon-orange);
}

.panel-pink {
    border-color: var(--pink);
    box-shadow: var(--neon-pink);
}

.panel-cyan {
    border-color: var(--cyan);
    box-shadow: var(--neon-cyan);
}

.panel-green {
    border-color: var(--green);
    box-shadow: var(--neon-green);
}

.panel-blue {
    border-color: var(--blue);

    box-shadow:
        0 0 6px rgba(0, 170, 255, .55),
        0 0 18px rgba(0, 170, 255, .25);
}


/* =========================================================
   PANEL TITLE
   ========================================================= */

.panel-title {
    color: var(--orange);

    font-size: 18px;
    font-weight: 700;

    margin-bottom: 15px;

    text-shadow:
        0 0 6px rgba(255, 138, 0, .55);
}

.panel-title.cyan {
    color: var(--cyan);

    text-shadow:
        0 0 7px rgba(0, 229, 255, .55);
}

.panel-title.green {
    color: var(--green);

    text-shadow:
        0 0 7px rgba(0, 255, 50, .55);
}


/* =========================================================
   CARDS INSIDE PANELS
   ========================================================= */

.card {
    background:
        linear-gradient(
            145deg,
            #181818,
            #101010
        );

    border: 1px solid #303030;

    border-radius: 8px;

    padding: 15px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.card:hover {
    border-color: var(--orange);

    box-shadow:
        0 0 8px rgba(255, 138, 0, .30),
        inset 0 0 12px rgba(255, 138, 0, .04);

    transform: translateY(-2px);
}


/* =========================================================
   STAT BOXES
   ========================================================= */

.stat-box {
    background:
        linear-gradient(
            145deg,
            #202b3b,
            #171d27
        );

    border: 1px solid var(--orange);

    border-radius: 8px;

    padding: 14px;

    box-shadow:
        0 0 7px rgba(255, 138, 0, .35),
        inset 0 0 15px rgba(0, 100, 255, .06);
}

.stat-box .label {
    color: #9da8b8;

    font-size: 11px;

    text-transform: uppercase;
}

.stat-box .value {
    color: #fff;

    font-size: 20px;
    font-weight: 800;

    text-shadow:
        0 0 6px rgba(255, 255, 255, .15);
}

.stat-box .value.green {
    color: var(--green);

    text-shadow:
        0 0 8px rgba(0, 255, 50, .65);
}


/* =========================================================
   TABLES
   ========================================================= */

table {
    width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    background: #101010;

    color: #eee;

    border: 1px solid #292929;

    border-radius: 8px;

    overflow: hidden;
}

table th {
    background:
        linear-gradient(
            180deg,
            #202020,
            #151515
        );

    color: var(--orange);

    padding: 11px;

    text-align: left;

    font-weight: 700;

    border-bottom: 1px solid var(--orange);

    text-shadow:
        0 0 5px rgba(255, 138, 0, .35);
}

table td {
    padding: 10px;

    border-bottom: 1px solid #252525;
}

table tbody tr {
    transition: .15s ease;
}

table tbody tr:hover td {
    background: rgba(255, 120, 0, .055);

    border-bottom-color: rgba(255, 120, 0, .25);
}


/* =========================================================
   BUTTONS
   ========================================================= */

button,
.btn {
    padding: 8px 15px;

    border: 1px solid transparent;

    border-radius: 6px;

    cursor: pointer;

    font-size: 14px;
    font-weight: 700;

    color: #fff;

    transition:
        .2s ease;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, .7);
}


/* PRIMARY */

button[name="add"],
.btn-primary {
    background:
        linear-gradient(
            180deg,
            #ff9d22,
            #f06b00
        );

    border-color: #ffb347;

    box-shadow:
        0 0 7px rgba(255, 138, 0, .55),
        0 0 18px rgba(255, 100, 0, .25);
}

button[name="add"]:hover,
.btn-primary:hover {
    background:
        linear-gradient(
            180deg,
            #ffb13b,
            #ff7900
        );

    box-shadow:
        0 0 10px rgba(255, 138, 0, .8),
        0 0 25px rgba(255, 100, 0, .35);

    transform: translateY(-1px);
}


/* DANGER */

button[name="remove"],
.btn-danger {
    background:
        linear-gradient(
            180deg,
            #ff1744,
            #c90030
        );

    border-color: #ff4064;

    box-shadow:
        0 0 8px rgba(255, 23, 68, .45);
}

button[name="remove"]:hover,
.btn-danger:hover {
    box-shadow:
        0 0 12px rgba(255, 23, 68, .7);
}


/* SECONDARY */

.btn-secondary {
    background: #181818;

    border-color: #444;

    color: #ccc;
}

.btn-secondary:hover {
    border-color: var(--cyan);

    color: #fff;

    box-shadow: var(--neon-cyan);
}


/* =========================================================
   STATUS BADGES
   ========================================================= */

.badge {
    display: inline-block;

    padding: 4px 8px;

    border-radius: 4px;

    font-size: 11px;
    font-weight: 700;
}

.badge-success {
    background: #0b3d1b;
    color: var(--green);

    border: 1px solid #00a82a;

    box-shadow:
        0 0 6px rgba(0, 255, 50, .35);
}

.badge-info {
    background: #06333d;
    color: var(--cyan);

    border: 1px solid #008ea5;

    box-shadow:
        0 0 6px rgba(0, 229, 255, .25);
}

.badge-warning {
    background: #3d2507;
    color: var(--orange);

    border: 1px solid #b86600;
}

.badge-danger {
    background: #3d0712;
    color: #ff4064;

    border: 1px solid #a9002b;
}


/* =========================================================
   INPUTS / SELECTS
   ========================================================= */

input,
select,
textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 9px 11px;

    background: #0d0d0d;

    color: #eee;

    border: 1px solid #333;

    border-radius: 6px;

    outline: none;

    transition: .2s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--orange);

    box-shadow:
        0 0 6px rgba(255, 138, 0, .45),
        0 0 15px rgba(255, 100, 0, .15);
}


/* =========================================================
   PAGINATION
   ========================================================= */

.pagination-wrapper {
    width: 100%;

    display: flex;

    justify-content: center;

    margin-top: 25px;
    margin-bottom: 40px;
}

.pagination {
    display: flex;

    gap: 5px;
}

.pagination a {
    display: inline-block !important;

    padding: 8px 14px;

    background: #151515;

    color: #ddd;

    border: 1px solid #333;

    border-radius: 6px;

    text-decoration: none;

    font-size: 14px;

    transition: .2s ease;
}

.pagination a:hover {
    color: #fff;

    border-color: var(--orange);

    box-shadow:
        0 0 7px rgba(255, 138, 0, .35);
}

.pagination a.active {
    background:
        linear-gradient(
            180deg,
            #ff9d22,
            #ed6500
        );

    color: #fff;

    border-color: var(--orange);

    box-shadow: var(--neon-orange);
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    color: var(--cyan);
}

a:hover {
    color: #fff;

    text-shadow:
        0 0 6px rgba(0, 229, 255, .65);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    margin-top: 20px;

    padding: 15px 20px;

    background: #090909;

    color: #777;

    font-size: 12px;

    text-align: center;

    border-top: 1px solid #222;
}

.site-footer a {
    color: var(--cyan);
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #080808;
}

::-webkit-scrollbar-thumb {
    background: #333;

    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--orange);

    box-shadow:
        0 0 8px var(--orange);
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {
    background: rgba(255, 80, 0, .45);
    color: #fff;
}

background: linear-gradient(
    90deg,
    #ff5a00 0%,
    #ff2500 45%,
    #ff0055 100%
);




/* =========================================================
   DOTS
   ========================================================= */

.gbg-slider-dots {
    position: absolute;

    z-index: 10;

    left: 50%;

    bottom: 22px;

    transform: translateX(-50%);

    display: flex;

    gap: 8px;
}


.gbg-dot {
    width: 9px;
    height: 9px;

    padding: 0;

    border-radius: 50%;

    background: #444;

    border: 1px solid #666;

    cursor: pointer;

    transition: .25s ease;
}


.gbg-dot.active {
    width: 28px;

    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            #ff8a00,
            #ff0055
        );

    border-color: #ff8a00;

    box-shadow:
        0 0 8px #ff7200;
}


/* =========================================================
   LIVE STATS
   ========================================================= */

.gbg-stats {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;

    margin-bottom: 30px;
}


.gbg-stat-card {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 17px;

    background:
        linear-gradient(
            145deg,
            #181818,
            #101010
        );

    border: 1px solid #333;

    border-radius: 8px;

    transition: .2s ease;
}


.gbg-stat-card:hover {
    border-color: #ff8a00;

    box-shadow:
        0 0 10px rgba(255,138,0,.25);

    transform: translateY(-2px);
}




.gbg-stat-label {
    display: block;

    color: #888;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .7px;
}


.gbg-stat-value {
    display: block;

    margin-top: 3px;

    color: #fff;

    font-size: 22px;
}


.gbg-stat-value.green {
    color: #00ff33;

    text-shadow:
        0 0 8px rgba(0,255,50,.6);
}


/* =========================================================
   SECTION
   ========================================================= */

.gbg-section {
    margin-bottom: 28px;
}


.gbg-section-heading {
    margin-bottom: 16px;

    color: #ff8a00;

    font-size: 20px;

    font-weight: 800;

    letter-spacing: 1px;

    text-shadow:
        0 0 7px rgba(255,138,0,.5);
}


.gbg-section-heading span {
    color: #ff0055;
}


.gbg-section-heading small {
    display: block;

    margin-top: 5px;

    color: #777;

    font-size: 12px;

    font-weight: 400;

    letter-spacing: 0;
}


/* =========================================================
   FEATURE CARDS
   ========================================================= */

.gbg-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;
}


.gbg-feature-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 180px;

    padding: 20px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            #171717,
            #0e0e0e
        );

    border: 1px solid #333;

    border-radius: 9px;

    text-decoration: none;

    overflow: hidden;

    transition: .25s ease;
}


.gbg-feature-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 2px;

    background: #ff8a00;

    box-shadow:
        0 0 10px currentColor;
}


.gbg-feature-card:hover {
    transform: translateY(-5px);

    border-color: #ff8a00;

    box-shadow:
        0 0 10px rgba(255,138,0,.35),
        0 10px 25px rgba(0,0,0,.5);
}




.gbg-feature-card h3 {
    margin: 0 0 8px;

    color: #fff;

    font-size: 17px;

    letter-spacing: 1px;
}


.gbg-feature-card p {
    margin: 0;

    color: #888;

    font-size: 13px;

    line-height: 1.5;
}




/* CARD COLORS */

.gbg-feature-card.cyan:hover {
    border-color: #00e5ff;

    box-shadow:
        0 0 12px rgba(0,229,255,.3);
}

.gbg-feature-card.pink:hover {
    border-color: #ff0066;

    box-shadow:
        0 0 12px rgba(255,0,100,.3);
}

.gbg-feature-card.green:hover {
    border-color: #00ff33;

    box-shadow:
        0 0 12px rgba(0,255,50,.25);
}


/* =========================================================
   SYSTEM PANEL
   ========================================================= */

.gbg-system-panel {
    margin-bottom: 30px;

    background: #101010;

    border: 1px solid #292929;

    border-radius: 9px;

    overflow: hidden;
}


.gbg-system-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 14px 18px;

    background:
        linear-gradient(
            90deg,
            #181818,
            #101010
        );

    border-bottom: 1px solid #292929;

    color: #ff8a00;

    font-weight: 800;
}


.gbg-live-dot {
    display: inline-block;

    width: 9px;
    height: 9px;

    margin-right: 8px;

    border-radius: 50%;

    background: #00ff33;

    box-shadow:
        0 0 7px #00ff33;
}


.gbg-online-text {
    color: #00ff33;

    font-size: 11px;

    text-shadow:
        0 0 6px rgba(0,255,50,.5);
}


.gbg-system-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);
}


.gbg-system-item {
    padding: 16px;

    border-right: 1px solid #252525;
}


.gbg-system-item:last-child {
    border-right: 0;
}


.gbg-system-item span {
    display: block;

    margin-bottom: 6px;

    color: #777;

    font-size: 10px;
}


.gbg-system-item strong {
    font-size: 13px;
}


.gbg-system-item strong.online {
    color: #00ff33;

    text-shadow:
        0 0 6px rgba(0,255,50,.45);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .gbg-stats,
    .gbg-feature-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .gbg-system-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .gbg-system-item:nth-child(2) {
        border-right: 0;
    }

}


@media (max-width: 600px) {

    .gbg-hero {
        min-height: 560px;
    }

    .gbg-hero-content {
        padding: 90px 30px 80px;
    }

    .gbg-hero h1 {
        font-size: 42px;
    }

    .gbg-hero p {
        font-size: 14px;
    }

    .gbg-stats,
    .gbg-feature-grid,
    .gbg-system-grid {
        grid-template-columns: 1fr;
    }

    .gbg-system-item {
        border-right: 0;
        border-bottom: 1px solid #252525;
    }

    .gbg-slider-arrow {
        display: none;
    }

}

/* =========================================================
   GBG HEADER FIX
   ========================================================= */

.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index: 99999 !important;

    box-sizing: border-box;
}

.site-header-inner {
    position: relative;

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    box-sizing: border-box;
}

.site-content {
    position: relative;
    z-index: 1;

    width: 100%;
    box-sizing: border-box;

    padding-top: 130px;
}





/* HERO MUST STAY INSIDE CONTENT */

.gbg-hero {
    position: relative !important;

    z-index: 1;

    display: block;

    width: 100%;
    box-sizing: border-box;

    margin-top: 0;
}


/* SLIDES ARE CONTAINED INSIDE HERO */

.gbg-slide {
    position: absolute !important;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;
}


/* BACKGROUND ALSO STAYS INSIDE */

.gbg-slide-bg {
    position: absolute !important;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}


/* =========================================================
   GBG HERO - DEFINITIVE FIX
   ========================================================= */

.gbg-hero {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 540px !important;
    min-height: 540px !important;

    margin: 0 0 25px 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    background: #080808;

    border: 1px solid #ff7200;
    border-radius: 12px;

    z-index: 1 !important;

    isolation: isolate;

    box-shadow:
        0 0 8px rgba(255, 110, 0, .45),
        0 0 30px rgba(255, 70, 0, .15);
}


/* =========================================================
   EACH SLIDE
   ========================================================= */

.gbg-hero .gbg-slide {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    opacity: 0;
    visibility: hidden;

    z-index: 1 !important;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}


/* ACTIVE SLIDE */

.gbg-hero .gbg-slide.active {
    opacity: 1 !important;
    visibility: visible !important;

    z-index: 2 !important;
}


/* =========================================================
   SLIDE BACKGROUND
   ========================================================= */

.gbg-hero .gbg-slide-bg {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 0 !important;

    transform: scale(1);
}

.gbg-hero .gbg-slide.active .gbg-slide-bg {
    transform: scale(1.06);

    transition:
        transform 7s ease;
}


/* =========================================================
   SLIDE CONTENT
   ========================================================= */

.gbg-hero .gbg-hero-content {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    box-sizing: border-box !important;

    padding: 100px 70px !important;

    z-index: 10 !important;
}


/* =========================================================
   ARROWS
   ========================================================= */

.gbg-hero .gbg-slider-arrow {
    position: absolute !important;

    top: 50% !important;

    z-index: 50 !important;

    transform: translateY(-50%);

    margin: 0 !important;
}

.gbg-hero .gbg-prev {
    left: 20px !important;
}

.gbg-hero .gbg-next {
    right: 20px !important;
}


/* =========================================================
   DOTS
   ========================================================= */

.gbg-hero .gbg-slider-dots {
    position: absolute !important;

    left: 50% !important;
    bottom: 20px !important;

    z-index: 50 !important;

    transform: translateX(-50%);
}


/* =========================================================
   EVERYTHING AFTER HERO STAYS BELOW IT
   ========================================================= */

.gbg-hero + .gbg-stats {
    position: relative !important;

    z-index: 5 !important;

    margin-top: 0 !important;
}


/* =========================================================
   STATS
   ========================================================= */

.gbg-stats {
    position: relative;

    z-index: 5;

    margin-bottom: 30px;
}


/* =========================================================
   FEATURE SECTION
   ========================================================= */

.gbg-section {
    position: relative;

    z-index: 5;

    margin-top: 0;
}


/* =========================================================
   SYSTEM PANEL
   ========================================================= */

.gbg-system-panel {
    position: relative;

    z-index: 5;

    margin-top: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .gbg-hero {
        height: 560px !important;
        min-height: 560px !important;
    }

    .gbg-hero .gbg-hero-content {
        padding: 80px 30px !important;
    }

}

 /* =========================================================
    GBG NEON GRID FOOTER
    2010 — 2026
    ========================================================= */

.site-footer {
    position: relative;

    width: 100%;

    margin-top: 50px;

    padding: 0;

    box-sizing: border-box;

    background:
        linear-gradient(
            180deg,
            #0b0b0b 0%,
            #080808 100%
        );

    color: #888;

    border-top: 1px solid #292929;

    overflow: hidden;

    box-shadow:
        0 -5px 25px rgba(255, 90, 0, .08);
}


/* TOP NEON LINE */

.site-footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #ff8a00 25%,
            #ff0055 50%,
            #00e5ff 75%,
            transparent 100%
        );

    box-shadow:
        0 0 8px #ff8a00,
        0 0 15px rgba(255, 0, 85, .45);
}


/* SUBTLE GRID */

.site-footer::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 138, 0, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 229, 255, .025) 1px,
            transparent 1px
        );

    background-size: 40px 40px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );

    opacity: .35;
}


/* =========================================================
   FOOTER INNER
   ========================================================= */

.site-footer-inner {
    position: relative;

    z-index: 2;

    max-width: 1400px;

    min-height: 125px;

    margin: 0 auto;

    padding: 28px 30px;

    box-sizing: border-box;

    display: grid;

    grid-template-columns:
        1fr 1.5fr 1fr;

    align-items: center;

    gap: 30px;
}


/* =========================================================
   BRAND
   ========================================================= */

.footer-brand {
    text-align: left;
}


.footer-logo {
    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 25px;

    font-weight: 900;

    letter-spacing: 3px;
}


.footer-logo span {
    color: #ff0055;

    text-shadow:
        0 0 5px #ff0055,
        0 0 15px rgba(255, 0, 85, .65);
}


.footer-logo strong {
    color: #00e5ff;

    font-weight: 900;

    text-shadow:
        0 0 5px #00e5ff,
        0 0 15px rgba(0, 229, 255, .55);
}


.footer-tagline {
    margin-top: 7px;

    color: #777;

    font-size: 10px;

    letter-spacing: 2px;
}


/* =========================================================
   CENTER
   ========================================================= */

.footer-center {
    text-align: center;
}


.footer-grid-line {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 10px;
}


.footer-grid-line span {
    display: block;

    width: 80px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff8a00
        );

    box-shadow:
        0 0 6px rgba(255, 138, 0, .55);
}


.footer-grid-line span:last-child {
    background:
        linear-gradient(
            90deg,
            #00e5ff,
            transparent
        );
}


.footer-grid-line i {
    color: #ff8a00;

    font-style: normal;

    font-size: 13px;

    text-shadow:
        0 0 8px #ff8a00;
}


.footer-copyright {
    color: #777;

    font-size: 12px;

    letter-spacing: .5px;
}


.footer-copyright strong {
    color: #ff8a00;

    text-shadow:
        0 0 6px rgba(255, 138, 0, .5);
}


.footer-version {
    margin-top: 6px;

    color: #444;

    font-size: 9px;

    letter-spacing: 2px;
}


/* =========================================================
   STATUS
   ========================================================= */

.footer-status {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;
}


.footer-status-dot {
    width: 10px;
    height: 10px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #00ff33;

    box-shadow:
        0 0 5px #00ff33,
        0 0 15px rgba(0, 255, 50, .65);

    animation:
        footerPulse 2s infinite;
}


@keyframes footerPulse {

    0%,
    100% {
        opacity: 1;

        box-shadow:
            0 0 5px #00ff33,
            0 0 15px rgba(0, 255, 50, .65);
    }

    50% {
        opacity: .55;

        box-shadow:
            0 0 2px #00ff33,
            0 0 7px rgba(0, 255, 50, .35);
    }

}


.footer-status strong {
    display: block;

    color: #00ff33;

    font-size: 11px;

    letter-spacing: 1px;

    text-shadow:
        0 0 6px rgba(0, 255, 50, .55);
}


.footer-status small {
    display: block;

    margin-top: 3px;

    color: #555;

    font-size: 9px;
}


/* =========================================================
   BOTTOM BAR
   ========================================================= */

.footer-bottom {
    position: relative;

    z-index: 3;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    min-height: 34px;

    padding: 7px 15px;

    box-sizing: border-box;

    background: #070707;

    border-top: 1px solid #1c1c1c;

    color: #444;

    font-size: 9px;

    letter-spacing: 1.5px;
}


.footer-bottom span:first-child {
    color: #666;
}


.footer-separator {
    color: #ff7200;

    text-shadow:
        0 0 5px rgba(255, 114, 0, .7);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    .site-footer-inner {
        grid-template-columns: 1fr;

        text-align: center;

        gap: 18px;

        padding: 28px 20px;
    }

    .footer-brand {
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-status {
        justify-content: center;
    }

}


@media (max-width: 500px) {

    .footer-bottom {
        flex-wrap: wrap;

        gap: 6px;

        font-size: 8px;
    }

    .footer-grid-line span {
        width: 45px;
    }

}


/* =========================================================
   GBG WORLD — PROFESSIONAL NEON GRID HEADER
   ========================================================= */

.site-header {
    position: relative !important;

    width: 100%;

    box-sizing: border-box;

    background:
        linear-gradient(
            180deg,
            #080808 0%,
            #0d0d0d 75%,
            #0a0a0a 100%
        );

    border-bottom: 1px solid #292929;

    z-index: 1000 !important;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, .65),
        0 0 25px rgba(255, 90, 0, .08);
}


/* =========================================================
   HEADER INNER
   ========================================================= */

.site-header-inner {
    position: relative;

    width: 100%;

    max-width: 1500px;

    min-height: 88px;

    margin: 0 auto;

    padding: 15px 25px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    gap: 22px;
}


/* =========================================================
   GBG LOGO
   ========================================================= */

.gbg-logo {
    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 205px;

    color: white;

    text-decoration: none;
}


/* LOGO ORBIT */

.gbg-logo-orbit {
    position: relative;

    width: 58px;
    height: 58px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #1b1b1b 0%,
            #090909 68%
        );

    border: 1px solid #ff7200;

    box-shadow:
        0 0 7px #ff7200,
        0 0 20px rgba(255, 114, 0, .4),
        inset 0 0 15px rgba(255, 114, 0, .15);
}


/* GBG CORE */

.gbg-logo-core {
    position: relative;

    z-index: 5;

    font-size: 18px;

    font-weight: 950;

    letter-spacing: 3px;

    color: #fff;

    text-shadow:
        0 0 5px #fff,
        0 0 12px #ff7200,
        0 0 22px rgba(255, 114, 0, .7);
}


/* ORBITS */

.gbg-logo-orbit .orbit {
    position: absolute;

    inset: -7px;

    border-radius: 50%;

    border: 1px solid transparent;

    pointer-events: none;
}


.gbg-logo-orbit .orbit-1 {
    border-top-color: #ff0055;
    border-bottom-color: #ff0055;

    transform: rotate(25deg);

    box-shadow:
        0 0 8px rgba(255, 0, 85, .55);
}


.gbg-logo-orbit .orbit-2 {
    inset: -11px;

    border-left-color: #00e5ff;
    border-right-color: #00e5ff;

    transform: rotate(-25deg);

    box-shadow:
        0 0 8px rgba(0, 229, 255, .45);
}


/* LOGO TEXT */

.gbg-logo-text {
    display: flex;

    flex-direction: column;

    line-height: 1;
}


.gbg-logo-text strong {
    font-size: 25px;

    font-weight: 950;

    letter-spacing: 4px;

    background:
        linear-gradient(
            90deg,
            #ff7200,
            #ff0055,
            #00e5ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    filter:
        drop-shadow(
            0 0 7px rgba(255, 90, 0, .35)
        );
}


.gbg-logo-text small {
    margin-top: 6px;

    color: #777;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;
}


/* =========================================================
   HEADER STATUS
   ========================================================= */

.gbg-header-status {
    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 125px;

    padding: 8px 11px;

    border: 1px solid #242424;

    border-radius: 6px;

    background: rgba(20, 20, 20, .65);

    box-shadow:
        inset 0 0 15px rgba(0, 0, 0, .4);
}


.gbg-status-light {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #00ff33;

    box-shadow:
        0 0 5px #00ff33,
        0 0 14px rgba(0, 255, 51, .65);

    animation:
        gbgStatusPulse 2s infinite;
}


@keyframes gbgStatusPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .45;
    }

}


.gbg-header-status strong {
    display: block;

    color: #00ff33;

    font-size: 9px;

    letter-spacing: 1px;
}


.gbg-header-status small {
    display: block;

    margin-top: 3px;

    color: #555;

    font-size: 7px;

    letter-spacing: 1px;
}


/* =========================================================
   MAIN NAVIGATION
   ========================================================= */

.main-menu {
    flex: 1;

    min-width: 0;
}


.main-menu ul {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 5px;

    list-style: none;

    margin: 0;
    padding: 0;
}


.main-menu li {
    margin: 0;
    padding: 0;
}


.main-menu a {
    position: relative;

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 9px 10px;

    border: 1px solid #252525;

    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            #171717,
            #101010
        );

    color: #aaa;

    text-decoration: none;

    font-size: 11px;

    font-weight: 650;

    white-space: nowrap;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


/* NAV ICON */

.nav-icon {
    color: #ff8a00;

    font-size: 14px;

    line-height: 1;

    text-shadow:
        0 0 6px rgba(255, 138, 0, .45);
}


/* HOVER */

.main-menu a:hover {
    color: #fff;

    border-color: #ff7200;

    background:
        linear-gradient(
            180deg,
            #21170f,
            #15110e
        );

    box-shadow:
        0 0 8px rgba(255, 114, 0, .35),
        inset 0 0 10px rgba(255, 114, 0, .08);

    transform: translateY(-1px);
}


.main-menu a:hover .nav-icon {
    color: #ff0055;

    text-shadow:
        0 0 7px #ff0055;
}


/* ACTIVE */

.main-menu a.active {
    color: #fff;

    border-color: #ff7200;

    background:
        linear-gradient(
            135deg,
            #ff7200,
            #ff3d00
        );

    box-shadow:
        0 0 8px rgba(255, 114, 0, .55),
        0 0 18px rgba(255, 80, 0, .2);
}


.main-menu a.active .nav-icon {
    color: #fff;

    text-shadow:
        0 0 8px #fff;
}


/* ACTIVE BOTTOM LINE */

.main-menu a.active::after {
    content: "";

    position: absolute;

    left: 10px;
    right: 10px;

    bottom: -5px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #ff7200,
            #ff0055
        );

    box-shadow:
        0 0 7px #ff7200;
}


/* =========================================================
   NEON GRID LINE
   ========================================================= */

.gbg-header-gridline {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    height: 20px;

    padding: 0 20px;

    box-sizing: border-box;
}


.gbg-header-gridline span {
    flex: 1;

    max-width: 300px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff7200
        );

    box-shadow:
        0 0 6px rgba(255, 114, 0, .5);
}


.gbg-header-gridline span:last-child {
    background:
        linear-gradient(
            90deg,
            #00e5ff,
            transparent
        );

    box-shadow:
        0 0 6px rgba(0, 229, 255, .4);
}


.gbg-header-gridline i {
    color: #555;

    font-size: 7px;

    font-style: normal;

    letter-spacing: 3px;

    white-space: nowrap;
}


/* =========================================================
   CONTENT SAFETY
   ========================================================= */

.site-content {
    position: relative;

    z-index: 1;

    width: 100%;

    box-sizing: border-box;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .gbg-header-status {
        display: none;
    }

    .main-menu a {
        padding: 8px 8px;

        font-size: 10px;
    }

}


@media (max-width: 850px) {

    .site-header-inner {
        flex-wrap: wrap;

        justify-content: center;

        padding: 15px;
    }

    .gbg-logo {
        justify-content: center;

        width: 100%;
    }

    .main-menu {
        width: 100%;
    }

    .main-menu ul {
        justify-content: center;
    }

}


@media (max-width: 550px) {

    .site-header-inner {
        gap: 12px;
    }

    .main-menu ul {
        gap: 4px;
    }

    .main-menu a {
        padding: 7px 8px;

        font-size: 9px;
    }

    .nav-icon {
        display: none;
    }

    .gbg-header-gridline i {
        font-size: 6px;

        letter-spacing: 1px;
    }

}


/* =========================================================
   GBG NEON METAVERSE HERO
   PHOTO BACKGROUND SLIDER
   ========================================================= */

.gbg-hero {
    position: relative !important;

    width: 100%;
    height: 540px;
    min-height: 540px;

    margin: 0 0 30px 0;

    overflow: hidden;

    border: 1px solid #ff7200;
    border-radius: 12px;

    background: #050505;

    box-shadow:
        0 0 10px rgba(255, 114, 0, .45),
        0 0 35px rgba(255, 0, 85, .12);

    isolation: isolate;
}


/* =========================================================
   SLIDES
   ========================================================= */

.gbg-slide {
    position: absolute !important;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    z-index: 1;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}


.gbg-slide.active {
    opacity: 1;
    visibility: visible;

    z-index: 2;
}


/* =========================================================
   PHOTO BACKGROUND
   ========================================================= */

.gbg-slide-bg {
    position: absolute !important;

    inset: 0;

    width: 100%;
    height: 100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    transform: scale(1);

    transition:
        transform 7s ease;
}


/* Slow cinematic zoom */

.gbg-slide.active .gbg-slide-bg {
    transform: scale(1.08);
}


/* =========================================================
   SLIDE 1
   ========================================================= */

.gbg-slide-bg.bg-1 {
    background-image:
        linear-gradient(
            90deg,
            rgba(3, 3, 3, .96) 0%,
            rgba(3, 3, 3, .78) 32%,
            rgba(3, 3, 3, .35) 65%,
            rgba(3, 3, 3, .55) 100%
        ),
        url("/adminsim/assets/images/hero-grid.jpg");
}


/* =========================================================
   SLIDE 2
   ========================================================= */

.gbg-slide-bg.bg-2 {
    background-image:
        linear-gradient(
            90deg,
            rgba(3, 3, 3, .96) 0%,
            rgba(3, 3, 3, .75) 30%,
            rgba(3, 3, 3, .30) 65%,
            rgba(3, 3, 3, .55) 100%
        ),
        url("/adminsim/assets/images/hero-regions.jpg");
}


/* =========================================================
   SLIDE 3
   ========================================================= */

.gbg-slide-bg.bg-3 {
    background-image:
        linear-gradient(
            90deg,
            rgba(3, 3, 3, .96) 0%,
            rgba(3, 3, 3, .72) 30%,
            rgba(3, 3, 3, .30) 65%,
            rgba(3, 3, 3, .55) 100%
        ),
        url("/adminsim/assets/images/hero-community.jpg");
}


/* =========================================================
   DARK CINEMATIC OVERLAY
   ========================================================= */

.gbg-slide-bg::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .30),
            transparent 35%,
            rgba(0, 0, 0, .55)
        );

    pointer-events: none;
}


/* =========================================================
   NEON GRID EFFECT OVER PHOTO
   ========================================================= */

.gbg-slide::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 114, 0, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 229, 255, .035) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 25%,
            black 75%,
            transparent
        );

    opacity: .6;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.gbg-hero-content {
    position: absolute !important;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    padding:
        90px
        9%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    z-index: 10;
}


/* =========================================================
   KICKER
   ========================================================= */

.gbg-kicker {
    display: inline-flex;

    align-items: center;

    margin-bottom: 15px;

    padding: 7px 13px;

    border-left: 2px solid #ff7200;

    background:
        rgba(255, 114, 0, .08);

    color: #ff9a3c;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    text-shadow:
        0 0 8px rgba(255, 114, 0, .65);

    box-shadow:
        inset 10px 0 25px rgba(255, 114, 0, .04);
}


/* =========================================================
   HERO TITLE
   ========================================================= */

.gbg-hero h1 {
    max-width: 750px;

    margin: 0;

    color: #fff;

    font-size: clamp(
        42px,
        6vw,
        82px
    );

    line-height: .95;

    font-weight: 950;

    letter-spacing: -2px;

    text-transform: uppercase;

    text-shadow:
        0 4px 25px rgba(0, 0, 0, .9),
        0 0 8px rgba(255, 255, 255, .25);
}


.gbg-hero h1 span {
    display: block;

    margin-top: 8px;

    background:
        linear-gradient(
            90deg,
            #ff7200 0%,
            #ff3d00 35%,
            #ff0055 70%,
            #00e5ff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    text-shadow: none;

    filter:
        drop-shadow(
            0 0 12px rgba(255, 90, 0, .35)
        );
}


/* =========================================================
   HERO TEXT
   ========================================================= */

.gbg-hero-content p {
    max-width: 600px;

    margin:
        25px 0
        30px;

    color: #d0d0d0;

    font-size: 16px;

    line-height: 1.7;

    text-shadow:
        0 2px 8px #000;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.gbg-hero-buttons {
    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}


.gbg-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 160px;

    padding: 13px 20px;

    box-sizing: border-box;

    border-radius: 5px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 850;

    letter-spacing: 1px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.gbg-btn:hover {
    transform: translateY(-2px);
}


/* ORANGE / PINK */

.gbg-btn-primary {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ff7200,
            #ff0055
        );

    border: 1px solid #ff8a00;

    box-shadow:
        0 0 10px rgba(255, 114, 0, .55),
        0 0 25px rgba(255, 0, 85, .18);
}


.gbg-btn-primary:hover {
    box-shadow:
        0 0 15px rgba(255, 114, 0, .8),
        0 0 35px rgba(255, 0, 85, .3);
}


/* CYAN */

.gbg-btn-cyan {
    color: #00e5ff;

    background:
        rgba(0, 229, 255, .06);

    border: 1px solid #00e5ff;

    box-shadow:
        0 0 8px rgba(0, 229, 255, .35);
}


.gbg-btn-cyan:hover {
    color: #fff;

    background:
        rgba(0, 229, 255, .14);

    box-shadow:
        0 0 15px rgba(0, 229, 255, .65);
}


/* =========================================================
   SLIDER ARROWS
   ========================================================= */

.gbg-slider-arrow {
    position: absolute !important;

    top: 50%;

    width: 52px;
    height: 52px;

    margin: 0;

    transform: translateY(-50%);

    z-index: 30;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(255, 114, 0, .55);

    border-radius: 50%;

    background:
        rgba(5, 5, 5, .70);

    color: #fff;

    font-size: 32px;

    line-height: 1;

    cursor: pointer;

    backdrop-filter: blur(5px);

    transition:
        .2s ease;
}


.gbg-slider-arrow:hover {
    background:
        #ff7200;

    border-color: #ff7200;

    box-shadow:
        0 0 15px rgba(255, 114, 0, .75);
}


.gbg-prev {
    left: 20px !important;
}


.gbg-next {
    right: 20px !important;
}


/* =========================================================
   DOTS
   ========================================================= */

.gbg-slider-dots {
    position: absolute !important;

    left: 50%;
    bottom: 22px;

    transform: translateX(-50%);

    z-index: 30;

    display: flex;

    align-items: center;

    gap: 8px;
}


.gbg-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 1px solid #666;

    border-radius: 50%;

    background: #222;

    cursor: pointer;

    transition: .25s ease;
}


.gbg-dot.active {
    width: 28px;

    border-radius: 10px;

    border-color: #ff7200;

    background:
        linear-gradient(
            90deg,
            #ff7200,
            #ff0055
        );

    box-shadow:
        0 0 8px rgba(255, 114, 0, .7);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .gbg-hero {
        height: 580px;
        min-height: 580px;
    }

    .gbg-hero-content {
        padding: 70px 35px;
    }

    .gbg-hero h1 {
        font-size: 44px;
    }

    .gbg-hero-content p {
        font-size: 14px;
    }

    .gbg-slider-arrow {
        width: 42px;
        height: 42px;

        font-size: 26px;
    }

    .gbg-prev {
        left: 10px !important;
    }

    .gbg-next {
        right: 10px !important;
    }

}

/* =========================================
   FIXED GBG HEADER
   ========================================= */

.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index: 999999 !important;

    box-sizing: border-box;
}

.site-content {
    padding-top: 130px !important;
}


/* Neon table */
.neon-table {
    border-collapse: collapse;
    width: 100%;
    background: #111;
    color: #fff;
    border: 1px solid #222;
}

.neon-table th {
    background: #222;
    color: #00ff66;
    padding: 10px;
    border-bottom: 2px solid #00ff66;
}

.neon-table td {
    padding: 8px;
    border-bottom: 1px solid #333;
}

.neon-table tr:hover td {
    background: #1a1a1a;
}

/* Neon button */
.neon-btn {
    display: inline-block;
    padding: 6px 12px;
    background: #00aaff;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid #005fcc;
    box-shadow: 0 0 8px #00aaff;
    transition: 0.2s;
}

.neon-btn:hover {
    background: #33bbff;
    box-shadow: 0 0 12px #33bbff;
}


/* Neon Title */
.neon-title {
    color: #ff6a00;
    font-size: 28px;
    margin-bottom: 20px;
    text-shadow: 0 0 10px #ff6a00;
}

/* Neon Panel */
.neon-panel {
    background: #111;
    border: 2px solid #00ff66;
    box-shadow: 0 0 12px #00ff66;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    color: #fff;
}

/* Neon Subtitle */
.neon-subtitle {
    color: #00aaff;
    margin-top: 20px;
    margin-bottom: 10px;
    text-shadow: 0 0 10px #00aaff;
}

/* Charter Box */
.neon-charter {
    background: #1a1a1a;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #333;
    color: #e6e6e6;
    line-height: 1.5;
}

/* Action Buttons */
.neon-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.neon-btn {
    padding: 8px 14px;
    background: #ff0099;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid #cc0077;
    box-shadow: 0 0 8px #ff0099;
    transition: 0.2s;
}

.neon-btn:hover {
    background: #ff33aa;
    box-shadow: 0 0 12px #ff33aa;
}

.neon-btn-blue {
    padding: 8px 14px;
    background: #00aaff;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid #005fcc;
    box-shadow: 0 0 8px #00aaff;
    transition: 0.2s;
}

.neon-btn-blue:hover {
    background: #33bbff;
    box-shadow: 0 0 12px #33bbff;
}

.neon-btn-red {
    padding: 8px 14px;
    background: #ff0033;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid #cc0022;
    box-shadow: 0 0 8px #ff0033;
    transition: 0.2s;
}

.neon-btn-red:hover {
    background: #ff3355;
    box-shadow: 0 0 12px #ff3355;
}


/* Neon Label */
.neon-label {
    display: block;
    margin-top: 15px;
    margin-bottom: 6px;
    color: #00aaff;
    font-weight: bold;
    text-shadow: 0 0 8px #00aaff;
}

/* Neon Input */
.neon-input {
    width: 100%;
    padding: 10px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    transition: 0.2s;
}

.neon-input:focus {
    border-color: #00ff66;
    box-shadow: 0 0 10px #00ff66;
    outline: none;
}

/* Neon Textarea */
.neon-textarea {
    width: 100%;
    height: 180px;
    padding: 10px;
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    resize: vertical;
    transition: 0.2s;
}

.neon-textarea:focus {
    border-color: #00ff66;
    box-shadow: 0 0 10px #00ff66;
    outline: none;
}

/* Neon Actions */
.neon-actions {
    margin-top: 25px;
    display: flex;
    gap: 10px;
}

.neon-error {
    background: #ff0033;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    color: #fff;
    box-shadow: 0 0 10px #ff0033;
}
/* Κρύβει το υπομενού εξ ορισμού */
.main-menu .dropdown-menu {
    display: none;
    position: absolute;
    background-color: #333; /* Άλλαξε το χρώμα ανάλογα με το design σου */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Εμφανίζει το υπομενού στο hover */
.main-menu .dropdown:hover .dropdown-menu {
    display: block;
}

/* Στυλ για τα στοιχεία μέσα στο υπομενού */
.main-menu .dropdown-menu li a {
    display: block;
    padding: 10px 15px;
    white-space: nowrap;
}


/* HERO IMAGES */

/* TAGLINE */
.gbg-tagline {
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 8px #00eaff;
}

/* GRID LOGO */
.grid-logo {
    width: 320px;
    height: auto;
}

/* ONLINE TEXT */
.online-text {
    color: #00ff00;
    font-weight: bold;
    text-shadow: 0 0 10px #00ff00;
}

/* WARNING BOX */
.gbg-warning-box {
    background: #111;
    border: 1px solid #333;
    color: #aaa;
    font-size: 14px;
}

/* HERO IMAGE WRAPPER */
.gbg-hero-images {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* IMAGE BOX */
.hero-img-box {
    background: #0a0a0a;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 0 15px #000;
    transition: transform .2s ease, box-shadow .2s ease;
}

/* IMAGE STYLE */
.hero-img {
    width: 330px;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 0 12px #00eaff;
}

/* HOVER EFFECT */
.hero-img-box:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px #00eaff;
}


/* MAIN PANEL */
.gbg-info-panel {
    background: #0a0a0a;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 0 25px #00eaff;
    max-width: 900px;
    margin: 0 auto;
}

/* LOGO */
.gbg-info-logo {
    width: 320px;
    height: auto;
    filter: drop-shadow(0 0 10px #00eaff);
}

/* TEXT */
.gbg-info-text {
    color: #fff;
    font-weight: 600;
    margin: 10px 0;
    text-shadow: 0 0 8px #00eaff;
}

/* ONLINE TEXT */
.gbg-info-online {
    color: #00ff00;
    font-weight: bold;
    margin-top: 20px;
    text-shadow: 0 0 12px #00ff00;
}

/* URLS */
.gbg-info-urls {
    font-size: 18px;
    color: #ccc;
    margin-top: 20px;
    line-height: 1.6;
    text-shadow: 0 0 5px #00eaff;
}

.gbg-stat-icon, .gbg-feature-icon {
    font-family: inherit !important; /* Ακυρώνει τη χαλασμένη γραμματοσειρά */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


.login-wrapper {
    max-width: 480px;
    margin: 40px auto;
    padding: 20px;
    font-family: 'Segoe UI', sans-serif;
}

.login-welcome {
    background: linear-gradient(180deg, rgba(24,24,24,0.8), rgba(16,16,16,0.9));
    border: 1px solid #ffb15c;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 20px rgba(255,177,92,0.25);
    margin-bottom: 30px;
}

.login-welcome h3 {
    color: #ffb15c;
    font-size: 1.4em;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255,177,92,0.5);
    margin-bottom: 10px;
}

.login-welcome p {
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
}

.neon-green {
    color: #00ffcc;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0,255,204,0.5);
}

.login-box {
    background: rgba(10,10,20,0.85);
    border: 1px solid #ff7b00;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 0 25px rgba(255,123,0,0.35);
    backdrop-filter: blur(6px);
}

.login-title {
    color: #ff7b00;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.6em;
    text-shadow: 0 0 12px rgba(255,123,0,0.6);
}

.login-error {
    background: #330000;
    border: 1px solid #ff4444;
    padding: 10px;
    color: #ffaaaa;
    border-radius: 6px;
    margin-bottom: 15px;
    text-align: center;
    box-shadow: 0 0 10px rgba(255,0,0,0.3);
}

.login-field {
    margin-bottom: 20px;
}

.login-field label {
    color: #ffb15c;
    font-weight: bold;
    margin-bottom: 6px;
    display: block;
}

.login-field input {
    width: 100%;
    padding: 12px;
    background: #111;
    border: 1px solid #ff7b00;
    border-radius: 6px;
    color: #fff;
    font-size: 15px;
    transition: 0.2s;
}

.login-field input:focus {
    border-color: #ffaa33;
    box-shadow: 0 0 10px rgba(255,170,51,0.4);
}

.login-btn {
    width: 100%;
    padding: 14px;
    background: #ff7b00;
    color: #000;
    font-weight: bold;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255,123,0,0.5);
    transition: 0.25s;
}

.login-btn:hover {
    background: #ffaa33;
    box-shadow: 0 0 20px rgba(255,170,51,0.7);
    transform: translateY(-2px);
}


.gbg-feature-card.gold {
    background: linear-gradient(135deg, #ffcc00 0%, #ff9900 100%);
    border: 1px solid #ffdd55;
    box-shadow: 0 0 15px rgba(255,200,0,0.5), 0 0 25px rgba(255,150,0,0.4);
    color: #000;
}

.gbg-feature-card.gold:hover {
    background: linear-gradient(135deg, #ffe066 0%, #ffb300 100%);
    box-shadow: 0 0 25px rgba(255,220,0,0.9), 0 0 35px rgba(255,150,0,0.7);
    transform: translateY(-3px);
}

.gbg-feature-card.gold .gbg-feature-icon {
    color: #000;
    text-shadow: 0 0 8px rgba(255,255,255,0.6);
}

.gbg-premium-hero {
    max-width: 800px;   /* 🔹 πλάτος container */
    margin: 40px auto;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(255,174,66,0.6);
    border: 1px solid #ffae42;

    /* 🔥 ΕΔΩ ΡΥΘΜΙΖΕΙΣ ΤΟ ΥΨΟΣ ΟΠΩΣ ΘΕΣ */
    height: 500px; 
}

.gbg-premium-hero-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 🔥 ΔΕΝ παραμορφώνει */
    display: block;
}