/* ==========================================================
   PepFreak CSS-Only Theme Override for PrestaShop Classic
   Safe install: upload this file only, then load it from your
   current working theme or add it through your custom CSS module.

   File name: pepfreak-custom.css
   ========================================================== */

:root {
  --pf-bg: #050914;
  --pf-bg-2: #071425;
  --pf-bg-3: #030712;
  --pf-card: rgba(12, 22, 39, 0.88);
  --pf-card-2: rgba(16, 33, 57, 0.78);
  --pf-line: rgba(88, 188, 255, 0.16);
  --pf-line-strong: rgba(78, 231, 255, 0.38);
  --pf-text: #f5fbff;
  --pf-muted: #8fa9bd;
  --pf-blue: #28a8ff;
  --pf-cyan: #4ee7ff;
  --pf-green: #00d6a3;
  --pf-glow: rgba(40, 168, 255, 0.35);
  --pf-radius: 22px;
}

/* ---------- Global background ---------- */

html,
body {
  background:
    radial-gradient(circle at 20% 10%, rgba(40, 168, 255, 0.16), transparent 35%),
    radial-gradient(circle at 78% 20%, rgba(78, 231, 255, 0.12), transparent 32%),
    linear-gradient(180deg, var(--pf-bg), var(--pf-bg-2) 55%, var(--pf-bg-3) 100%) !important;
  color: var(--pf-text) !important;
}

#wrapper,
#main,
#content-wrapper,
#left-column,
#right-column,
#wrapper .container,
#main .page-content,
.page-content.page-cms {
  background: transparent !important;
}

/* ---------- Header / navigation ---------- */

#header,
#header .header-nav,
#header .header-top,
.header-top,
.header-nav {
  background: rgba(5, 9, 20, 0.78) !important;
  border-bottom: 1px solid var(--pf-line) !important;
  color: var(--pf-text) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
}

#header .header-top {
  backdrop-filter: blur(16px);
}

#header a,
.header-top a,
.header-nav a,
.top-menu a,
#_desktop_user_info a,
#_desktop_contact_link a,
#_desktop_language_selector button,
#_desktop_currency_selector button {
  color: var(--pf-text) !important;
}

#header a:hover,
.top-menu a:hover,
.header-top a:hover,
.header-nav a:hover {
  color: var(--pf-cyan) !important;
}

#header .logo {
  filter: drop-shadow(0 0 18px rgba(78, 231, 255, 0.22));
}

/* Search */

#search_widget input,
.search-widget input {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 999px !important;
  color: var(--pf-text) !important;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.02) !important;
}

#search_widget input::placeholder,
.search-widget input::placeholder {
  color: rgba(143, 169, 189, 0.75) !important;
}

#search_widget button,
.search-widget button {
  color: var(--pf-cyan) !important;
}

/* Cart button */

#_desktop_cart .blockcart,
.blockcart {
  background: linear-gradient(135deg, var(--pf-blue), var(--pf-cyan)) !important;
  border-radius: 999px !important;
  color: #03101f !important;
  font-weight: 900 !important;
  box-shadow: 0 0 30px rgba(40, 168, 255, 0.28) !important;
}

#_desktop_cart .blockcart a,
.blockcart a,
.blockcart span,
.blockcart i {
  color: #03101f !important;
}

/* ---------- Typography ---------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.product-title a,
.block-category h1,
.products-section-title,
.page-title,
.card-title {
  color: var(--pf-text) !important;
  letter-spacing: -0.035em;
}

p,
span,
small,
label,
li,
.product-description-short,
.tabs .tab-pane,
.page-content,
.block-category #category-description,
.category-description,
.product-information,
.product-description,
.breadcrumb,
.breadcrumb a {
  color: var(--pf-muted) !important;
}

a {
  color: var(--pf-text);
}

a:hover {
  color: var(--pf-cyan) !important;
}

/* ---------- Cards / panels ---------- */

.card,
.product-miniature,
.product-description,
.product-information,
.product-cover,
.block-category,
.block-categories,
.featured-products,
.products,
#subcategories,
.tabs,
.quickview,
.modal-content,
.cart-grid-body,
.cart-grid-right,
.block_newsletter,
.page-content,
.contact-rich,
.contact-form,
#checkout-personal-information-step,
#checkout-addresses-step,
#checkout-delivery-step,
#checkout-payment-step,
.js-address-form,
.address,
.order-confirmation-table,
.account-list a,
.my-account-page-content-wrapper,
#notifications article,
#products .products,
#js-product-list,
#category-description,
#main .images-container,
.product-accessories,
.product-features,
.product-customization,
#blockcart-modal .modal-content {
  background: var(--pf-card) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: var(--pf-radius) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(12px);
}

/* Consistent spacing */

.card,
.product-miniature,
.block-category,
.featured-products,
.block_newsletter,
.page-content,
.contact-form,
.cart-grid-body,
.cart-grid-right,
#js-product-list,
.product-accessories {
  padding: 18px !important;
}

/* ---------- Product cards ---------- */

.product-miniature {
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-miniature:hover {
  transform: translateY(-5px);
  border-color: rgba(78, 231, 255, 0.45) !important;
  box-shadow:
    0 25px 65px rgba(0, 0, 0, 0.34),
    0 0 35px rgba(40, 168, 255, 0.12) !important;
}

.product-miniature .thumbnail-container,
.product-miniature .product-description {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.product-miniature img,
.product-cover img,
.thumbnail-container img,
.product-images img,
#product-modal .modal-content img {
  border-radius: 16px !important;
}

.thumbnail-container {
  background:
    radial-gradient(circle at 50% 45%, rgba(78, 231, 255, 0.18), transparent 38%),
    linear-gradient(135deg, rgba(40, 168, 255, 0.10), rgba(255, 255, 255, 0.025)) !important;
  border-radius: 18px !important;
}

.product-title {
  margin-top: 12px !important;
}

.product-price,
.price,
.current-price,
.discount-percentage,
.product-discount,
.has-discount .discount {
  color: var(--pf-cyan) !important;
  font-weight: 950 !important;
}

.regular-price {
  color: rgba(143, 169, 189, 0.7) !important;
}

/* Product flags / badges */

.product-flag,
li.product-flag,
.badge,
.discount,
.new,
.pack,
.online-only {
  background: rgba(78, 231, 255, 0.11) !important;
  color: var(--pf-cyan) !important;
  border: 1px solid rgba(78, 231, 255, 0.18) !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Buttons ---------- */

.btn-primary,
.btn-secondary,
.btn,
button,
button.btn,
input[type="submit"],
.add-to-cart,
.product-add-to-cart .btn {
  background: linear-gradient(135deg, var(--pf-blue), var(--pf-cyan)) !important;
  border: none !important;
  color: #03101f !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  box-shadow: 0 0 30px rgba(40, 168, 255, 0.28) !important;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
.add-to-cart:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: #03101f !important;
}

.btn-outline,
.btn-tertiary {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid var(--pf-line) !important;
  color: var(--pf-text) !important;
  box-shadow: none !important;
}

/* ---------- Forms ---------- */

input,
select,
textarea,
.form-control,
.input-group .form-control {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 14px !important;
  color: var(--pf-text) !important;
  outline: none !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--pf-line-strong) !important;
  box-shadow: 0 0 0 3px rgba(78, 231, 255, 0.10) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(143, 169, 189, 0.72) !important;
}

.input-group-addon,
.input-group-text {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid var(--pf-line) !important;
  color: var(--pf-muted) !important;
}

/* ---------- Product page ---------- */

.product-prices,
.product-actions,
.product-variants,
.product-add-to-cart,
.product-additional-info,
.product-tabs,
.tabs {
  background: rgba(12, 22, 39, 0.55) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: var(--pf-radius) !important;
  padding: 18px !important;
}

.tabs .nav-tabs {
  border-bottom: 1px solid var(--pf-line) !important;
}

.tabs .nav-tabs .nav-link {
  border-radius: 999px !important;
  color: var(--pf-muted) !important;
  border: 1px solid transparent !important;
}

.tabs .nav-tabs .nav-link.active {
  background: rgba(40, 168, 255, 0.14) !important;
  border-color: var(--pf-line-strong) !important;
  color: var(--pf-cyan) !important;
}

.product-images > li.thumb-container > .thumb {
  border: 1px solid var(--pf-line) !important;
  border-radius: 14px !important;
}

.product-images > li.thumb-container > .thumb.selected,
.product-images > li.thumb-container > .thumb:hover {
  border-color: var(--pf-cyan) !important;
}

/* ---------- Category page ---------- */

.block-category {
  background:
    radial-gradient(circle at 85% 15%, rgba(78, 231, 255, 0.12), transparent 34%),
    var(--pf-card) !important;
}

#subcategories ul li .subcategory-image a {
  border: 1px solid var(--pf-line) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

#subcategories ul li .subcategory-name {
  color: var(--pf-text) !important;
}

/* ---------- Cart / checkout ---------- */

.cart-summary-line,
.cart-item,
.checkout-step,
body#checkout section.checkout-step {
  border-color: var(--pf-line) !important;
  background: transparent !important;
}

body#checkout section.checkout-step .step-title {
  color: var(--pf-text) !important;
}

body#checkout section.checkout-step.-current .step-title {
  color: var(--pf-cyan) !important;
}

.cart-summary-products a,
.cart-summary-line .value,
.cart-summary-line .label,
.cart-item .product-line-info a {
  color: var(--pf-text) !important;
}

/* ---------- Account pages ---------- */

.account-list a {
  display: block;
  padding: 18px !important;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.account-list a:hover {
  transform: translateY(-3px);
  border-color: var(--pf-line-strong) !important;
}

.account-list a i {
  color: var(--pf-cyan) !important;
}

/* ---------- Tables ---------- */

table,
.table {
  background: rgba(12, 22, 39, 0.55) !important;
  color: var(--pf-text) !important;
  border-radius: 18px !important;
  overflow: hidden;
}

.table th,
.table td {
  border-color: var(--pf-line) !important;
  color: var(--pf-muted) !important;
}

/* ---------- Modals ---------- */

.modal-content {
  background: rgba(12, 22, 39, 0.96) !important;
  border: 1px solid var(--pf-line-strong) !important;
  color: var(--pf-text) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--pf-line) !important;
}

/* ---------- Alerts / notifications ---------- */

.alert {
  border-radius: 18px !important;
  border: 1px solid var(--pf-line) !important;
  background: rgba(12, 22, 39, 0.92) !important;
  color: var(--pf-text) !important;
}

.alert-success {
  border-color: rgba(0, 214, 163, 0.4) !important;
}

.alert-danger,
.alert-warning {
  border-color: rgba(255, 115, 115, 0.4) !important;
}

/* ---------- Newsletter ---------- */

.block_newsletter {
  background:
    radial-gradient(circle at 86% 20%, rgba(78, 231, 255, 0.14), transparent 32%),
    var(--pf-card) !important;
}

/* ---------- Pagination ---------- */

.pagination .page-list {
  background: transparent !important;
  box-shadow: none !important;
}

.pagination a,
.pagination .current a {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid var(--pf-line) !important;
  border-radius: 999px !important;
  color: var(--pf-text) !important;
}

.pagination .current a {
  background: linear-gradient(135deg, var(--pf-blue), var(--pf-cyan)) !important;
  color: #03101f !important;
}

/* ---------- Footer ---------- */

.footer-container li a,
#footer a,
#footer p,
#footer span {
  color: var(--pf-muted) !important;
}

#footer a:hover {
  color: var(--pf-cyan) !important;
}

/* ---------- Scrollbar ---------- */

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

::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--pf-blue), var(--pf-cyan));
  border-radius: 999px;
}

::-webkit-scrollbar-track {
  background: #050914;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .product-miniature,
  .card,
  .block-category,
  .cart-grid-body,
  .cart-grid-right,
  .page-content,
  .contact-form {
    border-radius: 18px !important;
  }

  #header .header-top,
  #header .header-nav {
    background: rgba(5, 9, 20, 0.94) !important;
  }

  .product-miniature {
    padding: 14px !important;
  }
}