/* ================================================= */
/* PRAMARR – CUSTOM CSS | CORPORATE SOFT – FINAL   */
/* ================================================= */

/* ================================================= */
/* 1. VARIABILE */
/* ================================================= */
:root {
  --anim-fast: 0.8s;
  --anim-normal: 1.1s;
  --anim-slow: 10.6s;
  --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ================================================= */
/* 3. SCROLL ANIMATIONS – DESKTOP ONLY */
/* ================================================= */
@media (min-width: 1024px) {
  .animate {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--anim-normal) var(--ease-soft),
                transform var(--anim-normal) var(--ease-soft);
    will-change: opacity, transform;
  }

  .animate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .slide-left.is-visible  { --dir:-1; animation: slideX var(--anim-normal) var(--ease-soft) forwards; }
  .slide-right.is-visible { --dir:1;  animation: slideX var(--anim-normal) var(--ease-soft) forwards; }
  .slide-top.is-visible   { --dir:-1; animation: slideY var(--anim-normal) var(--ease-soft) forwards; }
  .slide-bottom.is-visible{ --dir:1;  animation: slideY var(--anim-normal) var(--ease-soft) forwards; }

  @keyframes slideX {
    from { transform: translateX(calc(var(--dir) * 24px)); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
  }

  @keyframes slideY {
    from { transform: translateY(calc(var(--dir) * 24px)); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }

  .p-slide-left.is-visible  { --dir:-1; animation: slideXP 0.9s var(--ease-soft) forwards; }
  .p-slide-right.is-visible { --dir:1;  animation: slideXP 0.9s var(--ease-soft) forwards; }
  .p-slide-top.is-visible   { --dir:-1; animation: slideYP 0.9s var(--ease-soft) forwards; }
  .p-slide-bottom.is-visible{ --dir:1;  animation: slideYP 0.9s var(--ease-soft) forwards; }

  @keyframes slideXP {
    from { transform: translateX(calc(var(--dir) * 16px)); opacity:0; }
    to   { transform: translateX(0); opacity:1; }
  }

  @keyframes slideYP {
    from { transform: translateY(calc(var(--dir) * 16px)); opacity:0; }
    to   { transform: translateY(0); opacity:1; }
  }
}

/* ================================================= */
/* 5. HOVER WORD – RED */
/* ================================================= */
.hover-word,
.hover-word a {
  color: #ffffff;
  padding: 0.1em 0.2em;
  border-radius: 3px;
  transition: all 0.25s var(--ease-soft);
  text-decoration: none;
}

.hover-word:hover,
.hover-word a:hover {
  background-color: #e10600;
  color: #ffffff;
}

/* ================================================= */
/* 6. HOVER WORD – BLUE */
/* ================================================= */
.hover-word-blue,
.hover-word-blue a {
  color: #ffffff;
  padding: 0.1em 0.2em;
  border-radius: 3px;
  transition: all 0.25s var(--ease-soft);
  text-decoration: none;
  background-color: #007bff;
}

.hover-word-blue:hover,
.hover-word-blue a:hover {
  background-color: #0056b3;
  color: #ffffff;
}

/* ================================================= */
/* 7. SLIDER INFINIT – DESKTOP ONLY */
/* ================================================= */
@media (min-width: 1024px) {
  .slider-container { overflow: hidden; }
  .slider-track {
    display: flex;
    gap: 24px;
    animation: scrollSlider 18s linear infinite;
  }
  .slider-track img {
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
  }

  @keyframes scrollSlider {
    to { transform: translateX(-50%); }
  }
}

/* ================================================= */
/* 8. MOBILE SAFE MODE */
/* ================================================= */
@media (max-width:1023px) {
  .reverse-on-mobile { display:flex; flex-direction:column; }
  .reverse-on-mobile .wp-block-column:first-child { order:2; }
  .reverse-on-mobile .wp-block-column:last-child  { order:1; }

  .animate,
  .slider-track {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ================================================= */
/* 9. CTA WRAPPER */
/* ================================================= */
.cta-wrapper {
  padding-inline: clamp(20px, 6vw, 100px);
  padding-block: clamp(40px, 8vw, 80px);
}

/* ================================================= */
/* 10. FLOATING BUTTONS – GENERAL */
/* ================================================= */
.floating-buttons-pattern {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}

.floating-buttons-pattern .wp-block-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-buttons-pattern .hamburger {
  background-color: #e10600;
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
}

.floating-buttons-pattern .whatsapp {
  background-color: #25d366;
}

.floating-buttons-pattern .whatsapp img {
  width: 28px;
  height: 28px;
}

/* Vizibile și pe mobil */
@media (max-width:1023px) {
  .floating-buttons-pattern {
    display: flex !important;
    right: 15px;
    bottom: 400px; /* ajustează după preferință */
    z-index: 9999;
  }
  .floating-buttons-pattern .hamburger,
  .floating-buttons-pattern .whatsapp {
    display: flex !important;
  }
}

/* ================================================= */
/* 11. MENIU – Link activ și hover pentru toate meniurile */
/* ================================================= */

/* Meniul clasic WordPress */
.menu-item a {
  color: #ffffff;
  transition: color 0.3s ease;
}

.current-menu-item a {
  color: #e10600;
}

.menu-item a:hover {
  color: #e10600;
}

/* Navigation Block FSE */
.wp-block-navigation .wp-block-navigation-item a {
  color: #ffffff;
  transition: color 0.3s ease;
}

.wp-block-navigation .wp-block-navigation-item.wp-block-navigation-item__current a {
  color: #e10600;
}

.wp-block-navigation .wp-block-navigation-item a:hover {
  color: #e10600;
}
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 480px;
  margin: auto;
  background: #111;
  color: #fff;
  padding: 16px;
  border-radius: 10px;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  font-size: 14px;
}

.cookie-banner.hidden {
  display: none;
}

.cookie-content {
  position: relative;
}

.cookie-content p {
  margin: 0 0 12px;
  line-height: 1.4;
}

.cookie-content a {
  color: #4ea3ff;
  text-decoration: underline;
}

.cookie-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cookie-buttons button {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

#cookie-accept {
  background: #4caf50;
  color: #000;
}

#cookie-refuse {
  background: #f44336;
  color: #fff;
}

#cookie-preferences {
  background: #555;
  color: #fff;
}

#cookie-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

@media (max-width: 600px) {
  .cookie-banner {
    bottom: 10px;
    left: 10px;
    right: 10px;
    font-size: 13px;
  }
}