/* ── RUSTPVE Theme ── generic.css ───────────────────────────────────────────
   Colors, typography, and layout overrides for the RUSTPVE dark/red theme.
   Loaded after shared.css, so all :root overrides take effect.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Color Palette ─────────────────────────────────────────────────────── */
:root {
  --color-primary: #ff2e36;
  --color-primary-hover: #ff5055;
  --color-primary-text: #ffffff;
  --color-primary-text-hover: #ffffff;
  --color-secondary: #1c1f1c;
  --color-secondary-hover: #2a2d2a;
  --color-secondary-text: #f0f0f0;
  --color-secondary-text-hover: #f0f0f0;
  --color-bg: #0a0c0a;
  --color-brighter-bg: #101310;
  --color-text: #f0f0f0;
  --color-text-darker: #e0e0e0;
  --color-text-secondary: #888888;
  --color-removed: #e03030;
  --bg-image: url("https://rustpve.com/assets/background.webp");
}

/* ── Sizing — bigger for readability ────────────────────────────────────── */
:root {
  --btn-size: 56px;
  --widget-padding: 18px;
  --content-padding: 12px;
}
@media (width > 600px) {
  :root {
    --widget-padding: 20px;
    --content-padding: 16px;
  }
}
@media (width > 960px) {
  :root {
    --widget-padding: 24px;
    --btn-size: 58px;
    --content-padding: 24px; /* override shared.css's calc(widget-padding * 2) */
  }
}

/* Base font size: override shared.css's 14px on .site */
.site {
  font-size: 20px;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
}

/* Oswald on all headings, nav, and buttons */
h1, h2, h3, h4, h5, h6,
.site-title,
.widget-title,
.store-product .product-title,
.store-product-tiered .product-title,
.btn-primary,
.btn-secondary,
.btn-tertiary,
.basket .basket-title,
.navigation-horizontal .menu {
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.5px;
}

/* ── Background image — fixed, fades to dark ────────────────────────────── */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  max-height: none;
  z-index: -1;
  background: var(--bg-image) center top / cover no-repeat;
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0.50) 0%,
    rgba(0,0,0,0.82) 45%,
    rgba(0,0,0,1.00) 68%
  );
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0.50) 0%,
    rgba(0,0,0,0.82) 45%,
    rgba(0,0,0,1.00) 68%
  );
  pointer-events: none;
}

/* ── Header — mobile ─────────────────────────────────────────────────────── */
@media (width <= 960px) {
  .site-header-inner {
    padding: 70px 0 var(--widget-padding);
  }
  .site-header-inner .site-title {
    line-height: 48px;
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: 'Oswald', sans-serif;
  }
  .site-header-inner .site-title img {
    max-height: 48px;
  }
  .site-header-inner .info {
    display: none;
  }
}

/* ── Header — desktop ────────────────────────────────────────────────────── */
@media (width > 960px) {
  .site-header-inner,
  body.is-navigation-horizontal .site-header-inner {
    height: 100px;
    position: relative;
  }
  .site-header-inner .site-title {
    position: absolute;
    inset: 0;
    width: fit-content;
    height: fit-content;
    margin: auto;
    line-height: 64px;
    font-size: 52px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 6px;
    font-family: 'Oswald', sans-serif;
  }
  .site-header-inner .site-title img {
    margin: 0 auto;
    max-height: 64px;
    max-width: 380px;
  }
  .site-header-inner .actions {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: fit-content;
    margin: auto 0;
  }
  .site-header-inner .log-in,
  .site-header-inner .user-actions {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    height: fit-content;
    margin: auto 0;
    display: flex;
    align-items: center;
    gap: var(--widget-padding);
  }
  .site-header-inner .info {
    display: none;
  }
}

/* ── Navigation bar ──────────────────────────────────────────────────────── */
@media (width > 960px) {
  .navigation-horizontal > ul {
    border-radius: 0;
  }
  .navigation-horizontal .menu {
    background: #0d100d;
    border-top: 1px solid #1c201c;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 0 calc(var(--widget-padding) / 2);
  }
  .navigation-horizontal .menu > li > a {
    padding: 15px calc(var(--widget-padding) / 2);
  }
  .navigation-horizontal .has-children > ul {
    border-radius: 0;
    background: #0d100d;
    border: 1px solid #1c201c;
    top: calc(100% - 1px);
  }
}
/* Mobile nav drawer */
@media (width <= 960px) {
  .site-navigation .menu {
    background: #0a0c0a;
    border-right: 1px solid #1c201c;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.8px;
  }
}

/* "← rustpve.com" back link in nav */
.nav-back-link {
  display: block;
  opacity: 0.75;
  font-size: 20px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  padding: 10px calc(var(--widget-padding) / 2) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 6px;
  color: var(--color-text-darker) !important;
}
.nav-back-link:hover {
  opacity: 1 !important;
  color: var(--color-primary) !important;
}

/* ── Vertical nav sizing (sidebar mode) ──────────────────────────────────── */
@media (width > 960px) {
  .navigation-vertical .menu {
    font-size: 22px;
    line-height: 34px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }
  .navigation-vertical a {
    padding: 13px calc(var(--widget-padding) / 2);
  }
  .navigation-vertical ul ul {
    font-size: 18px;
  }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-tertiary {
  border-radius: 0;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 20px;
}
.btn-primary:hover,
.btn-primary:focus {
  box-shadow: 0 0 14px rgba(255, 46, 54, 0.45);
}

/* ── Product cards ───────────────────────────────────────────────────────── */
.store-products-list .store-product,
.store-products-images .store-product {
  border-radius: 0;
  background: var(--color-brighter-bg);
  border: 1px solid #181c18;
  transition: border-color 0.15s ease-in-out;
}
.store-products-list .store-product:hover,
.store-products-images .store-product:hover {
  border-color: var(--color-primary);
}

/* ── Home category tiles ─────────────────────────────────────────────────── */
.site-home-categories .category {
  border-radius: 0;
  padding: 20px var(--widget-padding);
  background: var(--color-brighter-bg);
  border: 1px solid #181c18;
  transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.site-home-categories .category:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ── Category description / store text ──────────────────────────────────── */
.category-description,
.store-text {
  border-radius: 0;
  background: var(--color-brighter-bg);
  border: 1px solid #181c18;
}
.store-text h1, .store-text h2, .store-text h3,
.store-text h4, .store-text h5, .store-text h6 {
  text-align: center;
}

/* ── Widgets ─────────────────────────────────────────────────────────────── */
.widget {
  border-radius: 0;
  background: var(--color-brighter-bg);
  border: 1px solid #181c18;
}
@media (width <= 960px) {
  .widget.site-navigation {
    border-radius: 0;
    background: transparent;
    border: none;
  }
}
.widget-title {
  text-align: left;
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1.5px;
  font-size: 16px;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: calc(var(--widget-padding) / 2);
  margin-bottom: var(--widget-padding);
}
.widget-gift-card .gift-card-input {
  border-radius: 0;
}
.widget-top-donator .avatar {
  border-radius: 50%;
}
.widget-community-goal .progress,
.widget-goal .progress {
  border-radius: 0;
}
.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
  border-radius: 0;
}

/* ── Full product page ───────────────────────────────────────────────────── */
.store-product-full {
  border-radius: 0;
  background: var(--color-brighter-bg);
  border: 1px solid #181c18;
}

/* ── No products ─────────────────────────────────────────────────────────── */
.no-products {
  border-radius: 0;
  background: var(--color-brighter-bg);
  border: 1px solid #181c18;
  color: var(--color-text-secondary);
}

/* ── Tiered category ─────────────────────────────────────────────────────── */
.store-category-tiered {
  border-radius: 0;
  background: var(--color-brighter-bg);
  border: 1px solid #181c18;
}
.store-category-tiered-header h1, .store-category-tiered-header h2,
.store-category-tiered-header h3, .store-category-tiered-header h4,
.store-category-tiered-header h5, .store-category-tiered-header h6 {
  text-align: center;
}
.store-product-tiered {
  border-radius: 0;
  background: rgba(10, 12, 10, 0.5);
}

/* ── Quantity field ──────────────────────────────────────────────────────── */
.quantity-field {
  border-radius: 0;
}
.store-product .quantity-field {
  border-radius: 0;
  background: var(--color-brighter-bg);
}
.store-product .quantity-field input[type=number] {
  border: none;
}

/* ── Media slider ────────────────────────────────────────────────────────── */
.media-slider .slider,
.media-slider .thumb {
  border-radius: 0;
}
.media-slider .open-lightbox {
  border-radius: 0;
}
.popup.popup-media-slider .thumb {
  border-radius: 0;
}
.popup.popup-media-slider .popup-close {
  border-radius: 0;
}

/* ── Popups ──────────────────────────────────────────────────────────────── */
.popup-content {
  border-radius: 0;
  border: 1px solid #1c201c;
}
.popup-close {
  border-radius: 0;
}
.basket-popup-content,
.basket-popup-content .popup-close {
  border-radius: 0;
}
.basket-items {
  padding: var(--widget-padding) calc(var(--content-padding) - var(--widget-padding));
}
.basket-item {
  border-radius: 0;
  border: 1px solid #181c18;
}
.basket-item .quantity {
  border-radius: 0;
}

/* ── Toast notifications ─────────────────────────────────────────────────── */
.toast {
  border-radius: 0;
}
.toast-close {
  border-radius: 0;
}

/* ── Sale banner ─────────────────────────────────────────────────────────── */
.site-sale-banner {
  border-radius: 0;
}

/* ── Product card text sizes ─────────────────────────────────────────────── */
.store-product .product-title {
  font-size: 26px;
}
.store-product .price strong {
  font-size: 28px;
}
.store-product .descr {
  font-size: 18px;
  line-height: 1.6;
}
.store-product-tiered .product-title {
  font-size: 26px;
}
.store-product-tiered .price strong {
  font-size: 28px;
}
.widget-title {
  font-size: 22px;
}
.category-description {
  font-size: 20px;
}
.no-products {
  font-size: 20px;
}
/* Store text / announcement area */
.store-text {
  font-size: 20px;
  line-height: 1.7;
}

/* ── Hidden sections ─────────────────────────────────────────────────────── */
.widget-recent,        /* Recent payments */
.widget-featured,      /* Featured package */
.site-home-categories  /* Home category tiles grid */
{
  display: none !important;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 2px solid var(--color-primary);
  background: var(--color-brighter-bg);
}
.site-footer-inner .copyright a {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity 0.15s ease-in-out;
}
.site-footer-inner .copyright a:hover {
  opacity: 0.8;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
html {
  scrollbar-color: #ff2e36 #0d100d;
}

/* ── Header: Servers + Discord buttons ──────────────────────────────────── */
.rp-hdr-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--btn-size);
  padding: 0 18px;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  line-height: 1;
}
.rp-hdr-btn-red {
  background: var(--color-primary);
  color: #fff !important;
}
.rp-hdr-btn-red:hover {
  background: var(--color-primary-hover);
  color: #fff !important;
  box-shadow: 0 0 14px rgba(255,46,54,0.4);
}
.rp-hdr-btn-outline {
  background: transparent;
  color: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(255,255,255,0.28);
}
.rp-hdr-btn-outline:hover {
  color: #fff !important;
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.06);
}