/* ============================================================
   ABMIRO — SHARED PAGE STYLES
   (ported from the per-page inline <style> blocks in the
   original static site; kept global so every page can use them)
   ============================================================ */

html, body { overflow-x: hidden; }
body { overflow-y: auto; }

/* ---- Hero / mockups ---- */
.hero-image-mockup {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.08);
}
.product-image-card {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.product-image-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.product-image-card:hover img { transform: scale(1.04); }
.product-image-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,10,20,0.9) 30%, transparent 70%);
}
.location-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* ---- Timeline (home) ---- */
.timeline-line {
  position: absolute;
  left: 1.5rem;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #1863DC, #00AAFF, transparent);
}
.timeline-dot {
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #1863DC, #00AAFF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: white;
  z-index: 1;
  box-shadow: 0 0 20px rgba(24,99,220,0.4);
}

/* ---- Floating animation ---- */
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-delayed { animation: float 6s ease-in-out 2s infinite; }
@keyframes float {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

/* ---- Hero pill (home, contact, discuss) ---- */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: 100px;
  background: rgba(24,99,220,0.12);
  border: 1px solid rgba(24,99,220,0.3);
  font-size: 0.78rem;
  font-weight: 600;
  color: #93c5fd;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.hero-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-cyan);
  animation: pulse-dot 2s infinite;
}

/* ---- Scroll indicator ---- */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ---- Logos ---- */
.client-logo-img {
  height: 32px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.client-logo-img:hover { opacity: 0.9; }
.product-logo-nav {
  height: 22px;
  width: auto;
  object-fit: contain;
}

/* ============================================================
   WORDPRESS / ELEMENTOR INTEGRATION FIXES
   ============================================================ */

/* Let the child theme's dark background show through Elementor */
body, .elementor-kit-default { background-color: var(--bg-primary); }

/* Hello Elementor full-width template: remove default content padding so
   our full-bleed sections sit flush under the fixed navbar */
.page-content > .elementor,
.site-main > .elementor { width: 100%; }

/* Push content below the fixed navbar on interior pages that start with a
   plain section (the hero handles its own top padding) */
.abmiro-has-navbar-offset { padding-top: var(--nav-height, 80px); }

/* ------------------------------------------------------------------
   FULL-BLEED ELEMENTOR SECTIONS
   The ported markup is full-width by design (each <section> spans the
   viewport; the inner .container-custom caps content at 1200px). Elementor
   wraps every section in a "boxed" container (~1140px) and adds default
   section/column padding, which left the dark page background showing on
   both sides. Strip those so our sections reach edge to edge.
   ------------------------------------------------------------------ */
.elementor-page .elementor-section > .elementor-container { max-width: 100% !important; }
.elementor-page .elementor-section { padding-left: 0 !important; padding-right: 0 !important; }
.elementor-page .elementor-column > .elementor-element-populated,
.elementor-page .elementor-column > .elementor-column-wrap { padding: 0 !important; }
.elementor-page .elementor-widget-wrap { padding: 0 !important; }
.elementor-page .elementor-widget-html > .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
/* Make sure the theme content area itself never constrains width */
.elementor-page .site-main,
.elementor-page .page-content,
.elementor-page .e-con,
.elementor-page .e-con-inner { max-width: 100% !important; }

/* Admin bar shouldn't cover the fixed nav */
.admin-bar .navbar { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .navbar { top: 46px; }
}

/* ============================================================
   NINJA FORMS — dark theme to match the Abmiro design system
   ============================================================ */
.nf-form-cont { color: var(--text-primary); }
.nf-form-cont .nf-form-title,
.nf-form-cont .nf-before-form-content { display: none; }

.nf-form-cont .nf-field-label label,
.nf-form-cont .nf-field-label .label {
  color: var(--text-secondary) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem !important;
}
.nf-form-cont .nf-field-label .ninja-forms-req-symbol { color: var(--accent-cyan); }

.nf-form-cont input[type="text"],
.nf-form-cont input[type="email"],
.nf-form-cont input[type="tel"],
.nf-form-cont input[type="url"],
.nf-form-cont input[type="number"],
.nf-form-cont input[type="date"],
.nf-form-cont textarea,
.nf-form-cont select,
.nf-form-cont .ninja-forms-field {
  width: 100% !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 0.875rem 1.125rem !important;
  color: var(--text-primary) !important;
  font-size: 0.9rem !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: none !important;
  transition: all 0.2s ease;
}
.nf-form-cont select { cursor: pointer; }
.nf-form-cont option { color: #111; }

.nf-form-cont input:focus,
.nf-form-cont textarea:focus,
.nf-form-cont select:focus {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px rgba(24,99,220,0.1) !important;
  background: rgba(255,255,255,0.06) !important;
  outline: none !important;
}
.nf-form-cont ::placeholder { color: var(--text-secondary) !important; opacity: 1; }

/* Radio / checkbox lists */
.nf-form-cont .nf-field-element ul { display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 0; margin: 0; list-style: none; }
.nf-form-cont .nf-field-element li {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.65rem 1rem;
}
.nf-form-cont .nf-field-element li label { color: var(--text-primary) !important; cursor: pointer; }

/* Submit button -> brand gradient */
.nf-form-cont input[type="button"],
.nf-form-cont .submit-wrap input {
  width: 100% !important;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 1rem 1.75rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  cursor: pointer;
  transition: all 0.3s ease;
}
.nf-form-cont input[type="button"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(24,99,220,0.4) !important;
}

/* Messages */
.nf-form-cont .nf-error-msg,
.nf-form-cont .nf-error.field-wrap .nf-field-element :is(input,textarea,select) { border-color: #ef4444 !important; }
.nf-form-cont .nf-error-msg { color: #fca5a5 !important; font-size: 0.8rem; }
.nf-response-msg, .nf-form-cont .nf-response-msg { color: var(--text-primary); }
.nf-form-cont .nf-field-container { margin-bottom: 1.25rem; }


/* ============================================================
   BRAND LOGO IMAGE (replaces the text logo in header & footer)
   ============================================================ */
.navbar .flex.items-center.justify-between > a{
  width:158px;height:42px;
  background:url("https://dev52.abmiroapps.com/wp-content/uploads/2026/05/abmiro-logo.png") no-repeat left center;
  background-size:contain;
  flex:0 0 auto;
}
.navbar .flex.items-center.justify-between > a > span{display:none !important;}
footer .footer-grid .mb-4 > span{
  display:inline-block !important;
  width:140px;height:34px;
  background:url("https://dev52.abmiroapps.com/wp-content/uploads/2026/05/abmiro-logo.png") no-repeat left center;
  background-size:contain;
}
footer .footer-grid .mb-4 > span > span{display:none !important;}


/* WHITE LOGO FILTER */
.navbar .flex.items-center.justify-between > a,
footer .footer-grid .mb-4 > span { filter: brightness(0) invert(1); }