/* vmbasic-kod-extended.css — full override for VMBasic + VirtueMart on KOD palette
   Load AFTER vmbasic.css
*/

/* =====================
   Tokens (KOD palette)
   ===================== */
:root {
  --brand-primary: #124175;
  /* KOD blue */
  --brand-primary-700: #0f3560;
  --brand-accent: #81ab07;
  /* KOD green */
  --brand-accent-700: #6b8f05;

  --bg-page: #f6f8fb;
  /* pale section background */
  --bg-card: #ffffff;
  /* cards */
  --text-900: #111418;
  --text-700: #3d4753;
  --line-200: #e5edf5;
  /* subtle borders */

  --radius: 0;
  --radius-sm: 10px;
  --shadow: 0 6px 18px rgba(0, 0, 0, .06);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, .08);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: 18px;
}

h1,
h2,
h3 {
  font-weight: 500;
  line-height: 1.15;
}

h1 {
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  letter-spacing: -0.01em;
}


h2 {
  font-size: 28px
}

h3 {
  font-size: 26px
}

h4 {
  font-size: 24px
}

h5 {
  font-size: 20px
}

h6 {
  font-size: 18px
}

.price,
.sku {
  font-variant-numeric: tabular-nums;
}

/* liste VM aliniate */
/* =====================
   Global links & buttons
   ===================== */
a,
.btn-link {
  color: var(--brand-primary);
}

a:hover,
.btn-link:hover,
footer a:hover {
  color: var(--brand-accent);
}

.btn-primary {
  --bs-btn-bg: var(--brand-accent);
  --bs-btn-border-color: var(--brand-accent);
  --bs-btn-hover-bg: var(--brand-accent-700);
  --bs-btn-hover-border-color: var(--brand-accent-700);
  --bs-btn-active-bg: var(--brand-accent-700);
  --bs-btn-active-border-color: var(--brand-accent-700);
  --bs-btn-disabled-bg: #b5cf6a;
  --bs-btn-disabled-border-color: #b5cf6a;
  color: #fff;
}

.btn-secondary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-bg: var(--brand-primary-700);
  --bs-btn-active-border-color: var(--brand-primary-700);
  color: var(--brand-primary);
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
  color: #fff;
}

/* =====================
   Menu & nav
   ===================== */
.main-menu {
  background-color: var(--brand-primary);
}

.main-menu a,
.main-menu span {
  background-color: var(--brand-primary);
  color: #fff;
}

.main-menu .active>a,
.main-menu .active>span,
.main-menu a:hover,
.main-menu span:hover {
  background-color: var(--brand-accent);
  color: #fff;
}

/* =====================
   Home hero
   ===================== */

.hero__title {
  margin: 12px 0;
}

.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  z-index: 1;
  margin: 15px 0;
}

.hero .btn {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* If you use a slider component, wrap slides in .slider-kod and apply same overlay */
.slider-kod .slide {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.slider-kod .slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 65, 117, .75), rgba(18, 65, 117, .0));
  pointer-events: none;
}

/* =====================
   Section backgrounds
   ===================== */
.section--muted {
  background: var(--bg-page);
  padding: clamp(16px, 3vw, 28px);
}

/* =====================
   Cards (category & product)
   ===================== */
.card-kod,
.category-card,
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--line-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.card-kod:hover,
.category-card:hover,
.product-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-accent);
  box-shadow: var(--shadow-lg);
}

/* Category tile specifics */
.category-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  text-align: center;
}

.category-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #fafbfd;
}

.category-card__title {
  font-weight: 600;
  color: var(--text-900);
}

.category-card a {
  text-decoration: none;
  color: inherit;
}

/* VirtueMart product list — safe, additive styling */
.vm-product-media-container {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}

.vm-product-media-container img {
  width: 100%;
  display: block;
  object-fit: cover;
  background: #fafbfd;
}

.vm-product-descr-container-1,
.vm-product-descr-container-0 {
  padding: 12px 8px 0 8px;
}

.vm-product-title,
.product-name,
.vm-product-content h3 a {
  color: var(--text-900);
  text-decoration: none;
}

.vm-product .spacer,
.product .spacer {
  padding: 10px;
}

/* Price accents */
.PricesalesPrice,
.product-price .PricesalesPrice,
.vm-price-value {
  color: var(--brand-primary);
  font-weight: 700;
}

.PricebasePrice,
.PricebasePriceWithTax {
  color: #7a8796;
  text-decoration: line-through;
}

/* Add to cart area */
.addtocart-area .addtocart-button,
.addtocart-area .btn {
  border-radius: var(--radius);
}

.addtocart-area .addtocart-button:hover {
  filter: saturate(1.05);
}

/* =====================
   Badges / labels
   ===================== */
/* Generic badge with soft backgrounds based on brand colors */
.badge-kod {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .35rem .55rem;
  font-weight: 600;
  font-size: .82rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.badge--brand {
  color: var(--brand-primary);
  background: rgba(18, 65, 117, .10);
  border-color: rgba(18, 65, 117, .20);
}

.badge--accent {
  color: var(--brand-accent-700);
  background: rgba(129, 171, 7, .14);
  border-color: rgba(129, 171, 7, .28);
}

.badge--success {
  color: #2e7d32;
  background: rgba(46, 125, 50, .12);
  border-color: rgba(46, 125, 50, .24);
}

.badge--warning {
  color: #8a5b00;
  background: rgba(249, 168, 37, .16);
  border-color: rgba(249, 168, 37, .28);
}

.badge--danger {
  color: #8a1e1e;
  background: rgba(211, 50, 47, .12);
  border-color: rgba(211, 50, 47, .24);
}

/* Sale/New badges positioned over images */
.vm-product-media-container .badge-sale,
.vm-product-media-container .badge-new {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

.badge-sale {
  @extend .badge-kod;
}

.badge-sale {
  color: #8a1e1e;
  background: rgba(211, 50, 47, .12);
  border: 1px solid rgba(211, 50, 47, .24);
}

.badge-new {
  @extend .badge-kod;
}

.badge-new {
  color: var(--brand-accent-700);
  background: rgba(129, 171, 7, .14);
  border: 1px solid rgba(129, 171, 7, .28);
}

/* Bootstrap .badge alignment fix (if used) */
.badge {
  border-radius: 999px;
  font-weight: 600;
}

/* =====================
   Breadcrumbs, links, pagination (minor polish)
   ===================== */
.mod-breadcrumbs a,
.manufacturer-details-view a:not(.btn),
.manufacturer a,
.com-content-article__links a,
.items-more a,
#checkoutForm .details,
.vmCartModule .btn-link {
  color: var(--brand-primary);
}

.active>.page-link,
.page-link.active {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.page-link,
.page-link:hover {
  color: var(--brand-primary);
}

/* =====================
   Footer & toolbar
   ===================== */
.toolbar {
  background-color: var(--bg-page);
}

footer {
  background-color: var(--bg-page);
}

/* =====================
   Mobile tweaks
   ===================== */
@media (max-width: 490px) {

  .toolbar .bg-alt,
  .top-bar {
    background-color: var(--brand-primary);
    color: #fff;
  }

  .top-bar a {
    color: #fff;
  }

  .hero {
    min-height: 280px;
    padding: 24px;
  }
}

/* =====================
   Utilities
   ===================== */
.shadow-kod {
  box-shadow: var(--shadow);
}

.rnd-kod {
  border-radius: var(--radius);
}

.border-kod {
  border: 1px solid var(--line-200);
  border-radius: var(--radius);
}

.text-brand {
  color: var(--brand-primary) !important;
}

.text-accent {
  color: var(--brand-accent) !important;
}

.bg-brand {
  background: var(--brand-primary) !important;
  color: #fff !important;
}

.bg-accent {
  background: var(--brand-accent) !important;
  color: #fff !important;
}

/* Social links - Link + cerc de fundal */
.social-links .social-link {
  --icon: 18px;
  /* mărimea pictogramei FA */
  --pad: 10px;
  /* grosimea cercului din spate */
  --bg: #e9ecef;
  /* gri deschis (se vede pe #212529) */
  --bg-hover: #f8f9fa;
  /* hover ușor mai luminos */
  --radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--icon) + var(--pad) * 2);
  height: calc(var(--icon) + var(--pad) * 2);
  padding: var(--pad);
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, 0.06);
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease,
    box-shadow 0.15s ease;
  opacity: 0.96;
}

.social-links .social-link:hover {
  background: var(--bg-hover);
  transform: translateY(-1px);
  opacity: 1;
}

.social-links .social-link:focus-visible {
  outline: 2px solid #adb5bd;
  outline-offset: 2px;
}

/* Iconul FA (folosește currentColor) */
.social-links .social-link i {
  font-size: var(--icon);
  line-height: 1;
  display: block;
}

/* Culori brand */
.social-links .facebook {
  color: #1877f2;
}

/* Facebook */
.social-links .youtube {
  color: #ff0000;
}

/* YouTube */
.social-links .instagram {
  color: #e4405f;
}

/* fallback dacă gradientul nu e suportat */
.social-links .tiktok {
  color: #000000;
}

/* TikTok */

/* Instagram cu gradient pe text (opțional) */
.social-links .instagram i {
  background: linear-gradient(45deg, #f58529, #feda77, #dd2a7b, #8134af, #515bd4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* TikTok: efect duotone subtil la hover (opțional) */
.social-links .tiktok:hover i {
  text-shadow:
    1px 0 0 #69c9d0,
    -1px 0 0 #ee1d52;
}

/* Respectă preferința de „reduce motion” */
@media (prefers-reduced-motion: reduce) {
  .social-links .social-link {
    transition: none;
  }

  .social-links .social-link:hover {
    transform: none;
  }
}

/* Dacă stă pe footer #212529, adaugă o margine interioară discretă */
footer .social-links .social-link {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

/* Variante de mărime (opțional) */
.social-links--sm .social-link {
  --icon: 16px;
  --pad: 8px;
}

.social-links--lg .social-link {
  --icon: 22px;
  --pad: 12px;
}

/* Păstrează culoarea brand pe toate stările link-ului */
.social-links .facebook,
.social-links .facebook:visited,
.social-links .facebook:hover,
.social-links .facebook:active,
.social-links .facebook:focus {
  color: #1877f2;
}

.social-links .youtube,
.social-links .youtube:visited,
.social-links .youtube:hover,
.social-links .youtube:active,
.social-links .youtube:focus {
  color: #ff0000;
}

/* Opțional: la fel pentru TikTok (dacă vezi că devine alb) */
.social-links .tiktok,
.social-links .tiktok:visited,
.social-links .tiktok:hover,
.social-links .tiktok:active,
.social-links .tiktok:focus {
  color: #000000;
}

/* Asigură-te că efectul de hover nu schimbă culoarea din theme */
footer .social-links .social-link:hover {
  color: inherit;
}

/* ===== KOD — Home page extras (section-level) ===== */

/* Trust note */
.kod-trust-note {
  background: #fff;
}

/* USP card icons */
.usp-card .usp-ico {
  color: var(--brand-primary);
  margin-bottom: .35rem;
  text-align: center;
}

/* Banner upgrade */
.kod-banner-upgrade {
  background: #fff;
}

/* Checklist (Despre noi) */
.kod-checklist {
  list-style: none;
  padding: 0;
  margin: .25rem 0 0;
}

.kod-checklist li {
  position: relative;
  padding-left: 28px;
  margin: .25rem 0;
}

.kod-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3rem;
  width: 18px;
  height: 18px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center/contain;
  background: var(--brand-accent);
  border-radius: 4px;
}

/* Accordion polish (uses Bootstrap 5) */
.accordion-button {
  font-weight: 600;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: #fff;
  background: var(--brand-primary);
}

.accordion-item {
  background: #fff;
}

/* Section spacing helpers (optional) */
.section--muted {
  border: 1px solid var(--line-200);
}

/* Category images fallback */
.category-card img {
  background: #fafbfd;
}

/* Buttons in hero are already styled by extended CSS */
.hero .btn {
  text-transform: none;
}

/* Ensure cards and banners don’t stick to edges on mobile */
@media (max-width: 576px) {

  .section--muted,
  .kod-banner-upgrade {
    padding: 16px !important;
  }
}

/* If template ships a heavy :after on .hero (old sliders), keep our CTAs clickable */
.hero::after {
  pointer-events: none;
}

/* Container */
.brands-bar .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px
}

/* Desktop: text + logos; logos ocupă tot spațiul rămas */
.brands {
  display: grid;
  grid-template-columns: auto 1fr;
  /* intro auto, logos ia 1fr = restul */
  align-items: center;
  column-gap: 28px;
}

.intro {
  white-space: nowrap;
  font-weight: 700;
  color: #124175;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
}

/* opțional: normalizează înălțimea logo-urilor */
.brand-logo {
  max-height: 45px;
  width: auto;
}

@media (max-width: 768px) {
  .brand-logo {
    max-height: 36px;
  }
}
/* Footer menu*/
footer .footer-menu .nav-item, footer .footer-menu li {
  margin-bottom: 4px;
}