/* =========================================================
   ALFONS SERVICE'S — CUSTOM.CSS
   Dark / Gray premium finish
   ========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* =========================
   ROOT COLORS
   ========================= */
:root {
  --alfons-bg: #090a0d;
  --alfons-bg-soft: #0f1116;
  --alfons-panel: #14171d;
  --alfons-panel-2: #1a1e26;
  --alfons-border: rgba(255, 255, 255, 0.08);
  --alfons-text: #f4f4f6;
  --alfons-text-soft: rgba(255, 255, 255, 0.72);
  --alfons-accent: #8a8f98;
  --alfons-accent-dark: #6b7078;
  --alfons-accent-light: #b3b8c0;
  --alfons-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* =========================
   GLOBAL
   ========================= */
body {
  background: var(--alfons-bg) !important;
  color: var(--alfons-text) !important;
}

a {
  color: var(--alfons-text) !important;
  text-decoration: none;
}

a:hover {
  color: var(--alfons-accent-light) !important;
}

/* =========================
   BUTTONS / INPUTS / FORMS
   ========================= */
button,
.btn,
a.btn,
.shop-button,
input,
select,
textarea {
  background-color: var(--alfons-accent) !important;
  border-color: var(--alfons-accent) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

button:hover,
.btn:hover,
a.btn:hover,
.shop-button:hover {
  background-color: var(--alfons-accent-dark) !important;
  border-color: var(--alfons-accent-dark) !important;
  color: #ffffff !important;
}

input,
select,
textarea {
  background: var(--alfons-panel) !important;
  color: var(--alfons-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* =========================
   FORCE OLD BLUE/PINK ACCENTS TO GRAY
   ========================= */
[class*="blue"],
[class*="primary"],
[style*="#8A8F98"],
[style*="#8a8f98"],
[style*="rgb(138, 143, 152)"] {
  color: var(--alfons-accent) !important;
  border-color: var(--alfons-accent) !important;
}

/* Tylko dla elementów, które faktycznie mają kolor tła */
.btn[class*="blue"],
.btn[class*="primary"],
button[class*="blue"],
button[class*="primary"],
.badge[class*="blue"],
.badge[class*="primary"] {
  background: var(--alfons-accent) !important;
  border-color: var(--alfons-accent) !important;
  color: #fff !important;
}

/* =========================
   NAVBAR / HEADER
   ========================= */
.navbar,
header,
.topbar,
.ds-nav-wrap,
.ds-nav-shell {
  background: rgba(10, 11, 15, 0.85) !important;
  border: 1px solid var(--alfons-border) !important;
  box-shadow: var(--alfons-shadow) !important;
  backdrop-filter: blur(10px);
}

.navbar a,
header a,
.topbar a {
  color: var(--alfons-text) !important;
}

.navbar a:hover,
header a:hover,
.topbar a:hover {
  color: var(--alfons-accent-light) !important;
}

/* =========================
   CARDS / PANELS
   ========================= */
.card,
.product-card,
.ds-products-card,
.ds-feedback-card,
.ds-faq-item,
.modal-content,
.dropdown-menu {
  background: linear-gradient(
    180deg,
    rgba(20, 23, 29, 0.95),
    rgba(12, 14, 18, 0.95)
  ) !important;
  border: 1px solid var(--alfons-border) !important;
  box-shadow: var(--alfons-shadow) !important;
  color: var(--alfons-text) !important;
}

/* =========================
   PRODUCT GRID LAYOUT
   ========================= */
.row.products {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

@media (min-width: 1200px) {
  .row.products > [class*="col-"] {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .row.products > [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 767.98px) {
  .row.products > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* =========================
   PRODUCT CARD LOOK
   ========================= */
.product-card,
.product-item,
.products .card {
  background: linear-gradient(
    180deg,
    rgba(18, 22, 30, 0.95),
    rgba(10, 12, 18, 0.95)
  ) !important;
  border: 1px solid rgba(138, 143, 152, 0.18) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.product-card:hover,
.product-item:hover,
.products .card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(179, 184, 192, 0.32) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42) !important;
}

/* =========================
   IMPORTANT FIX:
   PRODUCT TEXT ALWAYS VISIBLE
   ========================= */
.product-card .product-info,
.product-card .content,
.product-card .card-body,
.product-item .product-info,
.product-item .content,
.product-item .card-body,
.products .card .content,
.products .card .card-body,
.products .card .product-info {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
}

/* Wyłącza ukrywanie na hover/out */
.product-card:hover .product-info,
.product-card:hover .content,
.product-card:hover .card-body,
.product-item:hover .product-info,
.product-item:hover .content,
.product-item:hover .card-body,
.products .card:hover .product-info,
.products .card:hover .content,
.products .card:hover .card-body {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Gdyby jakiś overlay zasłaniał tekst */
.product-card::before,
.product-card::after,
.product-item::before,
.product-item::after,
.products .card::before,
.products .card::after {
  opacity: 1 !important;
}

/* =========================
   PRODUCT TITLES / TEXT
   ========================= */
.product-card h1,
.product-card h2,
.product-card h3,
.product-card h4,
.product-item h1,
.product-item h2,
.product-item h3,
.product-item h4,
.products .card h1,
.products .card h2,
.products .card h3,
.products .card h4 {
  color: #ffffff !important;
}

.product-card p,
.product-item p,
.products .card p,
.product-card span,
.product-item span,
.products .card span {
  color: var(--alfons-text-soft) !important;
}

/* =========================
   BADGES / LABELS
   ========================= */
.badge,
.product-badge,
.label,
.tag {
  background: var(--alfons-accent) !important;
  color: #fff !important;
  border: 1px solid var(--alfons-accent) !important;
}

/* =========================
   HERO / TITLES
   ========================= */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #ffffff !important;
}

.hero-title,
.ds-hero-title,
.main-title {
  color: #ffffff !important;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.08);
}

.hero-subtitle,
.ds-hero-copy,
.subtitle,
.lead {
  color: var(--alfons-text-soft) !important;
}

/* =========================
   FEEDBACK / REVIEWS
   ========================= */
.feedback-card,
.review-card,
.testimonial-card {
  background: rgba(14, 16, 22, 0.95) !important;
  border: 1px solid var(--alfons-border) !important;
  box-shadow: var(--alfons-shadow) !important;
}

/* =========================
   FOOTER
   ========================= */
footer,
.footer,
.ds-footer,
.footer-discord-theme {
  background: rgba(8, 9, 13, 0.96) !important;
  border-top: 1px solid var(--alfons-border) !important;
  color: var(--alfons-text) !important;
}

footer a,
.footer a,
.ds-footer a {
  color: var(--alfons-text-soft) !important;
}

footer a:hover,
.footer a:hover,
.ds-footer a:hover {
  color: var(--alfons-accent-light) !important;
}

/* =========================
   DROPDOWNS / MODALS
   ========================= */
.dropdown-menu,
.modal-content {
  background: var(--alfons-panel) !important;
  border: 1px solid var(--alfons-border) !important;
  color: var(--alfons-text) !important;
}

/* =========================
   IMAGE PLACEHOLDERS
   ========================= */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

.product-card img,
.product-item img,
.products .card img {
  border-radius: 12px !important;
}

/* =========================
   FINAL SAFETY OVERRIDES
   ========================= */
.text-primary,
.bg-primary,
.border-primary {
  color: var(--alfons-accent) !important;
  border-color: var(--alfons-accent) !important;
}

.bg-primary {
  background-color: var(--alfons-accent) !important;
}

.text-muted,
.small,
.muted {
  color: var(--alfons-text-soft) !important;
}

/* ===== FIX PRODUCT CARD VISIBILITY (FINAL) ===== */

/* usuń overlay który zasłania */
.product-card::before,
.product-card::after,
.product-item::before,
.product-item::after,
.products .card::before,
.products .card::after {
  display: none !important;
}

/* upewnij się że content jest NA WIERZCHU */
.product-card,
.product-item,
.products .card {
  position: relative !important;
  z-index: 1 !important;
}

/* obrazek */
.product-card img,
.product-item img,
.products .card img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  z-index: 1 !important;
}

/* CONTENT (NAJWAŻNIEJSZE) */
.product-card .content,
.product-card .product-info,
.product-card .card-body,
.product-item .content,
.product-item .product-info,
.product-item .card-body,
.products .card .content,
.products .card .product-info,
.products .card .card-body {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  position: relative !important;
  z-index: 2 !important;
}

/* WYŁĄCZ HOVER UKRYWANIE */
.product-card:hover .content,
.product-card:hover .product-info,
.product-item:hover .content,
.product-item:hover .product-info,
.products .card:hover .content,
.products .card:hover .product-info {
  opacity: 1 !important;
  transform: none !important;
}

/* jeżeli jest jakiś overlay div */
.product-card .overlay,
.product-item .overlay,
.products .card .overlay {
  display: none !important;
}
.products .card div[style*="background"] {
  opacity: 1 !important;
}