@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
:root {
  --color-primary: var(--secondary-color);
  --bg-image: url("https://template-assets.tebex.io/images/page-bg.jpg");
}

body {
  font-family: Lato, sans-serif;
}
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  max-height: 400px;
  z-index: -1;
  background: var(--bg-image) center center/cover no-repeat;
  mask-image: linear-gradient(rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.25));
  pointer-events: none;
}

.btn-primary,
.btn-secondary,
.btn-tertiary {
  border-radius: 2px;
}

.btn-primary:hover, .btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  box-shadow: 0 0 6px rgb(from var(--btn-color-bg-hover) r g b/0.6);
}

.quantity-field {
  border-radius: 5px;
}

.site-header-inner .info .image {
  border-radius: 5px;
}

.site-sale-banner {
  border-radius: 5px;
}

.site-home-categories .category {
  border-radius: 5px;
  padding: 20px var(--widget-padding);
  background: var(--color-brighter-bg);
  transition: color 0.15s ease-in-out;
}
.site-home-categories .category:hover {
  color: var(--color-primary);
}

.category-description {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}

.store-text {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}
.store-text h1,
.store-text h2,
.store-text h3,
.store-text h4,
.store-text h5,
.store-text h6 {
  text-align: center;
}

.store-products-list .store-product,
.store-products-images .store-product {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}

.store-products-images .store-product {
  text-align: center;
}

.widget-title {
  text-align: center;
}

.widget .store-product {
  text-align: center;
}

.no-products {
  color: var(--color-text-secondary);
  background: var(--color-brighter-bg);
  border-radius: 5px;
}

.store-product-full {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}

.store-product .quantity-field {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}
.store-product .quantity-field input[type=number] {
  border: none;
}

@media (width > 960px) {
  .navigation-horizontal > ul {
    border-radius: 5px;
  }
}
.navigation-horizontal .has-children > ul {
  border-radius: 5px;
}

.widget {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}
@media (width <= 960px) {
  .widget.site-navigation {
    border-radius: 0;
    background: transparent;
  }
}

.widget-gift-card .gift-card-input {
  border-radius: 2px;
}

.widget-top-donator .avatar {
  border-radius: 50%;
}

.widget-community-goal .progress,
.widget-goal .progress {
  border-radius: 2px;
}
.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
  border-radius: 2px;
}

.popup-content {
  border-radius: 5px;
}

.popup-close {
  border-radius: 0 5px 0 5px;
}

.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: 5px;
}
.basket-item .quantity {
  border-radius: 2px;
}

.toast {
  border-radius: 6px;
}

.toast-close {
  border-radius: 2px;
}

.store-category-tiered {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}

.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: 5px;
  background: rgb(from var(--color-bg) r g b/0.5);
}

.media-slider .slider,
.media-slider .thumb {
  border-radius: 5px;
}
.media-slider .open-lightbox {
  border-radius: 2px;
}

.popup.popup-media-slider .thumb {
  border-radius: 5px;}
  
.popup.popup-media-slider .popup-close {
  border-radius: 5px;
}

/*ALL CUSTOM CHANGES BELOW THIS POINT

/* Fixed top header bar */
.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;

  width: 100% !important;
  max-width: none !important;
  padding: 0 3vw !important;

  background: transparent;
}

/* Header content row */
.site-header-inner {
  height: 4vw !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  position: relative !important;
}

/* Logo / store title top-left */
.site-header-inner .site-title {
  position: static !important;
  inset: auto !important;

  margin: 0 !important;
  width: auto !important;
  height: auto !important;

  line-height: 1 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  text-align: left !important;

  order: 1;
}

.site-header-inner .site-title a {
  display: flex;
  align-items: center;
}

.site-header-inner .site-title img {
  height: 10vw !important;     
  max-height: none !important;  
  width: auto !important;      
}

/* Push login/basket buttons to right */
.site-header-inner .log-in,
.site-header-inner .user-actions {
  position: static !important;
  order: 3;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Hide old server / discord blocks for now */
.site-header-inner .info.server,
.site-header-inner .info.discord {
  display: none !important;
}

/* Hide mobile menu button on desktop-looking header */
.site-header-inner .actions {
  display: none !important;
}

/* Glass buttons */
.site-header .user-actions a,
.site-header .user-actions button,
.site-header .log-in {
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 16px !important;

  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;

  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: all 0.2s ease;
}

/* Tebex glyph icon color */
.site-header .btn-glyph-text::before,
.site-header .btn-glyph::before {
  background-color: var(--secondary-color) !important;
}

/* Hover */
.site-header .user-actions a:hover,
.site-header .user-actions button:hover,
.site-header .log-in:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-1px);
}

/* Prevent fixed header from covering page content */
body {
  padding-top: 72px;
}

.site-header .user-name {
  height: 38px !important;
  overflow: hidden !important;
  contain: paint !important;
}

.site-header .user-name .text-inner {
  display: block;
  overflow: hidden;
  height: 38px;
}

.site-header .user-name .text,
.site-header .user-name .text-hover {
  line-height: 38px !important;
  height: 38px !important;
}

.site-header .user-name .text-hover {
  margin-top: -38px !important;  /* must match your button height */
}


/* Vanta background */
#vanta-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}





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

.custom-text-banner-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  margin: 120px auto 100px;

  max-width: 900px;
  padding: 0 20px;
}

/* =========================
   HEADLINE
========================= */

.custom-text-banner-wrapper h1 {
  font-size: 64px;
  font-weight: 800;
  line-height: 1.1;

  color: #e5e5e5;
  letter-spacing: -1px;

  margin-bottom: 20px;
}

/* =========================
   SUBTEXT
========================= */

.custom-text-banner-wrapper p {
  color: #9ca3af;
  font-size: 18px;
  line-height: 1.6;

  max-width: 600px;
  margin-bottom: 95px;
}

/* =========================
   BUTTON ROW
========================= */

.custom-text-banner-wrapper {
  gap: 16px;
}

.custom-banner-button-container {
    display: flex;
    justify-content: center;
    gap: 2vw;
}

/* Wrap buttons side-by-side */
.custom-text-banner-wrapper .explore-scripts-button,
.custom-text-banner-wrapper .discord-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 48px;
  padding: 0 40px;

  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;

  cursor: pointer;
  user-select: none;

  transition: all 0.2s ease;
}

/* =========================
   PRIMARY BUTTON
========================= */

.explore-scripts-button {
  background: linear-gradient(135deg, var(--secondary-color), #a00000);
  color: #fff;

  box-shadow: 0 10px 30px rgba(255, 60, 60, 0.35);
}

.explore-scripts-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(255, 60, 60, 0.45);
}

/* =========================
   DISCORD BUTTON
========================= */

.discord-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);

  color: #fff;

  backdrop-filter: blur(8px);
}

.discord-button:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* SVG inside discord button */
.discord-button svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--secondary-color);
}

.explore-scripts-button a,
.discord-button a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  height: 100%;

  color: inherit;
  text-decoration: none;
}


.site-content {
    max-width: none !important;
    width: 100% !important;

    display: flex;
    justify-content: center;
}

/* =========================
   MAIN WRAPPER
========================= */

.home-main-content-container {
    width: 100%;
    max-width: 900px;
    margin: 120px auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    position:relative;
}

.home-main-content-container::before{
content:"";
position:absolute;
top:-60px;
left:50%;
transform:translateX(-50%);
width:100%;
height:1px;
background:linear-gradient(
to right,
transparent,
rgba(227,86,16,0.8),
transparent
);
box-shadow:0 0 8px rgba(227,86,16,0.4);
}

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

.newest-script-product-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
}

.newest-script-product-container h2{
    display:inline-block;
    font-size:18px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--secondary-color);
    padding:8px 18px;
    border-radius:999px;
    background:rgba(235,88,0,0.12);
    border:1px solid rgba(235,88,0,0.4);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 0 10px rgba(235,88,0,0.25);
    margin-bottom:12px;
}

.newest-script-product-container h1 {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
}

/* =========================
   VIDEO
========================= */

.video-card {
    width: 100%;
    max-width: 90%;
    aspect-ratio: 16 / 9;

    border-radius: 18px;
    overflow: hidden;

    background: #000;
    box-shadow: rgba(227, 86, 16, 0.25) 0px 54px 55px,
            rgba(227, 86, 16, 0.12) 0px -12px 30px,
            rgba(227, 86, 16, 0.12) 0px 4px 6px,
            rgba(227, 86, 16, 0.17) 0px 12px 13px,
            rgba(227, 86, 16, 0.09) 0px -3px 5px;
}

.youtube-video {
    width: 100%;
    height: 100%;
    border: none;
}

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

.buy-now-button a {
    display: inline-block;

    padding: 14px 90px;
    border-radius: 999px;

    background: linear-gradient(135deg, var(--secondary-color), #a00000);
    color: #fff;

    font-weight: 600;
    font-size: 16px;

    text-decoration: none;
    margin-top: 10px;

    transition: all 0.2s ease;
}

.buy-now-button a:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 80, 10, 0.4);
}

/* =========================
   DESCRIPTION BOX
========================= */

.custom-description-container {
    width: 100%;
    padding: 30px;

    background: transparent;
    backdrop-filter: blur(12px);

    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.05);

    color: #d0d0d0;
    font-size: 15px;
    line-height: 1.7;
}

/* Headings inside description */
.custom-description-container h1,
.custom-description-container h2,
.custom-description-container h3 {
    color: #fff;
    margin-bottom: 10px;
}

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

.custom-faqs{
width:100%;
max-width:900px;
margin:80px auto;
}

.faq-container{
max-height:500px;
overflow-y:auto;
padding-right:10px;
}

.faq-item{
margin-bottom:12px;
border-radius:14px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(10px);
transition:all 0.2s ease;
}

.faq-question{
padding:16px 20px;
cursor:pointer;
font-weight:600;
color:#fff;
position:relative;
}

.faq-question::after{
content:"+";
position:absolute;
right:20px;
color:var(--secondary-color);
font-size:18px;
transition:0.2s;
}

.faq-item.active .faq-question::after{
content:"–";
}

.faq-answer{
max-height:0;
overflow:hidden;
padding:0 20px;
color:#9ca3af;
font-size:14px;
line-height:1.6;
transition:max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer{
max-height:200px;
padding:10px 20px 16px;
}

/* scrollbar styling (optional but clean) */
.faq-container::-webkit-scrollbar{
width:6px;
}

.faq-container::-webkit-scrollbar-thumb{
background:rgba(227,86,16,0.5);
border-radius:10px;
}

.faq-container::-webkit-scrollbar{
width:6px;
}

.faq-container::-webkit-scrollbar-track{
background:transparent;
}

.faq-container::-webkit-scrollbar-thumb{
background:rgba(227,86,16,0.6);
border-radius:10px;
}

.faq-container::-webkit-scrollbar-thumb:hover{
background:rgba(227,86,16,0.9);
}

/* Firefox */
.faq-container{
scrollbar-width:thin;
scrollbar-color: rgba(227,86,16,0.6) transparent;
}



/* =========================
   CATEGORY PAGE LAYOUT
========================= */

.site-content{
max-width:none!important;
width:100%!important;
padding:0 40px!important;
flex:1 0 auto!important;
}

.store-products{
width:100%!important;
display:flex!important;
justify-content:center!important;
}

.store-products-grid-custom{
display:grid!important;
grid-template-columns:repeat(auto-fit,minmax(340px,360px));
justify-content:center;
gap:42px;
width:100%;
max-width:1300px;
margin:70px auto 100px;
padding:0 20px;
position:relative;
}

.store-products-grid-custom::before{
content:"";
position:absolute;
top:-38px;
left:50%;
transform:translateX(-50%);
width:88%;
height:1px;
background:linear-gradient(90deg,transparent,rgba(227,86,16,0.55),transparent);
}

/* =========================
   PRODUCT CARD
========================= */

.store-products-grid-custom .store-product{
width:100%!important;
max-width:360px!important;
height:520px!important;
margin:0!important;
padding:0!important;
gap:0!important;
background:rgba(10,10,10,0.92)!important;
border:1px solid rgba(255,255,255,0.1)!important;
border-radius:20px!important;
overflow:hidden!important;
display:flex!important;
flex-direction:column!important;
position:relative!important;
transition:all 0.25s ease!important;
box-shadow:0 18px 50px rgba(0,0,0,0.35);
}

.store-products-grid-custom .store-product:hover{
transform:translateY(-7px);
border-color:rgba(227,86,16,0.5)!important;
box-shadow:0 28px 80px rgba(227,86,16,0.25);
}

.store-products-grid-custom .store-product::before{
display:none!important;
content:none!important;
}

/* =========================
   IMAGE AREA
========================= */

.store-products-grid-custom .store-product .image-link{
display:block!important;
width:100%!important;
height:260px!important;
max-width:none!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
background:#050505!important;
}

.store-products-grid-custom .store-product .image{
display:block!important;
width:100%!important;
height:100%!important;
max-width:none!important;
max-height:none!important;
margin:0!important;
padding:0!important;
object-fit:cover!important;
object-position:center!important;
transition:transform 0.25s ease!important;
}

.store-products-grid-custom .store-product:hover .image{
transform:scale(1.04);
}

.store-products-grid-custom .store-product .image-default{
width:100%!important;
height:100%!important;
}

/* =========================
   CARD BODY
========================= */

.store-products-grid-custom .product-body{
height:260px!important;
padding:24px 22px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:space-between!important;
text-align:center!important;
}

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

.store-products-grid-custom .product-title{
font-size:20px!important;
font-weight:800!important;
line-height:1.18!important;
color:#fff!important;
margin:0!important;
text-align:center!important;
max-width:100%;
}

.store-products-grid-custom .product-title a{
color:#fff!important;
text-decoration:none!important;
}

/* =========================
   PRICE
========================= */

.store-products-grid-custom .product-price{
font-size:22px!important;
font-weight:800!important;
line-height:1!important;
color:#ff4f1f!important;
margin:0!important;
}

.store-products-grid-custom .product-price span{
font-size:12px!important;
font-weight:600!important;
color:#888!important;
margin-left:5px!important;
}

/* Hide Tebex duplicate price from package-actions.twig */
.store-products-grid-custom .store-product .price,
.store-products-grid-custom .store-product .package-price,
.store-products-grid-custom .product-actions .price{
display:none!important;
}

/* =========================
   TAGS
========================= */

.store-products-grid-custom .product-tags{
display:flex!important;
justify-content:center!important;
align-items:center!important;
gap:8px!important;
margin:0!important;
flex-wrap:wrap!important;
}

.store-products-grid-custom .product-tags span{
font-size:11px!important;
font-weight:700!important;
line-height:1!important;
padding:6px 10px!important;
border-radius:999px!important;
background:rgba(255,255,255,0.08)!important;
color:#cfcfcf!important;
}

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

.store-products-grid-custom .product-actions{
width:100%!important;
display:flex!important;
flex-direction:column!important;
gap:10px!important;
margin:0!important;
padding:0!important;
}

.store-products-grid-custom .product-actions .actions{
width:100%!important;
display:block!important;
margin:0!important;
padding:0!important;
}

.store-products-grid-custom .product-actions .add,
.store-products-grid-custom .product-actions .subscribe,
.store-products-grid-custom .product-actions .btn-primary,
.store-products-grid-custom .product-actions .btn-secondary,
.store-products-grid-custom .product-actions .btn-tertiary{
width:100%!important;
height:48px!important;
min-height:48px!important;
padding:0!important;
margin:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:12px!important;
background:linear-gradient(135deg,#ff5a1f,#b00000)!important;
color:#fff!important;
border:none!important;
font-size:15px!important;
font-weight:800!important;
line-height:1!important;
text-align:center!important;
text-decoration:none!important;
white-space:nowrap!important;
cursor:pointer!important;
transition:all 0.2s ease!important;
}

.store-products-grid-custom .product-actions .add:hover,
.store-products-grid-custom .product-actions .subscribe:hover,
.store-products-grid-custom .product-actions .btn-primary:hover,
.store-products-grid-custom .product-actions .btn-secondary:hover,
.store-products-grid-custom .product-actions .btn-tertiary:hover{
transform:translateY(-2px);
box-shadow:0 14px 35px rgba(227,86,16,0.35);
}

/* If old quantity controls still appear anywhere, kill them */
.store-products-grid-custom .quantity-field,
.store-products-grid-custom .open-basket-cta{
display:none!important;
}

/* =========================
   CLEANUP
========================= */

.category-description{
display:none!important;
}

.no-products{
max-width:700px;
margin:80px auto;
text-align:center;
}

/* =========================
   STICKY FOOTER SUPPORT
========================= */

html,body{
min-height:100%;
}

body{
min-height:100vh;
}

.site{
min-height:100vh!important;
display:flex!important;
flex-direction:column!important;
}

.site-header{
flex:0 0 auto!important;
}

.site-footer{
margin-top:auto!important;
flex:0 0 auto!important;
width:100%;
}

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

@media(max-width:900px){
.site-content{
padding:0 18px!important;
}

.store-products-grid-custom{
grid-template-columns:1fr;
gap:30px;
margin:50px auto 80px;
}

.store-products-grid-custom .store-product{
max-width:360px!important;
}
}

html,
body{
background:#000!important;
background-color:#000!important;
}

.site{
background:transparent!important;
}

body::before{
display:none!important;
content:none!important;
}

body::after{
display:none!important;
content:none!important;
}