/* Reset + flex helpers */
*{box-sizing:border-box;margin:0;padding:0}
body{display:flex;flex-direction:column;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:0;background:transparent}

/* Fixed header */
#header{position:fixed;top:0;left:0;right:0;height:60px;background:#fff;border-bottom:1px solid #e5e5e5;z-index:1000}
#header .container{max-width:1200px;margin:0 auto;display:flex;align-items:center;height:100%;padding:0 1rem;gap:1rem}
.brand{font-weight:700;font-size:1.3rem;margin-right:auto}
.search-bar{display:flex;align-items:center}
.search-bar input{padding:.5rem;border:1px solid #ccc;border-radius:4px 0 0 4px}
.search-bar button{padding:.5rem .75rem;border:1px solid #ccc;border-left:0;border-radius:0 4px 4px 0;background:#f7f7f7}
.nav-right{margin-left:auto;display:flex;gap:1rem}
.hamburger{font-size:1.5rem}
@media (max-width: 576px) {
    #search-form { display: none; }
}

/* Main */
main{flex:1;margin-top:60px;margin-bottom:40px;padding:2rem}

/* Utility */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.card{border:1px solid #e5e5e5;border-radius:4px;padding:0;text-align:center}

/* Footer bar */
/* Footer container */
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
	background: linear-gradient(180deg, #0099cc 0%, #003366 100%);
	color: #ffffff;
    border-top: 1px solid #e5e5e5;
    z-index: 900;
    transition: height .3s ease;
    height: 40px;                        /* collapsed */
    overflow: hidden;
}

/* Expanded state */
#footer.expanded {
    height: 200px;                      /* înălțimea dorită la expand */
}

/* Elementele interne */
#footer .collapsed {
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

#footer .expanded {
    padding: 1rem;
    display: block;
    height: calc(100% - 40px);          /* ocupă restul spațiului */
    overflow-y: auto;
}



/* framework.css – variabile temă + culori cerute */
:root {
  /* LIGHT MODE */
  --bg: #ffffff;
  --bg-soft: #f0f6ff;
  --text: #003366;
  --input-bg: #ffffff;
  --input-border: #b3d1ff;
  --shadow: 0 4px 12px rgba(255, 140, 0, .25);
}



/* aplicăm variabilele */
body {
  background: var(--bg);
  color: var(--text);
  transition: background .25s, color .25s;
}

input, select, textarea, .form-control {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--input-border) !important;
}

.btn, .card, .navbar, .sidebar {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
}

.card, .sidebar, #header, #footer {
  box-shadow: var(--shadow) !important;
}

/* ===== NAVBAR light – gradient + iconițe albe + butoane transparente ===== */
#header {
  background: linear-gradient(180deg, #003366 0%, #0099cc 100%);
  color: #ffffff;
  height: 90px;                    /* mai înalt */
  box-shadow: 0 4px 12px rgba(255, 140, 0, 0.35);
}

/* butoane & link-uri din navbar – fundal transparent */
#header .btn,
#header .btn-link,
#header .btn-outline-secondary {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 1.4rem;              /* iconițe mărite */
  transition: color 0.2s ease;
}

/* hover doar pe iconiță (culoare portocaliu) */
#header .btn:hover,
#header .btn-link:hover,
#header .btn-outline-secondary:hover {
  color: #ff8c00 !important;
}
 
/* text & logo */
.navbar-brand {
  all: unset; /* șterge orice stil vechi */
  display: inline-block;
  font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.75rem;      /* mărime discretă, dar vizibilă */
  font-weight: 700;        /* bold fără a fi agresiv */
  letter-spacing: 0.7px;   /* spațiu ușor între litere */
  color: #111827;          /* gri-închis aproape de negru */
  text-transform: none;    /* lăsăm litera „P” și „M” mari, restul normale */
  text-decoration: none;
  transition: color .2s ease;
}

/* Stare hover foarte discretă */
.navbar-brand:hover,
.navbar-brand:focus {
  color: #2563eb;          /* albastru profesional, nu strident */
}

/* fundal gri deschis pentru zona principală (#main) */
#main {
  background: #f5f5f5;
  transition: background .25s;
}

/* ===== Sidebars – gradient transparent gri → albastru + text alb ===== */

/* Light & Dark – bază comună */
aside#sidebar-left,
aside#sidebar-right {
  position: fixed;
  top: 100px;              /* înălțime navbar */
  bottom: 40px;
  width: 260px;
  background: linear-gradient(135deg, rgba(245, 245, 245, 0.85) 0%,
                                 rgba(220, 220, 220, 0.85) 100%);
  color: #1e1e1e;
  z-index: 950;
  transition: transform .3s ease;
  backdrop-filter: blur(6px);   /* efect sticlă */
}


aside#sidebar-left  { left: -260px; }
aside#sidebar-right { right: -260px; }

aside#sidebar-left.open  { transform: translateX(260px); }
aside#sidebar-right.open { transform: translateX(-260px); }

#tab-content .tab-pane {
    display: none;
}
#tab-content .tab-pane.active {
    display: block !important;
}

#sidebarTabs {
    display: none !important;   /* ascunde lista de tab-uri */
}


/* ===== NAVBAR DUBLU ===== */

/* container general (2 rânduri) */
#header {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}

/* ---------- rândul 1 ---------- */
#header-top {
  height: 90px;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
}



#header-top .navbar-brand,
#header-top i {
  color: #007bff !important; /* albastru */
}

/* search bar centrat */
#header-top #search-form {
  flex: 1;
  max-width: 400px;
  margin: 0 auto;
}
#header-top #search-form input {
  background: transparent;
  border: 1px solid #007bff;
}

/* rând 2 – curcubeu animat */
#header-bottom {
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  position: relative;
  overflow: hidden; /* ascunde marginile gradientului */
}

/* strat curcubeu infinit (sub conținut) */
#header-bottom::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    90deg,
    #ff0000, #ff7f00, #ffff00, #00ff00,
    #0000ff, #4b0082, #9400d3, #ff0000
  );
  background-size: 600% 100%;
  animation: rainbow 30s linear infinite;
  z-index: 0;
}

#header-bottom > * { position: relative; z-index: 1; } /* conținut deasupra */

@keyframes rainbow {
  0%   { background-position: 0% center;   }
  100% { background-position: 100% center; }
}

/* buton stânga – „Produse” */
#open-cat {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1rem;
}
#open-cat i { margin-right: .3rem; }

/* butoane dreapta – limbă + temă */
#header-bottom .btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.1rem;
}

#userDropdown {
  color: #007bff;   /* albastru pe light, se inversează pe dark */
}
#userDropdown:hover {
  color: #ff8c00;
}

/* card responsive + imagine pătrată, scalabilă */
.card-product {
    --img-ratio: 1;               /* 1:1 pătrat */
    --img-height: 100%;           /* se bazează pe lățimea cardului */
	position: relative;
    transition: transform .2s, box-shadow .2s;
}

.card-product .img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: var(--img-ratio);   /* CSS modern: pătrat */
    overflow: hidden;
    border-radius: .375rem .375rem 0 0;
}

.card-product .img-wrapper img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .25s;
}

.card-product:hover .img-wrapper img {
    transform: scale(1.05);
}

.card-product:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.6);
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    opacity: 0;
    transition: opacity .25s;
    border-radius: inherit;
}
.card-product:hover .card-overlay {
    opacity: 1;
}

.card-overlay .btn {
    min-width: 90px;
}

/* grid responsive – 2 → 6 coloane */
@media (min-width: 576px)  { .card-product { --img-ratio: 0; } } /* xs */
@media (min-width: 768px)  { .card-product { --img-ratio: 0; } } /* sm */
@media (min-width: 992px)  { .card-product { --img-ratio: 0; } } /* md */
@media (min-width: 1200px) { .card-product { --img-ratio: 0; } } /* lg */

.lang-icon {
  cursor: pointer;
  margin-right: 10px;
}

.lang-icon.active {
  color: blue; /* Highlight the active icon */
}

/* card nou – fără margini imagine, stele mari, mască hover, height egal */
.card-home {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e5e5;
    transition: filter .25s;
    height: auto;   /* se adaptează după conținut */
    width: 100%;    /* ocupă lățimea naturală a coloanei */
    min-height: 0;  /* permite micșorarea sub conținut */
}

.card-home:hover {
    filter: brightness(0.92); /* mască transparentă – întunecare ușoară */
}

/* imaginea acoperă complet cardul – fără margini */
.card-home .img-flush {
    width: 100%;
    height: 50%;
    object-fit: cover;
    border-radius: 1; /* fără colțuri rotunjite */
    margin: 1;        /* fără margini */
    display: block;   /* elimină spațiul de sub imagine */
}

.card-home .stars {
    font-size: 1.3rem; /* stele mai mari */
    letter-spacing: 2px;
}

.card-home .info-box {
    display: flex;
    flex-direction: column;
    padding: .55rem;            /* păstrăm un padding mic pentru estetică */
    height: auto;               /* se redimensionează după conținut */
    gap: .05rem;                /* spațiu între elemente */
}

.card-home .overlay-icons {
    position: absolute;
    inset: 0;                   /* ocupă întreaga suprafață a cardului */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    opacity: 0;
    transition: opacity .25s;
    background: rgba(0,0,0,.35); /* mască transparentă */
    border-radius: inherit;      /* colțuri rotunjite la fel ca cardul */
    /* ❌ NU mai forțăm width, height, padding, margin */
}

.card-home:hover .overlay-icons {
    opacity: 1;
}
.card-home .overlay-icons button {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 2.6rem; /* iconițe mari */
    padding: .4rem;
    border-radius: 50%;
    transition: color .2s;
}
.card-home .overlay-icons button:hover {
    color: #ff8c00;
}

/* forțăm înălțimea egală pe rând – fără h-100 pe carduri */
.row-equal-height {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* forțează aceeași înălțime pe rând */
}
.row-equal-height .col {
    display: flex; /* cardul ocupă întreaga înălțime a coloanei */
}

/* sub 576 px – o singură coloană */
/* sub 576 px – forțăm o coloană reală */
@media (max-width: 575.98px) {
    .row-cols-2,
    .row-cols-sm-3,
    .row-cols-md-4,
    .row-cols-lg-5,
    .row-cols-xl-6 {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem;
    }
    .col {
        width: 100% !important;
        flex: none !important;
    }
}

/* detalii produs – fără scroll orizontal */
@media (max-width: 575.98px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}