@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* ==========================================================================
   metalfence.css — strat de design metalfence.ro pentru tema `esipca`
   Se incarca ULTIMUL, dupa theme.css. Nu modifica markup/twig.
   Tokenii replica app/globals.css + tailwind.config.ts din metalfence.ro.
   ========================================================================== */

:root {
  --mf-primary-50:  #fef5f3;
  --mf-primary-100: #fde9e5;
  --mf-primary-500: #e8572e;
  --mf-primary-600: #C0392B;
  --mf-primary-700: #a73124;
  --mf-accent-500:  #4FB68D;
  --mf-accent-600:  #3d9473;
  --mf-dark-100: #f3f4f6;
  --mf-dark-200: #e5e7eb;
  --mf-dark-300: #d1d5db;
  --mf-dark-400: #9ca3af;
  --mf-dark-500: #6b7280;
  --mf-dark-800: #1f2937;
  --mf-dark-900: #111827;

  --mf-radius:    8px;   /* rounded-lg  */
  --mf-radius-sm: 6px;   /* rounded-md  */
  --mf-radius-lg: 12px;  /* rounded-xl  */

  --mf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mf-shadow-btn: 0 2px 4px rgba(0, 0, 0, .05);
  --mf-shadow-md:  0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  --mf-shadow-lg:  0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
  --mf-card-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

/* ===== BAZA / TIPOGRAFIE ================================================= */

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--mf-dark-900);
  letter-spacing: .01em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Montserrat', sans-serif;
  color: var(--mf-dark-900);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}

h5, h6 { font-weight: 600; letter-spacing: -.01em; }

a { transition: all .2s var(--mf-ease); }
a:focus-visible {
  outline: 2px solid var(--mf-primary-500);
  outline-offset: 2px;
}

/* ===== BUTOANE ===========================================================
   metalfence: gradient vertical, colturi 8px, semibold, micro-lift la hover.
   ------------------------------------------------------------------------ */

.btn {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  border-radius: var(--mf-radius);
  border: none;
  padding: 12px 24px;
  transition: all .2s var(--mf-ease);
  box-shadow: var(--mf-shadow-btn);
  text-transform: none;
}

.btn:disabled,
.btn.disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.btn-primary {
  background: linear-gradient(to bottom, var(--mf-primary-600), var(--mf-primary-700));
  color: #fff;
}
.btn-primary:hover:not(:disabled),
.btn-primary:focus:not(:disabled) {
  background: linear-gradient(to bottom, #d04835, #b83228);
  color: #fff;
  box-shadow: var(--mf-shadow-md);
  transform: translateY(1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

/* .btn-default = butonul secundar al temei -> verde accent metalfence */
.btn-default {
  background: linear-gradient(to bottom, var(--mf-accent-500), var(--mf-accent-600));
  color: #fff;
}
.btn-default:hover:not(:disabled),
.btn-default:focus:not(:disabled) {
  background: linear-gradient(to bottom, #5ac697, #4d9a81);
  color: #fff;
  box-shadow: var(--mf-shadow-md);
  transform: translateY(1px);
}
.btn-default:active:not(:disabled) { transform: translateY(0); }

/* .btn-inverse = outline metalfence */
.btn-inverse {
  background: #fff;
  color: var(--mf-primary-600);
  border: 2px solid var(--mf-primary-600);
  padding: 10px 22px; /* compenseaza borderul de 2px */
}
.btn-inverse:hover:not(:disabled),
.btn-inverse:focus:not(:disabled) {
  background: var(--mf-primary-50);
  color: var(--mf-primary-700);
  border-color: var(--mf-primary-700);
}
.btn-inverse:active:not(:disabled) { background: var(--mf-primary-100); }

.btn-link {
  color: var(--mf-primary-600);
  box-shadow: none;
  font-weight: 600;
}
.btn-link:hover { color: var(--mf-primary-700); text-decoration: none; }

.btn-lg {
  padding: 16px 32px;
  font-size: 18px;
  border-radius: var(--mf-radius-lg);
  box-shadow: 0 4px 12px rgba(192, 57, 43, .2);
}

.btn-sm, .btn-xs {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: var(--mf-radius-sm);
  box-shadow: none;
}

/* ===== FORMULARE ========================================================= */

.form-control {
  font-family: 'Montserrat', sans-serif;
  border: 1px solid var(--mf-dark-200);
  border-radius: var(--mf-radius);
  padding: 12px 16px;
  height: auto;
  color: var(--mf-dark-900);
  box-shadow: none;
  transition: all .2s var(--mf-ease);
}
.form-control:hover { border-color: var(--mf-dark-300); }
.form-control:focus {
  border-color: var(--mf-primary-500);
  box-shadow: 0 0 0 2px var(--mf-primary-500), 0 10px 15px -3px rgba(192, 57, 43, .1);
  outline: none;
}
.form-control::placeholder { color: var(--mf-dark-400); opacity: .7; }
.form-control[disabled],
.form-control[readonly] {
  background: var(--mf-dark-100);
  color: var(--mf-dark-500);
  cursor: not-allowed;
}

.has-error .form-control { border-color: #ef4444; }
.has-error .form-control:focus { box-shadow: 0 0 0 2px #ef4444; }
.has-success .form-control { border-color: #22c55e; }

label, .control-label {
  font-weight: 600;
  color: var(--mf-dark-800);
  font-size: 14px;
  letter-spacing: .01em;
}

/* ===== CARDURI DE PRODUS =================================================
   metalfence: card alb, border 1px foarte discret, hover ridica 2px.
   ------------------------------------------------------------------------ */

.product-thumb .product-item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .05);
  border-radius: var(--mf-radius);
  overflow: hidden;
  box-shadow: var(--mf-card-shadow);
  transition: all .3s var(--mf-ease);
}
.product-thumb .product-item:hover {
  border-color: rgba(0, 0, 0, .1);
  box-shadow: var(--mf-shadow-lg);
  transform: translateY(-2px);
}

.product-thumb .product-item .caption h4 a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--mf-dark-900);
  letter-spacing: -.01em;
}
.product-thumb .product-item .caption h4 a:hover { color: var(--mf-primary-600); }

/* ===== PRETURI =========================================================== */

.price, .product-thumb .product-item .caption .price {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--mf-primary-600);
  letter-spacing: -.01em;
}

.price-old, .product-thumb .product-item .caption .price .price-old {
  color: var(--mf-dark-400);
  font-weight: 500;
  text-decoration: line-through;
}

.price-new { color: var(--mf-primary-600); font-weight: 700; }

/* ===== BADGE-URI / LABEL-URI ============================================= */

.label, .badge {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 12px;
  border-radius: 9999px;
  padding: 4px 12px;
  letter-spacing: .01em;
}
.label-primary, .badge-primary {
  background: var(--mf-primary-100);
  color: var(--mf-primary-700);
}
.label-success { background: #dcfce7; color: #15803d; }
.label-warning { background: #fef9c3; color: #a16207; }
.label-danger  { background: #fee2e2; color: #b91c1c; }

/* ===== PANOURI / ALERTE ================================================== */

.panel {
  border: 1px solid rgba(0, 0, 0, .05);
  border-radius: var(--mf-radius);
  box-shadow: var(--mf-card-shadow);
}
.panel-heading {
  font-weight: 600;
  border-radius: var(--mf-radius) var(--mf-radius) 0 0;
}
.panel-default > .panel-heading {
  background: var(--mf-dark-100);
  color: var(--mf-dark-900);
  border-bottom: 1px solid var(--mf-dark-200);
}

.alert { border-radius: var(--mf-radius); border: none; font-weight: 500; }
.alert-success { background: #dcfce7; color: #15803d; }
.alert-danger  { background: #fee2e2; color: #b91c1c; }
.alert-info    { background: var(--mf-primary-50); color: var(--mf-primary-700); }

/* ===== MENIU =============================================================
   Modulele ptmenu.33 / ptmenu.35 sunt PARTAJATE cu piedra si isi injecteaza
   un <style> inline pe selectori de ID, dupa <head>. Nu le putem schimba din
   admin fara sa afectam piedra, deci doar fontul e fortat aici cu !important.
   Rosul #C0392B era deja setat in modul si coincide cu paleta metalfence.
   ------------------------------------------------------------------------ */

.pt-menu-bar .ul-top-items .li-top-item .a-top-link,
.pt-menu-bar .mega-menu-container .a-mega-second-link {
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: .01em;
}

/* ===== INPUT GROUP / MISC ================================================ */

.input-group .form-control:first-child { border-radius: var(--mf-radius) 0 0 var(--mf-radius); }
.input-group .form-control:last-child  { border-radius: 0 var(--mf-radius) var(--mf-radius) 0; }
.input-group-btn .btn { border-radius: 0 var(--mf-radius) var(--mf-radius) 0; }

.breadcrumb { background: transparent; font-size: 14px; padding-left: 0; }
.breadcrumb a { color: var(--mf-dark-500); }
.breadcrumb a:hover { color: var(--mf-primary-600); }

.pagination > li > a,
.pagination > li > span { color: var(--mf-dark-800); border-color: var(--mf-dark-200); }
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
  background: var(--mf-primary-600);
  border-color: var(--mf-primary-600);
  color: #fff;
}

/* ==========================================================================
   LAYOUT — ritmul de sectiuni metalfence
   metalfence: sectiuni py-20 (80px) alternand alb / #f9fafb, container 1280px.
   Tema avea --rowspace:60px si container 1440px.
   ========================================================================== */

:root {
  --rowspace: 80px;          /* era 60px -> py-20 metalfence */
  --mf-accent-400: #7ecfad;
  --mf-dark-700: #374151;
  --mf-dark-50: #f9fafb;
}

/* Container: 1440px -> 1280px (max-w-7xl) */
@media (min-width: 1200px) {
  .container { width: 1280px; }
}

/* Banda alternanta gri: #f4f5f6 -> dark-50 metalfence */
.background-full { background: var(--mf-dark-50); }

/* Titluri de sectiune */
.block-title .title { letter-spacing: -.02em; }

/* Colturi 3px -> 8px */
.policy-block,
.brand-logo {
  border-radius: var(--mf-radius);
  border-color: rgba(0, 0, 0, .05);
}
.policy-block { box-shadow: var(--mf-card-shadow); }

/* Text inchis al temei #151515 -> dark-900 metalfence */
.static-bottom-store1 .text .text1,
.static-bottom-store1 .text .text2,
.slider-content .content .slide-description .text1,
.slider-content .content .slide-description .text2 {
  color: var(--mf-dark-900);
}
.slider-content .content .slide-description .text2 { letter-spacing: -.02em; }

/* .btn-info: portocaliul temei (#df5c39) -> rosu primary metalfence */
.btn-info {
  background-color: var(--mf-primary-600);
  background-image: linear-gradient(to bottom, var(--mf-primary-600), var(--mf-primary-700));
  text-shadow: none;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
  background-color: var(--mf-primary-700);
  background-image: linear-gradient(to bottom, #d04835, #b83228);
}

/* Butoanele de pe cardul de produs */
.product-thumb .button-group button { color: var(--mf-dark-900); }
.product-thumb .button-group button:hover { color: var(--mf-primary-600); }

/* ==========================================================================
   FOOTER — metalfence are footer inchis (bg-dark-900) cu accente verzi.
   Tema avea #efefef (gri deschis). Static blockurile 314/300/301 NU au culori
   inline (verificat), deci inversarea pe fundal inchis e sigura.
   ========================================================================== */

footer {
  background: var(--mf-dark-900);
  color: var(--mf-dark-300);
}

/* metalfence: pt-12 (48px), nu --rowspace */
.footer-links .inner { padding: 48px 0 2px 0; }

.footer-links .title {
  color: #fff;
  border-bottom-color: var(--mf-dark-700);
}
.footer-links .title:before { background: var(--mf-accent-500); }
.footer-links .title:after  { background: var(--mf-accent-500); }

.footer-links a,
.footer-links ul.list-unstyled a,
.footer-information a {
  color: var(--mf-dark-300);
}
.footer-links a:hover,
.footer-links ul.list-unstyled a:hover,
.footer-information a:hover {
  color: var(--mf-accent-400);
}

.footer-links .dropdown-toggle i { color: var(--mf-dark-300); }
.footer-links .dropdown-toggle:hover i { color: var(--mf-accent-400); }

/* Blocul de contact din footer.
   `.footer-contact-us:before` e un panou "full-bleed" (left/top/bottom:-9999px)
   umplut cu #f6f6f6. Pe footerul gri original (#efefef) se topea; pe footerul
   inchis apare ca o banda deschisa care iese in STANGA. Il facem transparent
   ca sa se vada fundalul inchis al footerului. */
@media (min-width: 992px) {
  .footer-contact-us:before { background: transparent; }
}

.footer-contact-us p { color: var(--mf-dark-300); }

/* Logo footer: acelasi fisier ca pe metalfence.ro (NewLogoRO.png = logo eSIPCA
   METALICA) si acelasi tratament — metalfence il randeaza cu Tailwind
   `h-16 w-auto object-contain invert`. Logo-ul are cerneala NEAGRA pe fundal
   transparent, deci pe footerul inchis e invizibil fara invert(1). */
.logo-footer img {
  height: 64px;              /* h-16 */
  width: auto;
  max-width: 100%;
  object-fit: contain;       /* object-contain */
  filter: invert(1);
}

/* Logourile de plata (position8 / ptstaticblock.301 — modul PARTAJAT cu piedra,
   deci centram din CSS-ul temei, NU din setarile modulului).
   Tema centreaza `.payment` doar in zona responsive (~linia 1124); pe desktop
   `.payment{}` e gol. */
.footer-copyright .payment { text-align: center; }
.footer-copyright .payment img { max-width: 100%; height: auto; }

/* "Ai nevoie de ajutor?" + telefonul din footer (bloc separat de .content) */
.footer-phone label { color: var(--mf-accent-400); }
.footer-phone p { color: #fff; }
.footer-phone p i { color: var(--mf-accent-400); }
.social-block label { color: #fff; }
.social a { color: var(--mf-dark-300); }
.social a:hover { color: var(--mf-accent-400); }
.footer-payment label,
.footer-software label { color: #fff; }
.footer-contact-us .content > div p { color: var(--mf-dark-300); }
.footer-contact-us .content > div label { color: var(--mf-accent-400); }
.footer-contact-us .content > div:before { color: var(--mf-accent-400); }

/* Copyright */
.footer-copyright { border-top: 1px solid var(--mf-dark-700); padding-top: 24px; }
.footer-copyright,
.footer-copyright p { color: var(--mf-dark-400); }
.footer-copyright .links > a { color: var(--mf-dark-300); }
.footer-copyright .links > a:hover { color: var(--mf-accent-400); }

/* Dropdown-urile de footer pe mobil raman lizibile pe fundal inchis */
footer .dropdown-menu.footer-content {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ==========================================================================
   TOP BAR — metalfence: `bg-dark-800 text-white text-sm py-2`
   Bara #top EXISTA deja in header4.twig (era alba cu text negru, deci nu se
   citea ca bara). Aici doar o inversam pe inchis. Singura adaugare de markup
   e <li class="header-phone"> in header4.twig (tema esipca, izolat).
   ========================================================================== */

/* Pe home (`.common-home`) tema scoate headerul din flux si il aseaza PESTE
   slider (`position:absolute;top:0;z-index:10`), cu bara transparenta:
     @media (min-width:1200px){
       .common-home .header-absolute      {position:absolute;left:0;right:0;top:0;z-index:10}
       .common-home .header-absolute #top {background:transparent}
     }
   metalfence NU face asta — headerul e in flux normal si hero-ul vine SUB el.
   Headerul e oricum deja primul in DOM, deci e suficient sa-l readucem in flux.
   `body:not(.common-home) #header{margin-bottom:var(--rowspace)}` face ca pe
   home sa nu existe spatiu sub header -> hero-ul urca lipit, ca la metalfence.

   metalfence are `<header class="sticky-top">` = position:sticky;top:0, cu bara
   de sus SI randul logo/meniu impreuna. Replicam pe `#header` (care le contine
   pe amandoua). Doua motive pentru #header si nu `header.scroll-fix`:
     1. position:sticky se lipeste DOAR cat timp parintele e vizibil; pe
        .scroll-fix (copil al #header) s-ar dezlipi imediat ce #header iese.
     2. sticky e IN FLUX -> rezolva si suprapunerea peste hero, deci inlocuieste
        regula `position:static` de dinainte.
   `#header` e (1,0,0) si bate `.common-home .header-absolute` (0,2,0) al temei,
   deci nu mai e nevoie de media query.
   Sticky-ul pe JS al temei (prag 800px) e dezactivat in common/header.twig —
   altfel ar adauga `.scroll-fixed{position:fixed}` peste asta la 800px. */
#header {
  position: sticky;
  top: 0;
  z-index: 300;
}

/* Selectorul temei pentru bara e (1,2,0); un simplu `#top` e (1,0,0) si ar
   pierde exact pe home. Il egalam ca specificitate. */
#top,
.common-home .header-absolute #top {
  background: var(--mf-dark-800);
  border-bottom: none;
}

/* Textul si linkurile directe din bara (email, telefon, Adresa Magazin) */
.box-top > li > p,
#top .box-top > li > p,
#top .box-top > li > a {
  color: #fff;
  font-size: 13px;
  padding: 8px 0;              /* py-2 */
  letter-spacing: .01em;
}
#top .box-top > li > a:hover { color: var(--mf-accent-400); }

/* Separatoarele verticale: erau albe pe fundal alb (invizibile) */
#top .box-top > li:after { background: rgba(255, 255, 255, .2); }

/* Grupul din STANGA avea un singur item (emailul), asa ca tema ii anula
   spatierea si separatorul:
     #top .box-top-left > li       {margin:0; padding:0}
     #top .box-top-left > li:after {display:none}
   Cu doua iteme (email + telefon) asta le lipea unul de altul si ascundea
   bara despartitoare. Restauram comportamentul general al .box-top.
   `li:last-child` (margin/padding 0, fara separator) e deja tratat de tema,
   cu specificitate mai mare -> telefonul, fiind ultimul, ramane curat. */
#top .box-top-left > li { margin-right: 19px; padding-right: 19px; }
#top .box-top-left > li:after { display: block; }

#top .box-top > li > a i,
#top .box-top > li > p i {
  margin-right: 6px;
  font-size: 15px;
}

/* Linkul de cont e imbricat (#top-links > ul > li > a), nu copil direct.
   Il tintim EXACT, ca sa nu albim si itemii din dropdown. */
#top #top-links > ul.list-inline > li.dropdown > a.dropdown-toggle { color: #fff; }
#top #top-links > ul.list-inline > li.dropdown > a.dropdown-toggle:hover { color: var(--mf-accent-400); }

/* Dropdownul de cont ramane panou alb cu text inchis */
#top .dropdown-menu.pt-account { border-radius: var(--mf-radius-sm); }
#top .dropdown-menu.pt-account a { color: var(--mf-dark-800); }
#top .dropdown-menu.pt-account a:hover { color: var(--mf-primary-600); }