/* diablo.base.css — neutral layout foundation */

/* container used in your theme */
.lp-container{
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* NAV base */
.lp-nav{
  background: rgba(10, 18, 40, 0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}


/* Reduce nav vertical padding so it stays compact */
.lp-nav .navbar-brand{
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Optional: keep selects/buttons compact */
.lp-select{
  width: auto;
  min-width: 76px;
}
/* ===============================
   HEADER WIDTH & ALIGNMENT FIX
=============================== */

/* Limite visuelle du contenu du header */
.d-nav-container{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
}

/* Un peu d’air entre logo et menu */
.d-brand{
  gap: 14px;
}

/* BRAND LOGO */
.d-brand-icon{
  width: 175px;
  height: auto;
  max-height: 1px;
  object-fit: contain;
  display: block;
}
@media (max-width: 992px){
  .d-brand-icon{
    width: 56px;
    max-height: 56px;
  }
}


/* Texte DIABLO STREAMING mieux proportionné */
.d-brand-name{
  font-size: 15px;
}
.d-brand-sub{
  font-size: 11px;
  letter-spacing: .12em;
}

/* Espace côté droit (lang, currency, cart, login) */
.d-nav-right{
  display: flex;
  align-items: center;
  gap: 10px; /* 👈 clé pour “trop collé” */
}

/* Boutons pills un peu moins serrés */
.d-pill-btn,
.d-pill-select{
  padding-left: 12px;
  padding-right: 12px;
}
/* =========================================
   NAV HIDE/SHOW ON SCROLL (smooth)
========================================= */

/* état normal */
.d-nav{
  position: sticky;
  top: 0;
  z-index: 1000;

  transform: translateY(0);
  opacity: 1;

  transition: transform 260ms ease, opacity 200ms ease;
  will-change: transform, opacity;
}

/* caché */
.d-nav.is-hidden{
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

/* optionnel: évite un mini “jump” au tout début */
.d-nav.is-hidden{
  box-shadow: none;
}
.d-nav{
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
.d-nav{
  transform: translateZ(0);
}
.d-nav.is-hidden{
  outline: 4px solid red !important;
  background: rgba(255,0,0,.25) !important;
}
/* NAV hide/show smooth */
.d-nav{
  transform: translateY(0);
  opacity: 1;
  transition: transform 260ms ease, opacity 200ms ease;
  will-change: transform, opacity;
}

.d-nav.is-hidden{
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}
/* Espace sous la navbar sticky */
.hero-products,
.hero-home-bg{
  padding-top: 34px;
}

/* mobile un peu plus serré */
@media (max-width: 768px){
  .hero-products,
  .hero-home-bg{
    padding-top: 18px;
  }
}
.mac-inputs{
  display: flex;
  gap: 8px;
}

.mac-field{
  width: 48px;
  text-align: center;
  font-weight: 700;
  letter-spacing: .05em;
}
/* =====================================================
   CART — Summary (fix texte noir dans carte sombre)
   Ultra-ciblé: n'affecte que le résumé du panier
===================================================== */

.cart-summary-desktop .card,
.cart-summary-desktop .card *{
  color: rgba(255,255,255,.88) !important;
}

/* Le "Total" plus punchy */
.cart-summary-desktop .cart-total-row th{
  color: #fff !important;
  font-weight: 800 !important;
}

/* Table: cellules + headers (au cas où une règle globale casse Bootstrap) */
.cart-summary-desktop .table,
.cart-summary-desktop .table td,
.cart-summary-desktop .table th{
  color: rgba(255,255,255,.88) !important;
}

/* Petits textes / hints */
.cart-summary-desktop label,
.cart-summary-desktop small,
.cart-summary-desktop .text-muted{
  color: rgba(255,255,255,.70) !important;
}

/* Inputs + bouton appliquer (optionnel mais propre) */
.cart-summary-desktop .form-control{
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important;
}
.cart-summary-desktop .form-control::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* =====================================================
   CART — MOBILE FIX (table -> cards)
   DiabloStreaming (winter.css)
===================================================== */
@media (max-width: 768px){

  /* Layout mobile: 1 colonne */
  .cart-page .cart-layout{
    display: block !important;
  }
  .cart-page .cart-desktop,
  .cart-page .cart-summary-desktop{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ===== TABLE -> CARDS ===== */
  .cart-page .cart-desktop table{
    width: 100% !important;
    display: block;
    border: 0 !important;
    background: transparent !important;
  }

  .cart-page .cart-desktop thead{
    display: none !important;
  }

  .cart-page .cart-desktop tbody{
    display: block;
    width: 100%;
  }

  .cart-page .cart-desktop tbody tr{
    display: grid !important;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    align-items: start;
    width: 100%;
    margin: 0 0 14px;
    padding: 14px;
    border-radius: 18px;

    background: rgba(10,12,18,.68) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    position: relative;
  }

  .cart-page .cart-desktop tbody tr td{
    display: block !important;
    width: auto !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    vertical-align: top;
    color: rgba(255,255,255,.88) !important;
  }

  /* Produit (image + nom) */
  .cart-page .cart-desktop tbody tr td:nth-child(1){
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .cart-page .cart-desktop tbody tr td:nth-child(1) img{
    width: 92px !important;
    height: 92px !important;
    max-width: 92px !important;
    max-height: 92px !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;

    border-radius: 16px;
    padding: 10px;
    background: radial-gradient(circle at 30% 30%, rgba(255,70,70,.18), rgba(10,12,18,.82));
    border: 1px solid rgba(255,70,70,.22);
    box-shadow: 0 12px 35px rgba(0,0,0,.45);
  }

  .cart-page .cart-desktop tbody tr td:nth-child(1) .mt-2{
    margin-top: 10px !important;
    text-align: left !important;
    font-weight: 900;
    color: rgba(255,255,255,.92) !important;
    line-height: 1.25;
  }

  /* Détails */
  .cart-page .cart-desktop tbody tr td:nth-child(2){
    grid-column: 2;
    grid-row: 1;
    font-size: 13px !important;
    color: rgba(255,255,255,.82) !important;
  }
  .cart-page .cart-desktop tbody tr td:nth-child(2) ul{
    margin: 6px 0 0 !important;
    padding-left: 16px !important;
  }
  .cart-page .cart-desktop tbody tr td:nth-child(2) li{
    margin: 3px 0;
  }

  /* Quantité */
  .cart-page .cart-desktop tbody tr td:nth-child(3){
    grid-column: 2;
    grid-row: 2;
    margin-top: 10px;
  }
  .cart-page .cart-desktop tbody tr td:nth-child(3) form{
    justify-content: flex-start !important;
  }
  .cart-page .cart-desktop tbody tr td:nth-child(3) input[type="number"]{
    width: 74px !important;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: #fff !important;
  }

  /* Prix */
  .cart-page .cart-desktop tbody tr td:nth-child(4){
    grid-column: 2;
    grid-row: 3;
    margin-top: 10px;
    text-align: left !important;
    font-weight: 950;
    font-size: 16px;
    color: rgba(255,255,255,.92) !important;
  }
  .cart-page .cart-desktop tbody tr td:nth-child(4)::before{
    content: "Prix: ";
    opacity: .75;
    font-weight: 800;
    margin-right: 6px;
  }

  /* Delete bouton top-right */
  .cart-page .cart-desktop tbody tr td:nth-child(5){
    position: absolute;
    right: 12px;
    top: 12px;
    width: auto !important;
  }
  .cart-page .cart-desktop tbody tr td:nth-child(5) .btn{
    width: 40px;
    height: 40px;
    border-radius: 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }

  /* ===== SUMMARY card ===== */
  .cart-page .cart-summary-desktop{
    margin-top: 14px;
  }

  .cart-page .cart-summary-desktop .card{
    border-radius: 18px;
    background: rgba(10,12,18,.68) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Force texte blanc dans résumé */
  .cart-page .cart-summary-desktop,
  .cart-page .cart-summary-desktop *{
    color: rgba(255,255,255,.88) !important;
  }

  /* Mais on garde le vert pour la ligne discount */
  .cart-page .cart-summary-desktop .text-success{
    color: #22c55e !important;
  }

  /* Inputs visibles */
  .cart-page .cart-summary-desktop .form-control{
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.16) !important;
  }
  .cart-page .cart-summary-desktop .form-control::placeholder{
    color: rgba(255,255,255,.55) !important;
  }

  /* Fix texte inline gris (#475569) dans “1 point = 1 CAD” */
  .cart-page .cart-summary-desktop [style*="color:#475569"]{
    color: rgba(255,255,255,.70) !important;
  }
}
/* =====================================================
   FOOTER / BOTTOM BAR FIX (mobile)
   Évite le "noir" qui apparaît en bas au scroll
===================================================== */
footer{
  background: transparent !important;
}

@media (max-width: 768px){
  footer{
    background: rgba(10,12,18,.35) !important;
    border-top: 1px solid rgba(255,255,255,.06);
  }
}