@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

.maintenance-banner {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #dc3545;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 7px 20px;
    border-radius: 999px;
    letter-spacing: 0.06em;
    z-index: 99999;
    white-space: nowrap;
    box-shadow: 0 4px 24px rgba(0,0,0,0.45);
}
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

@font-face {
    font-family: "Minecraft";
    src: url("https://fonts.cdnfonts.com/s/9185/MinecraftTen-VGORe.ttf") format("truetype");
}

.container img {
    border-radius: 10px;
}

::selection {
    background-color: #dc3545;
    color: white;
}

body {
    background-color: #1c1c1c;
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: white;
}

a {
    color: #dc3545;
}

.container p {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: justify;
    line-height: 1.6;
}

h2,
h3,
h4,
h5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

h2 {
    font-size: 30px;
    align-content: center;
}

.logo img {
    width: 36rem;
}

.big {
    transition: all 0.3s ease;
    font-size: 20px;
}

ul,
ol {
    padding-left: 50px;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.8;
}

.container a,
#cookie-banner a {
    color: #dc3545;
    transition: all ease 0.3s;
    font-weight: bold;
}

a:hover {
    color: #b90000;
}

.main-wrapper {
    padding-bottom: 2rem;
}

.main {
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-size: 40px;
    text-align: center;
}

.main::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -4px;
    width: 100%;
    height: 5px;
    background-color: #dc3545;
}

.motto {
    font-size: 20px;
    color: #242424;
    text-align: center;
}

.announcement {
    background-color: #242424;
    margin-bottom: 1rem;
    padding: 20px;
    border-radius: 10px;
    transition: all ease 0.3s;
}

.announcement:hover {
    transform: scale(1.05);
}

.account {
    background-color: #1a1a1a;
    margin-bottom: 1rem;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    max-width: 300px;
    left: 50%;
    transform: translate(-50%, -50%);
}

hr {
    color: white;
}

.info {
    background-color: #1a1a1a;
    margin-bottom: 1rem;
    padding: 20px;
    border-radius: 10px;
}

input,
textarea {
    background-color: #242424;
    color: white;
    border-radius: 10px;
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border: 2px solid #242424;
}

textarea {
    padding: 10px;
    resize: none;
    overflow: hidden;
    box-sizing: border-box;
}

input:focus,
textarea:focus {
    border: 2px solid white;
    outline: none;
}

button {
    background-color: #171717;
    border: none;
    color: white;
    margin: 5px;
    border-radius: 10px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all ease 0.3s;
}

button:hover {
    background-color: #272727;
    transform: scale(1.05);
}

button:active {
    transform: scale(0.95);
}

button:disabled {
    background-color: #4a4a4a;
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

.grid {
    display: flex;
    justify-content: space-evenly;
    gap: 1rem;
    padding-top: 120px;
    padding-bottom: 60px;
    max-width: 1200px;
    align-items: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 50;
}

.grid-item {
    border-radius: 10px;
    transition: 0.3s ease all;
    padding: 20px;
    margin-top: auto;
    margin-bottom: auto;
}

#copy-ip {
    min-width: 210px;
}

.big:hover {
    color: #c9c9c9;
}

.grid span,
.grid i {
    color: white;
    font-weight: bold;
    padding: 0;
}

header {
    height: 250px;
    position: relative;
    z-index: 50;
    transition: all ease 0.3s;
}

a:has(div),
a:has(li) {
    text-decoration: none;
}

.container {
    margin-top: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.login-bar-rank-badge,
.cart-button-icon {
    display: inline-block;
    display: inline-block;
}

@media (max-width: 600px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    .login-bar-rank-badge,
    .cart-button-icon {
        display: none;
    }
}

/* Sidebar layout */
.page-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.page-sidebar {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
}

.page-sidebar .nav-list {
    width: 100%;
}

.page-content {
    flex: 1;
    min-width: 0;
}

/* Burger button — hidden on desktop */
.burger-btn {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1030;
    background: black;
    border: none;
    border-radius: 8px;
    width: 44px;
    height: 44px;
    color: white;
    font-size: 24px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    transition: background 0.2s ease;
    padding: 0;
}

.burger-btn:hover {
    background: #b90000;
    transform: none;
}

/* Sidebar overlay backdrop — hidden by default */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    cursor: pointer;
}

@media (max-width: 900px) {
    .page-layout {
        /* content fills full width; sidebar is overlaid */
    }

    .page-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 300px;
        z-index: 1000;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        background: #1c1c1c;
        padding: 70px 0 30px;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.55);
    }

    .page-sidebar .nav-list {
        width: auto;
    }

    body.nav-open .page-sidebar {
        transform: translateX(0);
    }

    body.nav-open .nav-overlay {
        display: block;
    }

    .page-content {
        width: 100%;
    }

    .burger-btn {
        display: flex;
    }
    
}

/* Light theme sidebar background on mobile */
@media (max-width: 900px) {
    body.light .page-sidebar {
        background: #f5f5f5;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
    }
}

.error {
    border: 1px solid red;
    background-color: #930000;
    max-width: 300px;
    padding: 20px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

.mobile-none {
    display: block;
}

@media (max-width: 1249px) {
    .logo img {
        width: 20rem;
    }

    header {
        flex-direction: column;
        height: 440px;
        padding-bottom: 0;
        max-width: 1200px;
        align-items: center;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .grid-item {
        border-radius: 10px;
        transition: 0.3s ease all;
        padding: 20px;
        margin-top: auto;
        margin-bottom: auto;
    }

    .mobile-none {
        display: none;
    }

    .grid {
        flex-direction: column;
        padding-bottom: 23px;
    }
}

.grid-div {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3rem;
    max-width: 1000px;
}

.grid-div h2 {
    text-align: center;
    margin-bottom: 30px;
    color: white;
}

.thing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: auto;
    max-width: 960px;
}

/* Pokud je položka sama v řádku, roztáhni ji přes všechny sloupce */
/* 2-sloupcový grid (např. .thing-grid, .profile-stats) */
.thing-grid-item:only-child,
.profile-stats > *:only-child {
    grid-column: 1 / -1;
}

/* Když je poslední prvek v 2-sloupcovém gridu umístěn na liché pozici (sám v řádku), roztáhne ho */
.thing-grid-item:nth-child(2n+1):last-child,
.profile-stat-item:nth-child(2n+1):last-child {
    grid-column: 1 / -1;
}

/* 3-sloupcový grid (např. .product-grid) — pokud je poslední prvek sám v řádku (počet mod 3 == 1) */
.product-grid > *:nth-child(3n+1):last-child {
    grid-column: 1 / -1;
}

.thing-grid-item {
    border-radius: 12px;
    transition: 0.3s ease all;
    padding: 25px 30px;
    background-color: #242424;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 160px;
    color: white;
    overflow: hidden;
    cursor: pointer;
}

.thing-grid-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.thing-grid-title {
    font-size: 2rem;
    font-weight: 900;
    color: white;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    line-height: 1.2;
}

.thing-grid-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 8px;
    padding: 0;
}

p.thing-grid-title,
p.thing-grid-subtitle {
    padding: 0;
}

.thing-grid-image {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;
    position: relative;
}

.thing-grid-ghost {
    position: absolute;
    bottom: 0;
    right: 40px;
    z-index: 0;
    opacity: 0.2;
    transform: rotate(-20deg);
    transition: transform 0.35s ease, opacity 0.35s ease;
    pointer-events: none;
}

.thing-grid-image > img:not(.thing-grid-ghost) {
    position: relative;
    z-index: 1;
}

.thing-grid-item:hover .thing-grid-ghost {
    transform: rotate(-33deg);
    opacity: 0.3
}

.thing-grid-item:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.thing-grid-item:active {
    transform: scale(0.97);
}

/* Changelog tabs */
.changelog-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.changelog-tab {
    padding: 8px 22px;
    border-radius: 8px;
    border: 2px solid #333;
    background: #1a1a1a;
    color: #ccc;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s ease;

    /* Prevent tabs from shrinking too much when wrapped */
    flex: 0 0 auto;
}

.changelog-tab:hover {
    border-color: #dc3545;
    color: white;
    transform: none;
}

.changelog-tab.active {
    background: #dc3545;
    border-color: #dc3545;
    color: white;
}

/* Server changelog entries */
.server-entry {
    background: #1a1a1a;
    border-left: 4px solid #dc3545;
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin-bottom: 1rem;
}

.server-entry-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 8px;
}

.server-entry-time {
    margin-left: 4px;
    opacity: 0.7;
}

.server-entry-content {
    line-height: 1.6;
    color: #e0e0e0;
}

.server-entry-content p {
    padding: 0;
    margin: 0 0 4px;
}

.server-loading {
    color: #888;
}

/* Light mode — changelog */
body.light .changelog-tab {
    background: #f0f0f0;
    border-color: #ccc;
    color: #444;
}

body.light .changelog-tab:hover {
    border-color: #dc3545;
    color: #111;
}

body.light .changelog-tab.active {
    background: #dc3545;
    border-color: #dc3545;
    color: white;
}

body.light .server-entry {
    background: #f5f5f5;
}

body.light .server-entry-meta {
    color: #666;
}

body.light .server-entry-content {
    color: #222;
}

body.light .server-loading {
    color: #666;
}

.item-blue {
    background-color: #2a67c4;
    border-bottom: 6px solid #9C2D36;
}
.item-pink {
    background-color: #dd6392;
    border-bottom: 6px solid #9C367B;
}
.item-gold {
    background-color: #cd9f31;
    border-bottom: 6px solid #A67F2B;
}
.item-teal {
    background-color: #1aacb8;
}
.item-green {
    background-color: #66ad17;
    border-bottom: 6px solid #4E8214;
}
.item-red {
    border-bottom: 6px solid #9C2D36;
    background-color: #dc3545;
}
.item-gray {
    background-color: #A3A3A3;
    border-bottom: 6px solid #757474;
}

@media (max-width: 768px) {
    .thing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        padding: 0 15px;
    }

    .thing-grid-item {
        height: 140px;
    }

    .thing-grid-title {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .thing-grid {
        max-width: 100%;
    }
}

.thing-grid-item.disabled:hover {
    transform: scale(1);
}

footer {
    z-index: 5;
    left: 0;
    width: 100%;
    margin-top: 40px;
    border-top: 1px solid #ddd;
    background: #090909;
    padding: 40px 20px 20px;
    color: #fff;
    bottom: 0;
}

.footer-section {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-column {
    margin: 0 20px 20px;
}

.footer-column h3 {
    color: #fff;
    margin-bottom: 15px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 8px;
}

.footer-column ul li a {
    color: #9e9e9e;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-column ul li a:hover {
    color: #fff;
}

.footer-bottom {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid black;
}

.footer-bottom a {
    color: #9e9e9e;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-bottom a:hover {
    color: #fff;
}

.mojang-notice {
    color: #9e9e9e;
    font-size: 0.9em;
    margin-top: 10px;
}

.footer-p {
    color: white;
}

/* Profile stats (two-column, responsive) */
.profile-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.profile-stat-item {
    background: #242424;
    padding: 12px 14px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.profile-stat-label {
    color: #cfcfcf;
    font-weight: 600;
}
.profile-stat-value {
    font-weight: 700;
    color: #fff;
}



/* nav */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.navbar {
    background: rgba(0, 0, 0, 0.2);
    padding: 0.75rem 1rem;
    position: fixed;
    z-index: 100;
    width: 100%;
    max-width: 1200px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    top: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.navbar-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.logonav {
    font-size: 2rem;
    font-weight: bold;
    text-decoration: none;
    margin-top: auto;
    margin-bottom: auto;
}

.toggle-btn {
    display: none;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: white;
}

.toggle-btn:hover {
    background-color: #eeeeee;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: flex-end;
}

.nav-links li {
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.nav-links li:hover {
    border-bottom: 2px solid white;
}

.nav-links a {
    text-decoration: none;
    color: white;
    transition: all ease 0.3s;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 120%;
    left: 0;
    background: black;
    border: 1px solid black;
    min-width: 150px;
    z-index: 100;
    list-style: none;
}

.dropdown-menu li a {
    display: block;
    padding: 0.5rem 1rem;
    color: #333;
}

.dropdown-menu li a:hover {
    background: #f0f0f0;
}

@media (min-width: 769px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

@media (max-width: 871px) {
    .navbar {
        width: calc(100% - 10px);
        transform: translateX(0);
        left: 0;
        top: 5px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .toggle-btn {
        display: block;
        color: white;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 0.75rem;
        width: 100%;
    }

    .nav-links.active {
        display: flex;
    }

    .dropdown-menu {
        position: static;
        border: none;
        padding-left: 1rem;
    }

    .dropdown.open .dropdown-menu {
        display: block;
    }

    .dropdown-toggle::after {
        content: " â–¼";
        font-size: 0.8rem;
    }
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 2fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

.cart-item,
.product {
    background-color: #242424;
    border-radius: 10px;
    padding: 20px;
    max-width: 400px;
    width: 100%;
    transition: all 0.3s ease;
    text-align: center;
}

.cart-item:hover,
.product:hover {
    transform: scale(1.05);
}

.product {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding-top: 12px;
}

.item-image,
.product-image {
    display: block;
    width: 150px;
    height: 150px;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 10px;
    padding: 10px;
    transition: all ease 0.3s;
}

.product:hover .product-image {
    transform: scale(1.05);
}

.product-image:hover {
    cursor: pointer;
}

.product strong,
.product p {
    font-size: 15px;
    font-weight: bold;
}

.special-cart {
    display: none;
    background-color: #dcdcdc;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 10px;
}

.two {
    font-size: 4.5rem;
}

@media (max-width: 768px) {
    .two {
        font-size: 3.3rem;
    }
}

#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #242424;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
    font-size: 14px;
    border-top: 1px solid white;
}

.accept {
    background-color: #2ecc71;
}

.accept:hover {
    background-color: #28a85e;
}

#cookie-banner .decline {
    background: #dc3545;
}

#cookie-banner .decline:hover {
    background: #c82333;
    transform: scale(1.05);
}

.edit-key {
    list-style: none;
}

.edit-keys {
    padding-left: 0;
}

.tiktok-button {
    background-color: #000;
    transition: 0.3s ease all;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    box-shadow:
        2px 2px 0 #25f4ee,
        -2px -2px 0 #fe2c55;
}

.tiktok-button:hover {
    transform: scale(1.05);
    box-shadow:
        3px 3px 0 #25f4ee,
        -3px -3px 0 #fe2c55;
}

.tiktok-button:active {
    transform: scale(0.95);
    box-shadow:
        1px 1px 0 #25f4ee,
        -1px -1px 0 #fe2c55;
}

.instagram-button {
    background: linear-gradient(45deg,
            #feda75,
            #fa7e1e,
            #d62976,
            #962fbf,
            #4f5bd5);
    color: white;
    font-weight: bold;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.instagram-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.instagram-button:active {
    transform: scale(0.95);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

button.minecraft-button {
    font-family: "Minecraft", sans-serif;
    font-size: 16px;
    background-color: #3c8527;
    color: #fff;
    border: 4px solid #2e5d1b;
    padding: 10px 20px;
    border-radius: 0;
    cursor: pointer;
    box-shadow: 0 0 0 4px #1a1a1a;
    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease;
}

button.minecraft-button:hover {
    background-color: #46a032;
}

button.minecraft-button:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 2px #1a1a1a;
}

.responsive-image {
    max-width: 800px;
    width: 100%;
    height: auto;
}

.collapse-wrapper {
    border: 1px solid #373737;
    border-radius: 10px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.collapse-header {
    background-color: #242424;
    padding: 15px;
    border-radius: 10px;
    margin: 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.collapse-toggle {
    transition: transform 0.3s ease;
}

.collapse-content {
    padding: 20px;
    display: none;
    transition: all 0.3s ease;
}

.collapse-content p {
    margin: 0;
    line-height: 1.6;
    transition: all 0.3s ease;
}

#login-box {
    z-index: 99;
    padding: 40px 20px;
    height: 45px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
    width: 100%;
    background-color: #1a1a1a;
    border-radius: 10px;
}

.login-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.skin-img {
    width: 45px;
    height: auto;
    border-radius: 10px;
}

select {
    background-color: #242424;
    padding: 0.5rem;
    border: none;
    color: white;
    border-radius: 10px;
}

#skin-preview {
    border-radius: 10px;
    width: 100px;
    height: 100px;
}

.skin-preview-div {
    text-align: center;
    padding-bottom: 2rem;
}

.team-member {
    display: flex;
    align-items: center;
    gap: 10px;
}

.skin-preview {
    border-radius: 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #dc3545;
}

input:checked+.slider:before {
    transform: translateX(16px);
}

.header-background {
    position: absolute;
    width: 100%;
    height: 450px;
    animation: moveLeftRight 20s linear infinite alternate;
    z-index: -1;
    background: radial-gradient(
            ellipse at bottom,
            #1c1c1c,
            transparent 70%
    ) no-repeat center;
    background-size: 120% auto;
}

.header-background::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 220px;
    background: linear-gradient(to bottom, transparent 0%, #1c1c1c 80%);
    pointer-events: none;
}

@keyframes moveLeftRight {
    0% {
        background-position: left center;
    }

    100% {
        background-position: right center;
    }
}

/* Notification System */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    max-width: 350px;
    width: 100%;
}

.notification {
    background-color: #333;
    border-left: 4px solid #28a745;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 15px;
    margin-bottom: 15px;
    position: relative;
    animation: fadeIn 0.3s ease-out forwards;
    overflow: hidden;
}

/* Payment selection styles used on Checkout page */
.payment-options {
    gap: 0.75rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    padding: 10px;
}

.payment-option {
    background: #242424;
    border: 2px solid #242424;
    padding: 10px 14px;
    border-radius: 10px;
    min-width: 180px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    display: flex;
    align-items: center;
}

.payment-option i {
    color: white;
}

.payment-option .small {
    color: #6c757d;
}

.payment-option.selected {
    background: #242424;
    border-color: white;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.payment-option.selected i {
    color: #dc3545;
}

@media (max-width: 576px) {
    .payment-option {
        min-width: 100%;
    }
}

.notification.error {
    border-left-color: #dc3545;
}

.notification.warning {
    border-left-color: #ffc107;
}

.notification.info {
    border-left-color: #17a2b8;
}

.notification .message {
    margin-right: 25px;
    margin-bottom: 5px;
    font-size: 14px;
}

.notification .close-btn {
    position: absolute;
    top: 8px;
    right: 10px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    opacity: 0.5;
}

.notification .close-btn:hover {
    opacity: 1;
}

.notification .timer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.2);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Quantity Controls */
.quantity-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.quantity-btn {
    background: #1a1a1a;
    border: none;
    width: 25px;
    height: 25px;
    cursor: pointer;
    margin: 0 5px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-btn:hover {
    background: #2a2a2a;
}

.quantity-controls span {
    font-size: 16px;
    width: 30px;
    text-align: center;
    display: inline-block;
    padding: 2px 0;
    transition: all 0.3s ease;
}

.quantity-controls button:active+span,
.quantity-controls button:focus+span {
    transform: scale(1.05);
    color: #2196f3;
}

/* Cart Styles */
.cart-total {
    margin: 20px 0;
    padding: 10px;
    background-color: #1a1a1a;
    border-radius: 5px;
    text-align: right;
}

.cart-total-profile {
    margin: 20px 0;
    padding: 10px;
    background-color: #1a1a1a;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-total-profile span:nth-child(even) {
    font-size: 1.2em;
    font-weight: bold;
}

/* Add to Cart Button */
button.add-to-cart-btn.update {
    background-color: #1d8be2;
}

button.add-to-cart-btn.update:hover {
    background-color: #197dcc;
}

/* Quantity Input */
input.item-quantity {
    width: 40px;
    text-align: center;
    padding: 5px 2px;
    margin: 0 5px;
    appearance: textfield;
    font-size: 14px;
    font-weight: bold;
    background-color: #1f1f1f;
    color: #fff;
}

/* Remove arrow buttons from number input */
input.item-quantity::-webkit-outer-spin-button,
input.item-quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Cart Controls */
.cart-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
    justify-content: space-between;
}

.cart-item h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.cart-details {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

.cart-details>div {
    flex-grow: 1;
}

.price-in-desc,
.item-subtotal {
    font-weight: bold;
    color: #e74c3c;
    font-size: 1.3em;
}

.quantity-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.quantity-controls button {
    background: #1a1a1a;
    border: none;
    width: 25px;
    height: 25px;
    cursor: pointer;
    margin: 0 5px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-controls button:hover {
    background: #2a2a2a;
}

.quantity-controls input {
    width: 40px;
    text-align: center;
    padding: 5px 2px;
    margin: 0 5px;
    appearance: textfield;
    font-size: 14px;
    font-weight: bold;
    background-color: #1f1f1f;
    color: #fff;
}


.modal-content {
    background-color: #242424;
    border-color: #dcdcdc;
}

/* Remove arrow buttons from number input */
.quantity-controls input::-webkit-outer-spin-button,
.quantity-controls input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.price-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 100px;
    justify-content: flex-start;
}

.product .price-container {
    justify-content: center;
}

.original-price {
    opacity: 70%;
    font-weight: normal;
    margin: 0;
    text-decoration: line-through;
}

.discounted-price {
    color: #fff;
    font-weight: bold;
    margin: 0;
}

/* Discounted price in cart items should not be bold */
.cart-item .discounted-price {
    font-weight: normal;
}

/* Override when inside subtotal */
.item-subtotal.discounted-price {
    color: #e74c3c;
}

.discount-badge {
    background-color: #dc3545;
    color: white;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
    position: absolute;
    top: -10px;
    right: -1px;
    transform: rotate(5deg);
}

.a-badge {
    background-color: #dc3545;
    color: white;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
    transform: rotate(5deg);
    position: absolute
}

.a-badge-div {
    float: right;
}

.cart-actions {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
    color: #ffffff;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    justify-items: center;
}

.team-item {
    background: #242424;
    border-radius: 15px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    width: 100%;
    max-width: 280px;
}

.team-item:hover {
    transform: scale(1.05);
}

.avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    position: relative;
    overflow: hidden;
}

.person {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Badge colors */
.badge-owner {
    background: #db3444;
    color: white;
}

.badge-coowner {
    background: #db4d34;
    color: white;
}

.badge-leader {
    background: darkred;
    color: white;
}

.badge-manager {
    background: orangered;
    color: white;
}

.badge-dev {
    background: purple;
    color: white;
}

.badge-webdev {
    background: rebeccapurple;
    color: white;
}

.badge-mod-plus {
    background: #12b4e8;
    color: white;
}

.badge-mod {
    background: #51d3fd;
    color: white;
}

.badge-builder\+ {
    background: #35d622;
    color: white;
}

.badge-builder {
    background: #5ce54c;
    color: white;
}

.badge-admin {
    background: #CCBB08;
    color: black;
}

.section {
    margin-bottom: 60px;
}

.update-btn,
.informational {
    background-color: #dc3545;
}


.cart-total {
    font-size: 1.2em;
    font-weight: bold;
}

.cart-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.item-image {
    width: 175px;
    height: auto;
    border-radius: 10px;
    padding: 5px;
    display: block;
}

/* Empty cart message */
.empty-cart-message {
    text-align: center;
    font-size: 1.2em;
    color: #aaa;
    padding: 40px;
    background-color: #242424;
    border-radius: 10px;
    margin-top: 20px;
    border: 1px solid darkgray;
}

/* Special VIP section */
.special-cart {
    background-color: #242424;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 10px;
    color: white;
    transition: all ease 0.3s;
    border: 1px solid darkgray;
}

.special-cart:hover {
    transform: scale(1.05);
}

.special-cart h3 {
    margin-top: 0;
    padding-bottom: 10px;
}

.vip-package h3 {
    color: #bb86fc;
}

.vip-package .view-cart-link {
    color: #bb86fc;
    text-decoration: none;
    font-weight: bold;
    padding: 10px;
}

.vip-package .view-cart-link:hover {
    text-decoration: underline;
}

.vip-package .button-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Danger Button */
.danger {
    background-color: #dc3545;
    color: white;
}

.danger:hover {
    background-color: #c82333;
}

.informational,
.update-btn {
    background-color: #dc3545;
    color: white;
}


/* Animation Keyframes */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes slideIn {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .header-background::after {
        display: none;
    }
}

@media (max-width: 1249px) {
    .header-background {
        height: 440px;
        background-size: cover;
    }

    .logo img {
        width: 20rem;
    }

    header {
        height: 400px;
    }

    .header-background {
        animation: moveLeftRight 50s linear infinite alternate;
    }

    .thing-grid {
        padding-top: 1rem;
    }
}

@media (max-width: 586px) {
    .header-background {
        background-size: cover;

        .rcon-result {
            background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
            border: 1px solid #e6e6e6;
            padding: 12px 14px;
            border-radius: 10px;
            margin-top: 12px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
        }

        .rcon-result.rcon-success {
            border-left: 4px solid #28a745;
        }

        .rcon-result.rcon-warning {
            border-left: 4px solid #ffc107;
        }

        .rcon-header {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .rcon-status-icon {
            font-size: 1.4rem;
            color: #6c757d;
        }

        .rcon-summary {
            color: #495057;
            font-size: 0.95rem;
        }

        .rcon-commands {
            margin: 10px 0 0 0;
            padding-left: 0;
            list-style: none;
            max-height: 240px;
            overflow: auto;
        }

        .rcon-command {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            border-radius: 6px;
            margin-bottom: 6px;
            background: rgba(0, 0, 0, 0.02);
        }

        .rcon-command.success {
            border-left: 4px solid #28a745;
        }

        .rcon-command.failed {
            border-left: 4px solid #dc3545;
            background: rgba(220, 53, 69, 0.03);
        }

        .rcon-command .command-text {
            font-family: monospace;
            color: #212529;
            flex: 1 1 auto;
        }

        .rcon-command .command-error {
            color: #6c757d;
            font-size: 0.9rem;
            margin-left: 8px;
        }

        .rcon-command .badge {
            margin-left: 8px;
        }

        @media (max-width: 576px) {
            .rcon-commands {
                max-height: 180px;
            }
        }
    }
}

/* Mobile header layout — logo on top, IP + Discord side by side */
@media (max-width: 680px) {
    header {
        height: auto;
    }

    .header-background {
        height: 290px;
    }

    .grid {
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 70px;
        padding-bottom: 12px;
        gap: 0.5rem;
        align-items: flex-start;
        justify-content: space-between;
    }

    /* Logo: full width, shown at top */
    .grid > a:has(.logo) {
        order: -1;
        flex: 0 0 100%;
        display: flex;
        justify-content: center;
    }

    .grid > a:has(.logo) .logo img {
        width: 20rem;
    }


    /* IP section – left side */
    .grid > #copy-ip {
        flex: 1 1 0;
        min-width: 0;
        padding: 6px 10px;
        margin-left: 12px;
    }

    /* Discord anchor – right side */
    .grid > a:not(:has(.logo)) {
        flex: 1 1 0;
        min-width: 0;
    }

    .grid > a:not(:has(.logo)) > div.grid-item {
        padding: 6px 10px;
        text-align: right;
        margin-right: 12px;
    }

    /* Slightly smaller text in header on phones */
    .grid .big {
        font-size: 16px;
    }
}

div .spaw {
    padding-bottom: 25px;
}

/* Scrollable table wrapper */
.table-wrapper {
    overflow-x: auto;
    margin: 20px 0;
}

.table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: #2f2f2f;
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #777;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    min-width: 600px;
}

table,
th,
td {
    border: 1px solid #2f2f2f;
}

th,
td {
    padding: 12px;
    text-align: left;
    white-space: nowrap;
}

th {
    background-color: #222222;
    position: sticky;
    top: 0;
    z-index: 1;
}

tr:nth-child(even) {
    background-color: #1a1a1a;
}

/* Flexible table cell content */
.table-cell-wrap {
    white-space: normal !important;
    word-break: break-word;
    max-width: 200px;
}

.table-cell-nowrap {
    white-space: nowrap !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    table {
        min-width: 500px;
    }

    th,
    td {
        padding: 8px 10px;
        font-size: 14px;
    }

    .table-cell-wrap {
        max-width: 150px;
    }
}

.error {
    color: #e74c3c;
    margin: 10px 0;
}

.success {
    color: #2ecc71;
    margin: 10px 0;
}

.order-detail {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.order-total {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    font-weight: bold;
    margin-top: 10px;
}

#paypal-button-container {
    position: relative;
    z-index: 1;
    margin-top: 20px;
}

#order-summary {
    border: 1px solid #e0e0e0;
    padding: 20px;
    margin-top: 20px;
    border-radius: 5px;
}

#username-output {
    font-weight: bold;
    margin: 10px 0;
    font-size: 1.2em;
}

.error-text {
    color: red;
}

.web-version {
    float: right;
    color: white;
    font-size: 13px;
}

.secondary {
    color: white;
    background-color: #141414;
}

.secondary:hover {
    background-color: #282828;
}

.logoimage,
.logo {
    transition: all 0.3s ease;
}

.logoimage:hover,
.logo:hover {
    transform: scale(1.03);
}

.logoimage:active,
.logo:active {
    transform: scale(0.95);
}

.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    overflow-y: auto;
    padding: 1rem;
}

.modal.d-block,
.modal.show {
    display: flex !important;
}

.modal.fade {
    transition: opacity 180ms linear, transform 180ms ease;
    opacity: 0;
}

.modal.fade.show {
    opacity: 1;
}

.modal-dialog {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    transform: translateY(0);
}

.modal-lg {
    max-width: 1000px;
}

.modal-content {
    background-color: #242424;
    color: white;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    width: 100%;
    border: 1px solid lightslategray;
}

.modal-body img,
.modal .product-image,
.modal .item-image {
    max-width: 250px;
    height: auto;
    border-radius: 10px;
    display: block;
}



.modal .price-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal .discount-badge {
    position: relative;
    top: 0;
    right: 0;
    transform: none;
}

.modal-body {
    padding: 1.25rem;
}

.modal .modal-body>.row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.modal .modal-body>.row>.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.modal .modal-body>.row>.col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

.modal .modal-body>.row>.col-md-6 img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media (max-width: 767px) {
    .modal .modal-body>.row>.col-md-6 {
        flex-basis: 100%;
        max-width: 100%;
    }
}

.modal-header,
.custom-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.modal-title {
    margin: 0;
    font-weight: 700;
}

.modal-body,
.custom-modal-body {
    padding: 1rem 1.25rem;
}

.modal-footer,
.custom-modal-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.btn-close {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    position: relative;
}

.btn-close::before,
.btn-close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1rem;
    height: 2px;
    background-color: white;
    transform-origin: center;
}

.btn-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.btn-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.modal:not([style])::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

@media (max-width: 767px) {
    .modal-dialog {
        max-width: 95%;
    }

    .modal-body {
        padding: 0.75rem;
    }
}

.modal:focus,
.modal-dialog:focus,
.modal-content:focus {
    outline: none;
}

.btn-close:focus {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    border-radius: 3px;
}

.rcon-result {
    background-color: #dcdcdc;
}

.rcon-response {
    text-wrap: auto;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.menu-item {
    background-color: #242424;
    margin-bottom: 1rem;
    padding: 20px;
    border-radius: 10px;
    transition: all ease 0.3s;
}

.game-menu {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    padding-top: 3rem;
}

.game-menu h2 {
    text-align: center;
    margin-bottom: 30px;
    color: white;
}

.menu-item:hover {
    transform: scale(1.05);
}

.new-server {
    border: 2px solid #dc3545;
}

.nav-list {
    display: flex;
    flex-direction: column;
    background-color: #1a1a1a;
    width: 300px;
    border-radius: 10px;
    margin-bottom: 40px;
    padding: 10px 10px 20px;
    margin-left: 0;
}

.nav-list p {
    padding: 0.5rem;
} 

.nav-heading {
    border-radius: 8px !important;

    padding-left: 18px;
    padding-right: 18px;
    height: 38px !important;
    margin: -36px auto 12px;
    line-height: 35px;
    width: fit-content;
    background-color: #dc3545;
    border-bottom: 4px solid #9C2D36;

    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    z-index: 100;
    
}

.nav-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #242424;
    padding: 10px;
    border-radius: 10px;
    position: relative;
    margin: 10px 10px 0;
    gap: 20px;
    transition: background-color 0.25s ease;
}
.nav.item:last-child {
    margin-bottom: 10px;
}

.nav-item::after {
    content: '';
    position: absolute;
    right: 5px;
    top: 20%;
    height: 60%;
    width: 4px;
    background-color: #dc3545;
    border-radius: 2px;
    opacity: 0;
    transform: scaleY(0.4);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.nav-item--active::after {
    opacity: 1;
    transform: scaleY(1);
}

.nav-item--active {
    background-color: #2a2a2a;
}

.nav-item span {
    color: white;
    text-decoration: none;
    transition: transform 0.25s ease;
    font-weight: bold;
}
.nav-item:hover span {
    transform: translate(5px, 0);
}

.nav-icon, .nav-icon i {
    height: 40px;
    font-size: 30px;
    color: white;
}

.nav-item:hover {
    background-color: #282828;
}

.nav-item--donor {
    gap: 10px;
    cursor: default;
}

.nav-head {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    flex-shrink: 0;
    border-radius: 5px !important;
}

.nav-donor-name {
    flex: 1;
    font-size: 13px;
}

.nav-donor-amount {
    font-size: 12px;
    color: #f0c040 !important;
    white-space: nowrap;
}

.text-muted {
    opacity: 70%;
}

.nav-theme-switch {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px
}

.nav-theme-switch span {
    font-weight: bold;
}

.great-button {
    border-radius: 8px;
    padding: 10px 18px;
    height: 38px;
    width: fit-content;
    background-color: #dc3545;
    border-bottom: 4px solid #9C2D36;

    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    align-items: center;
    z-index: 100;
}

.great-button:hover {
    background-color: #dc3545;
}


.voucher-item {
    background-color: #242424;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.voucher-cart-header {
    display: flex;
    justify-content: space-between;
}

/* light */
body.light .table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
}

body.light .voucher-item {
    background-color: #f0f0f0;
}

body.light .nav-list
{
    background-color: #f0f0f0;
}

body.light .nav-item
{
    background-color: #dcdcdc;
}

body.light .nav-item span,
body.light .nav-item i {
    color: black;
}

body.light .table-wrapper::-webkit-scrollbar-thumb {
    background: #c1c1c1;
}

body.light .table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

body.light table,
body.light th,
body.light td {
    border: 1px solid #ddd;
}

body.light th,
body.light td {
    padding: 12px;
    text-align: left;
}

body.light th {
    background-color: #f1f1f1;
}

body.light tr:nth-child(even) {
    background-color: #f5f5f5;
}

body.light {
    background-color: #f9f9f9;
    color: black;
}

body.light .container p,
body.light .container small {
    color: black;
}

body.light h2,
body.light h3,
body.light h4,
body.light h5 {
    color: black;
}

body.light h2 {
    color: black;
}

body.light .grid-div h2 {
    color: #333;
}

body.light .game-menu h2 {
    color: #333;
}

body.light ul,
body.light ol {
    color: black;
}

body.light .container a,
body.light #cookie-banner a {
    color: #dc3545;
}

body.light a:hover {
    color: #c82333;
}

body.light .motto {
    color: #dcdcdc;
}

body.light .announcement {
    background-color: #dcdcdc;
}

body.light .account {
    background-color: #e2e2e2;
}

body.light hr {
    color: black;
}

body.light .info {
    background-color: #e2e2e2;
}

body.light input,
body.light textarea {
    background-color: #dcdcdc;
    color: black;
    border: 2px solid #dcdcdc;
}

body.light input:focus,
body.light textarea:focus {
    border: 2px solid black;
    outline: none;
}

body.light .grid span,
body.light .grid i {
    color: white;
}

body.light .error {
    background-color: #930000;
}

body.light footer {
    background-color: #e2e2e2;
    color: #fff;
}

body.light .footer-column h3 {
    color: black;
}

body.light .footer-column ul li a {
    color: #5b5b5b;
}

body.light .footer-column ul li a:hover {
    color: black;
}

body.light .footer-column .bi-discord {
    color: #7289da;
}

body.light .footer-column .bi-discord:hover {
    color: #fff;
}

body.light .footer-bottom a {
    color: #5b5b5b;
}

body.light .footer-bottom a:hover {
    color: black;
}

body.light .mojang-notice {
    color: #5b5b5b;
}

body.light .navbar {
    background: rgba(255, 255, 255, 0.2);
}

body.light .cart-item,
body.light .product {
    background-color: #f0f0f0;
}

body.light .special-cart {
    background-color: #dcdcdc;
}

body.light #cookie-banner {
    background: #dcdcdc;
    color: black;
    border-top: 1px solid black;
}

body.light #cookie-banner .accept {
    background: #2ecc71;
}

body.light #cookie-banner .accept:hover {
    background: #27ae60;
}

body.light #cookie-banner .decline {
    background: #e74c3c;
}

body.light #cookie-banner .decline:hover {
    background: #c0392b;
}

body.light button.minecraft-button {
    background-color: #3c8527;
    color: #fff;
}

body.light button.minecraft-button:hover {
    background-color: #46a032;
}


body.light select {
    background-color: #dcdcdc;
    color: black;
}

body.light .collapse-wrapper {
    border: 1px solid #dcdcdc;
}

body.light .collapse-header {
    background-color: #dcdcdc;
}

body.light .header-background {
    background-size: 120% auto;
}

body.light .header-background::after {
    background: linear-gradient(to bottom, transparent, #f9f9f9);
}

body.light .footer-p {
    color: black;
}

body.light .nav-links a {
    color: black;
}

body.light .nav-links li:hover {
    border-bottom: 2px solid black;
}

@media (max-width: 1249px) {
    body.light .header-background {
        background-size: cover;
    }
}

body.light .toggle-btn {
    color: white;
    background: none;
}

@media (max-width: 871px) {
    body.light .toggle-btn {
        color: white;
    }
}

body.light .web-version {
    color: black;
}

body.light .secondary {
    background-color: #e5e5e5;
    color: black;
}

body.light .secondary:hover {
    background-color: #d7d7d7;
}

body.light .payment-option {
    background-color: #f9f9f9;
    border-color: #dcdcdc;
}

body.light .payment-option.selected {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    border-color: black;
}

body.light .thing-grid-item {
    background-color: #dcdcdc;
}

body.light .payment-option i {
    color: #000;
}

body.light .menu-item {
    background-color: #dcdcdc;
}



body.light .modal-content {
    background-color: #dcdcdc;
    border-color: #dcdcdc;
    color: black;
}

body.light .update-btn,
body.light .informational {
    background-color: #2196f3;
}

body.light .update-btn:hover,
body.light .informational:hover {
    background-color: #0b7dda;
}

body.light .notification {
    background-color: #f8f9fa;
    color: #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

body.light .notification .timer-bar {
    background-color: rgba(0, 0, 0, 0.2);
}

body.light .quantity-controls span {
    color: black;
}

body.light .quantity-btn {
    background: #cfcfcf;
    color: #333;
}

body.light .quantity-btn:hover {
    background: #c3c3c3;
}

body.light .quantity-controls button {
    background: #cfcfcf;
    color: #333;
}

body.light #login-box {
    background-color: #f0f0f0;
}

body.light .quantity-controls button:hover {
    background: #c3c3c3;
}

body.light input.item-quantity {
    background-color: #d5d5d5;
    color: black;
}

body.light .quantity-controls input {
    background-color: #d5d5d5;
    color: black;
}

body.light .cart-total {
    background-color: #f4f4f4;
}
body.light .cart-total-profile {
    background-color: #f4f4f4;
}

body.light .discounted-price {
    color: #000;
}

body.light .cart-item .discounted-price {
    font-weight: normal;
}

body.light .item-subtotal.discounted-price {
    color: #e74c3c;
}

body.light .empty-cart-message {
    background-color: #dcdcdc;
    border: 1px solid lightslategray;
    color: #888;
}

body.light .special-cart {
    background-color: #dcdcdc;
    color: black;
    border: 1px solid lightslategray;
}

body.light .vip-package h3 {
    color: #7b1fa2;
}

body.light .vip-package .view-cart-link {
    color: #7b1fa2;
}

body.light .team-item {
    background: #dcdcdc;
}

body.light .add-to-cart-btn.update {
    background-color: #2196f3;
}

/* Product quantity presets */
.qty-presets {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.qty-preset-btn {
    flex: 1;
    padding: 7px 0;
    background-color: #222;
    border: 2px solid #333;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all ease 0.3s;
    height: auto;
    width: auto;
}

.qty-preset-btn:hover:not(.selected):not(:disabled) {
    background-color: #333;
    border-color: #444;
}

.qty-preset-btn.selected {
    background-color: #dc3545;
    border-color: #9c2d36;
}

.qty-preset-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.product .great-button {
    width: 100%;
    height: auto;
    padding: 11px 18px;
}

/* ─── BUY button pixel details ──────────────────────────────────────────── */

.buy-button {
    --buy-px: rgba(255, 255, 255, 0.5);
    --buy-px-dim: rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.buy-button::before,
.buy-button::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    left: 3px;
    height: 12px;
    background-image:
        linear-gradient(var(--buy-px), var(--buy-px)),
        linear-gradient(var(--buy-px), var(--buy-px)),
        linear-gradient(var(--buy-px-dim), var(--buy-px-dim)),
        linear-gradient(var(--buy-px), var(--buy-px)),
        linear-gradient(var(--buy-px-dim), var(--buy-px-dim)),
        linear-gradient(var(--buy-px-dim), var(--buy-px-dim)),
        linear-gradient(var(--buy-px), var(--buy-px)),
        linear-gradient(var(--buy-px), var(--buy-px)),
        linear-gradient(var(--buy-px-dim), var(--buy-px-dim)),
        linear-gradient(var(--buy-px), var(--buy-px)),
        linear-gradient(var(--buy-px-dim), var(--buy-px-dim)),
        linear-gradient(var(--buy-px-dim), var(--buy-px-dim));
    background-size: 4px 4px;
    background-position:
        0 0,
        4px 0,
        8px 0,
        0 4px,
        4px 4px,
        0 8px,
        100% 0,
        calc(100% - 4px) 0,
        calc(100% - 8px) 0,
        100% 4px,
        calc(100% - 4px) 4px,
        100% 8px;
    background-repeat: no-repeat;
    pointer-events: none;
    image-rendering: pixelated;
}

.buy-button::after {
    top: auto;
    bottom: 3px;
    transform: scaleY(-1);
}

.great-button:disabled {
    background-color: #434343;
    opacity: 0.5;
    cursor: not-allowed;
    border-bottom-color: #2e2e2e;
}
.great-button:disabled:hover {
    background-color: #434343;
}

.product-cart-remove {
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
}

.product-cart-remove button {
    background: none;
    border: none;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    padding: 2px 4px;
    height: auto;
    border-bottom: none;
}

.product-cart-remove button:hover {
    color: #dc3545;
    background: none;
}

/* light mode overrides */
body.light .qty-preset-btn {
    background-color: #e0e0e0;
    border-color: #c0c0c0;
    color: #222;
}

body.light .qty-preset-btn:hover:not(.selected):not(:disabled) {
    background-color: #d0d0d0;
    border-color: #b0b0b0;
}

body.light .qty-preset-btn.selected {
    background-color: #dc3545;
    border-color: #9c2d36;
    color: #fff;
}

body.light .product-cart-remove button {
    color: #555;
}

body.light .product-cart-remove button:hover {
    color: #dc3545;
}

body.light .add-to-cart-btn.update:hover {
    background-color: #0b7dda;
}

/* Snowflakes animation */
.snowflakes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
    display: none;
}

.snowflake {
    position: absolute;
    color: #4da6ff;
    font-size: 2em;
    user-select: none;
    animation: fall linear infinite;
    opacity: 0.8;
}

.snowflake:nth-child(1n) {
    left: 1%;
    top: -20%;
    animation-duration: 8s;
    animation-delay: 0s;
    font-size: 2.2em;
}

.snowflake:nth-child(2n) {
    left: 10%;
    top: -35%;
    animation-duration: 12s;
    animation-delay: 1s;
    font-size: 2.8em;
}

.snowflake:nth-child(3n) {
    left: 20%;
    top: -15%;
    animation-duration: 10s;
    animation-delay: 3s;
    font-size: 2em;
}

.snowflake:nth-child(4n) {
    left: 30%;
    top: -45%;
    animation-duration: 14s;
    animation-delay: 2s;
    font-size: 2.5em;
}

.snowflake:nth-child(5n) {
    left: 40%;
    top: -25%;
    animation-duration: 9s;
    animation-delay: 4s;
    font-size: 2.3em;
}

.snowflake:nth-child(6n) {
    left: 50%;
    top: -30%;
    animation-duration: 11s;
    animation-delay: 1.5s;
    font-size: 2.7em;
}

.snowflake:nth-child(7n) {
    left: 60%;
    top: -40%;
    animation-duration: 13s;
    animation-delay: 0.5s;
    font-size: 2.4em;
}

.snowflake:nth-child(8n) {
    left: 70%;
    top: -18%;
    animation-duration: 15s;
    animation-delay: 3.5s;
    font-size: 2.1em;
}

.snowflake:nth-child(9n) {
    left: 80%;
    top: -28%;
    animation-duration: 10s;
    animation-delay: 2.5s;
    font-size: 2.6em;
}

.snowflake:nth-child(10n) {
    left: 90%;
    top: -50%;
    animation-duration: 12s;
    animation-delay: 4.5s;
    font-size: 2.2em;
}

.snowflake:nth-child(11n) {
    left: 5%;
    top: -22%;
    animation-duration: 9s;
    animation-delay: 1s;
    font-size: 2.3em;
}

.snowflake:nth-child(12n) {
    left: 15%;
    top: -38%;
    animation-duration: 11s;
    animation-delay: 2s;
    font-size: 2.5em;
}

.snowflake:nth-child(13n) {
    left: 25%;
    top: -16%;
    animation-duration: 13s;
    animation-delay: 0s;
    font-size: 2.1em;
}

.snowflake:nth-child(14n) {
    left: 35%;
    top: -42%;
    animation-duration: 14s;
    animation-delay: 3s;
    font-size: 2.4em;
}

.snowflake:nth-child(15n) {
    left: 45%;
    top: -32%;
    animation-duration: 10s;
    animation-delay: 1.5s;
    font-size: 2.6em;
}

.snowflake:nth-child(16n) {
    left: 55%;
    top: -26%;
    animation-duration: 12s;
    animation-delay: 4s;
    font-size: 2.2em;
}

.snowflake:nth-child(17n) {
    left: 65%;
    top: -48%;
    animation-duration: 8s;
    animation-delay: 0.5s;
    font-size: 2.7em;
}

.snowflake:nth-child(18n) {
    left: 75%;
    top: -36%;
    animation-duration: 15s;
    animation-delay: 2.5s;
    font-size: 2.3em;
}

.snowflake:nth-child(19n) {
    left: 85%;
    top: -44%;
    animation-duration: 9s;
    animation-delay: 3.5s;
    font-size: 2.8em;
}

.snowflake:nth-child(20n) {
    left: 95%;
    top: -24%;
    animation-duration: 11s;
    animation-delay: 1s;
    font-size: 2em;
}

@keyframes fall {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    25% {
        transform: translateX(10px) translateY(25vh) rotate(90deg);
    }

    50% {
        transform: translateX(-10px) translateY(50vh) rotate(180deg);
    }

    75% {
        transform: translateX(10px) translateY(75vh) rotate(270deg);
    }

    90% {
        opacity: 0.8;
    }

    100% {
        transform: translateX(0) translateY(110vh) rotate(360deg);
        opacity: 0;
    }
}

@media only screen and (max-width: 600px) {

    .snowflake:nth-child(2n),
    .snowflake:nth-child(4n),
    .snowflake:nth-child(6n),
    .snowflake:nth-child(8n),
    .snowflake:nth-child(10n),
    .snowflake:nth-child(12n),
    .snowflake:nth-child(14n),
    .snowflake:nth-child(16n),
    .snowflake:nth-child(18n),
    .snowflake:nth-child(20n) {
        display: none;
    }

    .snowflake {
        font-size: 1em;
    }
}

body.light .item-blue {
    background-color: #2a67c4;
    border-bottom: 6px solid #9C2D36;
}
body.light .item-pink {
    background-color: #dd6392;
    border-bottom: 6px solid #9C367B;
}
body.light .item-gold {
    background-color: #cd9f31;
    border-bottom: 6px solid #A67F2B;
}
body.light .item-teal {
    background-color: #1aacb8;
}
body.light .item-green {
    background-color: #66ad17;
    border-bottom: 6px solid #4E8214;
}
body.light .item-red {
    border-bottom: 6px solid #9C2D36;
    background-color: #dc3545;
}
body.light .item-gray {
    background-color: #A3A3A3;
    border-bottom: 6px solid #757474;
}

body.light p.thing-grid-title,
body.light p.thing-grid-subtitle {
    color: white;
    padding: 0;
}

/* ── Login page ── */
.login-card {
    background-color: #1a1a1a;
    border-radius: 10px;
    padding: 40px;
    width: 100%;
}

.login-skin-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    min-width: 130px;
}




.login-skin-name {
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    word-break: break-all;
}

.login-skin-badge {
    font-size: 0.78rem;
    color: #9e9e9e;
    text-align: center;
    background-color: #242424;
    padding: 3px 10px;
    border-radius: 5px;
    font-weight: bold;
}

.login-form-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-label {
    font-size: 0.85rem;
    font-weight: bold;
    color: #ccc;
}

.login-hint {
    font-size: 0.78rem;
    color: #9e9e9e;
    margin-top: 2px;
}

.edition-selector {
    display: flex;
    gap: 8px;
}

.edition-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #242424;
    border-radius: 10px;
    padding: 10px 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    flex: 1;
    font-size: 0.9rem;
    user-select: none;
}

.edition-option:hover {
    border-color: #555;
}

.edition-option:focus,
.edition-option:focus-within {
    outline: none;
}

.edition-radio:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.edition-option--active {
    border-color: #dc3545;
    background-color: #2a1111;
}

.edition-option--active i {
    color: #dc3545;
}

.edition-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.login-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

@media (max-width: 600px) {
    .login-card {
        flex-direction: column;
        padding: 24px;
        gap: 24px;
    }

    .login-skin-panel {
        flex-direction: row;
        min-width: unset;
        align-items: center;
        gap: 16px;
    }

    .login-skin-img {
        width: 70px;
        height: 70px;
    }
}

body.light .login-card {
    background-color: #ececec;
}

body.light .login-label {
    color: #333;
}

body.light .login-skin-badge {
    background-color: #ddd;
    color: #555;
}

body.light .edition-option {
    background-color: #ddd;
    color: #111;
}

body.light .edition-option:hover {
    border-color: #aaa;
}

body.light .edition-option--active {
    border-color: #dc3545;
    background-color: #f9dada;
}

/* ===== Cart Sidebar ===== */
.cart-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
    animation: cartOverlayFadeIn 0.2s ease;
}

@keyframes cartOverlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100vw;
    height: 100dvh;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    color: white;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
}

.cart-sidebar--open {
    transform: translateX(0);
}

.cart-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
}

.cart-sidebar-header h2 {
    margin: 0;
    font-size: 1.25rem;
}

.cart-sidebar-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.cart-sidebar-close:hover { opacity: 1; transform: none; }

.cart-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1.25rem;
}

.cart-sidebar-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cart-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #333;
}

.cart-sidebar-item-img {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #999;
}

.cart-sidebar-item-img img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
}

.cart-sidebar-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cart-sidebar-item-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-sidebar-item-server {
    font-size: 0.82rem;
    opacity: 0.65;
}

.cart-sidebar-item-price {
    font-size: 0.9rem;
}

.cart-sidebar-item-limit {
    font-size: 0.75rem;
    opacity: 0.55;
}

.cart-sidebar-item-remove {
    flex-shrink: 0;
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
}

.cart-sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #333;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cart-sidebar-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.05rem;
}

.cart-sidebar-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-direction: row;
}

.cart-sidebar-note {
    font-size: 0.8rem;
    opacity: 0.65;
    margin: 0;
}

@media (max-width: 480px) {
    .cart-sidebar { width: 100vw; }
}

/* Cart sidebar — light theme */
body.light .cart-sidebar {
    background: #f4f4f4;
    color: black;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
}

body.light .cart-sidebar-header {
    border-bottom-color: #ddd;
}

body.light .cart-sidebar-item {
    border-bottom-color: #ddd;
}

body.light .cart-sidebar-footer {
    border-top-color: #ddd;
}

/* ===== Join Page ===== */
.join-container {
    max-width: 1100px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

.join-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    padding: 3rem 2rem 2.75rem;
    border: 1px solid rgba(220, 53, 69, 0.22);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% -20%, rgba(220, 53, 69, 0.28), transparent 62%),
        #1a1a1a;
    overflow: hidden;
}

.join-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.join-hero-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 0.4rem;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5));
}

.join-hero-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border: 1px solid rgba(220, 53, 69, 0.45);
    border-radius: 999px;
    background-color: rgba(220, 53, 69, 0.12);
    color: #ff7b84;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.join-hero-title {
    margin: 0;
    padding: 0.35rem 0 0;
    color: #fff;
    font-family: "Minecraft", sans-serif;
    font-size: clamp(2rem, 5vw, 3.1rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.join-hero-text {
    max-width: 560px;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.65;
}

.join-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 0.85rem;
    padding: 12px 26px;
    border: 1px solid #dc3545;
    border-radius: 10px;
    background-color: #dc3545;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.join-copy-btn:hover {
    background-color: #b90000;
    border-color: #b90000;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(220, 53, 69, 0.35);
}

.join-copy-btn:active {
    transform: translateY(0);
}

.join-copy-btn.copied {
    background-color: #2e7d32;
    border-color: #2e7d32;
}

.join-copy-btn.copied:hover {
    background-color: #256628;
    border-color: #256628;
    box-shadow: 0 8px 22px rgba(46, 125, 50, 0.35);
}

.join-server-info {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 2.5rem;
}

.join-info-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background-color: #1a1a1a;
}

.join-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(220, 53, 69, 0.12);
    color: #dc3545;
    font-size: 1.15rem;
}

.join-info-label {
    margin-bottom: 4px;
    color: #999;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.join-info-value {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    word-break: break-all;
}

.join-info-green {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4caf50;
    font-family: inherit;
}

.join-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 1rem;
    padding: 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.join-section-title i {
    color: #dc3545;
    font-size: 1.1rem;
}

.join-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.join-step {
    position: relative;
    background-color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.join-step:hover {
    transform: translateY(-4px);
    border-color: rgba(220, 53, 69, 0.4);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.join-step-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #dc3545;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 900;
    z-index: 1;
}

.join-step-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.join-step-footer {
    padding: 12px 14px;
}

.join-step-title {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
}

.join-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 1.5rem;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 4px solid #dc3545;
    border-radius: 0 14px 14px 0;
    background-color: #1a1a1a;
}

.join-notice > i {
    flex: none;
    margin-top: 2px;
    color: #dc3545;
    font-size: 1.25rem;
}

.join-notice p {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    text-align: left;
}

@media (max-width: 900px) {
    .join-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .join-server-info {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .join-hero {
        padding: 2.25rem 1.25rem 2rem;
    }

    .join-steps {
        grid-template-columns: 1fr;
    }
}

/* Join page — light theme */
body.light .join-hero {
    border-color: rgba(220, 53, 69, 0.18);
    background:
        radial-gradient(circle at 50% -20%, rgba(220, 53, 69, 0.14), transparent 62%),
        #efefef;
}

body.light .join-hero::after {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.light .join-hero-title {
    color: #111;
}

body.light .join-hero-text {
    color: rgba(0, 0, 0, 0.62);
}

body.light .join-info-card {
    border-color: rgba(0, 0, 0, 0.07);
    background-color: #efefef;
}

body.light .join-info-icon {
    background-color: rgba(220, 53, 69, 0.1);
}

body.light .join-info-value {
    color: #111;
}

body.light .join-section-title {
    color: #111;
}

body.light .join-step {
    border-color: rgba(0, 0, 0, 0.07);
    background-color: #efefef;
}

body.light .join-step:hover {
    border-color: rgba(220, 53, 69, 0.4);
}

body.light .join-step-title {
    color: #111;
}

body.light .join-notice {
    border-color: rgba(0, 0, 0, 0.07);
    border-left-color: #dc3545;
    background-color: #efefef;
}

body.light .join-notice p {
    color: #333;
}

/* ============================================================
   About page
   ============================================================ */

.about-container {
    max-width: 1100px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

/* Hero */
.about-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    background-color: #1a1a1a;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
    text-align: center;
}

.about-hero-logo {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    object-fit: contain;
}

.about-lead {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
    margin: 0;
    padding: 0;
    max-width: 620px;
}

/* Feature cards grid */
.about-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 1.5rem;
}

.about-feature-card {
    background-color: #1a1a1a;
    border-radius: 12px;
    padding: 20px 22px;
    border-top: 3px solid #dc3545;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.about-feature-icon {
    font-size: 1.6rem;
    color: #dc3545;
    display: block;
    margin-bottom: 10px;
}

.about-feature-title {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    margin: 0 0 8px;
    padding: 0;
}

.about-feature-desc {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .about-features {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 576px) {
    .about-features {
        grid-template-columns: 1fr;
    }
}

/* About page — light theme */
body.light .about-hero {
    background-color: #efefef;
}

body.light .about-lead {
    color: rgba(0, 0, 0, 0.65);
}

body.light .about-feature-card {
    background-color: #efefef;
}

body.light .about-feature-title {
    color: #111;
}

body.light .about-feature-desc {
    color: rgba(0, 0, 0, 0.6);
}

/* Purchase history product cards */
.purchase-history-group {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.purchase-history-header {
    font-size: 0.85rem;
}

body.light .purchase-history-group {
    border-bottom-color: rgba(0,0,0,0.1);
}

/* ===== Profile Card ===== */

.login-card {
    display: flex;
    justify-content: center;
    width: 100%;
}

.login-card-inner {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: center;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .login-card-inner {
        flex-direction: column;
        gap: 24px;
        width: 100%;
    }
}

.profile-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #242424;
    border-radius: 10px;
    padding: 10px 16px;
}

.profile-stat-label {
    font-size: 0.85rem;
    color: #9e9e9e;
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-stat-value {
    font-weight: bold;
    font-size: 1rem;
}

body.light .profile-stat-item {
    background-color: #ddd;
}

body.light .profile-stat-label {
    color: #555;
}

.login-bar-icon {
    font-size: 20px;
}

.ban-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #666;
}
.ban-empty-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
    color: #444;
}
.ban-count {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1rem;
}
.ban-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.ban-item {
    background-color: #1e1e1e;
    border-radius: 10px;
    border-left: 4px solid #c0392b;
    padding: 0.85rem 1rem;
    transition: background 0.15s;
}
.ban-item--inactive {
    border-left-color: #444;
    opacity: 0.7;
}
.ban-item-body {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}
.ban-avatar {
    border-radius: 5px;
    image-rendering: pixelated;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}
.ban-info {
    flex: 1;
    min-width: 0;
}
.ban-info-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ban-name {
    font-weight: 600;
    font-size: 1rem;
}
.ban-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.ban-badge--active {
    background: rgba(192, 57, 43, 0.2);
    color: #e05555;
    border: 1px solid rgba(192, 57, 43, 0.4);
}
.ban-badge--inactive {
    background: rgba(255,255,255,0.05);
    color: #888;
    border: 1px solid #333;
}
.ban-uuid {
    font-size: 0.7rem;
    font-family: monospace;
    color: #555;
    margin-top: 2px;
}
.ban-reason {
    font-size: 0.875rem;
    color: #e05555;
    margin-top: 0.3rem;
}
.ban-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.45rem;
}
.ban-meta-item {
    font-size: 0.78rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ban-meta-item--expires {
    color: #c8853a;
}
.ban-meta-item--permanent {
    color: #555;
}

body.light .ban-item        { background-color: #f4f4f4; }
body.light .ban-item--inactive { opacity: 0.6; }
body.light .ban-uuid        { color: #aaa; }
body.light .ban-meta-item   { color: #999; }
body.light .ban-count       { color: #999; }
body.light .ban-empty       { color: #999; }
body.light .ban-empty-icon  { color: #bbb; }
body.light .ban-badge--inactive { background: rgba(0,0,0,0.05); color: #aaa; border-color: #ddd; }

/* ═══════════════════════════════════════════════
   ADMIN STYLES
   ═══════════════════════════════════════════════ */

.admin-layout {
    display: flex;
    min-height: 100vh;
    background-color: #1c1c1c;
}

.admin-sidebar {
    width: 240px;
    min-width: 240px;
    background-color: #111111;
    border-right: 1px solid #2a2a2a;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
}

.admin-sidebar-header {
    padding: 20px 16px;
    border-bottom: 1px solid #2a2a2a;
    text-align: center;
}

.admin-sidebar-header img {
    width: 120px;
    border-radius: 0;
}

.admin-sidebar-title {
    color: #dc3545;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 8px;
}

.admin-nav-section {
    padding: 8px 0;
}

.admin-nav-heading {
    font-size: 10px;
    font-weight: 700;
    color: #666;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 8px 16px 4px;
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    color: #ccc;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.admin-nav-item:hover {
    background-color: #1e1e1e;
    color: white;
    border-left-color: #555;
}

.admin-nav-item.active {
    background-color: rgba(220, 53, 69, 0.12);
    color: #dc3545;
    border-left-color: #dc3545;
    font-weight: 600;
}

.admin-nav-item i {
    font-size: 15px;
    width: 18px;
    text-align: center;
}

.admin-sidebar-footer {
    margin-top: auto;
    padding: 12px;
    border-top: 1px solid #2a2a2a;
}

.admin-content {
    margin-left: 240px;
    flex: 1;
    padding: 24px 28px;
    min-height: 100vh;
}

.admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #2a2a2a;
}

.admin-topbar h1 {
    font-size: 22px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.admin-card {
    background-color: #242424;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.admin-card-title {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-table th {
    text-align: left;
    padding: 10px 12px;
    color: #888;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #333;
}

.admin-table td {
    padding: 12px;
    border-bottom: 1px solid #2a2a2a;
    color: #ddd;
    vertical-align: middle;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background-color: rgba(255,255,255,0.03);
}

.admin-table img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
}

.stat-card {
    background-color: #242424;
    border-radius: 12px;
    padding: 20px;
    flex: 1;
    min-width: 160px;
}

.stat-card-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    margin-bottom: 8px;
}

.stat-card-value {
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.stat-cards-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.btn-admin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
}

.btn-admin-primary {
    background-color: #dc3545;
    color: white;
}

.btn-admin-primary:hover {
    background-color: #c82333;
    color: white;
}

.btn-admin-secondary {
    background-color: #333;
    color: #ddd;
}

.btn-admin-secondary:hover {
    background-color: #404040;
    color: white;
}

.btn-admin-danger {
    background-color: #6b1c24;
    color: #ff8a8a;
}

.btn-admin-danger:hover {
    background-color: #8b2230;
    color: white;
}

.btn-admin-success {
    background-color: #1a4a2a;
    color: #6be895;
}

.btn-admin-success:hover {
    background-color: #235a35;
    color: white;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #aaa;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.form-group input,
.form-group select,
.form-group textarea {
    background-color: #1c1c1c;
    border: 1px solid #333;
    color: white;
    border-radius: 8px;
    padding: 8px 12px;
    width: 100%;
    font-size: 14px;
    font-family: inherit;
    margin: 0;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #dc3545;
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px;
}

.admin-form-card {
    background-color: #242424;
    border-radius: 12px;
    padding: 28px;
}

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 500;
}

.alert-success {
    background-color: rgba(107, 232, 149, 0.12);
    border: 1px solid rgba(107, 232, 149, 0.3);
    color: #6be895;
}

.alert-error {
    background-color: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #ff6b7a;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.badge-pending  { background: rgba(255,193,7,0.15);  color: #ffc107; }
.badge-delivered { background: rgba(13,110,253,0.15); color: #6ea8fe; }
.badge-executed  { background: rgba(25,135,84,0.15);  color: #6be895; }
.badge-failed    { background: rgba(220,53,69,0.15);  color: #ff6b7a; }

/* Clickable table rows */
.admin-table-row-link { cursor: pointer; }
.admin-table-row-link:hover td { background-color: rgba(255,255,255,0.05) !important; }

/* Admin themed pagination */
.admin-pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #2a2a2a;
}
.admin-pagination a,
.admin-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.admin-pagination a { background: #2a2a2a; color: #ccc; }
.admin-pagination a:hover { background: #383838; color: #fff; }
.admin-pagination span.current { background: #dc3545; color: white; font-weight: 700; }
.admin-pagination span.disabled { background: #1e1e1e; color: #444; pointer-events: none; }

.admin-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1c1c1c;
}

.admin-login-card {
    background-color: #242424;
    border-radius: 16px;
    padding: 40px 36px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.admin-login-logo {
    text-align: center;
    margin-bottom: 28px;
}

.admin-login-logo img {
    width: 140px;
    border-radius: 0;
}

.admin-login-title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 24px;
}

/* Admin hamburger (mobile) */
.admin-burger {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 200;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    color: #ccc;
    font-size: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .2s, color .2s;
    transform: none;
}
.admin-burger:hover { background: #2a2a2a; color: white; }

/* Admin overlay (mobile) */
.admin-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 99;
    cursor: pointer;
}
.admin-overlay.visible { display: block; }

/* Alert close button */
.admin-alert {
    display: flex;
    align-items: center;
}
.admin-alert-close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    opacity: .7;
    line-height: 1;
    transform: none;
    transition: opacity .15s;
}
.admin-alert-close:hover { opacity: 1; transform: none; background: none; }

/* Stat card accent variants */
.stat-card-green  { border-left: 3px solid #23d05e; }
.stat-card-yellow { border-left: 3px solid #ffc107; }
.stat-card-blue   { border-left: 3px solid #60a5fa; }
.stat-card-green .stat-card-value  { color: #6be895; }
.stat-card-blue  .stat-card-value  { color: #93c5fd; }

@media (max-width: 768px) {
    .admin-burger { display: flex; }
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 100;
    }
    .admin-sidebar.open {
        transform: translateX(0);
    }
    .admin-content {
        margin-left: 0;
        padding-top: 64px;
    }
    .admin-topbar { padding-top: 0; }
    .stat-cards-row {
        flex-direction: column;
    }
}

/* ─── Static page styles ─────────────────────────────────────────────────── */

.page-header {
    margin-bottom: 28px;
}

.page-header h1 {
    font-size: 28px;
    font-weight: 800;
    color: white;
    margin: 0;
}

.content-card {
    background: #131313;
    border: 1px solid #1f1f1f;
    border-radius: 12px;
    padding: 28px 32px;
}

.content-card h2 {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin: 24px 0 10px;
}

.content-card h2:first-child {
    margin-top: 0;
}

.content-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: #ccc;
    margin: 20px 0 8px;
}

.content-card p {
    color: #aaa;
    line-height: 1.7;
    margin: 0 0 14px;
}

.content-card ul,
.content-card ol {
    color: #aaa;
    line-height: 1.9;
    padding-left: 22px;
    margin: 0 0 14px;
}

.content-card a {
    color: #23d05e;
    text-decoration: none;
}

.content-card a:hover {
    text-decoration: underline;
}

.content-card strong {
    color: #ccc;
}

/* ─── Product details modal ─────────────────────────────────────────────── */

.product-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 4px 2px;
    background: none;
    border: 0;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.52);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
    height: auto;
}

.product-more-btn:hover {
    background: none;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.light .product-more-btn {
    background: none;
    border: 0;
    color: rgba(0, 0, 0, 0.5);
}

body.light .product-more-btn:hover {
    background: none;
    color: #111;
}

body.product-modal-open {
    overflow: hidden;
}

.product-modal.show {
    animation: product-modal-fade 200ms ease both;
}

.product-modal.show .modal-dialog {
    animation: product-modal-pop 280ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes product-modal-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes product-modal-pop {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-modal.show,
    .product-modal.show .modal-dialog {
        animation: none;
    }
}

.product-modal .modal-dialog {
    max-width: 860px;
}

.product-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
}

.product-modal .modal-body {
    overflow-y: auto;
}

.product-modal .modal-title {
    text-align: left;
    overflow-wrap: anywhere;
}

.product-modal .modal-footer {
    align-items: center;
}

.product-modal .great-button {
    width: auto;
    height: auto;
    padding: 10px 18px;
}

.product-modal-media {
    text-align: center;
}

.product-modal .product-modal-media img {
    width: auto;
    max-width: 100%;
    max-height: 320px;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    padding: 0;
}

.product-modal-placeholder {
    width: 100%;
    min-height: 220px;
    border-radius: 10px;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-modal-placeholder i {
    font-size: 3rem;
    color: #555;
}

.product-modal-info {
    text-align: left;
}

.product-modal-info .price-container {
    justify-content: flex-start;
    margin-bottom: 16px;
}

.product-modal-qty-label {
    color: #888;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.product-modal-qty {
    margin-bottom: 18px;
}

.product-modal-qty .qty-preset-btn {
    flex: 0 0 auto;
    min-width: 58px;
    padding: 8px 12px;
}

.product-modal-description {
    color: #bdbdbd;
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
    overflow-wrap: anywhere;
}

.product-modal-description > :first-child {
    margin-top: 0;
}

.product-modal-description > :last-child {
    margin-bottom: 0;
}

.product-modal-description h1,
.product-modal-description h2,
.product-modal-description h3,
.product-modal-description h4,
.product-modal-description h5,
.product-modal-description h6 {
    color: #fff;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.1em 0 0.45em;
}

.product-modal-description h1 { font-size: 1.5em; }
.product-modal-description h2 { font-size: 1.3em; }
.product-modal-description h3 { font-size: 1.15em; }
.product-modal-description h4,
.product-modal-description h5,
.product-modal-description h6 { font-size: 1em; }

.product-modal-description p {
    margin: 0 0 0.75em;
}

.product-modal-description ul,
.product-modal-description ol {
    margin: 0 0 0.75em;
    padding-left: 22px;
}

.product-modal-description li {
    margin: 0.2em 0;
}

.product-modal-description a {
    color: #23d05e;
    text-decoration: none;
}

.product-modal-description a:hover {
    text-decoration: underline;
}

.product-modal-description strong {
    color: #fff;
}

.product-modal-description blockquote {
    border-left: 3px solid #dc3545;
    margin: 0.6em 0;
    padding: 2px 12px;
    color: #999;
}

.product-modal-description code {
    background: rgba(255, 255, 255, 0.09);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.88em;
    font-family: monospace;
}

.product-modal-description pre {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    padding: 10px 14px;
    overflow-x: auto;
    margin: 0.6em 0;
}

.product-modal-description pre code {
    background: none;
    padding: 0;
}

.product-modal-description table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.6em 0;
    font-size: 0.92em;
}

.product-modal-description th,
.product-modal-description td {
    border: 1px solid #3a3a3a;
    padding: 6px 8px;
    text-align: left;
}

.product-modal-description th {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.product-modal-description hr {
    border: 0;
    border-top: 1px solid #3a3a3a;
    margin: 1em 0;
}

.product-modal-description img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.product-modal-description-empty {
    color: #777;
    font-style: italic;
}

body.light .product-modal-description {
    color: #333;
}

body.light .product-modal-description h1,
body.light .product-modal-description h2,
body.light .product-modal-description h3,
body.light .product-modal-description h4,
body.light .product-modal-description h5,
body.light .product-modal-description h6,
body.light .product-modal-description strong {
    color: #111;
}

body.light .product-modal-description a {
    color: #0a7d32;
}

body.light .product-modal-description blockquote {
    color: #555;
}

body.light .product-modal-description code {
    background: rgba(0, 0, 0, 0.08);
}

body.light .product-modal-description pre {
    background: rgba(0, 0, 0, 0.06);
}

body.light .product-modal-description th,
body.light .product-modal-description td {
    border-color: #c0c0c0;
}

body.light .product-modal-description th {
    background: rgba(0, 0, 0, 0.05);
}

body.light .product-modal-description hr {
    border-top-color: #c0c0c0;
}

body.light .product-modal-placeholder {
    background: #e0e0e0;
}

body.light .product-modal-placeholder i {
    color: #999;
}

body.light .product-modal-qty-label {
    color: #666;
}

/* ─── Admin Markdown editor ─────────────────────────────────────────────── */

.md-editor {
    border: 1px solid #383838;
    border-radius: 10px;
    background: #141414;
    overflow: hidden;
}

.md-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: #1c1c1c;
    border-bottom: 1px solid #333;
}

.md-btn {
    width: 32px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #bbb;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.md-btn:hover {
    background: #2a2a2a;
    border-color: #444;
    color: #fff;
}

.md-toolbar-sep {
    width: 1px;
    height: 18px;
    background: #333;
    margin: 0 4px;
}

.admin-layout .md-editor textarea {
    width: 100%;
    min-height: 170px;
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-radius: 0;
    background: #141414;
    color: #e5e5e5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
}

.admin-layout .md-editor textarea:focus {
    border: 0;
    outline: none;
    box-shadow: inset 0 0 0 1px #3b82f6;
}

.md-editor-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 7px 10px;
    background: #1a1a1a;
    border-top: 1px solid #2c2c2c;
    color: #777;
    font-size: 11px;
}

.md-hint code {
    background: #2a2a2a;
    color: #aaa;
    padding: 1px 4px;
    border-radius: 3px;
}

.md-counter {
    white-space: nowrap;
    color: #888;
}

/* ===== Seasonal themes (class set server-side on <body>) ===== */
body.christmas .snowflakes {
    display: block;
}

/* Halloween */
body.halloween a,
body.halloween .nav-item--active { color: #ff7518; }
body.halloween ::selection { background: #ff7518; color: #16101f; }
body.halloween .nav-item--active::after { background-color: #ff7518; }
body.halloween .great-button {
    background-color: #ff7518;
    border-bottom-color: #b8500d;
}
body.halloween .great-button:hover { background-color: #ff8c3a; }
/* Pumpkins sitting on top of elements */
body.halloween #login-box,
body.halloween footer,
body.halloween .page-sidebar .nav-list {
    position: relative;
}
body.halloween #login-box::before,
body.halloween #login-box::after,
body.halloween footer::before {
    position: absolute;
    line-height: 1;
    pointer-events: none;
    z-index: 100;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
body.halloween #login-box::before { content: '🎃'; font-size: 34px; top: -26px; right: 24px; }
body.halloween #login-box::after  { content: '🎃'; font-size: 22px; top: -17px; right: 68px; transform: rotate(-8deg); }
body.halloween footer::before     { content: '🎃'; font-size: 40px; top: -30px; left: 5%; }
/* Cobwebs drawn as SVG, flush into corners so they look attached */
body.halloween {
    --web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0L100.0 0.0M0 0L95.1 30.9M0 0L80.9 58.8M0 0L58.8 80.9M0 0L30.9 95.1M0 0L0.0 100.0M22.0 0.0Q17.4 2.8 20.9 6.8M20.9 6.8Q15.7 8.0 17.8 12.9M17.8 12.9Q12.4 12.4 12.9 17.8M12.9 17.8Q8.0 15.7 6.8 20.9M6.8 20.9Q2.8 17.4 0.0 22.0M40.0 0.0Q31.6 5.0 38.0 12.4M38.0 12.4Q28.5 14.5 32.4 23.5M32.4 23.5Q22.6 22.6 23.5 32.4M23.5 32.4Q14.5 28.5 12.4 38.0M12.4 38.0Q5.0 31.6 0.0 40.0M58.0 0.0Q45.8 7.3 55.2 17.9M55.2 17.9Q41.3 21.1 46.9 34.1M46.9 34.1Q32.8 32.8 34.1 46.9M34.1 46.9Q21.1 41.3 17.9 55.2M17.9 55.2Q7.3 45.8 0.0 58.0M76.0 0.0Q60.1 9.5 72.3 23.5M72.3 23.5Q54.2 27.6 61.5 44.7M61.5 44.7Q43.0 43.0 44.7 61.5M44.7 61.5Q27.6 54.2 23.5 72.3M23.5 72.3Q9.5 60.1 0.0 76.0M94.0 0.0Q74.3 11.8 89.4 29.0M89.4 29.0Q67.0 34.1 76.0 55.3M76.0 55.3Q53.2 53.2 55.3 76.0M55.3 76.0Q34.1 67.0 29.0 89.4M29.0 89.4Q11.8 74.3 0.0 94.0' fill='none' stroke='rgba%28255%2C255%2C255%2C.55%29' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
body.halloween.light {
    --web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0L100.0 0.0M0 0L95.1 30.9M0 0L80.9 58.8M0 0L58.8 80.9M0 0L30.9 95.1M0 0L0.0 100.0M22.0 0.0Q17.4 2.8 20.9 6.8M20.9 6.8Q15.7 8.0 17.8 12.9M17.8 12.9Q12.4 12.4 12.9 17.8M12.9 17.8Q8.0 15.7 6.8 20.9M6.8 20.9Q2.8 17.4 0.0 22.0M40.0 0.0Q31.6 5.0 38.0 12.4M38.0 12.4Q28.5 14.5 32.4 23.5M32.4 23.5Q22.6 22.6 23.5 32.4M23.5 32.4Q14.5 28.5 12.4 38.0M12.4 38.0Q5.0 31.6 0.0 40.0M58.0 0.0Q45.8 7.3 55.2 17.9M55.2 17.9Q41.3 21.1 46.9 34.1M46.9 34.1Q32.8 32.8 34.1 46.9M34.1 46.9Q21.1 41.3 17.9 55.2M17.9 55.2Q7.3 45.8 0.0 58.0M76.0 0.0Q60.1 9.5 72.3 23.5M72.3 23.5Q54.2 27.6 61.5 44.7M61.5 44.7Q43.0 43.0 44.7 61.5M44.7 61.5Q27.6 54.2 23.5 72.3M23.5 72.3Q9.5 60.1 0.0 76.0M94.0 0.0Q74.3 11.8 89.4 29.0M89.4 29.0Q67.0 34.1 76.0 55.3M76.0 55.3Q53.2 53.2 55.3 76.0M55.3 76.0Q34.1 67.0 29.0 89.4M29.0 89.4Q11.8 74.3 0.0 94.0' fill='none' stroke='rgba%2860%2C60%2C60%2C.55%29' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
body.halloween::before,
body.halloween::after {
    content: '';
    position: fixed;
    width: 180px;
    height: 180px;
    background: var(--web) no-repeat 0 0 / 100% 100%;
    pointer-events: none;
    z-index: 50;
}
body.halloween::before { top: 0; left: 0; }
body.halloween::after  { top: 0; right: 0; transform: scaleX(-1); }

/* webs stuck into the corners of elements */
body.halloween footer,
body.halloween .footer-bottom { position: relative; }
body.halloween .footer-column:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 120px;
    height: 120px;
    background: var(--web) no-repeat 0 0 / 100% 100%;
    transform: scaleY(-1);
    pointer-events: none;
    opacity: .8;
}

/* More decorations, all static */
body.halloween .page-sidebar::before,
body.halloween .page-sidebar::after,
body.halloween .footer-bottom::before,
body.halloween .footer-bottom::after {
    position: absolute;
    line-height: 1;
    pointer-events: none;
    z-index: 100;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
body.halloween .page-sidebar::before { content: '👻'; font-size: 34px; top: -28px; left: 20px; }
body.halloween .page-sidebar::after  { content: '🦇'; font-size: 26px; top: -22px; right: 24px; }
body.halloween .footer-bottom { position: relative; }
body.halloween .footer-bottom::before { content: '💀'; font-size: 28px; top: -20px; right: 8%; }
body.halloween .footer-bottom::after  { content: '🕷️'; font-size: 24px; top: -18px; left: 12%; }
/* spider on the login bar */
body.halloween #login-box > .login-info::before {
    content: '🕷️';
    position: absolute;
    left: 40%;
    top: -18px;
    font-size: 22px;
    line-height: 1;
    pointer-events: none;
}

body.halloween.light a,
body.halloween.light .nav-item--active { color: #8a3dc4; }

/* Christmas */
body.christmas a,
body.christmas .nav-item--active { color: #e8403f; }
body.christmas .nav-item--active::after { background-color: #5fb4f5; }
body.christmas .great-button {
    background-color: #3b93e6;
    background-image:
        radial-gradient(circle at 18% 28%, rgba(255, 255, 255, .8) 0 1px, transparent 1.5px),
        radial-gradient(circle at 62% 70%, rgba(255, 255, 255, .7) 0 1px, transparent 1.5px),
        radial-gradient(circle at 86% 30%, rgba(255, 255, 255, .8) 0 1px, transparent 1.5px),
        linear-gradient(to bottom, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .12) 55%, rgba(255, 255, 255, 0) 100%);
    border: 1px solid rgba(255, 255, 255, .55);
    border-bottom: 4px solid #a9d8ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 10px rgba(140, 205, 255, .45);
    text-shadow: 0 1px 2px rgba(20, 70, 130, .6);
}
body.christmas .great-button:hover {
    background-color: #55a8f2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 16px rgba(160, 220, 255, .7);
}
body.christmas .great-button:disabled { box-shadow: none; filter: grayscale(.5); }
body.christmas .snowflake { color: #cfe9ff; }
body.christmas.light .snowflake { color: #4da6ff; }

/* Halloween: extra static icons */
body.halloween .cart-sidebar-header h2::after { content: ' 🕯️'; }
body.halloween .footer-column:nth-child(2) h3::after { content: ' 🌙'; }
body.halloween .footer-column:nth-child(3) h3::after { content: ' 🪦'; }

/* Bats flying across the header background, each on its own path, wings flapping */
body.halloween .header-background { overflow: hidden; }
.bat-line { display: none; }
body.halloween .bat-line {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
}
body.halloween .bat-fly {
    position: absolute;
    left: 0;
    animation: header-bats-x var(--fly, 40s) linear infinite;
    animation-delay: var(--delay, 0s);
}
body.halloween .bat {
    display: block;
    height: auto;
    fill: #a99bc0;
    opacity: .5;
    overflow: visible;
    animation: header-bats-y var(--bob, 5s) ease-in-out infinite alternate;
}
body.halloween .bat .wing {
    transform-origin: 20px 10px;
    animation: bat-flap var(--flap, .35s) ease-in-out infinite alternate;
}
@keyframes bat-flap {
    from { transform: rotate(-28deg); }
    to   { transform: rotate(22deg); }
}
@keyframes header-bats-x {
    from { transform: translateX(-80px); }
    to   { transform: translateX(100vw); }
}
@keyframes header-bats-y {
    from { translate: 0 -8px; }
    to   { translate: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
    body.halloween .bat-fly, body.halloween .bat, body.halloween .bat .wing { animation: none; }
    body.halloween .bat-fly { transform: translateX(30vw); }
}

/* Smaller decorations on mobile */
@media (max-width: 768px) {
    body.halloween::before,
    body.halloween::after { width: 80px; height: 80px; }
    body.halloween .footer-column:first-child::before { width: 70px; height: 70px; }
    body.halloween .bat { transform: scale(.7); }
    body.halloween #login-box::before { font-size: 26px; top: -20px; right: 14px; }
    body.halloween #login-box::after { font-size: 18px; top: -14px; right: 50px; }
}

/* Christmas: snow layer (single element). Corner version for the login box, flat-ended version for flat edges */
body.christmas { --snow-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='6' x2='0' y2='34'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.55' stop-color='%23eef5fc'/%3E%3Cstop offset='1' stop-color='%23b9cfe6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath d='M40 13.5C22 13.5 6 16.5 1.5 24C0.3 26 0 28 0.4 30C2 27.5 7 24 14 24L40 24Z' fill='url%28%23g%29'/%3E%3Cpath d='M40 14.5C22 14.5 7.5 17.5 2.6 25C1.5 26.8 1.2 28 1.3 29' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='.8'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='6' x2='0' y2='34'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.55' stop-color='%23eef5fc'/%3E%3Cstop offset='1' stop-color='%23b9cfe6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate%2840 0%29 scale%28-1 1%29'%3E%3Cpath d='M40 13.5C22 13.5 6 16.5 1.5 24C0.3 26 0 28 0.4 30C2 27.5 7 24 14 24L40 24Z' fill='url%28%23g%29'/%3E%3Cpath d='M40 14.5C22 14.5 7.5 17.5 2.6 25C1.5 26.8 1.2 28 1.3 29' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='.8'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.55' stop-color='%23eef5fc'/%3E%3Cstop offset='1' stop-color='%23b9cfe6'/%3E%3C/linearGradient%3E%3ClinearGradient id='i' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f2f9ff'/%3E%3Cstop offset='1' stop-color='%238ec4ee' stop-opacity='.85'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11.5 22 L16.5 22 Q15.2 27.9 14.3 31.0 Q12.8 27.9 11.5 22ZM40.6 22 L47.4 22 Q45.7 29.5 44.3 34.0 Q42.3 29.5 40.6 22ZM72.9 22 L81.1 22 Q79.1 30.1 77.3 35.0 Q74.9 30.1 72.9 22ZM103.6 22 L110.4 22 Q108.7 28.9 107.3 33.0 Q105.3 28.9 103.6 22ZM134.7 22 L139.3 22 Q138.2 31.7 137.3 38.0 Q135.8 31.7 134.7 22ZM165.0 22 L173.0 22 Q171.0 27.9 169.3 31.0 Q167.0 27.9 165.0 22ZM199.2 22 L206.8 22 Q204.9 31.1 203.3 37.0 Q201.1 31.1 199.2 22ZM221.9 22 L228.1 22 Q226.5 31.7 225.3 38.0 Q223.5 31.7 221.9 22ZM242.8 22 L249.2 22 Q247.6 32.2 246.3 39.0 Q244.4 32.2 242.8 22ZM274.8 22 L281.2 22 Q279.6 28.9 278.3 33.0 Q276.4 28.9 274.8 22ZM305.9 22 L312.1 22 Q310.6 32.2 309.3 39.0 Q307.4 32.2 305.9 22ZM342.0 22 L348.0 22 Q346.5 28.9 345.3 33.0 Q343.5 28.9 342.0 22ZM376.4 22 L383.6 22 Q381.8 31.1 380.3 37.0 Q378.2 31.1 376.4 22ZM397.3 22 L404.7 22 Q402.9 32.2 401.3 39.0 Q399.1 32.2 397.3 22ZM417.7 22 L422.3 22 Q421.1 28.9 420.3 33.0 Q418.9 28.9 417.7 22ZM447.0 22 L453.0 22 Q451.5 32.2 450.3 39.0 Q448.5 32.2 447.0 22Z' fill='url%28%23i%29'/%3E%3Cpath d='M0 13.5 L4 13.4 L8 13.4 L12 13.6 L16 13.3 L20 12.6 L24 11.6 L28 11.2 L32 11.4 L36 11.8 L40 11.6 L44 10.4 L48 8.7 L52 7.2 L56 6.4 L60 6.0 L64 5.9 L68 5.9 L72 6.6 L76 7.9 L80 9.7 L84 11.0 L88 11.4 L92 11.3 L96 11.3 L100 11.8 L104 12.8 L108 13.4 L112 13.3 L116 12.8 L120 12.2 L124 11.9 L128 11.7 L132 11.4 L136 10.9 L140 10.9 L144 11.7 L148 12.9 L152 13.9 L156 13.9 L160 12.9 L164 11.8 L168 11.1 L172 11.0 L176 11.1 L180 11.0 L184 10.9 L188 11.0 L192 11.6 L196 12.1 L200 12.0 L204 11.3 L208 10.6 L212 10.4 L216 10.8 L220 11.2 L224 10.8 L228 9.7 L232 8.2 L236 7.1 L240 6.5 L244 6.3 L248 6.2 L252 6.5 L256 7.5 L260 9.2 L264 11.1 L268 12.4 L272 12.8 L276 12.6 L280 12.6 L284 13.2 L288 14.0 L292 14.5 L296 14.4 L300 14.0 L304 13.8 L308 13.7 L312 13.5 L316 12.9 L320 12.1 L324 11.8 L328 12.2 L332 12.9 L336 13.1 L340 12.3 L344 10.8 L348 9.3 L352 8.4 L356 8.0 L360 7.9 L364 7.8 L368 7.9 L372 8.7 L376 9.9 L380 10.8 L384 11.1 L388 10.7 L392 10.3 L396 10.5 L400 11.2 L404 11.8 L408 11.6 L412 10.7 L416 9.7 L420 9.1 L424 8.8 L428 8.6 L432 8.5 L436 8.7 L440 9.7 L444 11.4 L448 13.0 L452 13.8 L456 13.6 L460 13.0 L464 12.8 L468 13.1 L472 13.5 L476 13.7 L480 13.5 L480 24 L0 24 Z' fill='url%28%23g%29'/%3E%3Cpath d='M0 15.5 L4 15.4 L8 15.4 L12 15.6 L16 15.3 L20 14.6 L24 13.6 L28 13.2 L32 13.4 L36 13.8 L40 13.6 L44 12.4 L48 10.7 L52 9.2 L56 8.4 L60 8.0 L64 7.9 L68 7.9 L72 8.6 L76 9.9 L80 11.7 L84 13.0 L88 13.4 L92 13.3 L96 13.3 L100 13.8 L104 14.8 L108 15.4 L112 15.3 L116 14.8 L120 14.2 L124 13.9 L128 13.7 L132 13.4 L136 12.9 L140 12.9 L144 13.7 L148 14.9 L152 15.9 L156 15.9 L160 14.9 L164 13.8 L168 13.1 L172 13.0 L176 13.1 L180 13.0 L184 12.9 L188 13.0 L192 13.6 L196 14.1 L200 14.0 L204 13.3 L208 12.6 L212 12.4 L216 12.8 L220 13.2 L224 12.8 L228 11.7 L232 10.2 L236 9.1 L240 8.5 L244 8.3 L248 8.2 L252 8.5 L256 9.5 L260 11.2 L264 13.1 L268 14.4 L272 14.8 L276 14.6 L280 14.6 L284 15.2 L288 16.0 L292 16.5 L296 16.4 L300 16.0 L304 15.8 L308 15.7 L312 15.5 L316 14.9 L320 14.1 L324 13.8 L328 14.2 L332 14.9 L336 15.1 L340 14.3 L344 12.8 L348 11.3 L352 10.4 L356 10.0 L360 9.9 L364 9.8 L368 9.9 L372 10.7 L376 11.9 L380 12.8 L384 13.1 L388 12.7 L392 12.3 L396 12.5 L400 13.2 L404 13.8 L408 13.6 L412 12.7 L416 11.7 L420 11.1 L424 10.8 L428 10.6 L432 10.5 L436 10.7 L440 11.7 L444 13.4 L448 15.0 L452 15.8 L456 15.6 L460 15.0 L464 14.8 L468 15.1 L472 15.5 L476 15.7 L480 15.5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' opacity='.8'/%3E%3Ccircle cx='205' cy='10' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='441' cy='19' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='117' cy='12' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='248' cy='15' r='1.1' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='211' cy='15' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='297' cy='19' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='406' cy='19' r='0.9' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='180' cy='10' r='0.9' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='178' cy='9' r='0.9' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='396' cy='10' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='134' cy='20' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='13' cy='9' r='0.9' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='416' cy='16' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='357' cy='17' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='237' cy='17' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='382' cy='11' r='0.9' fill='%23fff' opacity='.9'/%3E%3C/svg%3E"); --snow-flat-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='6' x2='0' y2='34'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.55' stop-color='%23eef5fc'/%3E%3Cstop offset='1' stop-color='%23b9cfe6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath d='M40 13.5C22 13.5 9 16 0 24L40 24Z' fill='url%28%23g%29'/%3E%3Cpath d='M40 14.5C22 14.5 10 17 1.5 24' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='.8'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='6' x2='0' y2='34'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.55' stop-color='%23eef5fc'/%3E%3Cstop offset='1' stop-color='%23b9cfe6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate%2840 0%29 scale%28-1 1%29'%3E%3Cpath d='M40 13.5C22 13.5 9 16 0 24L40 24Z' fill='url%28%23g%29'/%3E%3Cpath d='M40 14.5C22 14.5 10 17 1.5 24' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='.8'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.55' stop-color='%23eef5fc'/%3E%3Cstop offset='1' stop-color='%23b9cfe6'/%3E%3C/linearGradient%3E%3ClinearGradient id='i' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f2f9ff'/%3E%3Cstop offset='1' stop-color='%238ec4ee' stop-opacity='.85'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11.5 22 L16.5 22 Q15.2 27.9 14.3 31.0 Q12.8 27.9 11.5 22ZM40.6 22 L47.4 22 Q45.7 29.5 44.3 34.0 Q42.3 29.5 40.6 22ZM72.9 22 L81.1 22 Q79.1 30.1 77.3 35.0 Q74.9 30.1 72.9 22ZM103.6 22 L110.4 22 Q108.7 28.9 107.3 33.0 Q105.3 28.9 103.6 22ZM134.7 22 L139.3 22 Q138.2 31.7 137.3 38.0 Q135.8 31.7 134.7 22ZM165.0 22 L173.0 22 Q171.0 27.9 169.3 31.0 Q167.0 27.9 165.0 22ZM199.2 22 L206.8 22 Q204.9 31.1 203.3 37.0 Q201.1 31.1 199.2 22ZM221.9 22 L228.1 22 Q226.5 31.7 225.3 38.0 Q223.5 31.7 221.9 22ZM242.8 22 L249.2 22 Q247.6 32.2 246.3 39.0 Q244.4 32.2 242.8 22ZM274.8 22 L281.2 22 Q279.6 28.9 278.3 33.0 Q276.4 28.9 274.8 22ZM305.9 22 L312.1 22 Q310.6 32.2 309.3 39.0 Q307.4 32.2 305.9 22ZM342.0 22 L348.0 22 Q346.5 28.9 345.3 33.0 Q343.5 28.9 342.0 22ZM376.4 22 L383.6 22 Q381.8 31.1 380.3 37.0 Q378.2 31.1 376.4 22ZM397.3 22 L404.7 22 Q402.9 32.2 401.3 39.0 Q399.1 32.2 397.3 22ZM417.7 22 L422.3 22 Q421.1 28.9 420.3 33.0 Q418.9 28.9 417.7 22ZM447.0 22 L453.0 22 Q451.5 32.2 450.3 39.0 Q448.5 32.2 447.0 22Z' fill='url%28%23i%29'/%3E%3Cpath d='M0 13.5 L4 13.4 L8 13.4 L12 13.6 L16 13.3 L20 12.6 L24 11.6 L28 11.2 L32 11.4 L36 11.8 L40 11.6 L44 10.4 L48 8.7 L52 7.2 L56 6.4 L60 6.0 L64 5.9 L68 5.9 L72 6.6 L76 7.9 L80 9.7 L84 11.0 L88 11.4 L92 11.3 L96 11.3 L100 11.8 L104 12.8 L108 13.4 L112 13.3 L116 12.8 L120 12.2 L124 11.9 L128 11.7 L132 11.4 L136 10.9 L140 10.9 L144 11.7 L148 12.9 L152 13.9 L156 13.9 L160 12.9 L164 11.8 L168 11.1 L172 11.0 L176 11.1 L180 11.0 L184 10.9 L188 11.0 L192 11.6 L196 12.1 L200 12.0 L204 11.3 L208 10.6 L212 10.4 L216 10.8 L220 11.2 L224 10.8 L228 9.7 L232 8.2 L236 7.1 L240 6.5 L244 6.3 L248 6.2 L252 6.5 L256 7.5 L260 9.2 L264 11.1 L268 12.4 L272 12.8 L276 12.6 L280 12.6 L284 13.2 L288 14.0 L292 14.5 L296 14.4 L300 14.0 L304 13.8 L308 13.7 L312 13.5 L316 12.9 L320 12.1 L324 11.8 L328 12.2 L332 12.9 L336 13.1 L340 12.3 L344 10.8 L348 9.3 L352 8.4 L356 8.0 L360 7.9 L364 7.8 L368 7.9 L372 8.7 L376 9.9 L380 10.8 L384 11.1 L388 10.7 L392 10.3 L396 10.5 L400 11.2 L404 11.8 L408 11.6 L412 10.7 L416 9.7 L420 9.1 L424 8.8 L428 8.6 L432 8.5 L436 8.7 L440 9.7 L444 11.4 L448 13.0 L452 13.8 L456 13.6 L460 13.0 L464 12.8 L468 13.1 L472 13.5 L476 13.7 L480 13.5 L480 24 L0 24 Z' fill='url%28%23g%29'/%3E%3Cpath d='M0 15.5 L4 15.4 L8 15.4 L12 15.6 L16 15.3 L20 14.6 L24 13.6 L28 13.2 L32 13.4 L36 13.8 L40 13.6 L44 12.4 L48 10.7 L52 9.2 L56 8.4 L60 8.0 L64 7.9 L68 7.9 L72 8.6 L76 9.9 L80 11.7 L84 13.0 L88 13.4 L92 13.3 L96 13.3 L100 13.8 L104 14.8 L108 15.4 L112 15.3 L116 14.8 L120 14.2 L124 13.9 L128 13.7 L132 13.4 L136 12.9 L140 12.9 L144 13.7 L148 14.9 L152 15.9 L156 15.9 L160 14.9 L164 13.8 L168 13.1 L172 13.0 L176 13.1 L180 13.0 L184 12.9 L188 13.0 L192 13.6 L196 14.1 L200 14.0 L204 13.3 L208 12.6 L212 12.4 L216 12.8 L220 13.2 L224 12.8 L228 11.7 L232 10.2 L236 9.1 L240 8.5 L244 8.3 L248 8.2 L252 8.5 L256 9.5 L260 11.2 L264 13.1 L268 14.4 L272 14.8 L276 14.6 L280 14.6 L284 15.2 L288 16.0 L292 16.5 L296 16.4 L300 16.0 L304 15.8 L308 15.7 L312 15.5 L316 14.9 L320 14.1 L324 13.8 L328 14.2 L332 14.9 L336 15.1 L340 14.3 L344 12.8 L348 11.3 L352 10.4 L356 10.0 L360 9.9 L364 9.8 L368 9.9 L372 10.7 L376 11.9 L380 12.8 L384 13.1 L388 12.7 L392 12.3 L396 12.5 L400 13.2 L404 13.8 L408 13.6 L412 12.7 L416 11.7 L420 11.1 L424 10.8 L428 10.6 L432 10.5 L436 10.7 L440 11.7 L444 13.4 L448 15.0 L452 15.8 L456 15.6 L460 15.0 L464 14.8 L468 15.1 L472 15.5 L476 15.7 L480 15.5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' opacity='.8'/%3E%3Ccircle cx='205' cy='10' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='441' cy='19' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='117' cy='12' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='248' cy='15' r='1.1' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='211' cy='15' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='297' cy='19' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='406' cy='19' r='0.9' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='180' cy='10' r='0.9' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='178' cy='9' r='0.9' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='396' cy='10' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='134' cy='20' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='13' cy='9' r='0.9' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='416' cy='16' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='357' cy='17' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='237' cy='17' r='0.7' fill='%23fff' opacity='.9'/%3E%3Ccircle cx='382' cy='11' r='0.9' fill='%23fff' opacity='.9'/%3E%3C/svg%3E"); }
body.christmas #login-box,
body.christmas footer,
body.christmas .announcement,
body.christmas .nav-list:not(:has(.nav-heading)) > a:first-child .nav-item { position: relative; }
body.christmas #login-box::before,
body.christmas footer::before,
body.christmas .announcement::before,
body.christmas .nav-list:not(:has(.nav-heading)) > a:first-child .nav-item::before {
    content: '';
    position: absolute;
    top: -24px;
    height: 40px;
    box-sizing: border-box;
    padding: 0 20px;
    background-image: var(--snow-flat-img);
    background-repeat: no-repeat, no-repeat, round no-repeat;
    background-position: 0 0, 100% 0, 0 0;
    background-size: 40px 40px, 40px 40px, 480px 40px;
    background-origin: border-box, border-box, content-box;
    background-clip: border-box, border-box, content-box;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4));
    pointer-events: none;
    z-index: 100;
}
body.christmas.light #login-box::before,
body.christmas.light footer::before,
body.christmas.light .announcement::before,
body.christmas.light .nav-list:not(:has(.nav-heading)) > a:first-child .nav-item::before {
    filter: drop-shadow(0 1px 2px rgba(40, 80, 130, .55));
}
/* login box: rounded-corner slopes, full width */
body.christmas #login-box::before { left: 0; right: 0; padding: 0 28px; background-image: var(--snow-img); }
/* flat edges: partial strips */
body.christmas footer::before { left: 6%; width: 36%; }
body.christmas .announcement::before { left: 16px; width: 55%; }
body.christmas .announcement:nth-child(even)::before { left: auto; right: 16px; width: 45%; }
body.christmas .nav-list:not(:has(.nav-heading)) > a:first-child .nav-item::before { left: 14px; width: 62%; background-size: 40px 40px, 40px 40px, 160px 40px; }

/* Christmas: figures standing in the snow on the edges */
body.christmas #login-box::after,
body.christmas footer::after,
body.christmas .announcement::after {
    position: absolute;
    line-height: 1;
    pointer-events: none;
    z-index: 101;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4));
}
body.christmas #login-box::after { content: '🎅'; font-size: 38px; right: 190px; bottom: calc(100% + 6px); }
body.christmas footer::after { content: '🧝'; font-size: 34px; left: 22%; bottom: calc(100% + 6px); }
body.christmas .announcement::after { content: '⛄'; font-size: 30px; left: 30%; bottom: calc(100% + 6px); }
body.christmas .announcement:nth-child(even)::after { content: '🎄'; left: auto; right: 22%; }
@media (max-width: 768px) {
    body.christmas #login-box::after { font-size: 28px; right: 120px; }
    body.christmas footer::after { font-size: 26px; }
    body.christmas .announcement::after { font-size: 24px; }
}