/* ============================================================
   ui.css — site-wide UI: loader, sticky mobile bar,
            trust badges, brand strip, faq accordion
   ============================================================ */

/* ===== Loading screen ===== */
#page-loader{
  position:fixed;inset:0;z-index:9999;
  background:radial-gradient(circle at center,#0f6c43 0%,#08221a 100%);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .3s ease, visibility .3s ease;
}
#page-loader.done{opacity:0;visibility:hidden;pointer-events:none}
#page-loader .loader-inner{position:relative;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
#page-loader img{
  display:block;margin:0 auto;
  width:80px;height:80px;border-radius:50%;background:#fff;padding:8px;
  box-shadow:0 0 0 4px rgba(219,158,48,.35), 0 20px 40px -10px rgba(0,0,0,.4);
  animation:loaderPulse 1.6s ease-in-out infinite
}
#page-loader span{
  display:block;margin-top:1.2rem;font-family:'Cinzel Decorative',serif;
  color:#fff;font-size:1.1rem;letter-spacing:.05em
}
#page-loader small{
  display:block;margin-top:.4rem;color:#DB9E30;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase
}
@keyframes loaderPulse{
  0%,100%{ transform:scale(1) }
  50%   { transform:scale(.94) }
}
@media (prefers-reduced-motion: reduce){
  #page-loader img{ animation:none }
}

/* ===== Sticky mobile action bar ===== */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:none;grid-template-columns:1fr 1fr 1fr;
  background:#fff;border-top:1px solid var(--border);
  box-shadow:0 -8px 24px -10px rgba(0,0,0,.18);
  padding-bottom:env(safe-area-inset-bottom)
}
.mobile-cta .mc-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.25rem;padding:.75rem .25rem;color:var(--dark);
  text-decoration:none;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;transition:.2s;border-right:1px solid var(--border)
}
.mobile-cta .mc-btn:last-child{border-right:none}
.mobile-cta .mc-btn i{font-size:1.15rem}
.mobile-cta .mc-call i{color:var(--green)}
.mobile-cta .mc-wa{background:#25d366;color:#fff}
.mobile-cta .mc-wa i{color:#fff}
.mobile-cta .mc-book{background:var(--gold);color:var(--dark)}
.mobile-cta .mc-btn:active{transform:scale(.97)}
@media (max-width: 768px){
  .mobile-cta{display:grid}
  /* Push footer up so bar doesn't overlap */
  .footer{padding-bottom:5.5rem}
  /* Hide topbar on mobile to save room */
  .topbar{display:none}
}

/* ===== Floating WhatsApp button (desktop only) ===== */
.wa-float{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:95;
  width:60px;height:60px;border-radius:50%;
  background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;text-decoration:none;
  box-shadow:0 8px 24px -6px rgba(37,211,102,.55), 0 4px 12px -2px rgba(0,0,0,.18);
  transition:transform .25s ease, box-shadow .25s ease;
  animation:waPulse 2.4s ease-in-out infinite;
}
.wa-float::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(37,211,102,.45);
  animation:waRing 2.4s ease-out infinite;
  pointer-events:none;
}
.wa-float:hover{
  transform:scale(1.08) rotate(-6deg);
  box-shadow:0 12px 30px -6px rgba(37,211,102,.7), 0 6px 16px -2px rgba(0,0,0,.22);
  animation-play-state:paused;
}
.wa-float-tip{
  position:absolute;right:74px;top:50%;transform:translateY(-50%) translateX(8px);
  background:#0f1a14;color:#fff;font-family:'Epilogue',sans-serif;font-weight:600;
  font-size:.82rem;padding:.5rem .85rem;border-radius:8px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
  box-shadow:0 6px 18px -4px rgba(0,0,0,.25);
}
.wa-float-tip::after{
  content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:10px;height:10px;background:#0f1a14;
}
.wa-float:hover .wa-float-tip{opacity:1;transform:translateY(-50%) translateX(0)}
@keyframes waPulse{
  0%,100%{ box-shadow:0 8px 24px -6px rgba(37,211,102,.55), 0 4px 12px -2px rgba(0,0,0,.18), 0 0 0 0 rgba(37,211,102,.5) }
  50%   { box-shadow:0 8px 24px -6px rgba(37,211,102,.55), 0 4px 12px -2px rgba(0,0,0,.18), 0 0 0 14px rgba(37,211,102,0) }
}
@keyframes waRing{
  0%  { transform:scale(1);   opacity:.7 }
  100%{ transform:scale(1.45); opacity:0  }
}
@media (max-width: 768px){
  .wa-float{display:none} /* mobile uses bottom action bar instead */
}
@media (prefers-reduced-motion: reduce){
  .wa-float, .wa-float::before{animation:none}
}

/* ===== Trust badges row ===== */
.trust-row{
  background:#fff;padding:2.2rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)
}
.trust-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;align-items:stretch
}
.trust-item{
  display:flex;gap:.9rem;align-items:center;padding:.6rem
}
.trust-item .ti-ico{
  flex-shrink:0;width:54px;height:54px;border-radius:14px;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-soft) 100%);
  display:flex;align-items:center;justify-content:center;color:var(--dark);font-size:1.4rem;
  box-shadow:0 8px 18px -8px rgba(219,158,48,.6)
}
.trust-item h5{font-family:var(--font-display);margin:0 0 .15rem;font-size:.95rem;color:var(--dark)}
.trust-item p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.45}
@media(max-width:900px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.trust-grid{grid-template-columns:1fr}}

/* ===== Brand strip (logos we work with / press) ===== */
.brand-strip{padding:2rem 0;background:var(--cream)}
.brand-strip .label{
  text-align:center;color:var(--muted);font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:1.2rem;font-weight:700
}
.brand-strip .logos{
  display:flex;flex-wrap:wrap;gap:2.2rem 3rem;justify-content:center;align-items:center;
  font-family:var(--font-display);font-size:1.15rem;color:var(--green-dark);opacity:.7
}
.brand-strip .logos > span{
  display:inline-flex;align-items:center;gap:.5rem;transition:.3s;cursor:default
}
.brand-strip .logos > span:hover{opacity:1;color:var(--green);transform:translateY(-2px)}
.brand-strip .logos i{color:var(--gold);font-size:1.4rem}

/* ===== FAQ accordion (shared component) ===== */
.faq-wrap{max-width:820px;margin:0 auto}
.faq-item{
  background:#fff;border:1px solid var(--border);border-radius:12px;
  margin-bottom:.7rem;padding:0 1.4rem;transition:.25s
}
.faq-item[open]{border-color:var(--gold);box-shadow:0 8px 22px -10px rgba(20,40,30,.18)}
.faq-item summary{
  cursor:pointer;padding:1.1rem 0;font-family:var(--font-display);font-size:1rem;
  color:var(--dark);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"\f067";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--gold);
  font-size:.8rem;width:30px;height:30px;border-radius:50%;background:var(--cream);
  display:inline-flex;align-items:center;justify-content:center;transition:.3s;flex-shrink:0
}
.faq-item[open] summary::after{content:"\f068";background:var(--green);color:#fff}
.faq-item > p{
  margin:0;padding:0 0 1.2rem;color:#3a423d;font-size:.93rem;line-height:1.75;
  border-top:1px dashed var(--border);padding-top:1rem
}

/* ===== Form status messages ===== */
.form-msg{
  padding:1rem 1.2rem;border-radius:10px;margin-bottom:1.2rem;
  display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;line-height:1.5
}
.form-msg.success{background:#eaf5ee;color:var(--green-dark);border-left:4px solid var(--green)}
.form-msg.error{background:#fdecec;color:#9b2424;border-left:4px solid #c83a3a}
.form-msg i{margin-top:.2rem}

/* ===== 404 page ===== */
.err-wrap{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:4rem 1rem;text-align:center}
.err-inner{max-width:580px}
.err-code{
  font-family:'Cinzel Decorative',serif;font-size:clamp(6rem,16vw,11rem);
  line-height:1;font-weight:900;color:transparent;
  background:linear-gradient(135deg,var(--green),var(--gold));-webkit-background-clip:text;background-clip:text;
  text-shadow:0 12px 30px rgba(28,142,90,.18);margin-bottom:.5rem
}
.err-inner h2{font-family:var(--font-display);font-size:1.8rem;margin:.4rem 0 .8rem}
.err-inner p{color:var(--muted);font-size:1.02rem;margin-bottom:1.8rem}
.err-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}