/* ============================================================
   FDS4 Modern Design Override
   Fonts: Playfair Display (headings) + Inter (body)
   Palette: Grey (#F0F1F5 sidebar) + Reflex Blue (#001489) accents
   ============================================================ */

/* --- CSS Variables --- */
:root {
  --fds-reflex:       #001489;   /* Pantone Reflex Blue */
  --fds-reflex-hover: #0022B4;   /* slightly lighter on hover */
  --fds-reflex-light: #E8EBFA;   /* very light blue tint for active bg */
  --fds-primary:      #001489;
  --fds-accent:       #001489;
  --fds-accent-hover: #0022B4;
  --fds-bg:           #F5F6F8;   /* page background: light grey */
  --fds-surface:      #FFFFFF;
  --fds-muted:        #6B7280;   /* medium grey for secondary text */
  --fds-border:       #E2E4EA;
  --fds-sidebar-bg:   #F0F1F5;   /* sidebar: light grey */
  --continut-bg:      #eeeeee;   /* page content bg — overridden per login state */
  --fds-sidebar-border: #DDE0E8;
  --fds-link:         #374151;   /* normal link text: dark grey */
  --fds-link-muted:   #6B7280;   /* subdued grey */
  --fds-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fds-font-body:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fds-ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --fds-dur:          200ms;
}

/* ===== BASE FONTS ===== */
body,
A:link, A:visited, A:hover, A:active,
p, li, td, input, select, textarea, button,
.me a, .blu a, .red a,
FONT, TD.form, TD.table_alb, TD.table_albl,
TD.table_blk, TD.table_value, TD.table_value2 {
  font-family: var(--fds-font-body) !important;
}

H1, H2 {
  font-family: var(--fds-font-heading) !important;
  letter-spacing: -0.025em;
}

.cod, .cod2 {
  font-family: var(--fds-font-heading) !important;
}

/* ===== PAGE LOAD ANIMATIONS ===== */
@keyframes fds-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fds-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fds-slide-left {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fds-item-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  #fdsstinga {
    animation: fds-fade-in 0.3s ease both;
  }
  #continut {
    animation: fds-fade-up 0.45s var(--fds-ease) both;
    animation-delay: 0.05s;
  }
  #meniustinga {
    animation: fds-slide-left 0.4s var(--fds-ease) both;
  }
  #fdsprod li { animation: fds-item-in 0.4s var(--fds-ease) both; }
  #fdsprod li:nth-child(1)   { animation-delay: 0.08s; }
  #fdsprod li:nth-child(2)   { animation-delay: 0.14s; }
  #fdsprod li:nth-child(3)   { animation-delay: 0.20s; }
  #fdsprod li:nth-child(4)   { animation-delay: 0.26s; }
  #fdsprod li:nth-child(5)   { animation-delay: 0.32s; }
  #fdsprod li:nth-child(6)   { animation-delay: 0.38s; }
  #fdsprod li:nth-child(n+7) { animation-delay: 0.42s; }
}

/* ===== HEADER BAR ===== */
#fdsstinga {
  top: -1px;
  background: rgba(255,255,255,0.5) !important;
  backdrop-filter: saturate(180%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
  border-bottom: 1px solid var(--fds-sidebar-border) !important;
  height: 42px !important;
}

#fdslogo {
  transition: opacity var(--fds-dur) var(--fds-ease) !important;
}
#fdslogo:hover { opacity: 0.7 !important; }

/* Hamburger icon lines */
.icon-menu .line {
  background-color: #374151 !important;
  transition: all 0.25s var(--fds-ease) !important;
}
#menubb:hover .icon-menu .line {
  background-color: var(--fds-reflex) !important;
}

/* Breadcrumb */
.brhome li, .brhome, .brhome a {
  font-family: var(--fds-font-body) !important;
  font-size: 11px !important;
  color: #999 !important;
  letter-spacing: 0 !important;
}
.brhome a:hover { color: var(--fds-primary) !important; }

/* ===== SIDEBAR / LEFT MENU ===== */
#meniustinga {
  background: var(--fds-sidebar-bg) !important;
  box-shadow: 1px 0 0 var(--fds-sidebar-border) !important;
  border-right: 1px solid var(--fds-sidebar-border) !important;
}

/* Remove the background-image GIFs from all menu item types */
.me, .me a, .me a:visited, .me a:hover,
.red, .red a, .red a:visited, .red a:hover,
.blu, .blu a, .blu a:visited, .blu a:hover,
.me3, .me3 a, .me3 a:visited, .me3 a:hover {
  background-image: none !important;
}

/* --- Section headers (red = category label) --- */
#meniustinga .red {
  background: #E4E6ED !important;
  border: none !important;
  max-height: none !important;
  overflow: visible !important;
}
#meniustinga .red a,
#meniustinga .red A:link,
#meniustinga .red A:visited,
#meniustinga .red A:hover {
  background: transparent !important;
  color: var(--fds-link) !important;
  font-family: var(--fds-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 36px !important;
  padding: 0 12px 0 14px !important;
  display: block !important;
  border-left: 2px solid transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  cursor: default !important;
  text-decoration: none !important;
}

/* --- Normal menu items --- */
#meniustinga .me {
  background: transparent !important;
  border: none !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: unset !important;
}
#meniustinga .me a,
#meniustinga .me A:link,
#meniustinga .me A:visited {
  background: linear-gradient(to right, var(--fds-sidebar-bg) 0%, var(--continut-bg) 100%) !important;
  color: var(--fds-link) !important;
  font-family: var(--fds-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 36px !important;
  padding: 0 12px 0 14px !important;
  border-left: 2px solid transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  text-align: left !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition:
    color var(--fds-dur) var(--fds-ease),
    border-left-color var(--fds-dur) var(--fds-ease),
    background var(--fds-dur) var(--fds-ease) !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
#meniustinga .me a:hover,
#meniustinga .me A:hover {
  background: linear-gradient(to right, var(--fds-reflex-light) 0%, var(--continut-bg) 100%) !important;
  color: var(--fds-reflex) !important;
  border-left-color: var(--fds-reflex) !important;
}

/* --- Active/selected items (blu) --- */
#meniustinga .blu {
  background: linear-gradient(to right, var(--fds-reflex-light) 0%, var(--continut-bg) 100%) !important;
  border: none !important;
  max-height: none !important;
}
#meniustinga .blu a,
#meniustinga .blu A:link,
#meniustinga .blu A:visited,
#meniustinga .blu A:hover {
  background: transparent !important;
  color: var(--fds-reflex) !important;
  font-family: var(--fds-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 36px !important;
  padding: 0 12px 0 14px !important;
  border-left: 2px solid var(--fds-reflex) !important;
  border-top: none !important;
  border-bottom: none !important;
  text-align: left !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* --- Subcategory DL/DD items (abajur colors etc) --- */
#meniustinga dl {
  border: none !important;
  background: rgba(0,20,137,0.04) !important;
  width: 200px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#meniustinga dt { display: none !important; }

#meniustinga dd.blus,
#meniustinga dd.blua {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
}
#meniustinga dd.blus a,
#meniustinga dd.blua a {
  background: transparent !important;
  color: var(--fds-link-muted) !important;
  font-family: var(--fds-font-body) !important;
  font-size: 12px !important;
  line-height: 28px !important;
  padding: 0 0 0 24px !important;
  border: none !important;
  text-align: left !important;
  display: block !important;
  transition: color var(--fds-dur) var(--fds-ease) !important;
}
#meniustinga dd.blus a:hover { color: var(--fds-reflex) !important; }
#meniustinga dd.blua a { color: var(--fds-reflex) !important; font-weight: 500 !important; }

/* Color swatch images in subcategory */
#meniustinga dd img {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  vertical-align: middle !important;
  margin-left: 4px !important;
  opacity: 0.8;
}

/* --- Separator / spacer dividers (me3) --- */
#meniustinga .me3 {
  background: transparent !important;
  border: none !important;
  max-width: 200px !important;
  max-height: 4px !important;
  overflow: hidden !important;
}
#meniustinga .me3 a {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  height: 1px !important;
  overflow: hidden !important;
  display: block !important;
}

/* --- Language switcher --- */
#lsus, #ljos {
  background: transparent !important;
  border: none !important;
  height: auto !important;
  margin-top: 6px !important;
  overflow: hidden !important;
}
#lsus a, #ljos a,
#meniustinga #lsus a, #meniustinga #ljos a {
  background: transparent !important;
  color: var(--fds-muted) !important;
  font-family: var(--fds-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 34px !important;
  border: none !important;
  border-left: none !important;
  text-align: center !important;
  display: inline-block !important;
  float: left !important;
  width: 50% !important;
  box-sizing: border-box !important;
  transition: color var(--fds-dur) var(--fds-ease) !important;
}
#lsus a:hover, #ljos a:hover,
#meniustinga #lsus a:hover, #meniustinga #ljos a:hover {
  color: var(--fds-reflex) !important;
  background: transparent !important;
}

/* Sidebar bottom fade — gradient from sidebar grey to white */
#josfade {
  background: linear-gradient(to bottom, var(--fds-sidebar-bg), #ffffff) !important;
  background-image: linear-gradient(to bottom, var(--fds-sidebar-bg), #ffffff) !important;
  opacity: 1 !important;
  margin-top: 8px !important;
}

/* ===== SPACER & CONTENT AREA ===== */
#spatiusus {
  background: var(--fds-bg) !important;
}
#all2centru {
  background: var(--fds-surface) !important;
}
#user2centru {
  background: #eeeeee !important;
}

/* ===== PRODUCT GRID HOVER ===== */
#fdsprod a,
#fdsprodr a {
  transition:
    transform var(--fds-dur) var(--fds-ease),
    box-shadow var(--fds-dur) var(--fds-ease) !important;
  border-radius: 4px !important;
}
#fdsprod a:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.10) !important;
}

/* ===== SEARCH BAR ===== */
.searchwww {
  background: var(--fds-bg) !important;
}
input#cautaf {
  font-family: var(--fds-font-body) !important;
  border-radius: 6px 0 0 6px !important;
}
.cautabt {
  font-family: var(--fds-font-body) !important;
  border-radius: 0 6px 6px 0 !important;
  transition: background var(--fds-dur) var(--fds-ease) !important;
}

/* ===== FOOTER ===== */
.footerr {
  font-family: var(--fds-font-body) !important;
  background: #F5F5F4 !important;
  border-top: 1px solid var(--fds-border) !important;
}
.footerr A, .footerr A:link, .footerr A:visited {
  font-family: var(--fds-font-body) !important;
  color: var(--fds-muted) !important;
  transition: color var(--fds-dur) var(--fds-ease) !important;
}
.footerr A:hover { color: var(--fds-primary) !important; }

section.sitemap ul { color: var(--fds-muted) !important; }
section.sitemap ul li a { color: var(--fds-muted) !important; }
section.sitemap ul li a:hover { color: var(--fds-primary) !important; }

/* Social icons */
.iconsoc { fill: var(--fds-muted) !important; color: var(--fds-muted) !important; }
.iconsoc:hover {
  background: var(--fds-reflex) !important;
  fill: #fff !important;
  color: #fff !important;
}
.soc svg { color: var(--fds-muted) !important; }

/* ===== BUTTONS ===== */
.bcos {
  font-family: var(--fds-font-body) !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  letter-spacing: 0.01em !important;
  transition: background var(--fds-dur) var(--fds-ease), box-shadow var(--fds-dur) var(--fds-ease) !important;
}
.bcos:hover {
  box-shadow: 0 4px 14px rgba(0,113,227,0.28) !important;
}

/* WhatsApp button */
a.chat-btn {
  font-family: var(--fds-font-body) !important;
  transition: opacity var(--fds-dur) var(--fds-ease) !important;
}
a.chat-btn:hover { opacity: 0.75 !important; }

/* ===== DATA TABLES (sortable / DataTables) ===== */
table.sortable,
table.display {
  border-color: var(--fds-border) !important;
  background: #ffffff !important;
}

/* Even rows — white */
table.sortable tbody tr,
table.display tbody tr {
  background-color: #ffffff !important;
}

/* Odd rows — subtle Reflex Blue tint */
tbody tr.odd,
table.sortable tbody tr.odd,
table.display tbody tr.odd {
  background-color: #F3F6FF !important;
}

/* Hover — slightly deeper blue tint */
table.sortable tr:hover,
table.display tbody tr:hover {
  background-color: #E8EBFA !important;
  border-bottom-color: #C7CFED !important;
}

/* thead / tfoot — grey header */
thead th,
tfoot th,
tfoot td {
  background-color: #E4E6ED !important;
  color: #1F2937 !important;
  font-family: var(--fds-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-bottom: 2px solid #C9CCD6 !important;
}

/* ===== MOBILE OVERLAY MENU ===== */
@media only screen and (max-width: 1000px) {

  /* === Drawer container === */
  #meniustinga {
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-right: none !important;
    box-shadow: 2px 0 32px rgba(0,20,137,0.14), 1px 0 0 rgba(0,0,0,0.06) !important;
    padding-top: 8px !important;
    padding-bottom: env(safe-area-inset-bottom, 16px) !important;
  }

  /* === Section headers (.red) === */
  #meniustinga .red {
    background: transparent !important;
    margin-top: 16px !important;
  }
  #meniustinga .red a,
  #meniustinga .red A:link,
  #meniustinga .red A:visited,
  #meniustinga .red A:hover {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #9ca3af !important;
    line-height: 1 !important;
    padding: 8px 20px 6px !important;
    border-left: none !important;
    cursor: default !important;
  }

  /* === Normal items (.me) === */
  #meniustinga .me {
    margin: 1px 10px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  #meniustinga .me a,
  #meniustinga .me A:link,
  #meniustinga .me A:visited {
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    min-height: 48px !important;
    padding: 14px 16px 14px 16px !important;
    border-left: none !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    color: #1f2937 !important;
    transition: background 0.18s ease, color 0.18s ease !important;
  }
  #meniustinga .me A:hover {
    background: rgba(0,80,255,0.07) !important;
    color: var(--fds-reflex) !important;
    border-left: none !important;
  }

  /* === Active item (.blu) === */
  #meniustinga .blu {
    background: transparent !important;
    margin: 1px 10px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  #meniustinga .blu a,
  #meniustinga .blu A:link,
  #meniustinga .blu A:visited,
  #meniustinga .blu A:hover {
    background: rgba(0,80,255,0.09) !important;
    color: var(--fds-reflex) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    min-height: 48px !important;
    padding: 14px 16px !important;
    border-left: none !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* === Subcategory items (dd) === */
  #meniustinga dl {
    background: rgba(0,20,137,0.03) !important;
    margin: 0 10px 4px !important;
    border-radius: 8px !important;
    width: auto !important;
  }
  #meniustinga dd.blus a,
  #meniustinga dd.blua a {
    font-size: 14px !important;
    min-height: 44px !important;
    line-height: 1 !important;
    padding: 12px 16px 12px 28px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* === Separator (.me3) === */
  #meniustinga .me3 {
    max-width: none !important;
    margin: 6px 16px !important;
  }
  #meniustinga .me3 a {
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  }

  /* === Language switcher === */
  #lsus a, #ljos a,
  #meniustinga #lsus a, #meniustinga #ljos a {
    font-size: 13px !important;
    min-height: 44px !important;
    line-height: 44px !important;
  }
}