/* ==========================================================================
   Alfa Treks – Custom UI Layer (on top of Bootstrap)
   - Балансирана тъмна тема, акценти с неонов градиент
   - Еднаква визия на секции и карти
   - Без натрапчиви анимации; уважаваме prefers-reduced-motion
   ========================================================================== */

/* 🎨 Палитра и токени */
:root{
  --at-bg: #0b0f1a;          /* canvas */
  --at-surface: #0f1526;     /* секции / панели */
  --at-surface-2:#121a2c;    /* вътрешни карти */
  --at-text: #e8eefc;
  --at-muted: #9aa6bf;
  --at-divider: rgba(255,255,255,.08);

  --at-primary: #7b5cff;
  --at-primary-2: #02d3f8;
  --at-accent: #ff7ad6;

  --at-radius: 16px;
  --at-shadow-1: 0 14px 30px rgba(0,0,0,.28);
  --at-shadow-2: 0 24px 60px rgba(0,0,0,.35);
}

/* ✅ Bootstrap var overrides (не чупим нищо) */
:root{
  --bs-body-bg: var(--at-bg);
  --bs-body-color: var(--at-text);
  --bs-heading-color: var(--at-text);
  --bs-link-color: #9fb4ff;
  --bs-link-hover-color: #5fe6ff;
  --bs-border-color: var(--at-divider);
}

/* 🧱 База */
html, body{ height:100%; }
body{
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--at-text);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(127, 104, 228, 0.18), transparent 60%),
    radial-gradient(900px 600px at 95% 0%, rgba(2,211,248,.12), transparent 60%),
    linear-gradient(#0b0f1a, #343f5e); /* основа */
  background-attachment: fixed;
  overflow-x: hidden;
}
a{ text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

/* 🌈 Акценти */
.text-gradient{
  background: linear-gradient(90deg, var(--at-primary), var(--at-primary-2) 60%, var(--at-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.bg-gradient-primary-to-secondary{
  background-image: linear-gradient(90deg, var(--at-primary), var(--at-primary-2)) !important;
  color:#fff !important;
}

/* 🧭 Navbar / Header bar */
.navbar.sticky-top.bg-white{
  background: rgba(17,24,39,.78) !important; /* стъкло */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--at-divider);
  box-shadow: var(--at-shadow-1);
}
.navbar .navbar-brand img{ filter: drop-shadow(0 6px 20px rgba(123,92,255,.35)); }
.navbar-light .navbar-nav .nav-link{
  color: rgba(232,238,252,.9) !important;
  font-weight: 600;
  position: relative;
  transition: color .15s ease;
}
.navbar-light .navbar-nav .nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg, var(--at-primary), var(--at-primary-2));
  transform: scaleX(0); transform-origin:left; transition: transform .18s ease;
}
.navbar-light .navbar-nav .nav-link:hover{ color:#fff !important; }
.navbar-light .navbar-nav .nav-link:hover::after{ transform: scaleX(1); }
.navbar-light .navbar-toggler{ border-color: rgba(255,255,255,.35); }
.navbar-light .navbar-toggler-icon{ filter: invert(1) brightness(1.3); }

/* 🌍 Езикови бутони (override на inline стила) – изчистени pill */
#englishBtn, #bulgarianBtn{
  background-image: none !important;
  background-color: transparent !important;
  color: var(--at-text) !important;
  border: 1px solid rgba(255,255,255,.28);
  padding:.35rem .7rem; line-height:1; border-radius:999px;
  font-weight: 700; letter-spacing:.35px; text-transform: uppercase;
}
#englishBtn:hover, #bulgarianBtn:hover{
  border-color: rgba(255,255,255,.5);
  background-color: rgba(255,255,255,.06) !important;
}
#englishBtn:focus-visible, #bulgarianBtn:focus-visible{
  outline:2px solid var(--at-primary-2); outline-offset:2px;
}

/* 🦸 HERO – спокоен фон + силен текст, без дразнещ hover по снимката */
header.py-5{
  position: relative;
  background:
    radial-gradient(700px 380px at 12% 10%, rgba(123,92,255,.18), transparent 70%),
    radial-gradient(900px 420px at 100% 0%, rgba(2,211,248,.12), transparent 75%);
}
header.py-5 .badge.bg-gradient-primary-to-secondary{
  border:0; box-shadow: 0 10px 24px rgba(123,92,255,.22);
}
.profile .profile-img{
  border-radius: var(--at-radius);
  box-shadow: var(--at-shadow-2);
  transition: none;                  /* без hover „подскачане“ */
}

/* 📦 Секции/панели с предвидим ритъм */
section{ position: relative; }
.bg-light{
  background: var(--at-surface) !important;
  border-top: 1px solid var(--at-divider);
  border-bottom: 1px solid var(--at-divider);
}
.bg-light > .container{
  background: var(--at-surface-2);
  border: 1px solid var(--at-divider);
  border-radius: var(--at-radius);
  backdrop-filter: blur(6px);
  padding-block: clamp(1.25rem, 2vw, 2rem);
}

/* 🧊 Карти / плочки / box-ове (използвани в предимства и портфолио) */
.border.rounded-3{
  background: rgba(255,255,255,.03);
  border-color: var(--at-divider) !important;
  border-radius: 14px !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.border.rounded-3:hover{
  transform: translateY(-2px);
  box-shadow: var(--at-shadow-1);
  border-color: rgba(255,255,255,.22) !important;
}

/* 📝 Типография в секциите */
.lead.text-muted, .text-muted{ color: var(--at-muted) !important; }
h1,h2,h3,h4{ letter-spacing:.2px; }

/* 🔘 Бутони – по-модерни */
.btn.bg-gradient-primary-to-secondary{
  border:0; box-shadow: 0 12px 28px rgba(123,92,255,.25);
}
.btn.btn-outline-secondary{
  border-color: rgba(255,255,255,.28); color: var(--at-text);
}
.btn.btn-outline-secondary:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.45);
}

/* 🏁 CTA банер – четим и „сочен“ */
.p-4.bg-gradient-primary-to-secondary,
.p-5.bg-gradient-primary-to-secondary{
  border-radius: var(--at-radius) !important;
  box-shadow: var(--at-shadow-2);
}

/* 👣 Footer – същата „стъклена“ лента като navbar */
footer.bg-white{
  background: rgba(17,24,39,.78) !important;
  border-top: 1px solid var(--at-divider);
  backdrop-filter: blur(10px);
  color: var(--at-text);
}
footer.bg-white a.small{ color: var(--at-muted); }
footer.bg-white a.small:hover{ color: #dee6ff; }

/* 🍪 Cookie блок – визуално съвместим */
.modal__overlay{ backdrop-filter: blur(2px); }
.card.mb-5.border-bottom .card-body h5{ letter-spacing:.2px; }

/* 🫧 Декоративните SVG „dots“ – приглушени */
.dots-2 svg, .dots-4 svg{ opacity:.12; }

/* 👀 Умерено reveal при зареждане (ако има елементи с [data-reveal]) */
[data-reveal]{ opacity:0; transform: translateY(14px); }
[data-reveal].is-visible,
[data-reveal]:where(:not(.is-visible)){ /* graceful, ако JS не ги пипа */
  opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease;
}

/* ♿ По-малко движение при предпочитание */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

/* 🧩 Респонсив дреболии */
@media (max-width: 991.98px){
  .navbar .navbar-brand span{ display:none !important; }
}
@media (min-width: 1400px){
  header.py-5{ padding-top: 5rem !important; padding-bottom: 5rem !important; }
}

/* =========================
   PATCH: Consistent Services UI
   ========================= */

/* Палитра (тъмна основа + 2 surfaces) */
:root{
  --svc-canvas:  #0c1322;
  --svc-panel:   #121a2c;   /* фон на секции (.bg-light и hero контейнера) */
  --svc-surface: #0f1726;   /* карти, акордeон, вътрешни блокове */
  --svc-text:    #eaf2ff;
  --svc-muted:   #9fb0c7;
  --svc-divider: rgba(255,255,255,.10);
}

/* 1) Еднакъв фон на страницата */
body{
    background:
    radial-gradient(1200px 600px at 15% -10%, rgba(127, 104, 228, 0.18), transparent 60%),
    radial-gradient(900px 600px at 95% 0%, rgba(2,211,248,.12), transparent 60%),
    linear-gradient(#0b0f1a, #343f5e); /* основа */
  color: var(--svc-text);
}

/* 2) Navbar/Footer – стъклени ленти */
.navbar.bg-white,
footer.bg-white{
  background: rgba(18,26,44,.86) !important;
  backdrop-filter: blur(8px);
  border-color: var(--svc-divider) !important;
}
.navbar .nav-link{ color: #e6eeff !important; }
.navbar .nav-link.active{ color: #fff !important; }
.navbar .nav-link::after{ background: linear-gradient(90deg,#7b5cff,#02d3f8); }

/* 3) HERO (services) – card контейнер с висок контраст */
header.py-5{
  background: none !important;
  padding-top: clamp(2rem, 5vw, 3.5rem) !important;
}
header.py-5 .container > .text-center,
header.py-5 .container > .text-start{
  background: var(--svc-panel);
  border: 1px solid var(--svc-divider);
  border-radius: 18px;
  padding: clamp(1rem, 3vw, 2rem);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
header.py-5 .badge{
  box-shadow: 0 8px 22px rgba(123,92,255,.25);
}

/* mini cards в hero */
header.py-5 .card{
  background: var(--svc-surface) !important;
  border: 1px solid var(--svc-divider) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
header.py-5 .card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.35) !important;
}

/* 4) Всички секции с .bg-light → еднаква „panel“ повърхност */
section.bg-light{
  background: var(--svc-panel) !important;
  border-top: 1px solid var(--svc-divider);
  border-bottom: 1px solid var(--svc-divider);
}
section.bg-light > .container{
  background: transparent !important; /* да не наслагваме още един фон */
}

/* 5) Карти/плочки навсякъде */
.card{
  background: var(--svc-surface);
  border: 1px solid var(--svc-divider);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.border.rounded-3{
  background: var(--svc-surface);
  border-color: var(--svc-divider) !important;
  border-radius: 14px !important;
}

/* 6) Типография и контраст */
h1,h2,h3,h4{ color: #f1f6ff; letter-spacing:.2px; }
.lead, .text-muted{ color: var(--svc-muted) !important; }

/* 7) Tech logos лентата – по-чисто и центрирано */
section .row.g-4.align-items-center.justify-content-center img{
  filter: saturate(.95) brightness(1.03);
  opacity:.92;
  max-height: 64px;
  object-fit: contain;
}

/* 8) Pricing/Пакети – равни карти и силен CTA */
section .card .btn.bg-gradient-primary-to-secondary{
  box-shadow: 0 14px 34px rgba(123,92,255,.32);
}
section .card .btn.btn-outline-secondary{
  color: var(--svc-text);
  border-color: rgba(255,255,255,.28);
}
section .card .btn.btn-outline-secondary:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.45);
}

/* 9) Отзиви – по-четливи кавички и текст */
section .bi-quote{ color: #7b5cff; opacity:.8; }
section .border.rounded-3.p-4 p{ color:#dfe8ff; }

/* 10) FAQ (Bootstrap accordion) – тъмен вариант */
.accordion-item{
  background: var(--svc-surface);
  border: 1px solid var(--svc-divider);
  border-radius: 14px !important;
  overflow: hidden;
}
.accordion-button{
  background: var(--svc-surface);
  color: var(--svc-text);
  box-shadow: none !important;
}
.accordion-button:not(.collapsed){
  color:#fff;
  background: linear-gradient(180deg, rgba(123,92,255,.18), rgba(15,23,38,1));
}
.accordion-body{ color: var(--svc-muted); }

/* 11) CTA банерите – еднакви ръбове и сенки */
.bg-gradient-primary-to-secondary{
  border-radius: 18px !important;
  box-shadow: 0 28px 60px rgba(0,0,0,.4);
}

/* 12) Езиков бутон – изчистен pill */
#englishBtn{
  background: transparent !important;
  color: var(--svc-text) !important;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px; padding:.35rem .7rem; font-weight:700; letter-spacing:.3px;
}
#englishBtn:hover{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.45); }

/* Ясен и четим placeholder */
::placeholder {
  color: #495057 !important; /* тъмен сив */
  opacity: 1 !important;     /* премахва полупрозрачността */
}

/* Поддръжка за различни браузъри */
::-webkit-input-placeholder { color: #495057 !important; opacity: 1 !important; }
:-ms-input-placeholder      { color: #495057 !important; opacity: 1 !important; }
::-ms-input-placeholder     { color: #495057 !important; opacity: 1 !important; }

/* Подобрена четимост на label във form-floating */
.form-floating label {
  color: #212529 !important;   /* тъмен текст */
  font-weight: 500;            /* леко удебелен */
  opacity: 0.9;                /* премахваме прекалената прозрачност */
}

/* При фокус на полето – подсилваме контраста още */
.form-floating input:focus ~ label,
.form-floating, .form-text textarea:focus ~ label {
  color: #fd8d0d !important;   /* Bootstrap primary (син) или твой brand цвят */
  opacity: 1;
}

.form-text {
  color: #fd8d0d !important;  
  opacity: 1;
}

.h4 { 
  font-weight: 600 !important;
     letter-spacing: .2px !important; 
     color: #dfdfdf !important; 
    }

    /* COOKIE MODAL – изкарай го от потока */
.cookie-consent { position: fixed; inset: 0; z-index: 1060; pointer-events: none; }
.cookie-consent .modal__overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  pointer-events: auto;
}
.cookie-consent .modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; /* приеми кликове само върху съдържанието */
}
.cookie-consent .modal .card-body { 
  pointer-events: auto; 
  max-width: 640px; width: calc(100% - 4rem) !important;
  background: #2c2c2c; border-radius: 16px; box-shadow: 0 10px 30px rgba(167, 167, 167, 0.575);
}

/* премахни „бутане“ от стария wrapper, ако остане */
.cookie-consent-wrapper { margin: 0 !important; border: 0 !important; }

/* responsive & safe-area */
.cookie-consent, .cookie-consent-modal { --pad: max(8px, env(safe-area-inset-left), env(safe-area-inset-right)); }
.cookie-consent .modal, .cookie-consent-modal .modal {
  padding: max(8px, env(safe-area-inset-top)) var(--pad) max(8px, env(safe-area-inset-bottom)) var(--pad);
}
.cookie-consent .modal .card-body, .cookie-consent-modal .modal .card-body{
  padding: 1rem 1.25rem;
  width: min(640px, calc(100vw - 4*var(--pad))) !important;
  max-height: min(88dvh, 640px) !important;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  color:#f5f5f5;
}
.cookie-consent .modal .card-body p,
.cookie-consent-modal .modal .card-body p{ color:#e9e9e9; }
 .modal {
    max-height: 18em !important; /* ограничение на височината */
     border-color:#34c759;
  }

/* мобилни – full width + стек бутони */
@media (max-width: 575.98px){
  .cookie-consent .modal .card-body,
  .cookie-consent-modal .modal .card-body{
    width: 100%;
    max-width: none;
    border-radius: 12px;
    padding: .875rem 1rem;
    font-size: .95rem;
  }
  .cookie-consent .modal .card-body .d-flex,
  .cookie-consent-modal .modal .card-body .d-flex{
    flex-direction: column !important;
    gap: .75rem !important;
  }
  .cookie-consent .modal .card-body .btn,
  .cookie-consent-modal .modal .card-body .btn{
    width: 100%;
  }
  .modal {
    max-height: 26em !important; /* ограничение на височината */
  }
}

/* ниски екрани / landscape */
@media (max-height: 520px){
  .cookie-consent .modal,
  .cookie-consent-modal .modal{ align-items: flex-start; }
  .cookie-consent .modal .card-body,
  .cookie-consent-modal .modal .card-body{
    margin-top: .5rem;
    max-height: calc(100dvh - 5rem);
  }
   .modal {
    max-height: 26em !important; /* ограничение на височината */
  }
}

/* бутони – по-добър контраст */
.cookie-consent .modal .card-body a.btn.btn-outline-success,
.cookie-consent-modal .modal .card-body a.btn.btn-outline-success{
  border-color:#34c759; color:#34c759;
}
.cookie-consent .modal .card-body a.btn.btn-outline-success:hover,
.cookie-consent-modal .modal .card-body a.btn.btn-outline-success:hover{
  background:#34c759; color:#0d0d0d;
}