/* =========================================
   MiniCodex — Footer (design handoff)
   ========================================= */

:root{
  --haiti: #161032;
  --butterfly: #5C51A2;
  --java: #14CFBC;
  --bright-sun: #FFE830;
  --alabaster: #FAFAFA;
}

/* ---- BaseLayout wrapper (transparent pass-through) ----
   Footer.astro renders its own <footer class="site-footer">; BaseLayout wraps it
   in <footer aria-label="Subsol">. The wrapper must stay transparent. */
body > footer{
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

#footer-placeholder{ width: 100%; display: block; clear: both; }

/* ---- Footer container ---- */
.site-footer{
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 0;
  color: var(--alabaster);
  font-family: var(--font-body, 'Open Sans', 'Roboto', sans-serif);
  background:
    radial-gradient(1200px 520px at 84% -10%, rgba(20,207,188,.10), transparent 60%),
    radial-gradient(900px 600px at 6% 110%, rgba(92,81,162,.32), transparent 60%),
    #161032;
  background-clip: padding-box;
}

/* ---- Decorative layers ---- */
.footer-hairline{
  position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(20,207,188,.7) 30%, rgba(255,232,48,.55) 70%, transparent);
}
.footer-dots{
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(900px 520px at 80% 0%, #000, transparent 70%);
  mask-image: radial-gradient(900px 520px at 80% 0%, #000, transparent 70%);
}
.footer-glyph{
  position: absolute; right: 8px; bottom: -34px; width: clamp(300px,30vw,520px);
  opacity: .09; pointer-events: none;
}
.footer-glyph svg{ width: 100%; height: 100%; fill: #fff; display: block; }

/* ---- Inner wrapper ---- */
.footer-inner{
  position: relative; z-index: 2;
  max-width: 1320px; margin: 0 auto;
  padding: clamp(26px,3vw,44px) clamp(20px,5vw,68px) clamp(18px,2vw,24px);
}

/* ---- Upper row ---- */
.footer-top{ display: flex; flex-wrap: wrap; gap: clamp(22px,2.8vw,40px); }

.footer-brand{ flex: 1 1 300px; min-width: 240px; max-width: 420px; }
.footer-logo{ display: block; width: clamp(150px,46%,190px); height: 54px; object-fit: contain; margin-bottom: 12px; }
.footer-tagline{ margin: 0 0 6px; font-size: 15px; color: rgba(250,250,250,.78); line-height: 1.5; max-width: 300px; text-wrap: balance; }
.footer-subtagline{ margin: 0 0 14px; font-size: 14px; color: rgba(250,250,250,.62); line-height: 1.5; max-width: 300px; }

/* ---- Social ---- */
.footer-social{ display: flex; gap: 10px; margin: 0; }
.footer-social__icon{
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  color: rgba(250,250,250,.72); text-decoration: none; transition: all .18s ease;
}
.footer-social__icon:hover{
  border-color: rgba(20,207,188,.5); background: rgba(20,207,188,.1); color: #14CFBC; transform: translateY(-2px);
}
.footer-social__icon svg{ width: 18px; height: 18px; }

/* ---- Nav columns ---- */
.footer-cols{ flex: 2 1 460px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: clamp(18px,2.2vw,30px); }
.footer-col h3{
  position: relative;
  width: fit-content;
  font-family: var(--font-heading, 'Roboto', sans-serif);
  font-weight: 700; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--java); margin: 0 0 12px; padding-bottom: 8px;
}
.footer-col h3::after{
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--java), var(--bright-sun));
}
.footer-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-link{ display:inline-flex; align-items:center; min-height:32px; font-size: 15px; color: rgba(250,250,250,.78); text-decoration: none; transition: color .16s ease; }
.footer-link:hover{ color: #14CFBC; }

/* ---- Contact ---- */
.footer-contact{ gap: 14px; }
.footer-contact li{ display: flex; align-items: center; gap: 11px; min-width:0; }
.footer-contact .footer-link{ min-width:0; overflow-wrap:anywhere; }
.footer-contact svg{ flex: none; }
.footer-contact__hours{ align-items: flex-start; }
.footer-contact__hours svg{ margin-top: 1px; }
.footer-contact__hours span{ font-size: 15px; color: rgba(250,250,250,.78); line-height: 1.4; }

/* ---- Bottom bar ---- */
.footer-bottom{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 24px; margin-top: clamp(20px,2.4vw,28px); padding-top: clamp(18px,2vw,24px);
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-copy{ font-size: 13.5px; color: rgba(250,250,250,.62); flex: 1 1 auto; min-width: 200px; }
.footer-badges{ display: flex; flex-wrap: wrap; gap: 10px; flex: 0 1 auto; }

/* ANPC SAL + EU ODR — imaginile oficiale (au deja fundal alb propriu) */
.footer-badge{ display: block; line-height: 0; }
.footer-badge img{
  height: 46px; width: auto; max-width: 100%; display: block;
  border-radius: 6px; box-shadow: 0 10px 24px -14px rgba(0,0,0,.55);
}

/* ---- Floating action buttons (WhatsApp + Phone) — păstrate ---- */
.float-buttons {
  position: fixed;
  bottom: var(--sp-3);
  right: var(--sp-3);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-end;
}
.float-btn {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  transition: transform .25s ease;
  text-decoration: none;
  will-change: transform;
}
.float-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.float-btn:hover { transform: scale(1.08); }
.float-btn:hover::after { opacity: 1; }
.float-btn:active { transform: scale(.95); }
.float-label {
  position: absolute;
  right: 64px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  font-size: var(--fs-small);
  font-weight: 600;
  color: #fff;
  background: var(--java);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.float-label::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: var(--java);
  border-right: none;
}
.float-btn:hover .float-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.phone-float { background: var(--java); }
.phone-float::after { box-shadow: 0 6px 24px rgba(20, 207, 188, .4); }
.wa-float { background: #25D366; }
.wa-float .float-label { background: #25D366; }
.wa-float .float-label::after { border-left-color: #25D366; }
.wa-float::after { box-shadow: 0 6px 24px rgba(37, 211, 102, .4); }

@media (max-width: 600px) {
  .float-buttons { bottom: var(--sp-2); right: var(--sp-2); gap: var(--sp-1); }
  .float-btn { width: 50px; height: 50px; }
  .float-btn svg { width: 24px; height: 24px; }
  .float-label { display: none; }
}
@media (max-width: 380px) {
  .float-buttons { flex-direction: row; }
}
/* Același aspect ca linkurile din footer, dar permite redeschiderea setărilor de consimțământ. */
.footer-consent-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 32px;
}