/* ============================================================
   MOBILE FRIENDLY - pagina de produs - colinauto.ro
   OpenCart 2.1.0.2

   Aliniat la breakpoint-ul folosit deja in stylesheet.css (992px),
   acolo unde tema trece deja in modul mobil (#meniu-mobile,
   .nomob/.nopc etc.)

   INSTALARE:
   1. Salveaza ca: catalog/view/theme/[tema]/stylesheet/custom.css
   2. In template/common/header.tpl, ADAUGA dupa linia care
      incarca stylesheet.css (NU inainte - ordinea conteaza,
      custom.css trebuie sa fie ultimul ca sa suprascrie):
      <link href="catalog/view/theme/[tema]/stylesheet/custom.css?v=1" rel="stylesheet" />
   3. Testeaza in Chrome DevTools, mod telefon, refresh fortat.
   ============================================================ */

/* Logo-ul mic pentru mobil (.show-mob-logo) si caseta de cautare
   repozitionata (.search-mob-inline) nu trebuie sa apara pe desktop
   needimensionate - le ascundem/restauram by default, in afara
   media query-ului de mai jos, care le activeaza doar pe mobil. */
.show-mob-logo {
  display: none;
}

@media (max-width: 992px) {

  /* ----------------------------------------------------------
     1. TARGET-URI DE TAP MARI (minim 44px recomandat de Apple/Google)
     ---------------------------------------------------------- */

  /* Butonul "Comanda" - deja btn-lg + btn-block, dar prea scund */
  #button-cart {
    min-height: 50px;
    font-size: 17px;
    font-weight: bold;
    border-radius: 6px;
    margin-top: 8px;
  }

  /* Campul de cantitate - prea ingust (size="2" in HTML) */
  #input-quantity {
    min-width: 100% !important;
    height: 46px;
    font-size: 17px;
    text-align: center;
    margin-bottom: 10px;
    border-radius: 6px;
  }

  /* Label-ul "Cantitate" - mai vizibil, nu lipit de input */
  label[for="input-quantity"] {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
  }

  /* "Adauga la Favorite" - zona de tap mai mare, nu doar textul */
  #wi-prod {
    float: none;
    display: block;
    width: 100%;
    text-align: right;
    padding: 10px 0;
    font-size: 15px;
  }
  #wi-prod a {
    display: inline-block;
    padding: 6px 4px;
  }

  /* Tab-urile "Informatii produs" / "Opinii" - zona de tap marita */
  .nav-tabs {
    margin-right: 0;
    display: flex;
    width: 100%;
  }
  .nav-tabs > li {
    flex: 1;
    float: none;
  }
  .nav-tabs > li > a {
    text-align: center;
    padding: 12px 8px;
    font-size: 14px;
    margin-right: 0;
  }
  .tab-content {
    margin-right: 0;
    padding: 15px 12px;
  }

  /* ----------------------------------------------------------
     2. ORDINEA / IERARHIA INFORMATIEI PE MOBIL
     Pretul, stocul si butonul de comanda trebuie sa fie
     vizibile rapid, langa imagine - nu dupa descriere lunga.
     ---------------------------------------------------------- */

  /* Titlul produsului - mai compact pe mobil */
  #h1-prod {
    font-size: 19px;
    padding-bottom: 10px;
    margin-top: 10px;
  }

  /* Pretul - mai vizibil, aliniat stanga pe mobil (nu dreapta) */
  .red-price {
    font-size: 26px;
    text-align: left;
    margin: 0;
    display: inline-block;
  }

  /* Pretul vechi (taiat) - il aducem aliniat cu pretul nou (stanga),
     lipit imediat deasupra lui, in loc sa stea izolat in dreapta */
  #content .list-unstyled li.text-right {
    text-align: left !important;
    font-size: 14px;
    color: #999;
    margin: 0 0 2px 0;
  }

  /* Galeria de imagini - thumbnail-uri cu zona de tap suficienta */
  .thumbnails > img,
  .thumbnails .thumbnail img {
    width: 100%;
    height: auto;
  }
  .image-additional {
    max-width: 64px;
  }
  .image-additional a {
    padding: 3px;
  }

  /* Iconita de zoom pe imagine - safe pe touch, dar marim zona de tap */
  .zoom-icon, .zoom-icon-thumbnails {
    font-size: 22px;
    padding: 8px;
  }

  /* ----------------------------------------------------------
     3. SPATIERE GENERALA - evita ca elementele clickabile sa
     fie prea apropiate unele de altele (risc de tap gresit)
     ---------------------------------------------------------- */

  #disponibilitate {
    display: block;
    margin: 10px 0;
  }

  .orange-box {
    font-size: 15px;
    line-height: 38px;
    margin: 10px 0;
  }

  /* Link "Ai o intrebare? Contacteaza-ne" / abonare oferte */
  #extra-help a {
    display: block;
    padding: 10px 0;
    font-size: 14px;
  }

  /* Butoane radio pentru rating-uri review - zona de tap marita */
  input[type="radio"] {
    width: 22px;
    height: 22px;
    vertical-align: middle;
  }

  /* ----------------------------------------------------------
     4. HEADER MOBIL - bara de sus cu logo + cautare permanenta
     ---------------------------------------------------------- */

  /* Ascundem COMPLET vechiul #meniu-mobile (logo mare ascuns,
     iconite mici, buton-lupa de toggle) - nu mai are niciun rol pe
     mobil: cautarea e mereu vizibila in #new-head, iar navigarea
     e in #bottom-nav-mobile. Ascundem containerul exterior intreg,
     nu doar copiii lui, ca sa nu ramana fasii goale cu fundal
     vizibil (#menu avea background propriu + min-height:50px). */
  #meniu-mobile {
    display: none !important;
  }

  /* #new-head (logo + cautare) trebuie sa fie mereu vizibil pe mobil,
     nu doar cand se apasa pe toggle */
  #new-head {
    display: block !important;
  }
  /* Bootstrap .container are padding-right/left:15px by default, care
     pe mobil lasa o fasie alba vizibila pe fundalul albastru al
     #new-head. O eliminam ca rândul sa ocupe toata lățimea. */
  #new-head .container {
    padding-left: 0;
    padding-right: 0;
  }
  #new-head .container .row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-left: 0;
    margin-right: 0;
    padding: 8px 6px;
  }

  /* Logo-ul mare/vechi trebuie sa ramana ascuns pe mobil (asa cum
     era in designul original cu .nomob) - fortam explicit, ca sa
     nu mai depindem de cum se comporta .nomob in interiorul
     noului flex container */
  #new-head .col-sm-3.nomob,
  #new-head .col-sm-5.nomob {
    display: none !important;
  }

  /* Logo-ul mic nou, langa cautare - mereu vizibil, lipit cat
     mai mult spre marginea din stanga */
  #new-head .show-mob-logo {
    display: block;
    flex: 0 0 auto;
    width: auto;
    padding-right: 4px;
    padding-left: 0;
  }
  #new-head .show-mob-logo img {
    height: 26px;
    width: auto;
  }

  /* Caseta de cautare - mereu vizibila, ocupa restul randului.
     IMPORTANT: campul real (#search) are clasa .show-search, care
     in stylesheet.css e ascunsa explicit pe mobil
     (.show-search {display:none} la max-width:992px) - trebuie
     suprascrisa direct, nu doar containerul ei. */
  #new-head .search-mob-inline {
    display: block !important;
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
  }
  #new-head .search-mob-inline .show-search {
    display: table !important;
    width: 100%;
    max-width: 100%;
  }
  #new-head .search-mob-inline #search {
    margin: 0;
    line-height: normal;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* IMPORTANT: regula originala din tema e #new-head #search .input-lg /
     .btn-lg (2 ID-uri = specificitate mare). Trebuie folosit exact
     acelasi selector (cu #search, nu .search-mob-inline) + !important,
     altfel regula originala castiga si valorile noastre sunt ignorate.

     Pastram modelul original Bootstrap (display:table / table-cell)
     pentru .input-group - este mai stabil decat flex aici si evita
     depasirea marginii ecranului. */
  #new-head #search .input-lg {
    height: 38px !important;
    line-height: 38px !important;
    font-size: 14px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }
  #new-head #search .btn-lg {
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
  }
  /* Anulam pozitionarea inline style="right:15px" care impingea
     butonul dincolo de margine */
  #new-head #search .input-group-btn {
    right: 0 !important;
  }

  /* Spatiu in josul paginii ca bara fixa sa nu acopere continutul
     (butonul Comanda, footer, widget chat) */
  body {
    padding-bottom: 58px;
  }

  /* Bara fixa de navigatie, jos, vizibila tot timpul.
     !important pe poziționare ca sa reziste la orice alt JS/CSS
     din tema care ar putea incerca sa o mute/ascunda la scroll. */
  #bottom-nav-mobile {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 56px;
    /* padding suplimentar pentru telefoane cu bara de gesturi (iPhone etc) */
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: #fff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
    z-index: 9999;
  }
  #bottom-nav-mobile a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #555;
    font-size: 11px;
    line-height: 1.3;
    padding: 6px 0;
  }
  #bottom-nav-mobile a i {
    font-size: 21px;
    margin-bottom: 2px;
    color: #016fb6;
  }
  #bottom-nav-mobile a span {
    font-size: 11px;
  }
  #bottom-nav-mobile a:active,
  #bottom-nav-mobile a:focus {
    background: #f2f8fc;
  }

  /* NOTA: widget-ul de chat este Tawk.to, incarcat dintr-o sursa
     externa - poziția lui NU se controleaza sigur din custom.css.
     Se ajusteaza din dashboard-ul tawk.to:
     Administration > Chat Widget > Widget Appearance > Advanced
     > Mobile Widget Position (sau Y-offset ~60-70px ca sa stea
     deasupra barei fixe de 56px de mai sus). */
}

/* Pe desktop/tableta (peste 992px) bara fixa nu trebuie sa apara deloc */
@media (min-width: 993px) {
  #bottom-nav-mobile {
    display: none !important;
  }
}