/* OXYCRAFT — Tebex Theme CSS */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

/* ── VARIÁVEIS ── */
:root {
  --color-bg:                   #060810;
  --color-brighter-bg:          #0d1120;
  --color-primary:              #00e5ff;
  --color-primary-hover:        #ffffff;
  --color-primary-text:         #060810;
  --color-primary-text-hover:   #060810;
  --color-secondary:            #1e2a45;
  --color-secondary-hover:      #2a3a60;
  --color-secondary-text:       #c8d6f0;
  --color-secondary-text-hover: #ffffff;
  --color-tertiary:             transparent;
  --color-tertiary-hover:       rgba(0,229,255,0.06);
  --color-tertiary-text:        #5a6a8a;
  --color-tertiary-text-hover:  #c8d6f0;
  --color-text:                 #c8d6f0;
  --color-text-darker:          #e0eaff;
  --color-text-secondary:       #5a6a8a;
  --color-text-dark:            #060810;
  --color-removed:              #ff2a2a;
  --color-sale-banner-bg:       #00e5ff;
  --color-sale-banner-text:     #060810;
  --btn-size:                   36px;
}

/* ── BASE ── */
body, html { background: #060810 !important; color: #c8d6f0 !important; font-family: 'Rajdhani', sans-serif !important; }
.site { background: #060810 !important; }
.site-content { background: #060810 !important; }
html { scrollbar-color: #1e2a45 #060810; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #060810; }
::-webkit-scrollbar-thumb { background: #1e2a45; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #00e5ff; }
::selection { color: #fff; background-color: rgba(0,229,255,0.25); }
h1,h2,h3,h4,h5,h6 { font-family: 'Bebas Neue', sans-serif !important; font-weight: 400 !important; letter-spacing: 2px !important; }

/* ── BUTTONS ── */
.btn-primary, .btn-secondary, .btn-tertiary {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 2px !important; border-radius: 3px !important; font-size: 14px !important;
}

/* ── WIDGETS ── */
.widget { background: #0d1120 !important; border: 1px solid #1e2a45 !important; border-radius: 4px !important; }
.widget-title { font-family: 'Bebas Neue', sans-serif !important; font-size: 17px !important; letter-spacing: 3px !important; color: #fff !important; }
.widget-recent .username { color: #00e5ff !important; }

/* ── PRODUCTS ── */
.store-product { background: #0d1120 !important; border: 1px solid #1e2a45 !important; border-radius: 4px !important; transition: border-color 0.2s, transform 0.2s !important; }
.store-product:hover { border-color: #00e5ff !important; transform: translateY(-2px) !important; }
.store-product .product-title { font-family: 'Bebas Neue', sans-serif !important; letter-spacing: 2px !important; color: #fff !important; }
.store-product .product-title a:hover { color: #00e5ff !important; }
.store-product .price strong { font-family: 'Bebas Neue', sans-serif !important; font-size: 24px !important; color: #00e5ff !important; }
.store-product-full { background: #0d1120 !important; border: 1px solid #1e2a45 !important; border-radius: 4px !important; }
.store-product-full .product-title { font-family: 'Bebas Neue', sans-serif !important; font-size: 40px !important; letter-spacing: 3px !important; }
.store-product-full .actions { background: rgba(6,8,16,0.92) !important; border-top: 1px solid #1e2a45 !important; backdrop-filter: blur(10px) !important; }

/* ── FORMS ── */
.store-form input[type=text], .store-form input[type=password],
.store-form input[type=email], .store-form input[type=number],
.store-form select, .store-form textarea {
  background: #0a0f1e !important; border: 1px solid #1e2a45 !important;
  border-radius: 3px !important; color: #c8d6f0 !important;
  font-family: 'Rajdhani', sans-serif !important; font-size: 15px !important;
  padding: 10px 14px !important;
}
.store-form input:focus, .store-form select:focus, .store-form textarea:focus {
  border-color: #00e5ff !important; box-shadow: 0 0 0 3px rgba(0,229,255,0.08) !important; outline: none !important;
}
::placeholder { color: #5a6a8a !important; font-family: 'Share Tech Mono', monospace !important; font-size: 11px !important; opacity: 1 !important; }

/* ── POPUP BASE — preserva o comportamento do Tebex ── */
.popup {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  overflow: hidden scroll !important;
  background-color: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(4px) !important;
}

.popup-scroll-cont {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100% !important;
  padding: 24px !important;
}

.popup-content {
  background: #0d1120 !important;
  border: 1px solid #1e2a45 !important;
  border-radius: 6px !important;
  padding: 32px 36px !important;
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
}

/* ── LOGIN POPUP ── */
.login-popup { z-index: 9001 !important; }
.login-popup-content {
  border-left: 3px solid #00e5ff !important;
}
.login-popup-content h1,
.login-popup-content h2 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 36px !important; letter-spacing: 4px !important;
  color: #fff !important; margin-bottom: 24px !important;
  text-shadow: 0 0 20px rgba(0,229,255,0.2) !important;
}
.login-popup-content input[type=text] {
  background: #0a0f1e !important; border: 1px solid #1e2a45 !important;
  border-radius: 3px !important; color: #c8d6f0 !important;
  font-family: 'Rajdhani', sans-serif !important; font-size: 15px !important;
  padding: 10px 14px !important; width: 100% !important;
  display: block !important; margin-bottom: 16px !important;
}
.login-popup-content input[type=text]:focus {
  border-color: #00e5ff !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,0.08) !important;
}
.login-popup-content button[type=submit],
.login-popup-content .btn-primary {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 15px !important; letter-spacing: 3px !important;
  padding: 10px 28px !important; height: auto !important;
  background: #00e5ff !important; color: #060810 !important;
  border: none !important; border-radius: 3px !important;
  cursor: pointer !important; width: auto !important;
  display: inline-block !important;
  transition: opacity 0.2s !important;
}
.login-popup-content button[type=submit]:hover { opacity: 0.85 !important; }

/* Close button */
.popup-close {
  position: absolute !important;
  top: 12px !important; right: 12px !important;
  width: 32px !important; height: 32px !important;
  opacity: 0.5 !important; cursor: pointer !important;
  background: transparent !important; border: none !important;
  font-size: 0 !important; color: transparent !important;
}
.popup-close::before {
  content: '×' !important; font-size: 24px !important;
  color: #c8d6f0 !important; position: absolute !important;
  inset: 0 !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
}
.popup-close:hover { opacity: 1 !important; }

/* ── BASKET POPUP — drawer lateral direito ── */
.basket-popup {
  z-index: 9001 !important;
}
.basket-popup .popup-scroll-cont {
  justify-content: flex-end !important;
  padding: 0 !important;
  align-items: stretch !important;
}
.basket-popup-content {
  background: #060810 !important;
  border-left: 1px solid #1e2a45 !important;
  border-radius: 0 !important;
  max-width: 420px !important;
  width: 100% !important;
  min-height: 100vh !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Basket header */
.basket .basket-header {
  background: rgba(13,17,32,0.97) !important;
  border-bottom: 1px solid #1e2a45 !important;
  padding: 20px 24px !important;
  font-family: 'Bebas Neue', sans-serif !important;
}
.basket .basket-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 20px !important; letter-spacing: 3px !important; color: #fff !important;
}
.basket .basket-title::before { background-color: #00e5ff !important; }

/* Basket second header */
.basket .basket-second-header {
  background: rgba(13,17,32,0.9) !important;
  border-bottom: 1px solid #1e2a45 !important;
  padding: 10px 24px !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important; letter-spacing: 2px !important; color: #5a6a8a !important;
}
.basket .basket-second-header .total strong {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 18px !important; color: #00e5ff !important;
}

/* Basket items */
.basket .basket-items { padding: 16px !important; gap: 12px !important; }
.basket .basket-item {
  background: #0d1120 !important; border: 1px solid #1e2a45 !important;
  border-radius: 4px !important; padding: 14px 16px !important;
}
.basket .basket-item .title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 17px !important; letter-spacing: 2px !important; color: #fff !important;
}
.basket .basket-item .title a { color: #fff !important; }
.basket .basket-item .title a:hover { color: #00e5ff !important; }
.basket .basket-item .price { color: #5a6a8a !important; }
.basket .basket-item .price strong { color: #00e5ff !important; font-size: 16px !important; }

/* Esconde quantidade no carrinho para subscriptions */
.basket .basket-item .quantity-field { display: none !important; }

/* Botão remover */
.basket .basket-item .remove {
  background: transparent !important; border: 1px solid rgba(255,42,42,0.25) !important;
  border-radius: 3px !important; color: transparent !important;
  width: 32px !important; height: 32px !important;
  font-size: 0 !important;
}
.basket .basket-item .remove::before {
  content: '×' !important; font-size: 18px !important; color: #ff2a2a !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 32px !important; height: 32px !important;
}
.basket .basket-item .remove:hover { background: rgba(255,42,42,0.1) !important; border-color: #ff2a2a !important; }

/* Basket checkout */
.basket .basket-checkout {
  padding: 16px 24px 32px !important;
  border-top: 1px solid #1e2a45 !important;
  background: rgba(6,8,16,0.97) !important;
  margin-top: auto !important;
}
.basket .basket-checkout h3 {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 10px !important; letter-spacing: 3px !important;
  color: #5a6a8a !important; text-transform: uppercase !important;
  margin-bottom: 14px !important;
}
.basket .basket-checkout .total strong {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 22px !important; color: #00e5ff !important;
}
.basket .basket-checkout .checkout {
  width: 100% !important; font-family: 'Bebas Neue', sans-serif !important;
  font-size: 16px !important; letter-spacing: 3px !important;
  height: 42px !important; line-height: 42px !important;
  background: #00e5ff !important; color: #060810 !important;
  border-radius: 3px !important; border: none !important;
  cursor: pointer !important; transition: opacity 0.2s !important;
}
.basket .basket-checkout .checkout:hover { opacity: 0.85 !important; }

/* ── TOASTS ── */
.toast { background: #0d1120 !important; border: 1px solid #1e2a45 !important; border-radius: 3px !important; font-family: 'Rajdhani', sans-serif !important; }
.toast.toast-success { background: rgba(0,229,100,0.1) !important; border-color: rgba(0,229,100,0.3) !important; }
.toast.toast-error { background: rgba(255,42,42,0.1) !important; border-color: rgba(255,42,42,0.3) !important; }

/* ── FOOTER ── */
.site-footer { background: #060810 !important; border-top: 1px solid #1e2a45 !important; }
.site-footer-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 32px !important; }
.we-accept { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 12px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; }
.we-accept li { display: block !important; }
.we-accept img { max-width: 44px !important; max-height: 20px !important; filter: brightness(0.4) !important; transition: filter 0.2s !important; }
.we-accept img:hover { filter: brightness(0.7) !important; }
.site-footer-inner .copyright { font-family: 'Share Tech Mono', monospace !important; font-size: 10px !important; letter-spacing: 1px !important; color: #5a6a8a !important; text-align: center !important; }
.site-footer-credit { background: #030508 !important; border-top: 1px solid #1e2a45 !important; }

/* ── FIXES ── */

/* Botão X fechar carrinho — estilo correto */
.basket-popup-content .popup-close,
.popup-close {
  position: absolute !important;
  top: 12px !important; right: 12px !important;
  width: 32px !important; height: 32px !important;
  background: transparent !important;
  border: 1px solid #1e2a45 !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  font-size: 0 !important; color: transparent !important;
  opacity: 1 !important;
  transition: border-color 0.2s !important;
}
.popup-close::before {
  content: '×' !important;
  font-size: 20px !important; color: #5a6a8a !important;
  position: absolute !important; inset: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: none !important; mask: none !important;
  -webkit-mask: none !important;
}
.popup-close:hover { border-color: #ff2a2a !important; }
.popup-close:hover::before { color: #ff2a2a !important; }

/* Remove linha azul estranha no basket item */
.basket .basket-item .title a {
  color: #fff !important;
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
}

/* ── HEADER — logo correta ── */
@media (width > 960px) {
  .site-header-inner {
    position: relative !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 32px !important;
  }
  .site-header-inner .site-title {
    position: static !important;
    inset: auto !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 26px !important;
    letter-spacing: 5px !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    text-align: center !important;
    flex: 1 !important;
    order: 2 !important;
  }
  .site-header-inner .site-title a { color: #fff !important; text-decoration: none !important; }
  .site-header-inner .site-title img { max-height: 40px !important; margin: 0 auto !important; }
  .site-header-inner .actions {
    position: static !important; top: auto !important; left: auto !important;
    order: 1 !important; flex: none !important;
  }
  .site-header-inner .user-actions,
  .site-header-inner .log-in {
    position: static !important; top: auto !important; right: auto !important;
    transform: none !important; order: 3 !important; flex: none !important;
  }
  .site-header-inner .info { display: none !important; }
}

/* ── BASKET ITEM — remove button e quantity fix ── */

/* Botão remover dentro do item */
.basket .basket-item .remove {
  width: 28px !important; height: 28px !important;
  min-width: unset !important; padding: 0 !important;
  background: transparent !important;
  border: 1px solid rgba(255,42,42,0.3) !important;
  border-radius: 3px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex: none !important;
}
.basket .basket-item .remove::before {
  content: '×' !important;
  font-size: 16px !important; color: #ff2a2a !important;
  background: none !important; mask: none !important; -webkit-mask: none !important;
  width: auto !important; height: auto !important;
  position: static !important;
}
.basket .basket-item .remove:hover {
  background: rgba(255,42,42,0.1) !important;
  border-color: #ff2a2a !important;
}

/* Esconde quantity-field E open-basket-cta no basket item */
.basket .basket-item .quantity-field,
.basket .basket-item .open-basket-cta,
.basket .basket-item [class*="quantity"] {
  display: none !important;
}

/* ── REMOVE BUTTON FINAL FIX ── */
.basket .basket-item a.remove,
.basket .basket-item .remove {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255,42,42,0.3) !important;
  border-radius: 3px !important;
  width: 28px !important; height: 28px !important;
  min-width: unset !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  flex: none !important; line-height: 1 !important;
  font-size: 0 !important; color: transparent !important;
}
.basket .basket-item a.remove::before,
.basket .basket-item .remove::before {
  content: '×' !important;
  font-size: 16px !important; font-weight: 400 !important;
  color: #ff2a2a !important; line-height: 1 !important;
  background: none !important;
  mask: none !important; -webkit-mask: none !important;
  width: auto !important; height: auto !important;
  position: static !important; inset: auto !important;
  margin: 0 !important;
}
.basket .basket-item a.remove:hover,
.basket .basket-item .remove:hover {
  background: rgba(255,42,42,0.1) !important;
  border-color: #ff2a2a !important;
}

/* ── REMOVE BUTTON — btn-glyph fix ── */
.basket .basket-item .btn-glyph.remove {
  background-color: transparent !important;
  border: 1px solid rgba(255,42,42,0.3) !important;
  border-radius: 3px !important;
  width: 28px !important; height: 28px !important;
  min-width: unset !important; padding: 0 !important;
  flex: none !important;
}
.basket .basket-item .btn-glyph.remove::before {
  background-color: #ff2a2a !important;
  mask: url("https://template-assets.tebex.io/images/delete.svg") center center/contain no-repeat !important;
  -webkit-mask: url("https://template-assets.tebex.io/images/delete.svg") center center/contain no-repeat !important;
  width: 14px !important; height: 14px !important;
  content: "" !important;
  font-size: 0 !important; color: transparent !important;
}
.basket .basket-item .btn-glyph.remove:hover {
  background-color: rgba(255,42,42,0.1) !important;
  border-color: #ff2a2a !important;
}

/* ── REMOVE BUTTON — tamanho maior ── */
.basket .basket-item .btn-glyph.remove {
  width: 36px !important;
  height: 36px !important;
}
.basket .basket-item .btn-glyph.remove::before {
  width: 18px !important;
  height: 18px !important;
}

/* ── REMOVE BUTTON — ao lado do preço, sem borda ── */
.basket .basket-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}
.basket .basket-item .info {
  flex: 1 !important;
}
.basket .basket-item .btn-glyph.remove {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  width: 36px !important;
  height: 36px !important;
  flex: none !important;
  align-self: center !important;
}
.basket .basket-item .btn-glyph.remove:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}
.basket .basket-item .btn-glyph.remove::before {
  width: 18px !important;
  height: 18px !important;
  background-color: #5a6a8a !important;
  mask: url("https://template-assets.tebex.io/images/delete.svg") center center/contain no-repeat !important;
  -webkit-mask: url("https://template-assets.tebex.io/images/delete.svg") center center/contain no-repeat !important;
}
.basket .basket-item .btn-glyph.remove:hover::before {
  background-color: #ff2a2a !important;
}

/* ── ESCONDE HEADER PADRÃO — hero do index.html substitui ── */
#header {
  display: none !important;
}

/* ── HEADER — mostra apenas na página inicial sem a logo grande ── */
#header {
  display: block !important;
}

/* Esconde só o site-title (logo) no header — o hero já tem */
.page-index #header .site-title {
  display: none !important;
}

/* Header compacto na index — só status bar + botões ── */
.page-index #header .site-header-inner {
  height: auto !important;
  min-height: unset !important;
  padding: 8px 32px !important;
}

/* Nas outras páginas mantém a logo */
.page-index #header .site-header-inner .site-title {
  display: none !important;
}

/* ── BASKET TITLE COM AVATAR ── */
.basket .basket-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.basket .basket-title::before {
  display: none !important;
}

/* ── SUBSCRIPTION PERIOD — substitui "1 Month(s)" ── */
.basket .basket-item .options li {
  font-size: 0 !important;
  color: transparent !important;
}
.basket .basket-item .options li::after {
  content: '1 Month • Auto Renew' !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  color: #5a6a8a !important;
  letter-spacing: 1px !important;
}

/* ── ESCONDE BOTÃO HAMBURGUER — sem categorias ── */
.site-header-inner .actions,
.site-header-inner .toggle-navigation {
  display: none !important;
}

/* ── HEADER STICKY ── */
#header {
  position: sticky !important;
  top: 0 !important;
  z-index: 500 !important;
}