/* ═══════════════════════════════════════════════
   Technogrips Vienna – Shared Stylesheet
   ═══════════════════════════════════════════════ */

@import url('/assets/css/fonts.css');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
* { font-family: 'Oswald', system-ui, sans-serif; }
html { scroll-behavior: smooth; scroll-padding-top: 150px; }
body { background: #020817; color: #fff; overflow-x: hidden; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0f1e; }
::-webkit-scrollbar-thumb { background: #e5c500; border-radius: 3px; }

/* ── Utility ── */
.glass         { background: rgba(15,23,41,0.6); backdrop-filter: blur(20px); border: 1px solid rgba(229,197,0,0.12); }
.glass-light   { background: rgba(30,45,71,0.5); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.08); }
.gold-gradient { background: linear-gradient(135deg,#e5c500,#ccb000); }
.text-gold-gradient { background: linear-gradient(135deg,#ebd600,#e5c500,#ccb000); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-bg       { background: radial-gradient(ellipse at top,#1e2d47 0%,#0a0f1e 50%,#020817 100%); }
.grain         { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); }

/* ── Scroll Animations ── */
.observe       { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.observe.visible { opacity: 1; transform: translateY(0); }
.observe-left  { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.observe-left.visible { opacity: 1; transform: translateX(0); }
.observe-right { opacity: 0; transform: translateX(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.observe-right.visible { opacity: 1; transform: translateX(0); }

/* ── Buttons ── */
.btn-gold    { background: linear-gradient(135deg,#e5c500,#ccb000); color:#000; font-weight:700; transition: all 0.3s; display:inline-flex; align-items:center; }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(229,197,0,0.4); filter: brightness(1.1); }
.btn-outline { border: 1px solid rgba(229,197,0,0.5); color:#e5c500; background:transparent; transition: all 0.3s; display:inline-flex; align-items:center; }
.btn-outline:hover { background: rgba(229,197,0,0.1); border-color:#e5c500; transform: translateY(-2px); }
.btn-ghost   { color: #9ca3af; background: transparent; border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s; display:inline-flex; align-items:center; }
.btn-ghost:hover { color:#fff; border-color: rgba(255,255,255,0.3); }

/* ── Forms ── */
.form-input { background: rgba(10,15,30,0.8); border: 1px solid rgba(229,197,0,0.2); color:#fff; transition: border-color 0.3s, box-shadow 0.3s; width:100%; }
.form-input:focus { outline:none; border-color:#e5c500; box-shadow: 0 0 0 3px rgba(229,197,0,0.15); }
.form-input::placeholder { color: rgba(156,163,175,0.6); }

/* ── Section Labels ── */
.section-label { display:inline-flex; align-items:center; gap:8px; color:#e5c500; font-size:0.8rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; margin-bottom:1rem; }
.section-label span.line { width:32px; height:1px; background:#e5c500; }

/* ── Cards ── */
.card-hover { transition: transform 0.4s ease, box-shadow 0.4s ease; }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(229,197,0,0.15); }

/* ── Modal ── */
.modal-backdrop { background: rgba(2,8,23,0.92); backdrop-filter: blur(8px); }

/* ── Toast ── */
.success-toast { background: linear-gradient(135deg,#065f46,#047857); border:1px solid #10b981; }
.error-toast   { background: linear-gradient(135deg,#7f1d1d,#991b1b); border:1px solid #ef4444; }

/* ── Nav Active ── */
.nav-active { color: #e5c500 !important; }

/* ── Navbar Header Responsiveness (Strict Mobile/Desktop Visibility) ── */
.hidden {
  display: none !important;
}

.desktop-nav,
#langToggle,
.desktop-only-btn,
#desktopCtaBtn,
#langDropdownContainer {
  display: none !important;
}

@media (min-width: 1024px) {
  .desktop-nav,
  .lg\:flex {
    display: flex !important;
  }
  .lg\:block {
    display: block !important;
  }
  .lg\:inline-flex {
    display: inline-flex !important;
  }
  .lg\:hidden {
    display: none !important;
  }
  #langToggle,
  .desktop-only-btn,
  #desktopCtaBtn {
    display: inline-flex !important;
  }
  #langDropdownContainer {
    display: block !important;
  }
}

/* ── Navbar Smooth Hide on Mobile Scroll > 300px ── */
#navbar {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease, box-shadow 0.4s ease;
}

@media (max-width: 1023px) {
  #navbar.nav-hidden {
    transform: translateY(-100%) !important;
  }
}

/* ── Footer full-width ── */
#footer-container { display: block; width: 100% !important; max-width: 100% !important; }
footer            { display: block; width: 100% !important; max-width: 100% !important; }

/* ── Mobile Floating Contact Bar (Under Footer / Bottom Sticky) ── */
.mobile-contact-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: rgba(2, 8, 23, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(229, 197, 0, 0.25);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.7);
  padding: 0.625rem 0.75rem;
  padding-bottom: max(0.625rem, env(safe-area-inset-bottom));
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  display: block;
}

.mobile-contact-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 767px) {
  footer {
    padding-bottom: 5.5rem !important;
  }
}

@media (min-width: 768px) {
  .mobile-contact-bar {
    display: none !important;
  }
}

/* ── Page Hero (sub-pages) ── */
.page-hero { padding: 12rem 0 5rem; background: radial-gradient(ellipse at top left, #1e2d47 0%, #0a0f1e 60%, #020817 100%); position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); }

/* ── Breadcrumb ── */
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:0.8rem; color:#6b7280; margin-bottom:1.5rem; }
.breadcrumb a { color:#9ca3af; text-decoration:none; transition:color 0.2s; }
.breadcrumb a:hover { color:#e5c500; }
.breadcrumb .sep { color:#374151; }
.breadcrumb .current { color:#e5c500; }

/* ── Spec Grid ── */
.spec-card { background: rgba(10,15,30,0.6); border: 1px solid rgba(229,197,0,0.15); border-radius:1rem; padding:1.25rem; text-align:center; transition: border-color 0.2s, transform 0.2s; }
.spec-card:hover { border-color: rgba(229,197,0,0.4); transform: translateY(-3px); }
.spec-value { font-size:1.75rem; font-weight:800; color:#e5c500; line-height:1; }
.spec-label { font-size:0.7rem; color:#6b7280; margin-top:4px; text-transform:uppercase; letter-spacing:0.1em; }

/* ── Tab System ── */
.tab-btn   { transition: all 0.2s; cursor:pointer; }
.tab-active { background: linear-gradient(135deg,#e5c500,#ccb000) !important; color:#000 !important; }

/* ── Animations (inline definitions for Tailwind compat) ── */
@keyframes fadeUp    { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pulseGold { 0%,100%{box-shadow:0 0 0 0 rgba(229,197,0,0.4)} 50%{box-shadow:0 0 20px 8px rgba(229,197,0,0.2)} }

.animate-fade-up   { animation: fadeUp 0.6s ease-out forwards; }
.animate-fade-in   { animation: fadeIn 0.8s ease-out forwards; }
.animate-float     { animation: float 6s ease-in-out infinite; }
.animate-pulse-gold { animation: pulseGold 2s ease-in-out infinite; }

/* ── Mobile Language Switcher Single-Line & National Accent Colors ── */
.lang-btn-mobile {
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.03);
}

.lang-btn-mobile::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 2px;
  opacity: 0.65;
  transition: opacity 0.25s ease, height 0.25s ease;
}

.lang-btn-mobile:hover::after {
  opacity: 1;
  height: 3px;
}

/* 🇩🇪 DE Subtle German Flag Accent (Black / Red / Gold) */
.lang-btn-mobile.lang-btn-de {
  border-color: rgba(229, 197, 0, 0.2);
}
.lang-btn-mobile.lang-btn-de::after {
  background: linear-gradient(90deg, #111111 0%, #dc2626 50%, #eab308 100%);
}

/* 🇬🇧 EN Subtle UK Flag Accent (Navy Blue / White / Red) */
.lang-btn-mobile.lang-btn-en {
  border-color: rgba(59, 130, 246, 0.2);
}
.lang-btn-mobile.lang-btn-en::after {
  background: linear-gradient(90deg, #1e40af 0%, #ffffff 50%, #dc2626 100%);
}

/* 🇫🇷 FR Subtle French Flag Accent (Blue / White / Red) */
.lang-btn-mobile.lang-btn-fr {
  border-color: rgba(99, 102, 241, 0.2);
}
.lang-btn-mobile.lang-btn-fr::after {
  background: linear-gradient(90deg, #2563eb 0%, #ffffff 50%, #ef4444 100%);
}

/* 🇨🇿 CS Subtle Czech Flag Accent (White / Red / Blue) */
.lang-btn-mobile.lang-btn-cs {
  border-color: rgba(239, 68, 68, 0.2);
}
.lang-btn-mobile.lang-btn-cs::after {
  background: linear-gradient(90deg, #1d4ed8 0%, #ffffff 50%, #dc2626 100%);
}

/* Active State */
.lang-btn-mobile.is-active {
  background: linear-gradient(135deg, #e5c500, #ccb000) !important;
  color: #000 !important;
  font-weight: 800 !important;
  border-color: rgba(229, 197, 0, 0.8) !important;
  box-shadow: 0 0 12px rgba(229, 197, 0, 0.35) !important;
}
.lang-btn-mobile.is-active::after {
  display: none !important;
}