/* ==========================================================================
   Tema „marcu” pentru OpenCart 3.0.x
   Se încarcă DUPĂ catalog/view/theme/default/stylesheet/stylesheet.css
   și îi suprascrie regulile. Culorile se schimbă din variabilele de mai jos.
   ========================================================================== */

:root {
  --albastru: #2f44c2;        /* culoarea siglei */
  --albastru-inchis: #22318f; /* meniu, hover */
  --portocaliu: #f08a2c;      /* butonul „Adaugă în coș” */
  --portocaliu-inchis: #d87514;
  --text: #23272f;
  --text-sters: #6a717d;
  --linie: #e4e7ec;
  --fundal: #f5f6f8;
  --raza: 8px;
}

/* ---------- Bază ---------- */
body { color: var(--text); font-size: 14px; line-height: 1.55; }
a { color: var(--albastru); }
a:hover, a:focus { color: var(--albastru-inchis); }
h1, h2, h3, h4, h5, h6 { color: var(--text); }
#content h1, #content h2 { font-size: 26px; font-weight: 600; margin: 4px 0 16px; }

/* ---------- Bara de sus ---------- */
#top { background: var(--fundal); border-bottom: 1px solid var(--linie); margin-bottom: 14px; min-height: 0; padding: 2px 0; }
#top .btn-link, #top-links li, #top-links a { color: var(--text-sters); text-shadow: none; }
#top .btn-link:hover, #top-links a:hover { color: var(--albastru); }

/* ---------- Antet: siglă, căutare, coș ---------- */
header .row { display: flex; align-items: center; flex-wrap: wrap; }
header .row:before, header .row:after { display: none; }
#logo { margin: 0; }
#logo .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
#logo .brand img { height: 52px; width: auto; }
#logo .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
#logo .brand-name { font-size: 26px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; }
#logo .brand-tag { font-size: 12.5px; color: var(--text-sters); margin-top: 3px; }

#search { margin-bottom: 0; }
#search .input-lg { height: 44px; border: 1px solid #cfd4dc; border-right: 0; border-radius: var(--raza) 0 0 var(--raza); box-shadow: none; font-size: 14px; padding: 0 14px; }
#search .input-lg:focus { border-color: var(--albastru); }
#search .btn-lg { height: 44px; padding: 0 20px; background: var(--albastru); background-image: none; border: 1px solid var(--albastru); border-radius: 0 var(--raza) var(--raza) 0; color: #fff; text-shadow: none; }
#search .btn-lg:hover { background: var(--albastru-inchis); }

#cart { margin-bottom: 0; }
#cart > .btn { height: 44px; background: #fff; background-image: none; border: 1px solid #cfd4dc; border-radius: var(--raza); color: var(--text); text-shadow: none; box-shadow: none; font-size: 13.5px; font-weight: 600; }
#cart > .btn .fa { color: var(--albastru); font-size: 16px; margin-right: 4px; }
#cart.open > .btn, #cart > .btn:hover { background: var(--fundal); border-color: var(--albastru); color: var(--text); }
#cart .dropdown-menu { border-radius: var(--raza); border-color: var(--linie); box-shadow: 0 10px 30px rgba(20, 30, 60, .15); margin-top: 6px; }

/* ---------- Meniul de categorii ---------- */
#menu { background: var(--albastru-inchis); background-image: none; border: 0; border-radius: var(--raza); margin-top: 16px; min-height: 46px; }
#menu .nav > li > a { color: #fff; text-shadow: none; padding: 13px 18px; font-size: 14.5px; font-weight: 600; }
#menu .nav > li > a:hover, #menu .nav > li.open > a { background: rgba(255, 255, 255, .14); }
#menu .dropdown-menu { border: 1px solid var(--linie); border-radius: 0 0 var(--raza) var(--raza); box-shadow: 0 10px 30px rgba(20, 30, 60, .15); }
#menu .dropdown-inner a { padding: 7px 20px; color: var(--text); }
#menu .dropdown-inner li a:hover, #menu .see-all:hover { background: var(--albastru); background-image: none; color: #fff; }
#menu .see-all { border-top: 1px solid var(--linie); }
#menu #category { line-height: 46px; text-shadow: none; font-size: 15px; }
#menu .btn-navbar { background: transparent; background-image: none; border: 1px solid rgba(255, 255, 255, .45); color: #fff; text-shadow: none; box-shadow: none; margin-top: 6px; margin-bottom: 6px; padding: 5px 12px; font-size: 16px; }
#menu .btn-navbar:hover, #menu .btn-navbar:focus { background: rgba(255, 255, 255, .14); }

/* ---------- Firul de navigare ---------- */
.breadcrumb { background: transparent; border: 0; padding: 0; margin: 16px 0 14px; font-size: 13px; }
.breadcrumb > li { padding: 0; text-shadow: none; white-space: normal; }
.breadcrumb > li:after { display: none; }
.breadcrumb > li + li:before { content: "/"; padding: 0 9px; color: #b3b9c3; }
.breadcrumb > li > a { color: var(--text-sters); }
.breadcrumb > li:last-child > a { color: var(--text); }

/* ---------- Coloana laterală ---------- */
.list-group a { border-color: var(--linie); color: var(--text); padding: 9px 14px; }
.list-group a:hover { background: var(--fundal); border-color: var(--linie); color: var(--albastru); text-shadow: none; }
.list-group a.active, .list-group a.active:hover { background: #fff; border-color: var(--linie); color: var(--text); font-weight: 700; text-shadow: none; }
/* categoria curentă: ultima marcată ca activă */
.list-group a.active ~ a.active, .list-group a.active ~ a.active:hover { background: var(--fundal); color: var(--albastru); box-shadow: inset 3px 0 0 var(--albastru); }
.list-group a.active:not(:has(~ a.active)), .list-group a.active:not(:has(~ a.active)):hover { background: var(--fundal); color: var(--albastru); box-shadow: inset 3px 0 0 var(--albastru); }

/* ---------- Butoane ---------- */
.btn { border-radius: 6px; }
.btn-primary { background: var(--albastru); background-image: none; border-color: var(--albastru); text-shadow: none; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background: var(--albastru-inchis); background-image: none; border-color: var(--albastru-inchis); }
.btn-default { background-image: none; text-shadow: none; }
#button-cart { background: var(--portocaliu); border-color: var(--portocaliu); font-weight: 700; }
#button-cart:hover, #button-cart:focus { background: var(--portocaliu-inchis); border-color: var(--portocaliu-inchis); }

/* ---------- Descrierea categoriei, restrânsă ---------- */
.cat-intro { background: var(--fundal); border-radius: var(--raza); padding: 14px 16px 10px; margin-bottom: 18px; overflow: hidden; }
.cat-thumb { float: left; width: 64px; height: 64px; object-fit: cover; border-radius: 6px; margin: 2px 14px 6px 0; }
.cat-desc { position: relative; max-height: 92px; overflow: hidden; font-size: 14px; }
.cat-desc, .cat-desc * { font-family: inherit !important; }
.cat-desc p, .cat-desc span, .cat-desc font, .cat-desc div { font-size: 14px !important; line-height: 1.55 !important; }
.cat-desc h1, .cat-desc h2, .cat-desc h3 { font-size: 16px !important; margin: 0 0 6px; }
.cat-desc img { max-width: 100%; height: auto !important; border-radius: 6px; margin: 8px 0; }
.cat-desc:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(rgba(245, 246, 248, 0), var(--fundal)); }
.cat-desc.open { max-height: none; }
.cat-desc.open:after { display: none; }
.cat-desc-toggle { background: none; border: 0; padding: 6px 0 2px; color: var(--albastru); font-weight: 700; font-size: 13.5px; }
.cat-desc-toggle:hover { text-decoration: underline; }

/* ---------- Bara de sortare ---------- */
#compare-total { padding-left: 0; }
.input-group-addon { background: var(--fundal); border-color: #cfd4dc; }
.form-control { border-color: #cfd4dc; }

/* ---------- Cardul de produs ---------- */
.product-row { display: flex; flex-wrap: wrap; }
.product-row:before, .product-row:after { display: none; }
.product-row > .product-layout:not(.product-list) { display: flex; float: none; }

.product-thumb { border: 1px solid var(--linie); border-radius: var(--raza); overflow: hidden; background: #fff; transition: box-shadow .15s, border-color .15s; }
.product-thumb:hover { border-color: #c9cfdb; box-shadow: 0 6px 20px rgba(20, 30, 60, .10); }
.product-layout:not(.product-list) .product-thumb { display: flex; flex-direction: column; width: 100%; }
.product-layout:not(.product-list) .product-thumb > div:not(.image):not(.caption):not(.button-group) { display: flex; flex-direction: column; flex: 1 1 auto; }
.product-layout:not(.product-list) .product-thumb .caption { flex: 1 1 auto; }
.product-thumb .image { padding: 12px 12px 0; }
.product-thumb .image img { margin: 0 auto; }
.product-thumb .caption { padding: 10px 16px 12px; min-height: 0 !important; }
.product-thumb h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.product-thumb h4 a { color: var(--text); }
.product-thumb h4 a:hover { color: var(--albastru); text-decoration: none; }
.product-thumb .caption > p { color: var(--text-sters); font-size: 13px; margin: 0 0 8px; }
.product-layout:not(.product-list) .product-thumb .caption > p:not(.price) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-thumb .caption .price { color: var(--text); font-size: 19px; font-weight: 700; margin: 0; }
.product-thumb .caption .price-new { color: #c8321e; }
.product-thumb .caption .price-old { color: var(--text-sters); font-size: 13px; font-weight: 400; margin-left: 6px; }
.product-thumb .caption .price-tax { color: var(--text-sters); font-size: 12px; font-weight: 400; }

.product-thumb .button-group { display: flex; gap: 8px; padding: 0 16px 16px; border: 0; background: transparent; overflow: visible; }
.product-thumb .button-group button { float: none; width: 42px !important; height: 42px; line-height: 40px; padding: 0; background: #fff; border: 1px solid var(--linie) !important; border-radius: 6px; color: var(--text-sters); text-transform: none; font-size: 14px; }
.product-thumb .button-group button:hover { background: var(--fundal); color: var(--albastru); }
.product-thumb .button-group button:first-child { flex: 1 1 auto; width: auto !important; background: var(--portocaliu); border-color: var(--portocaliu) !important; color: #fff; font-weight: 700; }
.product-thumb .button-group button:first-child:hover { background: var(--portocaliu-inchis); border-color: var(--portocaliu-inchis) !important; color: #fff; }
.product-thumb .button-group button:first-child span { display: inline !important; }
.product-list .product-thumb .button-group { border-left: 0; }

/* ---------- Subsol ---------- */
footer { background: #1d2333; border-top: 0; margin-top: 40px; }
footer hr { border-color: rgba(255, 255, 255, .12); }

/* ==========================================================================
   Telefon
   ========================================================================== */
@media (max-width: 767px) {
  #top { margin-bottom: 8px; }
  #top .container { padding: 0 8px; }

  /* sigla și coșul pe un rând, căutarea dedesubt */
  header .row > div { float: none; width: auto; min-height: 0; }
  header .row > div:nth-child(1) { flex: 1 1 auto; order: 1; }
  header .row > div:nth-child(3) { flex: 0 0 auto; order: 2; }
  header .row > div:nth-child(2) { flex: 0 0 100%; order: 3; margin-top: 10px; }
  #logo .brand img { height: 38px; }
  #logo .brand-name { font-size: 21px; }
  #logo .brand-tag { display: none; }
  #cart > .btn { height: 40px; padding: 0 12px; font-size: 12.5px; }
  #cart .dropdown-menu { width: calc(100vw - 30px); max-width: 420px; }
  #search .input-lg, #search .btn-lg { height: 42px; }
  #menu { margin-top: 10px; }

  #content h1, #content h2 { font-size: 22px; margin-bottom: 12px; }
  .cat-thumb { display: none; }
  .cat-desc { max-height: 88px; }

  /* două produse pe rând */
  .product-row { margin-left: -6px; margin-right: -6px; }
  .product-row > .product-layout:not(.product-list) { width: 50%; padding-left: 6px; padding-right: 6px; }
  .product-thumb { margin-bottom: 12px; }
  .product-thumb .image { padding: 8px 8px 0; }
  .product-thumb .caption { padding: 8px 10px 10px; }
  .product-thumb h4 { font-size: 14px; }
  .product-layout:not(.product-list) .product-thumb .caption > p:not(.price) { display: none; }
  .product-thumb .caption .price { font-size: 17px; }
  .product-thumb .button-group { padding: 0 10px 10px; }
  .product-thumb .button-group button { height: 40px; line-height: 38px; }
  .product-thumb .button-group button + button { display: none; }
  .product-thumb .button-group button:first-child { font-size: 13px; }
}


/* ==========================================================================
   Runda 2: corecturi după testul pe magazin
   ========================================================================== */

/* ---------- Titluri de module (Recomandări etc.) ---------- */
#content h3 { font-size: 20px; font-weight: 600; margin: 4px 0 14px; }

/* ---------- Bannerul: fără ramă, ca marginile albe să nu se vadă ---------- */
.swiper-viewport { border: 0; box-shadow: none; border-radius: var(--raza); margin-bottom: 44px; }
.swiper-viewport .swiper-container { border-radius: var(--raza); }

/* ---------- Descrierea categoriei: fără poze cât e restrânsă ---------- */
.cat-desc:not(.open) img { display: none; }
.cat-desc h1, .cat-desc h2, .cat-desc h3 { text-indent: 0 !important; color: var(--albastru-inchis) !important; }

/* ---------- Meniul derulant, pe calculator ---------- */
#menu .dropdown-inner a { font-size: 14px; line-height: 22px; }
#menu .see-all { font-size: 13.5px; padding: 8px 20px; }

/* ---------- Carduri în module (Recomandări): rând flexibil, înălțimi egale ---------- */
.row:has(> .product-layout) { display: flex; flex-wrap: wrap; }
.row:has(> .product-layout):before, .row:has(> .product-layout):after { display: none; }
.row:has(> .product-layout) > .product-layout:not(.product-list) { display: flex; float: none; }
.product-layout:not(.product-list) .product-thumb > .caption { flex: 1 1 auto; }

/* ---------- Pagina de produs ---------- */
#product-product h1 { font-size: 26px; font-weight: 700; margin: 0 0 10px; }
#product-product #content .list-unstyled h2 { font-size: 28px; font-weight: 700; margin: 10px 0 6px; }
#product-product .thumbnail { border-color: var(--linie); border-radius: var(--raza); }
#product-product .nav-tabs > li.active > a { font-weight: 700; color: var(--text); }
#product-product #content > .row > div:has(> h1) { display: flex; flex-direction: column; }
#product-product #content > .row > div:has(> h1) > .btn-group { order: 9; align-self: flex-start; margin-top: 12px; }

/* ---------- Fereastra de chat, în culorile temei ---------- */
body #chatBtn { background: var(--albastru); box-shadow: 0 6px 16px rgba(20, 30, 60, .35); }
body #chatHeader { background: var(--albastru-inchis); }
@media (min-width: 769px) { body #chatBtn { width: 60px; height: 60px; font-size: 30px; } }

@media (max-width: 767px) {
  /* meniul de categorii deschis: text alb, lizibil */
  #menu .dropdown-menu, #menu div.dropdown-menu { background: rgba(0, 0, 0, .22); border: 0; border-radius: 0; box-shadow: none; padding: 4px 0 6px; }
  #menu .dropdown-inner a { color: #fff; padding: 10px 30px; font-size: 14.5px; }
  #menu .dropdown-inner li a:hover, #menu .dropdown-menu a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
  #menu .see-all { color: #fff; border-top: 1px solid rgba(255, 255, 255, .22); padding: 10px 30px; font-size: 14px; font-weight: 600; }
  #menu .see-all:hover, #menu .see-all:focus { background: rgba(255, 255, 255, .14); background-image: none; }
  #menu .nav > li > a { padding: 12px 18px; }

  /* două produse pe rând peste tot (și în module) */
  .product-layout:not(.product-list) { width: 50%; float: left; padding-left: 6px; padding-right: 6px; }
  .row:has(> .product-layout) { margin-left: -6px; margin-right: -6px; }

  #content h3 { font-size: 18px; }
  .swiper-viewport { margin-bottom: 36px; }

  /* pagina de produs: poză, apoi nume + preț + coș, apoi descriere */
  #product-product #content > .row:has(> div > .nav-tabs) { display: flex; flex-direction: column; }
  #product-product #content > .row:has(> div > .nav-tabs) > div:first-child { display: contents; }
  #product-product #content > .row:has(> div > .nav-tabs) > div:first-child > .thumbnails { order: 1; margin: 0 15px 12px -5px; }
  #product-product #content > .row:has(> div > .nav-tabs) > div:last-child { order: 2; }
  #product-product #content > .row:has(> div > .nav-tabs) > div:first-child > .nav-tabs { order: 3; margin: 22px 15px 0; }
  #product-product #content > .row:has(> div > .nav-tabs) > div:first-child > .tab-content { order: 4; margin: 0 15px; }
  #product-product h1 { font-size: 22px; }

  /* coșul: carduri în loc de tabel */
  #checkout-cart .table-responsive { border: 0; overflow: visible; }
  #checkout-cart .table-responsive > .table { border: 0; }
  #checkout-cart .table-responsive thead { display: none; }
  #checkout-cart .table-responsive table, #checkout-cart .table-responsive tbody, #checkout-cart .table-responsive tr, #checkout-cart .table-responsive td { display: block; }
  #checkout-cart .table-responsive tr { position: relative; border: 1px solid var(--linie); border-radius: var(--raza); padding: 12px 12px 12px 92px; margin-bottom: 10px; min-height: 96px; }
  #checkout-cart .table-responsive > .table > tbody > tr > td { border: 0; padding: 0; text-align: left; white-space: normal; }
  #checkout-cart .table-responsive tr > td:nth-child(1) { position: absolute; left: 12px; top: 12px; width: 68px; }
  #checkout-cart .table-responsive tr > td:nth-child(1) img { width: 68px; height: auto; }
  #checkout-cart .table-responsive tr > td:nth-child(2) { font-weight: 700; font-size: 15px; }
  #checkout-cart .table-responsive tr > td:nth-child(3), #checkout-cart .table-responsive tr > td:nth-child(5) { display: none; }
  #checkout-cart .table-responsive tr > td:nth-child(4) { margin: 8px 0; }
  #checkout-cart .table-responsive tr > td:nth-child(6) { font-size: 17px; font-weight: 700; }
  #checkout-cart .buttons .btn { padding: 10px 14px; }

  /* chat: mai mic; ascuns pe coș și la finalizarea comenzii, unde acoperea butonul */
  body #chatBtn { width: 48px; height: 48px; font-size: 21px; right: 12px; bottom: 12px; }
  #checkout-cart ~ #chatBtn, #checkout-checkout ~ #chatBtn, #checkout-cart ~ #chatBox, #checkout-checkout ~ #chatBox { display: none !important; }
}