/*
 * colinauto.ro — Product Page 2026 v3
 * catalog/view/theme/colin/stylesheet/product2026.css
 *
 * STRATEGIE LAYOUT:
 *   - Mobil (<992px): custom.css gestioneaza TOT layout-ul
 *     (flex column + display:contents + order). Nu atingem nimic.
 *   - Desktop (>=992px): suprascriem cu flex row pentru 2 coloane.
 *
 * Paleta:
 *   #016fb6 albastru Colin | #005a96 hover | #e8f4fd albastru deschis
 *   #f4f6f8 gri fundal | #e2e8ed borduri | #1a1a2e text | #5a6a7a text secundar
 *   #e51a17 pret | #1a9c4e stoc verde
 */

/* ─── FUNDAL PAGINA ─── */
.product-page {
  background: #f4f6f8;
  padding-bottom: 40px;
}

/* ─── BREADCRUMB ─── */
.product-page .breadcrumb {
  background: transparent;
  box-shadow: none;
  padding: 10px 0;
  margin-bottom: 12px;
  font-size: 11px;
}
.product-page .breadcrumb > li { padding: 0; }
.product-page .breadcrumb > li + li:before { content: '›'; padding: 0 5px; color: #bbb; }
.product-page .breadcrumb > li:after { display: none; }
.product-page .breadcrumb a { color: #016fb6; }

/* ─── TITLU ─── */
.product-page #h1-prod {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  border: none;
  padding: 0 0 14px 0;
  margin: 0;
  line-height: 1.35;
}

/* ─── GALERIE — CARD ─── */
.product-page .thumbnails {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(0,0,0,.07);
  padding: 16px;
  margin: 0 !important;
  list-style: none;
}
.product-page .thumbnails > li:first-child { margin: 0; display: block; }
.product-page .thumbnails .thumbnail {
  border: none !important;
  padding: 0 !important;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  background: #f8fafc;
  box-shadow: none;
  margin-bottom: 0;
}
.product-page .thumbnails .thumbnail img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  display: block;
}
.product-page .thumbnails .image-additional {
  display: inline-block;
  max-width: 70px;
  margin: 8px 6px 0 0;
}
.product-page .thumbnails .image-additional .thumbnail {
  border: 2px solid #e2e8ed !important;
  border-radius: 6px;
  transition: border-color .15s;
}
.product-page .thumbnails .image-additional .thumbnail:hover {
  border-color: #016fb6 !important;
}
.product-page .zoom-icon,
.product-page .zoom-icon-thumbnails {
  color: #fff;
  background: rgba(1,111,182,.75);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 13px !important;
}

/* ─── SIDEBAR INFO DESKTOP (producator, model, stoc) ─── */
.product-page .nomob.col-lg-4 {
  padding: 0 0 0 14px !important;
}
.product-page .nomob.col-lg-4 .list-unstyled {
  font-size: 12px;
  color: #5a6a7a;
  margin: 0 0 12px 0;
}
.product-page .nomob.col-lg-4 .list-unstyled li {
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
}
.product-page .nomob.col-lg-4 .list-unstyled li:last-child { border-bottom: none; }
.product-page #disponibilitate .blue-txt { color: #1a9c4e; font-weight: 700; }
.product-page .nomob.col-lg-4 .rating { font-size: 12px; }
.product-page #extra-help { font-size: 11px; line-height: 1.9; }
.product-page #extra-help a { color: #016fb6; font-weight: 600; text-decoration: none; }
.product-page #extra-help a:hover { text-decoration: underline; }
.product-page .nomob.col-lg-4 hr { border-color: #f0f0f0; margin: 10px 0; }

/* ─── TABS ─── */
.product-page .nav-tabs {
  border-bottom: 2px solid #e2e8ed;
  margin: 16px 0 0 0;
}
.product-page .nav-tabs > li > a {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: #5a6a7a;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.product-page .nav-tabs > li.active > a,
.product-page .nav-tabs > li > a:hover {
  color: #016fb6 !important;
  border-bottom-color: #016fb6 !important;
  background: transparent !important;
}
.product-page .tab-content {
  background: #fff;
  border: 1px solid #e2e8ed;
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 20px;
  font-size: 13px;
  line-height: 1.75;
  color: #363636;
  min-height: 100px;
}
.product-page .tab-content .table-bordered { font-size: 13px; border: none; }
.product-page .tab-content .table-bordered thead td { background: #f4f6f8; font-weight: 700; color: #016fb6; border: none; border-bottom: 2px solid #e2e8ed; padding: 10px 14px; }
.product-page .tab-content .table-bordered tbody tr:nth-child(even) td { background: #f9fbfc; }
.product-page .tab-content .table-bordered tbody td { border: none; border-bottom: 1px solid #f0f0f0; padding: 8px 14px; }

/* ─── PRET ─── */
.product-page .red-price {
  font-size: 28px;
  font-weight: 900;
  color: #e51a17;
  line-height: 1;
  margin: 4px 0;
  display: block;
}
.product-page #mob-price-info-col .text-right {
  font-size: 12px !important;
  color: #999 !important;
  text-align: left !important;
}
.product-page .orange-box {
  background: #ff7e00;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  padding: 4px 12px;
  display: inline-block;
  margin-bottom: 8px;
}
.product-page #mob-stoc-line { font-size: 12px; color: #1a9c4e; font-weight: 600; margin: 0 0 4px 0; }
.product-page #wi-prod { font-size: 12px; color: #5a6a7a; margin: 8px 0 4px; }
.product-page #wi-prod a { color: #5a6a7a; text-decoration: none; }
.product-page #wi-prod:hover, .product-page #wi-prod a:hover { color: #e51a17; }

/* ─── CANTITATE + BUTON ─── */
.product-page #qty-cart-form-group { margin: 0; padding: 0; }
.product-page #qty-cart-form-group label {
  font-size: 11px; font-weight: 700; color: #5a6a7a;
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 6px; display: block;
}
.product-page #input-quantity {
  height: 42px; border-radius: 8px;
  border: 1.5px solid #e2e8ed;
  font-size: 15px; font-weight: 700; text-align: center;
  width: 70px !important; padding: 0 8px; color: #1a1a2e;
  transition: border-color .15s; display: inline-block;
}
.product-page #input-quantity:focus {
  border-color: #016fb6; outline: none;
  box-shadow: 0 0 0 3px rgba(1,111,182,.12);
}
.product-page #button-cart {
  display: block; width: 100%; height: 52px;
  background: #016fb6; border: none; border-radius: 10px;
  color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(1,111,182,.30);
  transition: background .18s, transform .1s, box-shadow .18s;
  margin-top: 12px;
}
.product-page #button-cart:hover {
  background: #005a96;
  box-shadow: 0 6px 18px rgba(1,111,182,.40);
  transform: translateY(-1px);
}
.product-page #button-cart:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(1,111,182,.2);
}
.product-page #indisponibil {
  background: #f4f6f8; border: 1.5px dashed #e2e8ed;
  border-radius: 10px; color: #5a6a7a; font-size: 14px;
  font-weight: 600; padding: 16px; text-align: center; margin-top: 12px;
}

/* ─── BARA FIXA MOBIL ─── */
#fixed-cart-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  background: #fff; border-top: 1px solid #e2e8ed;
  box-shadow: 0 -4px 16px rgba(0,0,0,.10);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
#fixed-qty-stepper {
  display: flex; align-items: center;
  border: 1.5px solid #e2e8ed; border-radius: 8px;
  overflow: hidden; height: 44px; flex-shrink: 0;
}
#fixed-qty-minus, #fixed-qty-plus {
  width: 36px; height: 44px; background: #f4f6f8; border: none;
  font-size: 18px; font-weight: 700; color: #016fb6; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
#fixed-qty-minus:hover, #fixed-qty-plus:hover { background: #e8f4fd; }
#fixed-qty-value {
  width: 34px; text-align: center; font-size: 15px;
  font-weight: 700; color: #1a1a2e;
  border-left: 1px solid #e2e8ed; border-right: 1px solid #e2e8ed;
  height: 44px; display: flex; align-items: center; justify-content: center;
}
#button-cart-fixed {
  flex: 1; height: 48px; background: #016fb6; border: none;
  border-radius: 10px; color: #fff; font-size: 15px; font-weight: 700;
  cursor: pointer; box-shadow: 0 3px 10px rgba(1,111,182,.28);
  transition: background .15s;
}
#button-cart-fixed:hover { background: #005a96; }
#button-cart-fixed:disabled { background: #a0b8cc; box-shadow: none; cursor: not-allowed; }
#fixed-wishlist-btn {
  width: 46px; height: 46px; background: #f4f6f8;
  border: 1.5px solid #e2e8ed; border-radius: 10px;
  color: #5a6a7a; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
#fixed-wishlist-btn:hover { background: #fff0f0; border-color: #e51a17; color: #e51a17; }

/* ─── POPUP CONFIRMARE COS ─── */
#cart-confirm-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 2000; display: none;
  align-items: flex-end; justify-content: center;
}
#cart-confirm-box {
  background: #fff; border-radius: 16px 16px 0 0;
  padding: 28px 24px 24px; width: 100%; max-width: 460px;
  text-align: center; animation: cuSlideUp .25s ease;
}
@keyframes cuSlideUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
#cart-confirm-icon .fa { font-size: 48px !important; color: #1a9c4e; display: block; margin-bottom: 10px; }
#cart-confirm-text { font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 16px; }
#cart-confirm-go {
  display: block; background: #016fb6; color: #fff; border-radius: 10px;
  height: 48px; line-height: 48px; font-size: 15px; font-weight: 700;
  text-decoration: none; margin-bottom: 10px; border: none; width: 100%; cursor: pointer;
}
#cart-confirm-go:hover { background: #005a96; color: #fff; }
#cart-confirm-continue {
  display: block; background: #f4f6f8; border: 1.5px solid #e2e8ed;
  border-radius: 10px; height: 44px; width: 100%;
  font-size: 14px; font-weight: 600; color: #5a6a7a; cursor: pointer;
}

/* ─── INFO LIVRARE ─── */
.product-page .info-extra-box {
  background: #fff; border-radius: 10px; border: 1.5px solid #e8f4fd;
  padding: 10px 14px; margin: 8px 0;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: #1a1a2e;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.product-page .info-extra-box img { flex-shrink: 0; width: 26px; height: auto; }
.product-page .info-extra-box span { float: none !important; width: auto !important; line-height: 1.4; }

/* ─── PRODUSE CORELATE ─── */
.product-page #mob-related-title {
  font-size: 15px; font-weight: 700; color: #1a1a2e;
  margin: 24px 0 12px 0; padding-left: 10px;
  border-left: 3px solid #016fb6;
}
.product-page #related-module .product-thumb {
  background: #fff; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  border: none; overflow: hidden;
  transition: box-shadow .18s, transform .18s; margin-bottom: 12px;
}
.product-page #related-module .product-thumb:hover {
  box-shadow: 0 6px 20px rgba(1,111,182,.13); transform: translateY(-2px);
}
.product-page #related-module .product-thumb h4 { font-size: 12px; min-height: 36px; height: auto; color: #1a1a2e; font-weight: 600; }
.product-page #related-module .product-thumb h4 a { color: #1a1a2e; text-decoration: none; }
.product-page #related-module .product-thumb h4 a:hover { color: #016fb6; }

/* ─── RATING ─── */
.product-page .rating .fa-star { color: #f5a623; font-size: 13px; }
.product-page .rating .fa-star-o { color: #ddd; font-size: 13px; }

/* ─── FORM CONTROLS ─── */
.product-page .form-control {
  border-radius: 8px; border: 1.5px solid #e2e8ed;
  font-size: 13px; height: 40px;
  transition: border-color .15s, box-shadow .15s; box-shadow: none;
}
.product-page .form-control:focus {
  border-color: #016fb6; box-shadow: 0 0 0 3px rgba(1,111,182,.12);
}

/* ═══════════════════════════════════════════════════
   MOBIL (<992px)
   NU atingem .row.container, #mob-image-tabs-col,
   #mob-price-info-col — custom.css le gestioneaza!
   Doar stiluri vizuale pentru elementele individuale.
═══════════════════════════════════════════════════ */
@media (max-width: 991px) {

  .product-page { padding-bottom: 80px; }

  /* Butonul Comanda e ascuns — bara fixa il inlocuieste */
  .product-page #button-cart { display: none !important; }

  /* SPATIU GOL: .nomob.col-lg-4 in display:contents pastreaza padding Bootstrap
     Eliminam complet orice dimensiune/spatiu */
  .product-page .nomob,
  .product-page .nomob.col-lg-4 {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    flex: none !important;
    order: -999 !important;
  }

  /* Tabs */
  .product-page .tab-content { padding: 14px; font-size: 13px; }

  /* Card pret pe mobil */
  .product-page #mob-price-block {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    padding: 14px 16px !important;
    margin: 0 0 8px 0 !important;
  }

  /* Div #product (optiuni + cantitate) pe mobil */
  .product-page #product {
    background: #fff;
    border-radius: 10px;
    padding: 14px 16px !important;
    margin: 0 0 8px 0;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
  }

  /* Info livrare */
  .product-page .info-extra-box { padding: 9px 12px; }

  /* Related */
  .product-page #mob-related-title { font-size: 14px; margin: 16px 0 10px 0; }
}

/* ═══════════════════════════════════════════════════
   DESKTOP (>=992px)
   Suprascriem layout-ul Bootstrap + custom.css
   cu flex row pentru 2 coloane.
═══════════════════════════════════════════════════ */
@media (min-width: 992px) {

  #fixed-cart-bar { display: none !important; }
  #cart-confirm-overlay { align-items: center; }
  #cart-confirm-box { border-radius: 16px; max-width: 400px; }

  /* Galerie — spatiu sub ea pe desktop */
  .product-page .thumbnails { margin-bottom: 16px !important; }

  /* Layout 2 coloane */
  .product-page .row.container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .product-page .row.container::before,
  .product-page .row.container::after { display: none !important; }

  /* Coloana stanga */
  .product-page #mob-image-tabs-col {
    display: block !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    float: none !important;
    order: unset !important;
  }

  /* Coloana dreapta */
  .product-page #mob-price-info-col {
    display: block !important;
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    padding: 20px !important;
    float: none !important;
    position: sticky !important;
    top: 12px !important;
    align-self: flex-start !important;
    order: unset !important;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0,0,0,.09);
  }

  /* Reset order pe copiii coloanei drepte */
  .product-page #mob-price-info-col > * { order: unset !important; }

  /* .nopc ascuns pe desktop */
  .product-page .nopc { display: none !important; }

  /* .nomob.col-lg-4 redevine vizibil pe desktop (inline style="display:none" din TPL) */
  .product-page .nomob.col-lg-4 { display: block !important; }

  .product-page .red-price { font-size: 34px; }
  .product-page #h1-prod { font-size: 22px; }
}