/*
 * Theme: Cobble | Premium Tebex Template
 * Ported from NEXT (React) to Tebex (Twig)
 * Author: qSeek
 * Website: https://qseek.org
 */

/* ═══════════════════════════════════════════
   0. CSS VARIABLES
   ═══════════════════════════════════════════ */

:root {
    /* Primary palette */
    /*--color-primary: #00a1ff;*/
    /*--color-accent: #37b5ff;*/

    /* Surfaces */
    /*--background: #101010;*/
    /*--surface: #171717;*/
    /*--border: #202020;*/
    /*--surface-raised: #1a1a1a;*/

    /* Text */
    /*--text-primary: #ededed;*/
    /*--text-secondary: #a0a0a0;*/
    /*--text-tertiary: #666666;*/
    /*--white: #ffffff;*/

    /* Semantic */
    /*--success: #22c55e;*/
    /*--danger: #dc2626;*/
    /*--danger-dark: #b91c1c;*/
    /*--warning: #f59e0b;*/

    /* Social */
    /*--discord: #5865f2;*/
    /*--twitter: #1da1f2;*/

    /* Legacy aliases (keep for twig/JS references) */
    /*--main-color: var(--color-primary);*/
    /*--main-color-hover: var(--color-accent);*/
    /*--panel: var(--surface);*/
    /*--text: var(--text-secondary);*/
    /*--red: var(--danger);*/
    /*--red-hover: var(--danger-dark);*/
    /*--green: var(--success);*/
    /*--green-hover: #1da34e;*/
    /*--footer: #0c0c0c;*/
    /*--transparent: rgba(255, 255, 255, 0.08);*/
    /*--transparent-hover: rgba(255, 255, 255, 0.12);*/
    /*--color-accent-legacy: var(--color-accent);*/

    /* Spacing */
    /*--spacing: 8px;*/

    /* Background image (overridden by store config) */
    /*--bg-image: none;*/
--header-fade: 255, 204, 228;
--sb-border: #ffffffcc;   /* outer "border" layer */
  --sb-bg: #ffffffb3;       /* inner fill */
    /* Primary palette */
      --color-primary: #d9759db1;
      --color-accent: #db6997;

      /* Surfaces */
      --background: rgb(255, 204, 228);
      --background-transparent: #e3ccffb3;
  --surface: #ffffffb3;
      --border: #ffffffb3;
      --surface-raised: #ffffffd0;
      /* Text — note: --white is overloaded as text-on-light in your palette */
      --text-primary: rgba(45, 45, 45, 0.95);
      --text-secondary: rgba(45, 45, 45, 0.7);
      --color-text-secondary: #555;
      --text-tertiary: rgba(45, 45, 45, 0.5);
      --white: rgba(45, 45, 45, 0.8);
      --white-transparent: rgba(255, 255, 255, 0.7);

      /* Semantic */
      --success: #95e68c;
      --danger: #e68597;
      --danger-dark: #cf5988;
      --warning: #f59e0b;

      /* Legacy aliases */
      --main-color: var(--color-primary);
      --main-color-hover: #cf5988;
      --panel: #ffffffb3;
      --text: rgba(45, 45, 45, 0.8);
      --red: var(--danger);
      --red-hover: var(--danger-dark);
      --green: var(--success);
      --green-hover: #3DAA55;
      --footer: #ffffffb3;
      --transparent: rgba(255, 235, 242, 0.15);
      --transparent-hover: rgba(255, 235, 242, 0.15);

      --spacing: 8px;
      --bg-image: none;

    /* Stepped border clip-paths (reusable) */
    --clip-4: polygon(
        0 4px,
        4px 4px,
        4px 0,
        calc(100% - 4px) 0,
        calc(100% - 4px) 4px,
        100% 4px,
        100% calc(100% - 4px),
        calc(100% - 4px) calc(100% - 4px),
        calc(100% - 4px) 100%,
        4px 100%,
        4px calc(100% - 4px),
        0 calc(100% - 4px)
    );
    --clip-2: polygon(
        0 2px,
        2px 2px,
        2px 0,
        calc(100% - 2px) 0,
        calc(100% - 2px) 2px,
        100% 2px,
        100% calc(100% - 2px),
        calc(100% - 2px) calc(100% - 2px),
        calc(100% - 2px) 100%,
        2px 100%,
        2px calc(100% - 2px),
        0 calc(100% - 2px)
    );
}

[hidden] {
    display: none !important;
}

body {
    font-size: 14px;
    line-height: 1.42857143;
}

/* ═══════════════════════════════════════════
   1. STEPPED BORDER COMPONENT (low-level)
   ═══════════════════════════════════════════
   Usage (custom colors):
     <div class="sb" style="--sb-border:...;--sb-bg:...;">
       <div class="sb-inner [padding classes]">...content...</div>
     </div>
   Prefer semantic classes (.panel, .btn-*, .badge) below.
   ═══════════════════════════════════════════ */

.sb {
    position: relative;
    background: var(--sb-border, #202020);
    padding: 4px;
    clip-path: var(--clip-4);
}

.sb-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--sb-bg, #171717);
    clip-path: var(--clip-4);
}

.sb.sb-sm {
    padding: 2px;
    clip-path: var(--clip-2);
}

.sb.sb-sm > .sb-inner {
    clip-path: var(--clip-2);
}

.sb-clip {
    clip-path: var(--clip-4);
}

.sb-clip-sm {
    clip-path: var(--clip-2);
}

/* Common sb color presets */
.sb-panel {
    --sb-border: var(--border);
    --sb-bg: var(--surface);
}

.sb-dark {
    --sb-border: #252525;
    --sb-bg: #202020;
}

.content img {
    height: unset !important;
}

/* ═══════════════════════════════════════════
   2. SEMANTIC PANEL CLASSES
   ═══════════════════════════════════════════ */

/* Panel uses two-layer approach:
   outer background = border color (#202020)
   ::before pseudo = fill color (#171717) */
.panel {
    position: relative;
    margin-bottom: 16px;
    background: var(--panel-border, var(--border));
    padding: 4px;
    clip-path: var(--clip-4);
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.panel::before {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--panel-bg, var(--surface));
    clip-path: var(--clip-4);
    z-index: 0;
}

/* All direct children above the fill */
.panel > * {
    position: relative;
    z-index: 1;
}

/* When panel wraps .sb-inner, the inner handles its own bg */
.panel > .sb-inner,
.panel.sb > .sb-inner {
    background: var(--panel-bg, var(--surface));
    clip-path: var(--clip-4);
}

.panel-primary {
    --panel-border: var(--color-accent);
    --panel-bg: var(--color-primary);
}

.panel-dark {
    --panel-border: var(--border);
    --panel-bg: var(--border);
}

/* Legacy panel styling */
.panel.panel-default {
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.panel .panel-heading {
    background: transparent;
    border: 0 !important;
    border-bottom: 4px solid var(--border) !important;
    color: var(--white);
    text-align: left;
    font-weight: 600;
    font-size: 1em;
    padding: 16px;
}

.panel-body {
    padding: 16px;
}

.panel-body__top-customer {
    padding-bottom: 0;
    padding-top: 0;
}

.panel-footer {
    border: 0 !important;
    background: transparent;
}

/* Divider — hidden inside modules, visible only when explicitly needed */
.divider,
.module .divider,
.panel .divider {
    display: none;
}

/* ═══════════════════════════════════════════
   3. SEMANTIC BUTTON CLASSES
   ═══════════════════════════════════════════
   Buttons use the TWO-LAYER stepped border pattern:
   outer background = border color, 4px padding, clip-path
   inner ::before = fill color, same clip-path
   This creates the visible stepped "border" effect.
   ═══════════════════════════════════════════ */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    border: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    color: var(--white);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s;
    /* Outer layer = border color */
    background: var(--btn-border, var(--border));
    clip-path: var(--clip-4);
    /* Make room for inner fill */
    overflow: hidden;
}

/* Inner fill layer via ::before */
.btn::before {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--btn-bg, var(--surface));
    clip-path: var(--clip-4);
    z-index: 0;
}

/* Content above the fill */
.btn > * {
    position: relative;
    z-index: 1;
}

.btn:hover {
    filter: brightness(0.9);
    text-decoration: none;
    color: var(--white);
}

.btn:active {
    transform: scale(0.95);
}

.btn:focus {
    outline: none;
    text-decoration: none;
    color: var(--white);
}

/* ── Primary: accent border, primary fill, shine ── */
.btn-primary {
    --btn-border: var(--color-accent);
    --btn-bg: var(--color-primary);
    color: var(--white);
}

.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: transform 0.7s ease-in-out;
    pointer-events: none;
    z-index: 2;
    clip-path: var(--clip-4);
}

.btn-primary:hover::after {
    transform: translateX(100%);
}

/* ── Danger: dark red border, red fill ── */
.btn-danger {
    --btn-border: var(--danger-dark);
    --btn-bg: var(--danger);
    color: var(--white);
}

/* ── Muted: dark gray border, darker gray fill ── */
.btn-muted {
    --btn-border: #4a4a4a;
    --btn-bg: #3a3a3a;
    color: var(--text-secondary);
}

.btn-muted:hover {
    color: var(--white);
}

/* ── Secondary: light border, white fill ── */
.btn-secondary {
    --btn-border: #e5e5e5;
    --btn-bg: #ffffff;
    color: var(--background);
}

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

/* ── Icon button: square 48x48, panel colors ── */
.btn-icon {
    --btn-border: var(--border);
    --btn-bg: var(--surface);
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--white);
}

/* ── Modifiers ── */
.btn-wide,
.btn.wide {
    width: 100%;
}

.btn--loading,
.btn.updating {
    pointer-events: none;
    opacity: 0.7;
}

/* ═══════════════════════════════════════════
   3b. BADGE CLASSES
   ═══════════════════════════════════════════ */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    font-weight: 700;
    font-size: 0.8em;
    color: var(--white);
    background: var(--border);
    clip-path: var(--clip-2);
}

.badge-primary {
    background: var(--color-primary);
}

.badge-danger {
    background: var(--danger);
}

.badge-success {
    background: var(--success);
}

/* ═══════════════════════════════════════════
   3c. SHINE HOVER EFFECT
   ═══════════════════════════════════════════ */

.shine-hover {
    position: relative;
    overflow: hidden;
}

.shine-hover::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: transform 0.7s ease-in-out;
    pointer-events: none;
    z-index: 2;
}

.shine-hover:hover::after {
    transform: translateX(100%);
}

/* ═══════════════════════════════════════════
   3d. BACKWARD COMPAT — old .button system
   ═══════════════════════════════════════════ */

/* Legacy .button — same two-layer approach */
.button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--white);
    text-align: center;
    text-decoration: none;
    transition: all 0.15s;
    background: var(--btn-border, var(--border));
    clip-path: var(--clip-4);
}

.button::before {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--btn-bg, var(--surface));
    clip-path: var(--clip-4);
    z-index: -1;
}

.button:hover,
.button:focus {
    text-decoration: none;
    color: var(--white);
    filter: brightness(0.9);
}

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

.button--primary {
    --btn-border: var(--color-accent);
    --btn-bg: var(--color-primary);
    height: 48px;
}

/* Shine on primary */
.button--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: transform 0.7s ease-in-out;
    pointer-events: none;
    z-index: 2;
}

.button--primary:hover::after {
    transform: translateX(100%);
}

.button--success {
    --btn-border: var(--color-accent);
    --btn-bg: var(--color-primary);
    height: 48px;
}

.button--danger {
    --btn-border: var(--danger-dark);
    --btn-bg: var(--danger);
    height: 48px;
}

.button--shopping {
    --btn-border: #e5e5e5;
    --btn-bg: #ffffff;
    color: var(--background);
    height: 48px;
}

.button--shopping:hover {
    color: var(--background);
}

/* Checkout */
.button--checkout {
    --btn-border: var(--color-accent);
    --btn-bg: var(--color-primary);
    color: var(--white);
    height: 48px;
}

/* Logout — small red tag */
.button--logout {
    --btn-border: var(--danger-dark);
    --btn-bg: var(--danger);
    color: var(--white);
    clip-path: var(--clip-2);
    padding: 6px 12px;
    font-size: 12px;
    height: auto;
}

.button--logout::before {
    inset: 2px;
    clip-path: var(--clip-2);
}

/* Header button (transparent) */
.button--header {
    background: var(--transparent);
    color: var(--white);
    font-weight: bold;
}

.button--header:hover {
    background: var(--transparent-hover);
}

/* Select dropdown button */
.button--select {
    background: var(--surface);
    color: var(--white);
    border: 2px solid var(--border);
    user-select: none;
    width: 54px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button--weight {
    font-weight: bold;
}

/* Full-width button */
.button-mw {
    display: flex;
    width: 100%;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
}

/* Icon button */
.button--icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.button--icon > .mdi {
    color: rgba(255, 255, 255, 0.8);
}

/* Info button */
.button--pinfo {
    background: var(--surface);
    color: var(--white);
    border: 2px solid var(--border);
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: var(--clip-4);
}

.button--pinfo:hover {
    background: var(--surface-raised);
    border-color: var(--text-tertiary);
}

/* Check / Confirm */
.button--check {
    background: var(--success);
    color: rgba(0, 0, 0, 0.65);
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    justify-content: center;
}

.button--check > .mdi {
    color: rgba(0, 0, 0, 0.65);
}

/* Remove button */
.button--remove {
    background: rgba(220, 38, 38, 0.4);
    color: var(--white);
    border: 2px solid var(--danger);
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Info outline button */
.button--info {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--color-primary);
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Redeem */
.button--redeem {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    font-weight: bold;
}

/* Badge inside button */
.button__badge {
    position: absolute;
    right: 16px;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: max-content;
}

/* ═══════════════════════════════════════════
   4. BASE / RESET
   ═══════════════════════════════════════════ */

body {
    background: var(--background);
    margin: 0;
    color: var(--text-secondary);
    font-family:
        "Geist",
        system-ui,
        -apple-system,
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

p {
    line-height: 1.6;
}

hr {
    border: 0;
    border-top: 4px solid #202020;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.15s;
}

a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

img {
    max-width: 100%;
}

/* ═══════════════════════════════════════════
   5. UTILITY CLASSES
   ═══════════════════════════════════════════ */

.d-flex {
    display: flex;
}
.d-inline {
    display: inline;
}
.d-none {
    display: none;
}
.flex-col {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-1 {
    flex: 1;
}
.gap-8 {
    gap: 8px;
}
.gap-4 {
    gap: 4px;
}
.gap-12 {
    gap: 12px;
}
.gap-16 {
    gap: 16px;
}
.ml-auto {
    margin-left: auto;
}
.mr-auto {
    margin-right: auto;
}
.mx-12 {
    margin: 0 12px;
}
.align-center {
    align-items: center;
}
.items-center {
    align-items: center;
}
.justify-center {
    justify-content: center;
}
.justify-end {
    justify-content: flex-end;
}
.justify-between {
    justify-content: space-between;
}
.text-center {
    text-align: center;
}
.mb-0\! {
    margin-bottom: 0 !important;
}
.hidden {
    display: none !important;
}

/* ═══════════════════════════════════════════
   6. LAYOUT
   ═══════════════════════════════════════════ */

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width: 640px) {
    .container {
        padding: 0 24px;
    }
}

.body {
    display: flex;
    gap: 16px;
}

.body .sidebar {
    width: 340px;
    flex-shrink: 0;
}

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

.content p {
    line-height: 1.8;
}

/* Background image overlay */
.headerbg {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
    position: absolute;
    top: 0;
    background:
        linear-gradient(
            to bottom,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.65) 50%,
            var(--background) 100%
        ),
        var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* Loading spinner overlay */
#loading {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10;
    background: rgba(16, 16, 16, 0.85);
    justify-content: center;
    align-items: center;
}

/* Particles container */
.particles-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.particle {
    position: absolute;
    background: #ffffff;
    animation: float infinite ease-in-out;
    transition: transform 0.3s ease-out;
}

/* ═══════════════════════════════════════════
   7. HEADER / TOPBAR
   ═══════════════════════════════════════════ */

.topbar {
    width: 100%;
    padding: 16px 0;
}

.topbar > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar__right {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Logo */
.header-logo {
    width: 70px;
    height: auto;
    object-fit: contain;
}

@media (min-width: 640px) {
    .header-logo {
        width: 94px;
    }
}

/* Header nav links (Vote, Patrons, custom pages) */
.header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    margin-left: 32px;
}

.header-nav__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.15s;
    clip-path: var(--clip-4);
}

.header-nav__link:hover,
.header-nav__link.active {
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.header-nav__icon,
.header-nav__svg {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.header-nav__svg {
    fill: currentColor;
    flex-shrink: 0;
}

/* Header action buttons */
.header-btn {
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none !important;
    color: inherit;
}

.header-btn:hover {
    filter: brightness(0.9);
    text-decoration: none !important;
}

.header-btn:active {
    transform: scale(0.95);
}

.header-btn__inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-btn__square {
    width: 56px;
    height: 56px;
}

.header-btn__wide {
    padding: 0 24px;
    height: 56px;
    gap: 12px;
}

.header-btn__icon {
    width: 20px;
    height: 20px;
    color: var(--white);
}

/* Menu hint indicator */
.menu-btn {
    position: relative;
}

.menu-hint {
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    opacity: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    pointer-events: none;
    animation: menu-hint-in 0.3s ease 1s forwards, menu-hint-out 0.4s ease 4s forwards;
}

.menu-hint__text {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 10px;
    clip-path: var(--clip-2);
}

.menu-hint__arrow {
    color: rgba(255, 255, 255, 0.3);
    font-size: 8px;
}

@keyframes menu-hint-in {
    from { opacity: 0; transform: translateY(-50%) translateX(4px); }
    to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

@keyframes menu-hint-out {
    from { opacity: 1; transform: translateY(-50%) translateX(0); }
    to { opacity: 0; transform: translateY(-50%) translateX(4px); }
}

.header-btn__play-icon {
    width: 20px;
    height: 20px;
    fill: var(--color-accent);
    flex-shrink: 0;
}

.header-btn__twitter-icon {
    width: 24px;
    height: 24px;
    fill: var(--twitter);
}

.header-btn__discord-icon {
    width: 24px;
    height: 24px;
    fill: var(--discord);
}

.header-btn__discord-wrap {
    position: relative;
}

/* Server status */
.server {
    text-decoration: none;
}

.server:hover {
    text-decoration: none;
}

.server__name {
    color: var(--white);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
}

.server__online {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1;
    margin-top: 4px;
}

.loading-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid var(--text-tertiary);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
}


/* Header badge (Discord count, cart count) */
.header-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    pointer-events: none;
    z-index: 2;
}

.header-badge__inner {
    padding: 2px 6px;
}

.header-badge__text {
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* Cart wrapper & button */
.cart-wrapper {
    position: relative;
    display: inline-block;
}

.cart-btn {
    display: block;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none !important;
    color: inherit;
}

.cart-btn:hover {
    filter: brightness(0.9);
    text-decoration: none !important;
}

.cart-btn:active {
    transform: scale(0.95);
}

.cart-btn__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px 0 12px;
    height: 56px;
    overflow: hidden;
}

.cart-btn .sb {
    background: var(--color-accent, #37b5ff) !important;
}

.cart-btn .sb-inner {
    background: var(--color-primary, #00a1ff) !important;
}

.cart-btn,
.cart-btn *,
.cart-btn:hover * {
    text-decoration: none !important;
}

/* Profile avatar & data in cart button */
.profile__avatar {
    height: 56px;
    overflow-y: clip;
    flex-shrink: 0;
    margin-bottom: -14px;
}

.profile__avatar > img {
    height: 70px;
}

.profile__data {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    text-align: left;
}

.profile__name {
    color: var(--white);
    font-weight: 500;
    font-size: 1em;
    line-height: 1.2;
}

.profile__value {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75em;
    text-transform: uppercase;
}

/* Mobile cart badge */
.cart-badge-mobile {
    position: absolute;
    top: -6px;
    right: -6px;
    pointer-events: none;
}

/* Responsive visibility */
.hide-desktop {
    display: none;
}

@media (max-width: 960px) {
    .hide-desktop {
        display: block;
    }
    .hide-mobile {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .cart-btn .sb {
        width: 64px;
        height: 64px;
    }

    .cart-btn__inner {
        padding: 0;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
}

/* ═══════════════════════════════════════════
   8. INPUTS / FORMS
   ═══════════════════════════════════════════ */

.input {
    display: block;
    width: 100%;
    background: var(--surface-raised);
    border: 2px solid var(--border);
    margin: 0;
    padding: 12px;
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.15s;
}

.input:focus {
    border-color: var(--color-accent);
    outline: none;
}

.input--disabled,
.input:disabled {
    background: var(--border);
    border-color: var(--border);
    color: var(--text-tertiary);
}

.form-label {
    display: block;
    font-size: 0.75em;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

/* MC Login input (stepped border) */
.mc-login-sb {
    --sb-border: var(--border);
    --sb-bg: var(--surface-raised);
}

.mc-login-sb:focus-within {
    --sb-border: var(--color-accent);
}

.mc-login-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
}

.mc-login-input-wrapper .input,
.mc-login-input-inner .input {
    border: 0 !important;
    background: transparent !important;
    padding: 10px 0 !important;
    margin-bottom: 0 !important;
    color: #555 !important;
}

.mc-login-input-wrapper .input:focus,
.mc-login-input-inner .input:focus {
    border: 0;
    outline: none;
}

.mc-login-input-inner {
    padding: 6px 12px;
}

.mc-login-avatar {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    image-rendering: pixelated;
}

/* ═══════════════════════════════════════════
   9. NAVIGATION
   ═══════════════════════════════════════════ */

/* Mobile menu button */
.button-menu {
    padding: 16px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: filter 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.button-menu:hover {
    filter: brightness(0.9);
}

.button-menu:active {
    transform: scale(0.98);
}

.button-menu__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.button-menu__icon > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.button-menu__heading {
    font-weight: bold;
    color: var(--white);
    font-size: 1.2em;
}

.button-menu__subheading {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875em;
    color: rgba(255, 255, 255, 0.7);
}

.button-menu__hamburger {
    font-size: 2em;
    color: var(--white);
    margin-left: auto;
}

/* Navigation list */
.navigation__item {
    display: flow-root;
    transition: background 0.15s;
}

.navigation__item + .navigation__item {
    border-top: 2px solid var(--border);
}

.navigation__item a {
    color: var(--white);
    font-weight: 500;
    font-size: 1em;
}

.navigation__item > a {
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.navigation__item a:hover,
.navigation__item a:focus {
    text-decoration: none;
    filter: brightness(1.1);
}

.navigation__item.active > a,
.navigation__item:hover > a {
    color: var(--white);
}

.navigation__item:first-child {
    /* no extra margin */
}

/* Subcategory toggle chevron */
.navigation__item.open .navigation__toggle > i {
    transform: rotate(-180deg);
}

/* Category icon */
.navigation__icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Subcategory dropdown — CSS slide transition */
.navigation-dropdown-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out, opacity 0.25s ease-out;
    opacity: 0;
    border-left: 4px solid var(--border);
    padding: 0;
}

.navigation-dropdown.open > .navigation-dropdown-menu {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0.3s ease-in, opacity 0.2s ease-in;
}

.navigation-dropdown-menu > div > a {
    padding: 10px 16px;
    display: block;
    color: #d1d5db;
    font-size: 0.9em;
}

.navigation-dropdown-menu > div > a:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.03);
}

.navigation__toggle {
    display: flex;
    align-items: center;
}

.navigation__toggle > i {
    display: flex;
    width: 16px;
    height: 10px;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    color: var(--text-tertiary);
    transition: transform 0.3s;
}

.navigation__toggle > i > svg {
    width: 100%;
    height: 100%;
}

/* Navigation tags (badges on categories) */
.navigation__item--tag {
    position: relative;
}

.nav-tag {
    display: inline-flex;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--white);
    background: var(--color-primary);
    margin-left: auto;
    clip-path: var(--clip-2);
}

/* Dropdown menu (quantity selector etc) */
.dropdown-list {
    position: relative;
}

.dropdown-menu {
    display: none;
    background-color: var(--surface);
    border: 2px solid var(--border);
    padding: var(--spacing);
    min-width: 200px;
    position: absolute;
    z-index: 10;
}

.dropdown-menu > li {
    flex: 45%;
}

.open > .dropdown-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing);
    width: 206px;
    transform: translate(-50%, 0);
    left: 50%;
    margin-top: var(--spacing);
}


.dropdown-menu > li > a {
    color: var(--text-secondary);
    background: var(--border);
    padding: 12px 0;
    text-align: center;
    display: block;
    transition: all 0.15s;
}

.dropdown-menu > li > a:hover {
    background: var(--color-primary);
    color: var(--white);
}

.dropdown-backdrop {
    display: none;
}

/* ═══════════════════════════════════════════
   10. CATEGORY & PACKAGES
   ═══════════════════════════════════════════ */

/* Category title bar */
.category-title {
    font-size: 1.25em;
    font-weight: bold;
    color: var(--white);
    padding: 12px 16px;
    display: flex;
    gap: var(--spacing);
    margin-bottom: var(--spacing);
    background: var(--color-primary);
    clip-path: var(--clip-4);
}

.category-title--red {
    background: var(--danger);
}

.category-title--green {
    background: var(--success);
}

.category-title--with-desc {
    margin-bottom: 0;
    clip-path: polygon(
        0 4px,
        4px 4px,
        4px 0,
        calc(100% - 4px) 0,
        calc(100% - 4px) 4px,
        100% 4px,
        100% 100%,
        0 100%
    );
}

.category-desc {
    background: var(--surface);
    border: 2px solid var(--border);
    border-top: 0;
    padding: 12px 16px;
    margin-bottom: var(--spacing);
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 4px),
        calc(100% - 4px) calc(100% - 4px),
        calc(100% - 4px) 100%,
        4px 100%,
        4px calc(100% - 4px),
        0 calc(100% - 4px)
    );
}

.category-desc > p {
    margin: 0;
}

.category-title > .mdi {
    color: rgba(255, 255, 255, 0.75);
}

.category-header {
    padding: 16px;
    border-bottom: 4px solid var(--border);
}

.category-empty {
    text-align: center;
    padding: 32px;
    color: var(--text-secondary);
}

/* ── Grid packages ── */

.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    overflow: hidden;
    min-width: 0;
}

.gridpackage {
    position: relative;
}

.gridpackage__inner {
    height: 100%;
    transition: filter 0.15s;
    background: var(--border);
    padding: 4px;
    clip-path: var(--clip-4);
    position: relative;
}

/* Inner fill */
.gridpackage__inner::before {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--surface);
    clip-path: var(--clip-4);
    z-index: 0;
}

.gridpackage__inner > * {
    position: relative;
    z-index: 1;
}

.gridpackage:hover .gridpackage__inner {
    filter: none;
}

.gridpackage__image {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: var(--border);
    position: relative;
    margin-bottom: 16px;
    clip-path: var(--clip-4);
}

.gridpackage__image img {
    max-width: 100%;
    height: auto;
}

.gridpackage__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s;
}

.gridpackage:hover .gridpackage__image img {
    transform: scale(0.9);
}

/* Image hover overlay */
.gridpackage__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.gridpackage:hover .gridpackage__image::after {
    opacity: 1;
}

.gridpackage__info {
    text-align: center;
    background: var(--surface);
    padding: 16px 12px;
}

.gridpackage__text {
    margin-bottom: var(--spacing);
}

.gridpackage__name {
    color: var(--white);
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 8px;
}

.gridpackage__price {
    font-weight: bold;
    font-size: 1.15em;
    color: #000;
    margin-bottom: 6px;
}



.gridpackage .pkg-actions {
    justify-content: center;
}

/* Discount strikethrough */
.discount {
    text-decoration: line-through;
    color: var(--danger);
    font-weight: normal;
    font-size: 0.85em;
}

/* Package badge (e.g., "Good Deal") */
.package-badge {
    position: absolute;
    z-index: 5;
    right: 16px;
    top: 16px;
    padding: 4px 12px;
    font-weight: bold;
    font-size: 0.8em;
    color: var(--white);
    background: var(--success);
    clip-path: var(--clip-2);
}

/* Expire badge / countdown */
.expire-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 12px;
    background: var(--danger);
    width: max-content;
    z-index: 5;
    color: #fff;
    font-size: 0.8em;
    font-weight: 600;
    clip-path: var(--clip-2);
}

/* Package expiry timer — stepped-border box, overlays the top of the image */
.package-expiry {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: max-content;
    max-width: calc(100% - 20px);
    padding: 3px;
    background: var(--color-primary);
    clip-path: var(--clip-2);
    pointer-events: none;
}

/* Ensure card containers anchor the absolutely-positioned badge */
.store-product,
.gridpackage__inner,
.listpackage__image,
.pkg-page__left {
    position: relative;
}

.package-expiry:empty {
    display: none;
}

.package-expiry__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--surface);
    clip-path: var(--clip-2);
    color: var(--white);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.package-expiry__icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    color: var(--color-primary);
    background-color: currentColor;
    mask: url("https://webstore-template-assets.tebex.io/images/countdown.svg")
        center center/contain no-repeat;
    -webkit-mask: url("https://webstore-template-assets.tebex.io/images/countdown.svg")
        center center/contain no-repeat;
}

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

@media (max-width: 576px) {
    .packages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    #stackedpkg {
      grid-template-columns: 1fr;
     }
}

/* ── List packages ── */

.packages-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
}

.listpackage {
    display: flex;
    background: var(--surface);
    border: 2px solid var(--border);
    padding: 12px 16px;
    align-items: center;
    position: relative;
    transition: filter 0.15s;
    clip-path: var(--clip-4);
}

.listpackage:hover {
    filter: brightness(1.1);
}

.listpackage__image {
    margin: -12px -16px;
    margin-right: 16px;
    padding: 12px;
    background: var(--border);
    width: 25%;
    flex-shrink: 0;
}

.listpackage_name {
    color: var(--white);
    font-weight: 600;
    font-size: 1em;
}

.listpackage_price {
    color: var(--text-secondary);
}

.stacked-savings {
    font-size: 0.75em;
    line-height: 1.2;
    min-height: 1.2em;
    color: var(--color-accent);
    margin: 2px 0 0;
    padding: 0 12px;
    font-weight: 600;
    visibility: hidden;
}

.stacked-savings.visible {
    visibility: visible;
}

/* ── Stacked tier selector ── */

.stacked-tiers {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    margin-bottom: 8px;
    justify-content: center;
    padding: 0 12px;
}

.stacked-tier {
    --sb-border: var(--border);
    --sb-bg: var(--surface);
    flex: 1;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    border: none;
    background: var(--border);
    padding: 4px;
    clip-path: var(--clip-4);
}

.stacked-tier .sb-inner {
    clip-path: var(--clip-4);
}

.stacked-tier__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 10px;
    font-size: 1em;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-secondary);
    white-space: nowrap;
    gap: 4px;
}

.stacked-tier:hover {
    filter: brightness(1.2);
}

.stacked-tier.active {
    --sb-border: var(--color-accent);
    --sb-bg: var(--color-primary);
}

.stacked-tier.active .stacked-tier__inner {
    color: var(--white);
}

.stacked-tier--best {
    --sb-border: var(--color-accent);
}

.stacked-tier--best .stacked-tier__inner {
    color: var(--color-accent);
}

.stacked-tier--best.active .stacked-tier__inner {
    color: var(--white);
}

.stacked-tier__fire {
    width: 13px;
    height: 13px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.stacked-tier.active .stacked-tier__fire {
    color: rgba(255, 255, 255, 0.7);
}

/* ── Legacy stacked packages ── */

.stackedpackage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing);
    background: var(--surface);
    border: 2px solid var(--border);
    padding: var(--spacing);
    margin-bottom: 16px;
    margin-top: var(--spacing);
    grid-auto-rows: 1fr;
}

.stackedpackage__cell {
    background: var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    transition:
        background 0.15s,
        opacity 0.2s;
    cursor: pointer;
    color: unset;
    text-decoration: none;
    padding: 12px 0 20px;
    position: relative;
    clip-path: var(--clip-4);
}

.stackedpackage__cell:hover,
.stackedpackage__cell:focus {
    background: var(--color-primary);
    color: unset;
    text-decoration: none;
}

.stackedpackage__cell:has(.rem:not([hidden])):hover,
.stackedpackage__cell:has(.rem:not([hidden])):focus {
    background: var(--danger-dark);
}

.stackedpackage__cell--image {
    background: unset;
    clip-path: none;
}
.stackedpackage__cell--image:hover,
.stackedpackage__cell--image:focus {
    background: unset;
}

.stackedpackage__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.stackedpackage__amount {
    font-weight: bold;
    color: var(--white);
    font-size: 2em;
}

.stackedpackage__price {
    color: var(--text-secondary);
    font-weight: 600;
}

.stackedpackage__action {
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none !important;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: var(--spacing);
}

.stackedpackage__action[hidden] {
    display: none;
}

.stackedpackage__btn--buy {
    color: var(--color-primary);
}

.stackedpackage__cell:hover .stackedpackage__btn--buy,
.stackedpackage__cell:focus .stackedpackage__btn--buy {
    color: unset;
}

.stackedpackage__btn--remove {
    color: var(--danger);
}

.stackedpackage__cell:hover .stackedpackage__btn--remove,
.stackedpackage__cell:focus .stackedpackage__btn--remove {
    color: unset;
}

.stackedpackage__cell.updating {
    pointer-events: none;
    opacity: 0.5;
}

.stackedpackage__cell.updating::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: 4px auto 0;
    border: 2px solid var(--text-secondary);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

/* ═══════════════════════════════════════════
   11. PACKAGE DETAIL / PRODUCT PAGE
   ═══════════════════════════════════════════ */

/* Package page — two-column panel layout */
.pkg-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background: rgba(255, 245, 250, 0.7);
}

@media (width > 600px) {
    .pkg-page {
        flex-direction: row;
    }
}

.pkg-page__left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

@media (width > 600px) {
    .pkg-page__left {
        width: 240px;
        position: sticky;
        top: 16px;
        align-self: flex-start;
    }
}

.pkg-page__image {
    width: 100%;
    object-fit: contain;
    display: block;
    image-rendering: pixelated;
}

.pkg-page__left .actions {
    flex-wrap: wrap;
    align-items: center;
}

.pkg-page__left .gridpackage__price {
    text-align: center;
    width: 100%;
}

.pkg-page__left .pkg-actions {
    justify-content: center;
    width: 100%;
    margin: 0;
}

/* No need for "info" button on the package detail page itself */
.pkg-page__left .pkg-btn--info {
    display: none !important;
}

.pkg-page__right {
    flex: 1;
    min-width: 0;
    --sb-bg: var(--surface-raised);
}

.pkg-page__right-inner {
    padding: 20px;
}

.pkg-page__title {
    color: var(--white);
    font-weight: 700;
    font-size: 1.4em;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(219, 105, 151, 0.4);
}

.pkg-page__desc {
    color: var(--text-secondary);
    line-height: 1.8;
}

.store-product-full .image {
    max-height: 300px;
    object-fit: contain;
    display: block;
    margin: 0 auto 16px;
}

.product-title {
    color: var(--white);
    font-weight: 600;
    font-size: 1.5em;
    margin-bottom: 8px;
}

/* Product countdown spacing */
.product-title + .countdown {
    margin-top: 8px;
}

.descr {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-top: 16px;
}

/* ═══════════════════════════════════════════
   12. PACKAGE ACTION BUTTONS (stepped border)
   ═══════════════════════════════════════════ */

.pkg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 0 12px;
}

/* Base button */
.pkg-btn {
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none !important;
    color: var(--white) !important;
}

.pkg-btn:hover {
    filter: brightness(0.9);
    text-decoration: none !important;
}

.pkg-btn:active {
    transform: scale(0.95);
}

.pkg-btn__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.pkg-btn.wide {
    flex: 1;
}
.pkg-btn.half {
    flex: 1;
}

/* Icon in buttons */
.pkg-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Add / Subscribe — accent border, primary fill */
.pkg-btn--add {
    --sb-border: var(--color-accent);
    --sb-bg: var(--color-primary);
}

.pkg-btn--add .pkg-btn__inner {
    color: var(--white);
}

/* Info button — panel colors, icon-only square */
.pkg-btn--info {
    --sb-border: #edc8fa;
    --sb-bg: #f4defc;
}

.pkg-btn__inner--icon {
    width: 38px;
    padding: 0;
}

.pkg-icon--muted {
    color: var(--text-tertiary)
}

/* Remove — dark red border, red fill */
.pkg-btn--remove {
    --sb-border: var(--danger-dark);
    --sb-bg: var(--danger);
}

.pkg-btn--remove .pkg-btn__inner {
    color: var(--white);
}

/* Added to basket (no quantity) — panel colors */
.pkg-btn--added {
    --sb-border: var(--border);
    --sb-bg: var(--surface);
}

.pkg-btn--added .pkg-btn__inner {
    color: var(--text-secondary);
}

/* Gift button — panel colors, breaks to its own row */
.pkg-btn.gift {
    --sb-border: var(--border);
    --sb-bg: var(--surface);
    flex: 1 0 100%;
}

/* Quantity stepper — panel colors */
.pkg-qty {
    --sb-border: var(--border);
    --sb-bg: var(--surface);
}

/* Disabled state */
.pkg-btn[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

/* ── Quantity stepper ── */

.pkg-qty__inner {
    display: flex;
    align-items: center;
    height: 38px;
}

.pkg-qty__btn {
    width: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--white);
    text-decoration: none !important;
}

.pkg-qty__btn:hover {
    filter: brightness(1.25);
    text-decoration: none !important;
    color: var(--white);
}

.pkg-qty__icon {
    width: 14px;
    height: 14px;
    color: var(--white);
}

.pkg-qty__value {
    min-width: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    border-left: 2px solid var(--border);
    border-right: 2px solid var(--border);
}

/* Updating state on package actions */
.updating-disable.updating {
    pointer-events: none;
    opacity: 0.5;
}

/* Loading spinner for buttons */
.pkg-btn.updating .pkg-btn__inner > *:not(.pkg-spinner) {
    opacity: 0;
}

.pkg-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: pkg-spin 0.6s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
}

/* Button global enhancements */
.button:active,
.sb.header-btn:active,
.login-edition:active {
    transform: scale(0.95);
}

/* ═══════════════════════════════════════════
   13. BASKET / CHECKOUT
   ═══════════════════════════════════════════ */

.player-basket {
    z-index: 9999;
    background: var(--border);
    height: 100vh;
    padding: 4px;
    transition: 0.5s;
    clip-path: var(--clip-4);
    position: relative;
    display: flex;
    flex-direction: column;
}

.player-basket::before {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--surface);
    clip-path: var(--clip-4);
    z-index: 0;
}

.player-basket > * {
    position: relative;
    z-index: 1;
}

/* Inner content padding */
.player-basket > .player-basket__info,
.player-basket > .basket-packages {
    margin-left: 12px;
    margin-right: 12px;
}

.player-basket.shown {
    transform: translateX(0%);
}

/* Basket info panel — no double border inside .player-basket */
.basket-info-sb {
    margin-bottom: 16px;
    background: transparent;
    padding: 0;
    clip-path: none;
    border-bottom: 4px solid var(--border);
}

.basket-info-sb > .sb-inner {
    clip-path: none;
    background: transparent;
}

.basket-info-inner {
    padding: 12px 16px 0;
    overflow: hidden;
}

.player-basket__info {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.player-basket__info .button--logout {
    margin-bottom: 12px;
    flex-shrink: 0;
}

.player-basket__skin {
    height: 80px;
    overflow-y: clip;
    flex-shrink: 0;
}

.player-basket__skin > img {
    height: 120px;
}

.player-basket__data {
    flex: 1;
    padding-bottom: 12px;
    min-width: 0;
}

.player-basket__name {
    font-size: 1em;
    font-weight: bold;
    color: var(--white);
    text-decoration: none !important;
}

.player-basket__contents {
    font-weight: 600;
    font-size: 0.75em;
    text-decoration: none !important;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.player-basket__info,
.player-basket__info *,
.player-basket__data {
    text-decoration: none !important;
}

.player-basket__data--other {
    margin: 16px 0;
    padding-bottom: 12px;
}

/* Basket items list */
.basket-packages {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 0;
    padding-bottom: 16px;
}

.basket-item,
.basket .basket-item {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    clip-path: var(--clip-4);
    position: relative;
}

.basket-item::before {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--surface);
    clip-path: var(--clip-4);
    z-index: 0;
}

.basket-item > * {
    position: relative;
    z-index: 1;
}

.basket-item__left {
    min-width: 0;
}

.basket-item__name {
    color: var(--white);
    font-weight: 600;
    font-size: 0.95em;
}

.basket-item__price {
    color: var(--text-secondary);
    font-size: 0.85em;
}

.basket-item__right {
    display: flex;
    align-items: center;
    gap: var(--spacing);
    flex-shrink: 0;
}

/* Quantity stepper in basket */
.basket-item__qty {
    display: flex;
    align-items: stretch;
    height: 40px;
    background: var(--border);
    overflow: hidden;
    clip-path: var(--clip-2);
    padding: 2px;
    position: relative;
}

.basket-item__qty::before {
    content: "";
    position: absolute;
    inset: 2px;
    background: var(--surface);
    clip-path: var(--clip-2);
    z-index: 0;
}

.basket-item__qty > * {
    position: relative;
    z-index: 1;
}

.basket-item__qty-btn {
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    transition:
        background 0.15s,
        color 0.15s;
}

.basket-item__qty-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--white);
}

.basket-item__qty-value {
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    border-left: 2px solid var(--border);
    border-right: 2px solid var(--border);
}

/* Remove button in basket */
.basket-item__remove {
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    background: var(--danger);
    border: 0;
    cursor: pointer;
    padding: 0;
    color: var(--white);
    transition: all 0.15s;
    clip-path: var(--clip-2);
    flex-shrink: 0;
}

.basket-item__remove:hover {
    filter: brightness(0.85);
    text-decoration: none;
    color: var(--white);
}

/* Basket updating/removing states */
.basket-item.updating {
    pointer-events: none;
    position: relative;
}

.basket-item.updating > * {
    opacity: 0.3;
}

.basket-item.updating::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--text-secondary);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.basket-item.removing {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    transition:
        opacity 0.2s,
        max-height 0.3s 0.1s,
        padding 0.3s 0.1s,
        margin 0.3s 0.1s;
}

.basket-refresh {
    position: absolute;
    top: 0;
    right: 40px;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--white);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.35;
    transition: opacity 0.15s ease;
    z-index: 1;
}

.basket-refresh:hover {
    opacity: 0.8;
}

.basket-refresh .mdi {
    display: inline-block;
}

.basket-refresh.spinning .mdi {
    animation: spin 0.5s ease infinite;
}

/* Empty cart state */
.cart-empty {
    background: var(--border);
    text-align: center;
    font-weight: 600;
    color: var(--white);
    font-size: 1.1em;
    padding: 52px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    clip-path: var(--clip-4);
    position: relative;
}

.cart-empty::before {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--surface);
    clip-path: var(--clip-4);
    z-index: 0;
}

.cart-empty > * {
    position: relative;
    z-index: 1;
}

.cart-empty > svg {
    position: relative;
    z-index: 1;
}

.cart-empty > .mdi {
    font-size: 2.5em;
    color: var(--text-tertiary);
    animation: bounce-slow 3s ease-in-out infinite;
}

.cart-empty > small {
    font-size: 12px;
    font-weight: normal;
    color: var(--text-secondary);
}

.cart-empty--clickable {
    cursor: pointer;
    transition: filter 0.15s;
}

.cart-empty--clickable:hover {
    filter: brightness(1.15);
}

.cart-empty__cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.cart-empty__cat {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    background: var(--border);
    color: var(--text-secondary);
    border: 0;
    cursor: pointer;
    clip-path: var(--clip-2);
    transition: background 0.15s, color 0.15s;
}

.cart-empty__cat:hover {
    background: var(--color-primary);
    color: var(--white);
}

/* Shop modal — small centered categories picker with stepped borders */
.modal-shop__wrap {
    position: relative;
    width: 440px;
    max-width: 100%;
    margin: 0 var(--spacing);
    padding-top: 44px;
}

.modal-shop__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url("https://webstore-template-assets.tebex.io/images/close.svg")
        center center no-repeat;
    background-size: 20px;
    opacity: 0.5;
    border: 0;
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.15s, background-color 0.15s;
}

.modal-shop__close:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

.modal-shop__sb {
    --sb-border: var(--border);
    --sb-bg: var(--surface);
}

.modal-shop__inner {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100vh - 88px);
    overflow: hidden;
}

.modal-shop__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 12px;
    border-bottom: 4px solid var(--border);
}

.modal-shop__title {
    font-weight: 700;
    font-size: 1.1em;
    color: var(--white);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.modal-shop__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    padding-right: 4px;
}

.modal-shop__cat-sb {
    --sb-border: var(--border);
    --sb-bg: var(--surface-raised);
    display: block;
    text-decoration: none;
    transition: filter 0.15s;
}

.modal-shop__cat-sb:hover {
    filter: brightness(1.2);
    text-decoration: none;
}

.modal-shop__cat {
    padding: 0;
}

.modal-shop__cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
}

.modal-shop__cat-icon {
    width: 22px;
    height: 22px;
    object-fit: cover;
    flex-shrink: 0;
}

.modal-shop__cat-name {
    color: var(--white);
    font-weight: 500;
    font-size: 0.95em;
    flex: 1;
}

.modal-shop__cat-chevron {
    width: 14px;
    height: 9px;
    color: var(--text-secondary);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.modal-shop__cat--expandable.expanded .modal-shop__cat-chevron {
    transform: rotate(180deg);
}

.modal-shop__subcats {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-in-out, padding 0.25s ease-in-out;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px 0 32px;
}

.modal-shop__cat--expandable.expanded .modal-shop__subcats {
    max-height: 400px;
    padding: 8px 12px 12px 32px;
}

.modal-shop__subcat-sb {
    --sb-border: var(--border);
    --sb-bg: var(--surface);
    display: block;
    text-decoration: none;
    transition: filter 0.15s;
}

.modal-shop__subcat-sb:hover {
    filter: brightness(1.2);
    text-decoration: none;
}

.modal-shop__subcat {
    padding: 8px 12px;
    color: var(--text-secondary);
    font-size: 0.9em;
}

.modal-shop__subcat-sb:hover .modal-shop__subcat {
    color: var(--white);
}

@media (max-width: 480px) {
    .modal-shop__wrap {
        width: 100%;
    }
    .modal-shop__inner {
        padding: 16px;
    }
}

/* Checkout footer buttons */
.procced-to-checkout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    margin-top: auto;
    padding: 12px 16px 16px;
    border-top: 4px solid var(--border);
    flex-shrink: 0;
}

.procced-to-checkout .button {
    height: 54px;
    clip-path: var(--clip-4);
}

/* Basket total row */
.basket-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

.basket-total__label {
    color: var(--text-secondary);
    font-size: 0.9em;
}

.basket-total__price {
    color: var(--white);
    font-size: 1.25em;
    font-weight: 700;
}

/* ── Icon size classes ── */
.icon-xs {
    width: 12px;
    height: 12px;
    fill: currentColor;
    flex-shrink: 0;
}
.icon-sm {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}
.icon-md {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}
.icon-lg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
}
.icon-xl {
    width: 24px;
    height: 24px;
    fill: currentColor;
    flex-shrink: 0;
}
.icon-2xl {
    width: 32px;
    height: 32px;
    fill: currentColor;
    flex-shrink: 0;
}
.icon-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Focus/overlay mode */
.focus-mode {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 5;
    animation: fadeIn 0.3s;
}

/* Checkout page layout */
.checkout-packages {
    overflow-y: auto;
}

.checkout-packages > table {
    border-collapse: separate;
    border-spacing: 0 var(--spacing);
    margin-bottom: 0;
}

.checkout-packages th,
.checkout-packages td {
    border: 0 !important;
    background: var(--border);
}

.checkout-packages tr > th:first-child,
.checkout-packages tr > td:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.checkout-packages tr > th:last-child,
.checkout-packages tr > td:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.checkout-packages > table > tbody > tr > td {
    vertical-align: middle;
}

.table {
    margin: 0;
}

.table--checkout {
    border-collapse: separate;
    border-spacing: 0 8px;
}

.table--checkout td {
    vertical-align: middle !important;
}

.package-options {
    background: var(--surface);
    display: flow-root;
    padding: 4px 8px;
    border: 2px solid var(--border);
}

/* Checkout layout */
.chk {
    display: grid;
    align-items: baseline;
    grid-template-columns: 52% auto;
    gap: var(--spacing);
}

.summary {
    background: var(--surface);
    padding: 16px;
    border: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 16px;
    clip-path: var(--clip-4);
}

.summary__title {
    color: var(--white);
    font-weight: bold;
    font-size: 16px;
    margin: 0;
}

.summary-stat {
    display: flex;
    background: var(--border);
    padding: 8px 16px;
    justify-content: space-between;
    align-items: center;
}

.summary-stat__icon {
    color: var(--color-accent);
    font-size: 18px;
}

.summary-stat__name {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.summary-stat__value {
    color: #fff;
    font-size: 12px;
}

@media (max-width: 1200px) {
    .chk {
        grid-template-columns: 1fr;
    }
    .chk > div:last-child {
        grid-row: 1;
    }
}

@media (max-width: 991px) {
    .checkout-packages {
        overflow-y: auto;
    }
}

/* Wrong account / Account switcher */
.wrongaccount {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface);
    border: 2px solid var(--border);
    padding: 0 16px;
    padding-top: 8px;
}

.wrongaccount--noavatar {
    padding: 8px 16px;
}

.wrongaccount__name {
    color: var(--white);
    font-weight: bold;
    font-size: 1.2em;
}

.wrongaccount__logout {
    color: var(--color-primary);
    text-decoration: underline;
}

.wrongaccount__avatar {
    height: 100px;
    overflow-y: clip;
}

.wrongaccount__avatar > img {
    height: 140px;
}

/* Package row on checkout */
.pkg {
    margin-bottom: var(--spacing);
    background: var(--surface);
    padding: 16px;
    border: 2px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pkg__name {
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}

.pkg__name:hover,
.pkg__name:focus {
    color: var(--color-primary);
}

/* ═══════════════════════════════════════════
   14. MODALS
   ═══════════════════════════════════════════ */

.modal {
    display: none;
}

.modal.is-open {
    display: block;
}

.modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.modal__container {
    background-color: var(--surface);
    border: 2px solid var(--border);
    padding: 32px;
    margin: 0 var(--spacing);
    width: 500px;
    max-width: 100%;
    max-height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    position: relative;
    clip-path: var(--clip-4);
}

.modal__header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: column;
    gap: var(--spacing);
    margin-bottom: 16px;
}

.modal__title {
    margin: 0;
    font-weight: 600;
    font-size: 1.5em;
    line-height: 1.25;
    color: var(--white);
}

.modal__desc {
    font-size: 0.85em;
    color: var(--text-secondary);
    text-align: center;
}

.modal__close {
    position: absolute;
    right: 0;
    top: 0;
    background: var(--border);
    width: 40px;
    height: 40px;
    font-weight: bold;
    font-size: 16px;
    color: var(--white);
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    z-index: 1;
    clip-path: var(--clip-2);
}

.modal__close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.modal__header .modal__close:before {
    content: "\2715";
}

.modal__content {
    margin-top: 16px;
    line-height: 1.5;
}

.modal-spacer {
    margin: 0 -32px;
    height: 2px;
    background: var(--border);
}

.modal-body {
    max-height: 60vh;
    overflow-x: auto;
    background: var(--background);
}

.modal-content {
    background-color: var(--surface);
}

.modal-footer,
.modal-header {
    border: 0;
}

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    color: #fff;
    opacity: 0.8;
}

button.close:hover {
    opacity: 1;
}

.iziModal-close {
    color: var(--white);
    position: absolute;
    right: 0;
    font-size: 1.4em;
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.iziModal .iziModal-loader {
    background: rgba(0, 0, 0, 0.5)
        url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM5OTkiPiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iLTAuOXMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49Ii0wLjlzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgIDwvZz48L3N2Zz4=)
        no-repeat 50% 50%;
}

.iziModal .panel {
    margin: 0;
    padding: 16px 0;
}

/* ═══════════════════════════════════════════
   15. LOGIN PAGE
   ═══════════════════════════════════════════ */

.login-popup-content {
    background: transparent !important;
    border: none;
    padding: 0 !important;
    padding-top: 44px !important;
    clip-path: none;
}

.login-popup-content > .popup-close {
    z-index: 2;
    top: 0;
    right: 0;
}

.login-popup-content .panel {
    margin-bottom: 0;
}

/* Login submit button */
.login-submit {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
    height: 48px;
}

/* Edition picker (Java / Bedrock) */
.login-edition-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing);
    margin-bottom: 16px;
}

.login-edition {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
    background: var(--surface-raised);
    border: 2px solid var(--border);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 14px;
    transition: all 0.15s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    clip-path: var(--clip-4);
}

.login-edition:hover {
    border-color: var(--color-primary);
    color: var(--white);
}

.login-edition.active {
    border-color: var(--color-accent);
    background: var(--color-primary);
    color: var(--white);
}

.login-edition__icon {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
}

.login-platform-prompt {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 500;
    padding: 12px;
    border: 2px dashed var(--border);
    opacity: 0.7;
}

.bedrock-notice {
    font-size: 11px;
    color: var(--text-secondary);
    display: none;
}

.bedrock-notice.show {
    display: block;
}

.bedrock-switcher {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 16px;
}

.bedrock-switcher input {
    opacity: 0;
    width: 0;
    height: 0;
}

.bedrock-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--background);
    border: 2px solid var(--border);
    transition: 0.4s;
}

.bedrock-slider:before {
    position: absolute;
    content: "";
    height: 100%;
    width: 12px;
    left: 0;
    bottom: 0;
    background-color: var(--danger);
    transition: 0.4s;
}

/* ═══════════════════════════════════════════
   16. HOME PAGE
   ═══════════════════════════════════════════ */

.home-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home-header__subheading {
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85em;
}

.home-header__heading {
    color: var(--white);
    font-weight: bold;
    font-size: 1.6em;
}

/* Donation goal */
.home-header__goal {
    display: none;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
    max-width: 240px;
}

@media (max-width: 768px) {
    .home-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .home-header__goal {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
}

.goal__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.goal__heading {
    color: var(--color-accent);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.75em;
    letter-spacing: 0.05em;
}

.goal__progress__text {
    font-size: 0.75em;
    font-weight: bold;
    color: var(--white);
}

.goal__bar-outline {
    padding: 2px;
    background: rgba(255, 255, 255, 0.06);
    clip-path: polygon(
        0px 4px,
        4px 4px,
        4px 0px,
        calc(100% - 4px) 0px,
        calc(100% - 4px) 4px,
        100% 4px,
        100% calc(100% - 4px),
        calc(100% - 4px) calc(100% - 4px),
        calc(100% - 4px) 100%,
        4px 100%,
        4px calc(100% - 4px),
        0px calc(100% - 4px)
    );
}

.goal__bar {
    height: 14px;
    padding: 2px;
    background: var(--border);
    clip-path: polygon(
        0px 3px,
        3px 3px,
        3px 0px,
        calc(100% - 3px) 0px,
        calc(100% - 3px) 3px,
        100% 3px,
        100% calc(100% - 3px),
        calc(100% - 3px) calc(100% - 3px),
        calc(100% - 3px) 100%,
        3px 100%,
        3px calc(100% - 3px),
        0px calc(100% - 3px)
    );
}

.goal__bar__fill {
    height: 100%;
    width: 0%;
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.35) 0px,
            rgba(255, 255, 255, 0.35) 2px,
            transparent 2px,
            transparent calc(100% - 2px),
            rgba(0, 0, 0, 0.3) calc(100% - 2px),
            rgba(0, 0, 0, 0.3) 100%
        ),
        var(--color-primary);
    transition: width 0.6s ease;
}


/* Payment methods (stepped border) */
.payment-methods {
    --sb-border: var(--border);
    --sb-bg: var(--surface);
    margin-top: 16px;
}

.payment-methods__inner {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: var(--spacing);
}

.payment-methods__img {
    max-height: 32px;
}

/* Announcement panel */
.sb-announcement {
    --sb-border: var(--color-accent);
    --sb-bg: var(--color-primary);
    margin-bottom: 16px;
}

.sb-announcement-btn {
    --sb-border: #e5e5e5;
    --sb-bg: #ffffff;
}

/* FAQ panel */
.faq-panel {
    margin-top: 16px;
}

/* Announcement bar */
.announcement {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.announcement__data {
    flex: 1;
}

.announcement__title {
    color: var(--white);
    font-weight: 700;
    font-size: 1.25em;
    margin-bottom: 4px;
}

.announcement__desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875em;
    margin: 0;
    white-space: pre-line;
}

.announcement__right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.announcement__btn {
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.875em;
    color: #0d0d0d;
    cursor: pointer;
    text-align: center;
}

/* Countdown timer */
.countdown {
    display: flex;
    gap: 6px;
}

.countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.countdown__digits {
    display: flex;
    gap: 2px;
}

.countdown__digit {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    clip-path: var(--clip-2);
    width: 20px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 0.75em;
    font-weight: 700;
}

.countdown__label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* FAQ Section */

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.faq-item {
    cursor: pointer;
}

.faq-item__inner {
    padding: 12px 16px;
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #d1d5db;
    font-size: 0.875em;
    font-weight: 500;
}

.faq-item__chevron {
    width: 14px;
    height: 10px;
    flex-shrink: 0;
    color: #6b7280;
    transition: transform 0.3s;
}

.faq-item.open .faq-item__chevron {
    transform: rotate(180deg);
}

.faq-item__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-in-out;
}

.faq-item.open .faq-item__answer {
    grid-template-rows: 1fr;
}

.faq-item__answer > p {
    overflow: hidden;
    margin: 0;
    padding: 0;
    padding-top: 0;
    color: #9ca3af;
    font-size: 0.875em;
    line-height: 1.625;
}

.faq-item.open .faq-item__answer > p {
    padding-top: 12px;
}

@media (min-width: 640px) {
    .announcement {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .announcement__right {
        align-items: flex-end;
        gap: 32px;
    }
    .countdown__digit {
        width: 24px;
        height: 28px;
        font-size: 0.875em;
    }
}

/* ═══════════════════════════════════════════
   17. SIDEBAR MODULES
   ═══════════════════════════════════════════ */

/* Module base reset (override Bootstrap defaults) */
.module {
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.module:not(.panel) {
    background: transparent;
}

/* Module uses panel styling via .sb wrapper in markup */
.module .panel-heading {
    padding: 16px;
    color: var(--white);
    font-weight: 600;
    font-size: 1em;
    text-align: left;
    background: none;
    border: 0 !important;
    border-bottom: 4px solid var(--border) !important;
}

.module .panel-body {
    padding: 16px;
}

/* Panel section padding */
.panel-section--lg {
    padding: 24px;
}

.panel-section {
    padding: 16px;
}

.panel-section--top {
    padding-bottom: 0;
}

.panel-section--bottom {
    padding-top: 0;
}

/* Legacy alias */
.panel-inner {
    padding: 16px;
}

/* Module title */
.module-title {
    color: var(--white);
    font-weight: 600;
    font-size: 1em;
    margin: 0 -16px;
    padding: 0 16px 14px;
    border-bottom: 4px solid var(--border);
    text-align: left;
    line-height: 1.2;
}

.module-title--icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.module-title__icon {
    width: 14px;
    height: 14px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Top customer */
.top-customer {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding-left: 8px;
    margin-top: 16px;
}

.top-customer__avatar {
    height: 100px;
    overflow-y: clip;
    flex-shrink: 0;
    margin-bottom: -12px;
}

.top-customer__avatar > img {
    height: 140px;
    display: block;
}

.top-customer__avatar--square {
    height: 64px;
    margin: 8px 0;
}

.top-customer__avatar--square > img {
    height: 100%;
}

.top-customer__info {
    flex: 1;
    padding-bottom: 20px;
}

.top-customer__name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--white);
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 2px;
}

.top-customer__desc {
    color: var(--text-secondary);
    font-size: 0.875em;
}

.trophy-icon {
    width: 14px;
    height: 14px;
    color: var(--color-accent);
    flex-shrink: 0;
}

/* Legacy name aliases */
.top-donator__name {
    color: var(--white);
    font-weight: bold;
    font-size: 1.1em;
}

.top-donator__amount {
    color: var(--text-secondary);
    font-size: 0.875em;
}

/* Module footer (dark bg at bottom of panel) */
.module-footer {
    margin: 16px -16px -16px;
    padding: 14px 16px;
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.04) 0px,
            rgba(255, 255, 255, 0.04) 2px,
            transparent 2px
        ),
        var(--border);
}

.recent-payments__user {
    /* avatar styling */
}

.recent-payments {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
}

.recent-payments__slot,
.recent-payments__empty-slot {
    width: 32px;
    height: 32px;
    transition: transform 0.2s;
}

.recent-payments__slot {
    position: relative;
}

.recent-payments__slot:hover {
    transform: scale(1.1) rotate(-6deg);
}

/* Payment tooltip — mounted to body via JS to escape clip-path */
.payment-tooltip {
    position: fixed;
    padding: 4px;
    background: var(--border);
    clip-path: var(--clip-4);
    z-index: 10000;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}

.payment-tooltip.visible {
    opacity: 1;
}

.payment-tooltip__inner {
    background: var(--surface);
    clip-path: var(--clip-4);
    padding: 6px 10px;
}

.payment-tooltip__name {
    color: var(--white);
    font-weight: 600;
    font-size: 0.8em;
}

.payment-tooltip__detail {
    color: var(--text-secondary);
    font-size: 0.75em;
    line-height: 1.4;
}

.payment-tooltip__time {
    color: var(--text-secondary);
    font-size: 0.7em;
    opacity: 0.6;
}

.recent-payments__slot img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    display: block;
    clip-path: var(--clip-2);
}

.recent-payments__empty-slot {
    padding: 2px;
    clip-path: var(--clip-2);
}

.recent-payments__empty-slot > div {
    width: 100%;
    height: 100%;
    background: #151515;
    clip-path: var(--clip-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.recent-payments__empty-slot svg {
    width: 14px;
    height: 14px;
    color: #2a2a2a;
}

.payments-module--attached {
    padding: 0;
}

#mobile-widgets {
    display: none;
}

.sidebar-modules-mobile {
    display: none;
}

/* ═══════════════════════════════════════════
   18. FOOTER
   ═══════════════════════════════════════════ */

.site-footer {
    margin-top: 48px;
    padding-top: 24px;
}

/* Top row: brand + credit */
.footer-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-logo {
    width: 50px;
    height: auto;
    object-fit: contain;
}

.footer-copyright {
    color: var(--white);
    opacity: 0.5;
    font-size: 13px;
}

.footer-credit {
    color: var(--border);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-credit__icon {
    width: 24px;
    height: 24px;
}

/* Bottom row (unused) */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 16px;
    border-top: 2px solid var(--border);
    color: var(--white);
    opacity: 0.5;
    font-size: 12px;
    flex-wrap: wrap;
}

.footer-tebex {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-tebex-logo {
    opacity: 0.6;
    width: 58px;
}

.footer-legal {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.footer-legal a {
    color: inherit;
    transition: opacity 0.15s;
}

.footer-legal a:hover {
    opacity: 0.75;
}

@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        text-align: center;
    }

    .footer-brand {
        flex-direction: column;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-tebex {
        flex-direction: column;
    }
}

.footer__content--links > li > a:hover {
    color: var(--white);
}

@media (max-width: 768px) {
    .footer__copyright {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .footer__rights {
        flex-direction: column;
        gap: 8px;
    }

    .footer-disclaimer {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}

/* ═══════════════════════════════════════════
   19. RANK TABLES
   ═══════════════════════════════════════════ */

.ranktable-module:empty {
    padding: 40px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9em;
}

.ranktable-module:empty::before {
    content: "Rank table module is not installed.";
}

.ranktable-desktop {
    display: block;
}
.ranktable-mobile {
    display: none;
}

@media (max-width: 1300px) {
    .ranktable-desktop {
        display: none;
    }
    .ranktable-mobile {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
}

.ranktable-header {
    display: grid;
    border-bottom: 2px solid var(--border);
}

.ranktable-corner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    border-right: 2px solid var(--border);
    text-align: center;
}

.ranktable-corner__icon {
    width: 32px;
    height: 32px;
    color: var(--color-primary);
}

.ranktable-corner__title {
    font-weight: 700;
    color: var(--white);
    font-size: 1em;
}

.ranktable-corner__text {
    color: var(--text-secondary);
    font-size: 0.75em;
    line-height: 1.4;
}

.ranktable-rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing);
    padding: 24px 16px;
    border-right: 2px solid var(--border);
}

.ranktable-rank:last-child {
    border-right: 0;
}

.ranktable-rank__img {
    width: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.ranktable-rank__name {
    color: var(--white);
    font-weight: normal;
    font-size: 1.25em;
}

.ranktable-rank__price {
    font-weight: bold;
    font-size: 1.25em;
    color: white;
}

.ranktable-rank__price small {
    font-weight: 400;
    font-size: 0.75em;
    opacity: 0.6;
}

.ranktable-rank__price .discount {
    font-size: 0.85em;
    margin-right: 4px;
}

.ranktable-group {
    padding: 8px 16px;
    background: var(--border);
    font-weight: 700;
    font-size: 0.8em;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ranktable-row {
    display: grid;
    border-bottom: 2px solid var(--border);
}

.ranktable-row:last-child {
    border-bottom: 0;
}

.ranktable-label {
    padding: 10px 16px;
    color: var(--text-secondary);
    font-size: 0.9em;
    border-right: 2px solid var(--border);
    display: flex;
    align-items: center;
}

.ranktable-cell {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    color: var(--white);
    border-right: 2px solid var(--border);
}

.ranktable-cell:last-child {
    border-right: 0;
}

.ranktable-check {
    color: var(--success);
    font-size: 1.15em;
}

.ranktable-cross {
    color: var(--text-secondary);
    opacity: 0.25;
    font-size: 1.15em;
}

/* Mobile rank cards */
.ranktable-card {
    background: var(--surface);
    border: 2px solid var(--border);
    overflow: hidden;
}

.ranktable-card__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
}

.ranktable-card__btns {
    display: flex;
    gap: 8px;
}

.ranktable-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 12px;
    border-top: 2px solid var(--border);
}

.ranktable-card__summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-top: 2px solid var(--border);
    font-size: 0.85em;
    color: var(--text-secondary);
}

.ranktable-card__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    border-top: 2px solid var(--border);
    cursor: pointer;
    font-size: 0.8em;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.ranktable-card__toggle:hover {
    color: var(--white);
}

.ranktable-card__chevron {
    font-size: 1.2em;
    transition: transform 0.3s ease;
    display: inline-block;
}

.ranktable-card.open .ranktable-card__chevron {
    transform: rotate(180deg);
}

.ranktable-card__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.ranktable-card.open .ranktable-card__body {
    grid-template-rows: 1fr;
}

.ranktable-card__body-inner {
    overflow: hidden;
}

.ranktable-card__img {
    width: 100%;
    max-width: 180px;
    max-height: 220px;
    object-fit: contain;
    image-rendering: pixelated;
}

.ranktable-card__info {
    flex: 1;
    min-width: 0;
}

.ranktable-card__group {
    padding: 6px 16px;
    background: var(--border);
    font-weight: 700;
    font-size: 0.7em;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ranktable-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 2px solid var(--border);
}

.ranktable-card__label {
    color: var(--text-secondary);
    font-size: 0.85em;
}

.ranktable-card__value {
    color: var(--white);
    font-size: 0.85em;
    font-weight: 500;
}

/* ═══════════════════════════════════════════
   19b. GREAT DEALS / FEATURED PACKAGES
   ═══════════════════════════════════════════ */

/* Hide featured modules in sidebar (they get moved to great deals) */
.sidebar .featured-module {
    display: none;
}

.great-deals {
    margin-bottom: 16px;
}

/* Slider header (title + arrows) */
.slider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slider-header .module-title {
    margin: 0;
    border-bottom: 0;
    padding-bottom: 0;
}

.slider-arrows {
    display: flex;
    gap: 6px;
}

.slider-arrow {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-raised);
    border: 2px solid var(--border);
    clip-path: var(--clip-2);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}

.slider-arrow svg {
    width: 14px;
    height: 14px;
}

.slider-arrow:hover {
    color: var(--white);
    border-color: var(--color-accent);
}

.slider-arrow:active {
    transform: scale(0.9);
}

.slider-arrow:disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Slider track */
.slider-track {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.slider-track::-webkit-scrollbar {
    display: none;
}

.slider-track > * {
    flex: 0 0 calc((100% - 24px) / 3);
    min-width: 0;
    scroll-snap-align: start;
}

/* Slider dots */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.slider-dot {
    width: 8px;
    height: 8px;
    background: var(--border);
    clip-path: var(--clip-2);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s;
}

.slider-dot:hover {
    background: var(--text-secondary);
}

.slider-dot.active {
    width: 24px;
    background: var(--color-accent);
}

@media (max-width: 768px) {
    .slider-track > * {
        flex: 0 0 calc((100% - 12px) / 2);
    }
}

/* ═══════════════════════════════════════════
   20. CUSTOM PAGES (shared)
   ═══════════════════════════════════════════ */

.page-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.page-header__icon {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.page-header__icon--img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
}

.page-header__title {
    font-size: 1em;
    font-weight: 600;
    color: var(--white);
    margin: 0;
}

.page-desc {
    color: var(--text-secondary);
    font-size: 0.875em;
    margin: 0;
    padding-bottom: 16px;
    line-height: 1.5;
}

.page-desc > p {
    margin: 0;
}

.page-desc > p + p {
    margin-top: 8px;
}

.page-divider {
    border: none;
    border-top: 4px solid var(--border);
    margin: 0 -20px 16px;
}

/* ═══════════════════════════════════════════
   20a. PATRONS
   ═══════════════════════════════════════════ */

.patron-tier {
    margin-bottom: 12px;
}

.patron-tier:last-child {
    margin-bottom: 0;
}

.patron-tier__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 0.9em;
    font-weight: bold;
    color: var(--white);
    background: var(--color-primary);
    clip-path: var(--clip-4);
}


.patrons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing);
}

.patron {
    transition: filter 0.15s;
}

.patron:hover {
    filter: brightness(1.1);
}

.patron__name {
    color: var(--white);
    font-weight: 500;
    font-size: 0.875em;
    text-align: center;
    padding: 10px 8px 6px;
}

.patron__skin {
    height: 90px;
    overflow-y: clip;
    display: flex;
    justify-content: center;
}

.patron__skin > img {
    height: 130px;
}

@media (max-width: 768px) {
    .patrons {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

/* ═══════════════════════════════════════════
   20b. VOTE
   ═══════════════════════════════════════════ */

.vote-sites {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vote-site__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
}

.vote-site__number {
    flex-shrink: 0;
}

.vote-site__number-inner {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: bold;
    font-size: 0.9em;
}

.vote-site__info {
    flex: 1;
    min-width: 0;
}

.vote-site__name {
    color: var(--white);
    font-weight: 600;
    font-size: 0.95em;
    margin: 0 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vote-site__reward {
    color: var(--text-secondary);
    font-size: 0.8em;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vote-site__btn {
    flex-shrink: 0;
    height: 40px;
    padding: 0 16px;
    font-size: 0.8em;
}

.vote-site__btn-icon {
    width: 12px;
    height: 12px;
}

.vote-site__btn::after {
    display: none;
}

/* ═══════════════════════════════════════════
   21. OPTIONS POPUP
   ═══════════════════════════════════════════ */

.store-product-options {
    padding: 28px;
    padding-top: 40px;
}

.product-options-popup .popup-content.store-product-options {
    background: var(--surface) !important;
    border: 2px solid var(--border);
    padding: 28px !important;
    padding-top: 40px !important;
    max-width: 480px;
    clip-path: var(--clip-4);
}

.store-product-options .modal__header {
    margin-bottom: 0;
    gap: 6px;
}

.store-product-options .modal__content {
    margin-top: 16px;
}

.store-product-options .modal__content form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.store-product-options .field {
    margin-bottom: 0;
}

.store-product-options .form-label {
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.store-product-options .field-hint {
    font-size: 0.8em;
    color: var(--text-secondary);
    opacity: 0.7;
    margin-bottom: 6px !important;
}

.store-product-options .store-form select,
.store-product-options .store-form input[type="text"],
.store-product-options .store-form input[type="number"] {
    background: var(--surface-raised) !important;
    border: 2px solid var(--border);
    color: var(--text-primary) !important;
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 0;
    width: 100%;
    transition: border-color 0.15s;
}

.store-product-options .store-form select:focus,
.store-product-options .store-form input[type="text"]:focus,
.store-product-options .store-form input[type="number"]:focus {
    border-color: var(--color-accent);
    outline: none;
}

.store-product-options .store-form select option {
    background: var(--surface);
    color: var(--text-primary);
}

.store-product-options .field-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing);
    margin-bottom: 0;
}

.store-product-options .field-inline input {
    flex: 1;
}

.store-product-options .field-currency {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 14px;
    white-space: nowrap;
}

.store-product-options .discord-field {
    padding: 12px;
    background: var(--surface-raised);
    border: 2px solid var(--border);
}

.store-product-options .discord-connected,
.store-product-options .discord-required {
    display: flex;
    align-items: center;
    gap: var(--spacing);
    font-size: 0.9em;
    color: var(--text-secondary);
}

.store-product-options .discord-connected .mdi,
.store-product-options .discord-required .mdi {
    font-size: 1.4em;
    color: var(--discord);
}

.store-product-options .discord-connected strong {
    color: var(--white);
}

.store-product-options .actions {
    position: static !important;
    bottom: unset !important;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    width: 100% !important;
}

.store-product-options .actions .button,
.store-product-options .actions .btn-primary,
.store-product-options .actions .btn-secondary {
    width: 100% !important;
    justify-content: center;
}

.store-product-options .actions .btn-primary {
    background: var(--color-primary) !important;
    color: var(--white) !important;
    border: none;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.store-product-options .actions .btn-primary:hover {
    background: var(--color-accent) !important;
}

.store-product-options .actions .btn-secondary {
    background: var(--surface-raised) !important;
    color: var(--text-secondary) !important;
    border: 2px solid var(--border);
    padding: 12px 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition:
        border-color 0.15s,
        color 0.15s;
}

.store-product-options .actions .btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--white) !important;
}

.store-product-options .options-link-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.85em;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    transition: color 0.15s;
}

.store-product-options .options-link-text:hover {
    color: var(--color-primary) !important;
}

.store-product-options .product-title {
    display: none;
}

.store-product-options .pkg-btn--info {
    display: none !important;
}

.store-product-options .actions.updating::before {
    filter: brightness(0) invert(1);
}

/* Gift card modal */
.giftcard-menu-back > .giftcard-menu-back__hidden,
.giftcard-menu-back__shown {
    display: none;
}

.giftcard-menu-back > .giftcard-menu-back__shown {
    display: flex;
}

/* ── Gift form popup (themed) ── */
.gift-form-popup .popup-content {
    max-width: 440px;
    background: var(--border);
    padding: 4px;
    clip-path: var(--clip-4);
    color: var(--text-secondary);
    padding: 32px 32px 28px;
    padding-top: 28px;
}

.gift-form-popup .popup-content::before {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--surface);
    clip-path: var(--clip-4);
    z-index: 0;
    pointer-events: none;
}

.gift-form-popup .popup-content h1,
.gift-form-popup .popup-content h2,
.gift-form-popup .popup-content h3,
.gift-form-popup .popup-content input,
.gift-form-popup .popup-content .actions {
    position: relative;
    z-index: 1;
}

.gift-form-popup .popup-content h2 {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 18px;
    padding-right: 32px;
}

.gift-form-popup .popup-content input[name="username"] {
    width: 100%;
    margin-bottom: 18px;
    padding: 13px 14px;
    background: var(--background) !important;
    color: var(--text-primary);
    border: 0;
    outline: none;
    font-size: 14px;
    font-family: inherit;
    clip-path: var(--clip-2);
    transition: background 0.15s;
}

.gift-form-popup .popup-content input[name="username"]:focus {
    background: var(--surface-raised) !important;
}

.gift-form-popup .popup-content input[name="username"]::placeholder {
    color: var(--text-tertiary);
}

.gift-form-popup .popup-content .actions {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

.gift-form-popup .popup-content .button--primary {
    width: 100%;
    max-width: 240px;
}

.gift-form-popup .popup-close {
    z-index: 3;
    top: 6px;
    right: 6px;
    width: 36px;
    height: 36px;
    background-size: 16px;
}

/* ═══════════════════════════════════════════
   22. ANIMATIONS
   ═══════════════════════════════════════════ */

/* Spin — single definition, see shared.css */

/* Fade in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Shake (cart add feedback) */
@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-3px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(3px);
    }
}

.animate-shake {
    animation: shake 0.6s ease-in-out;
}

/* Bounce fade (item added indicator) */
@keyframes bounce-fade {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.8);
    }
    50% {
        opacity: 1;
        transform: translateY(-5px) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }
}

.animate-bounce-fade {
    animation: bounce-fade 2s ease-out forwards;
}

/* Bounce slow (empty state) */
@keyframes bounce-slow {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

.animate-bounce-slow {
    animation: bounce-slow 3s ease-in-out infinite;
}

/* Slide fade (toast) */
@keyframes slide-fade {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-5px);
    }
    10% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    90% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }
}

.animate-slide-fade {
    animation: slide-fade 2s ease-out forwards;
}

/* Float (particles) */
@keyframes float {
    0%,
    100% {
        translate: 0 0;
        rotate: 0deg;
    }
    50% {
        translate: 0 -20px;
        rotate: 180deg;
    }
}

/* Loading spinner animation */
@keyframes basket-spin {
    to {
        transform: rotate(360deg);
    }
}

/* MicroModal slide animation */
@keyframes mmfadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes mmslideIn {
    from {
        transform: translateY(15%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes mmslideOut {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-10%);
    }
}

.micromodal-slide {
    display: none;
}

.micromodal-slide.is-open {
    display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════
   MOBILE NAVIGATION MODAL
   ═══════════════════════════════════════════ */

/* Desktop sidebar nav spacing */
.sidebar-nav {
    margin-bottom: 16px;
}

.nav-inner {
    padding: 0 16px;
}

/* Fullscreen panel */
.modal-nav__panel {
    width: 100%;
    height: 100%;
}

.modal-nav__sb {
    height: 100%;
}

.modal-nav__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding: 16px;
}

/* Header */
.modal-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.modal-nav__title {
    color: var(--white);
    font-weight: 600;
    font-size: 1.125em;
}

.modal-nav__close {
    background: none;
    border: 0;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    transition: color 0.15s;
}

.modal-nav__close:hover {
    color: var(--white);
}

.modal-nav__close svg {
    width: 14px;
    height: 14px;
    pointer-events: none;
}

/* Server + socials row */
.modal-nav__status {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.modal-nav__server-sb {
    flex: 1;
}

.modal-nav__server {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.modal-nav__play-icon {
    width: 20px;
    height: 20px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.modal-nav__server-ip {
    color: var(--white);
    font-size: 0.875em;
    font-weight: 500;
}

.modal-nav__server-players {
    color: #9ca3af;
    font-size: 0.75em;
    margin-top: 2px;
}

.modal-nav__social-sb {
    display: block;
    text-decoration: none;
}

.modal-nav__social {
    width: 48px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-nav__discord-icon {
    width: 20px;
    height: 20px;
    color: #f4defc;
}

.modal-nav__twitter-icon {
    width: 20px;
    height: 20px;
    color: #1da1f2;
}

/* Nav links */
.modal-nav__links-wrap {
    margin-bottom: 16px;
}

.modal-nav__links {
    padding: 0 16px;
}

.modal-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875em;
    border-bottom: 1px solid var(--border);
    transition: color 0.15s;
}

.modal-nav__link:last-child {
    border-bottom: 0;
}

.modal-nav__link:hover {
    color: var(--white);
    text-decoration: none;
}

.modal-nav__link-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.modal-nav__link-icon[src] {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.modal-nav__link .header-nav__svg {
    width: 16px;
    height: 16px;
}

/* Categories section */
.modal-nav__categories {
    flex: 1;
}

.modal-nav__section-label {
    display: block;
    color: #6b7280;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    padding-left: 4px;
}

.modal-nav__cat-list {
    padding: 0 16px;
}

.modal-nav__cat-item {
    display: block;
    text-decoration: none;
    border-bottom: 4px solid var(--border);
}

.modal-nav__cat-item:last-child {
    border-bottom: 0;
}

.modal-nav__cat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    cursor: pointer;
    transition: filter 0.15s;
}

.modal-nav__cat-row:hover {
    filter: brightness(1.1);
}

.modal-nav__cat-icon {
    width: 28px;
    height: 28px;
    object-fit: cover;
    flex-shrink: 0;
}

.modal-nav__cat-name {
    color: var(--white);
    font-weight: 500;
    font-size: 1em;
    flex: 1;
}

.modal-nav__cat-chevron {
    width: 16px;
    height: 10px;
    color: #9ca3af;
    transition: transform 0.3s;
}

.modal-nav__cat-expandable.expanded .modal-nav__cat-chevron {
    transform: rotate(180deg);
}

/* Subcategories */
.modal-nav__subcats {
    max-height: 0;
    overflow: hidden;
    border-left: 4px solid var(--border);
    transition:
        max-height 0.3s ease-in-out,
        opacity 0.3s;
    opacity: 0;
}

.modal-nav__cat-expandable.expanded .modal-nav__subcats {
    max-height: 500px;
    opacity: 1;
}

.modal-nav__subcat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #d1d5db;
    text-decoration: none;
    font-weight: 500;
    font-size: 1em;
    transition: filter 0.15s;
}

.modal-nav__subcat:hover {
    filter: brightness(1.1);
    text-decoration: none;
    color: #d1d5db;
}

/* Slide-in animation for nav modal */
#modal-nav .modal__overlay {
    align-items: stretch;
    justify-content: flex-start;
}

#modal-nav .modal-nav__panel {
    animation: none;
}

.micromodal-slide[aria-hidden="false"] .modal-nav__panel {
    animation: mmslideFromLeft 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal-nav__panel {
    animation: mmslideToLeft 0.3s cubic-bezier(0, 0, 0.2, 1);
}

@keyframes mmslideFromLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes mmslideToLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* ═══════════════════════════════════════════
   23. RESPONSIVE
   ═══════════════════════════════════════════ */

.only-mobile {
    display: none;
}

.only-desktop {
    /* visible by default */
}

.hide-desktop {
    display: none;
}

.hide-mobile {
    /* visible by default */
}

@media (max-width: 960px) {
    .hide-desktop {
        display: block;
    }
    .body {
        flex-direction: column;
    }

    .body .sidebar {
        width: 100%;
    }

    .sidebar-modules {
        display: none;
    }

    .sidebar-modules-mobile {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none;
    }

    #mobile-widgets {
        display: block;
    }

    .only-mobile {
        display: flex;
    }

    .only-desktop {
        display: none;
    }
}

/* ═══════════════════════════════════════════
   24. SCROLLBAR
   ═══════════════════════════════════════════ */

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

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ═══════════════════════════════════════════
   25. TOAST OVERRIDES (iziToast)
   ═══════════════════════════════════════════ */

.iziToast {
    border: 0 !important;
    background: var(--surface) !important;
    border: 2px solid var(--border) !important;
    clip-path: var(--clip-4);
}

.iziToast-message {
    color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════
   25a. INDEX DESCRIPTION
   ═══════════════════════════════════════════ */

.index-desc {
    margin-top: 16px;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* ═══════════════════════════════════════════
   25b. CMS PAGE
   ═══════════════════════════════════════════ */

.cms-page__title {
    padding: 16px;
    color: var(--color-primary);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.1em;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.cms-page__body {
    padding: 0 16px 16px;
}

.cms-page__content {
    color: var(--text-secondary);
    line-height: 1.8;
}

/* ═══════════════════════════════════════════
   25c. CUSTOM PAGES (padding)
   ═══════════════════════════════════════════ */

.custom-page {
    padding: 16px 20px 20px;
}

/* ═══════════════════════════════════════════
   25d. LOGIN PAGE
   ═══════════════════════════════════════════ */

.login-panel {
    padding: 24px;
    max-width: 448px;
    margin: 0 auto;
}

.login-header {
    align-items: flex-start;
}

.login-title {
    text-align: left;
    color: var(--white);
    font-size: 1.5em;
    margin: 0;
}

.login-desc {
    text-align: left;
    color: var(--text-secondary);
    margin: 4px 0 0;
}

.login-divider {
    height: 2px;
    background: var(--border);
    margin: 16px 0;
    border: none;
}

.login-content {
    margin-top: 0;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-form-enter {
    transition: opacity 150ms ease;
}

.login-form-enter-start {
    opacity: 0;
}

.login-form-enter-end {
    opacity: 1;
}

.login-submit {
    height: 48px;
}

/* ═══════════════════════════════════════════
   26. PROGRESS BAR (module.goal)
   ═══════════════════════════════════════════ */

.progress {
    height: 12px;
    background-color: var(--border);
    overflow: hidden;
}

.progress-bar {
    background-color: var(--color-primary);
    height: 100%;
    transition: width 0.4s ease;
}

/* ═══════════════════════════════════════════
   27. TOASTS
   ═══════════════════════════════════════════ */

.toaster {
    height: auto !important;
    justify-content: flex-end;
}

.toast-sb {
    --sb-border: var(--border);
    --sb-bg: var(--surface);
    pointer-events: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    animation: toastIn 0.3s ease forwards;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toast-sb.toast-success { --sb-border: #2d6e30; }
.toast-sb.toast-error   { --sb-border: #7a1d1d; }
.toast-sb.toast-warning { --sb-border: #7a6e00; }
.toast-sb.toast-info    { --sb-border: var(--border); }

.toast-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    font-size: 0.875em;
}

/* Hide the old shared.css .toast styles */
.toast-sb > .toast-inner {
    background: var(--surface) !important;
    height: auto !important;
    border: none !important;
    box-shadow: none !important;
}

.toast-sb {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-sb.toast-exit {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.toast-icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.toast-icon {
    width: 14px;
    height: 14px;
}

.toast-success .toast-icon {
    color: #4caf50;
}

.toast-error .toast-icon {
    color: #c12e2e;
}

.toast-warning .toast-icon {
    color: #cab600;
}

.toast-info .toast-icon {
    color: var(--color-primary);
}

.toast-text {
    flex: 1;
    color: var(--white);
    font-weight: 500;
    margin: 0;
}

.toast-action {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--white);
    font-weight: bold;
    font-size: 0.875em;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.1);
    clip-path: var(--clip-2);
}

.toast-action:hover {
    background: rgba(255, 255, 255, 0.2);
}

.toast-close {
    flex-shrink: 0;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05) !important;
    opacity: 1 !important;
    font-size: 0 !important;
    cursor: pointer;
    border: none;
    clip-path: var(--clip-2);
    transition: background 0.15s;
}

.toast-close:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.toast-close__icon {
    width: 10px;
    height: 10px;
    color: var(--text-secondary);
}