html, body {
    height: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    color: white;
    background: linear-gradient( 135deg, #ffc300 0%, #000814 50%, #fff8e0 100% );
    font: normal 18px/20px "Space Grotesk", sans-serif;
}

*, :after, :before {
    box-sizing: border-box;
}

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

.validation-summary-errors {
    text-align: center;
}

.hr {
    height: 2px;
    margin: 60px 0 50px 0;
    background: #000000;
}

.idle-countdown {
    position: fixed;
    right: 16px;
    bottom: 16px;
    padding: 8px 12px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 13px;
    z-index: 9999;
}

/* username στο κέντρο της μεσαίας στήλης */
.username-center {
    text-align: center;
}

.username-under {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.title-brand {

}

/* Path: /Content/Site.css */

.hbtn {
    border: 1px solid #000000;
    border-radius: 999px;
    padding: 2px;
    display: inline-block;
    animation: pulse 4s ease-in-out infinite;
}

/* Περιοχές Grid */
.top-left {
    grid-area: left;
}

.top-right {
    grid-area: right;
    justify-self: end;
}

.bottom-center {
    grid-area: user;
    justify-self: center;
}

/* Username */
.username-under {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

/* Logout button */
.logout-btn {
    background: #ff6b6b;
    padding: 6px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, box-shadow .2s;
}

.logout-btn:hover {
    background: #dc2626;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

/* Ορισμός animation */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}
/* ========== TOPBAR (Global) ========== */
.topbar {
    background: #fff8e0;
    border-bottom: 1px solid #e5e7eb;
}

.topbar__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 12px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 στήλες  */
    grid-template-rows: auto auto; /* 2 γραμμές */
    align-items: center;
    /* Περιοχές */
    grid-template-areas:
        "left right"
        "user user";
}

.brand-box {
    display: flex;
    align-items: center;
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: #5724c6;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 12px;
    transition: background .2s, box-shadow .2s, transform .2s;
}

.brand:hover {
    background: rgba(87,36,198,.08);
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
    transform: translateY(-1px);
}

/* δεξιά στήλη – logout */
.nav-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 9999px;
    border: 1.6px solid rgba(87,36,198,.35);
    background: #fff;
    color: #111827;
    text-decoration: none;
    font-weight: 700;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
    cursor: pointer;
}

.nav-btn:hover {
    background: #5724c6;
    color: #fff;
    border-color: #5724c6;
    box-shadow: 0 6px 18px rgba(87,36,198,.22);
    transform: translateY(-1px);
}


/* Cookie banner (essential-only) */
.cookie-banner {
    position: fixed;
    z-index: 9999;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    background: #1f2937;
    color: #fff;
    padding: 1rem;
    border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.cookie-banner__text {
    flex: 1 1 auto;
    line-height: 1.5;
}

.cookie-link {
    color: #93c5fd;
    text-decoration: underline;
}

.cookie-banner__actions {
    display: flex;
    gap: .5rem;
}

.btn-cookie {
    border: 0;
    border-radius: .5rem;
    padding: .6rem .9rem;
    cursor: pointer;
}

.btn-accept {
    background: #34d399;
    color: #062;
}

@media (max-width: 480px) {
    .cookie-banner {
        left: .5rem;
        right: .5rem;
        bottom: .5rem;
    }
}

.modal-body {
    color: #000814;
}