/* =============================================================
   EasyImport — Dark Neo‑Glass UI (v4 consolidated)
   Author: ChatGPT (GPT-5 Thinking)
   Notes:
   - Full, self‑contained CSS (заменя изцяло site.css);
   - Тъмен (нечерен) фон, бял/оранжев текст;
   - Фиксове: Tom Select hover → border (без смяна на фон), по‑четливи таблици и заглавия над тях.
   ============================================================= */

/* ---------- CSS Variables ---------- */
:root{
  color-scheme: dark;
  --bg: #0f1216;            /* page background (dark gray, not black) */
  --bg-2:#0c1014;           /* backdrop gradient tail */
  --surface:#151b22;        /* cards, forms */
  --surface-2:#1a212b;      /* elevated surface */
  --text:#f2f5f7;           /* main text (off‑white) */
  --muted:#b3bdc9;          /* secondary text */
  --primary:#ff8a22;        /* accent (orange) */
  --primary-600:#ff6b00;    /* hover/active */
  --primary-700:#e65e00;    /* pressed */
  --ring:rgba(255,138,34,.38); /* focus ring glow */
  --border:rgba(242,245,247,.10);
  --border-strong:rgba(242,245,247,.16);
  --shadow:0 16px 40px rgba(0,0,0,.55);
  --radius:14px; --radius-lg:22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

/* ---------- Base ---------- */
body{
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(255,138,34,.12), transparent 60%),
    radial-gradient(1100px 520px at 90% -10%, rgba(255,209,102,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  color:var(--text);
  line-height:1.7;
}
.container{max-width:1140px; margin:0 auto}
.section{padding:clamp(2.2rem,6vw,5rem) 1rem}
a{color:inherit; text-decoration:none}

::selection{ background:rgba(255,138,34,.35); color:#fff }

.text-muted-ux{ color:var(--muted) }
.hr-fade{ height:1px; border:0; background:linear-gradient(90deg, transparent, var(--border), transparent); margin:2rem 0 }

/* ---------- Utility: glass panel ---------- */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);
  backdrop-filter: blur(10px) saturate(1.05);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}

/* ---------- Navbar ---------- */
.navbar{
  background:linear-gradient(180deg, rgba(12,16,20,.65), rgba(12,16,20,.45))!important;
  backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid var(--border);
  padding:.75rem 1rem;
}
.navbar-brand{
  font-weight:800; letter-spacing:.2px; font-size:1.15rem; color:var(--text)!important;
}
.navbar-brand img{ height:28px; width:auto; margin-right:.5rem }

.navbar .navbar-toggler{ border:1px solid var(--border); border-radius:10px }
.navbar .navbar-toggler:focus{ box-shadow:0 0 0 4px var(--ring) }
.navbar .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(242,245,247,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-nav .nav-link{
  position:relative; font-weight:700; color:var(--text)!important; opacity:.9; margin-left:1rem;
}
.navbar-nav .nav-link::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:linear-gradient(90deg, var(--primary), rgba(255,209,102,1)); border-radius:2px;
  box-shadow:0 0 18px rgba(255,138,34,.55);
  transition:width .25s ease;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{ width:100% }

/* ---------- Hero ---------- */
.hero{ padding:clamp(2rem,5vw,4rem) 1rem; text-align:center }
.hero--gradient{
  background:
    radial-gradient(1200px 420px at 10% -10%, rgba(255,138,34,.14), transparent 60%),
    radial-gradient(1400px 520px at 90% -10%, rgba(255,209,102,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00) 65%);
  border-bottom:1px solid var(--border);
}
.hero h1{ font-size:clamp(2.2rem,4.5vw,3.6rem); line-height:1.12; margin:0 0 .6rem }
.hero p{
        color: var(--muted);     /* същият цвят като в секцията */
          max-width: 820px;
          margin: 0 auto;
}
.hero .actions{ margin-top:1.1rem; display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap }

/* ---------- Links ---------- */
.link{ color:var(--primary); font-weight:700 }
.link:hover{ filter:brightness(1.1); text-shadow:0 0 10px rgba(255,138,34,.35) }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.78rem 1.15rem; font-weight:800; border-radius:12px; border:0;
  background:linear-gradient(90deg, var(--primary), #ff9f3a);
  color:#101418; /* legible on bright button */
  box-shadow:0 10px 18px rgba(2, 6, 23, .35), 0 0 0 1px var(--border-strong) inset;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 14px 24px rgba(0,0,0,.55), 0 0 0 1px var(--primary) inset }
.btn:focus{ outline:0; box-shadow:0 0 0 5px var(--ring) }

.btn.btn-outline{ background:transparent; color:var(--text); border:1px solid var(--border) }
.btn.btn-outline:hover{ background:rgba(255,138,34,.08); border-color:rgba(255,138,34,.45) }

/* ---------- Cards ---------- */
.card{
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border);
  border-radius:18px; padding:1.5rem;
  box-shadow:var(--shadow);
  backdrop-filter:saturate(1.05) blur(6px);
  color:var(--text);
}
.card h1,.card h2,.card h3,.card h4,.card h5{ color:var(--text) }
.card p{ color:rgba(242,245,247,.85) }
.card .text-muted, .card small{ color:var(--muted)!important }
.card-header,.card-body{ background:transparent; border:0 }
.card-header + .card-body{ padding-top:0 }
.card .card-header{ background:transparent!important; border-bottom:1px solid var(--border)!important }
.card .card-title{ color:var(--text) }

/* ---------- Forms ---------- */
.form-shell{ background:linear-gradient(180deg, var(--surface), var(--surface-2)); border:1px solid var(--border); border-radius:16px; padding:1.5rem; box-shadow:var(--shadow) }
.form-label{ color:var(--muted); margin-bottom:.35rem }
.form-control,.form-select,.form-check-input{ background:#0f141a; color:var(--text); border:1px solid var(--border); border-radius:10px; height:44px; padding:6px 12px }
.form-control::placeholder{ color:#8fa0b3 }
.form-control:focus,.form-select:focus{ border-color:rgba(255,138,34,.45); box-shadow:0 0 0 5px var(--ring); outline:0 }
.form-select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23b3bdc9' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .6rem center; background-size:1.1rem }
.form-check-input{ width:1.1rem; height:1.1rem }
.form-check-input:checked{ background-color:var(--primary-600); border-color:var(--primary-600); box-shadow:0 0 0 4px var(--ring) }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color:rgba(239,68,68,.6) }
.was-validated .form-control:valid, .form-control.is-valid { border-color:rgba(16,185,129,.6) }
.invalid-feedback{ color:#ffb4b4 }

/* ---------- Tom Select (dark) ---------- */
.ts-wrapper.form-control,.ts-wrapper.form-select,.ts-control,.ts-dropdown{ background:var(--surface)!important; color:var(--text)!important; border:1px solid var(--border)!important; border-radius:12px!important }
.ts-control{ min-height:42px; padding:6px 10px }
.ts-control input{ color:var(--text)!important }
.ts-dropdown{ background:var(--surface-2)!important; box-shadow:var(--shadow); padding:.35rem }
.ts-dropdown .option{ color:var(--text); border:1px solid transparent; border-radius:10px; margin:2px; padding:.45rem .6rem; position:relative }
/* Hover/active → оранжева рамка, без смяна на фона */
.ts-dropdown .option:hover,.ts-dropdown .option.active{ background:transparent!important; box-shadow: inset 0 0 0 2px rgba(255,138,34,.65); color:var(--text)!important }
.ts-wrapper.focus .ts-control{ border-color:rgba(255,138,34,.45)!important; box-shadow:0 0 0 5px var(--ring)!important }
.ts-wrapper.single .ts-control::after{ border-color:var(--muted) transparent transparent transparent }

/* ---------- Tables ---------- */
/* Нулираме светлите бекграунди на Bootstrap и адаптираме към тъмната тема */
.table{ color:var(--text); border-color:var(--border); background:transparent; width:100% }
.table>:not(caption)>*>*{ background-color:transparent!important; box-shadow: inset 0 -1px 0 var(--border) }
.table thead{ background:linear-gradient(90deg, rgba(255,138,34,.16), rgba(255,209,102,.16)) }
.table thead th{ border-bottom:1px solid var(--border); text-transform:uppercase; letter-spacing:.04em; font-size:clamp(.82rem,.9vw,.9rem); color:#e5e9ef; padding:.75rem; text-align:center }
.table tbody tr{ transition:background .2s ease, box-shadow .2s ease }
.table tbody td{ padding:.75rem; color:rgba(242,245,247,.9); text-align:center }
.table tbody tr:hover{ background:rgba(255,138,34,.06) }
.table-hover>tbody>tr:hover>*{ color:#fff }
.table-striped>tbody>tr:nth-of-type(odd)>*{ background:rgba(255,138,34,.03)!important }

/* Заглавия над таблиците (напр. "До Варна") */
.card>h1,.card>h2,.card>h3,.card>h4{
  position:relative;
  font-weight:900;
  text-align:center;
  letter-spacing:.2px;
  margin:0 0 1rem;
  background:linear-gradient(90deg, var(--primary), #ffd166);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
}
.card .card-title{ font-weight:900; text-align:center; background:linear-gradient(90deg, var(--primary), #ffd166); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; color:transparent }
.card>h3{ font-size:1.35rem }
.card>h4{ font-size:1.15rem }

/* ---------- Alerts */ (tinted for dark) ---------- */
.alert{ border-radius:12px; border:1px solid var(--border); color:#0b0f13 }
.alert-success{ background:linear-gradient(180deg, rgba(16,185,129,.20), rgba(16,185,129,.10)); border-color:rgba(16,185,129,.35); color:#eafff5 }
.alert-danger{ background:linear-gradient(180deg, rgba(239,68,68,.20), rgba(239,68,68,.10)); border-color:rgba(239,68,68,.40); color:#ffecec }
.alert-warning{ background:linear-gradient(180deg, rgba(245,158,11,.22), rgba(245,158,11,.12)); border-color:rgba(245,158,11,.45); color:#fff5e5 }

/* ---------- Footer ---------- */
footer.site-footer{ border-top:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.04), transparent); color:var(--muted) }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important } }

/* ---------- Nice optional extras ---------- */
:focus-visible{ outline:0; box-shadow:0 0 0 5px var(--ring) }
.card,.form-shell{ box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04) }
:target{ scroll-margin-top:80px }

/* === Port grouping improved === */
.table .port-group td {
  background: rgba(255,138,34,.02);
  padding: 1rem 1.2rem; /* по-голям padding */
}

.table .port-group-start td {
  border-top: 2px solid #ffd166; /* по-светъл оранжев */
}

.table .port-group-end td {
  border-bottom: 2px solid #ffd166;
}

/* Лява и дясна рамка за целия блок */
.table .port-group td:first-child {
  border-left: 2px solid #ffd166;
}
.table .port-group td:last-child {
  border-right: 2px solid #ffd166;
}

/* По желание леко заобляне на краищата */
.table .port-group-start td:first-child { border-top-left-radius: 8px; }
.table .port-group-start td:last-child  { border-top-right-radius: 8px; }
.table .port-group-end td:first-child   { border-bottom-left-radius: 8px; }
.table .port-group-end td:last-child    { border-bottom-right-radius: 8px; }

/* Таблични заглавия (thead) без оранжев фон */
.table thead { background: transparent !important; }
.table thead th {
  background: transparent !important;
  font-weight:700;
  color:#e5e9ef;
}
/* === Process steps — readability upgrade === */
.process-steps .row{
  display:grid;                      /* изключваме flex реда на Bootstrap */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;                      /* равномерен отстъп между картите */
}

.process-steps .card{
  padding: 1.4rem 1.2rem;            /* по-голям padding за „въздух“ */
  border-radius: 20px;
  text-align: center;
}

.process-steps .card .fs-1{          /* иконата горе */
  line-height: 1; margin-bottom: .6rem;
}
.process-steps .card .fs-1 i{
  font-size: 2.2rem;                 /* еднакъв, малко по-едър размер */
  opacity: .9;
}

/* Заглавие на стъпката: по-компактно, но стабилно при пренасяне */
.process-steps h5{
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.25;
  margin-bottom: .35rem;
  text-wrap: balance;                /* по-умно пренасяне на редове */
  hyphens: auto;                     /* разрешаваме сричк. при bg език */
}

/* === Process steps — FIX (v2) === */
.process-steps .row{
  display: flex !important;     /* връщаме flex вместо grid */
  flex-wrap: wrap;
  gap: 1.25rem;
}

/* всяка „колона карта“ да е еластична, но не по-тясна от 260px */
.process-steps .row > [class*="col-"]{
  flex: 1 1 clamp(260px, 32%, 340px);
  width: auto !important;
  max-width: none !important;   /* игнорира col-lg-2/col-md-4 процентите */
}

/* самите карти — по-щедър padding и стабилна типография */
.process-steps .card{
  padding: 1.4rem 1.2rem;
  border-radius: 20px;
  text-align: center;
  min-height: 200px;
}

.process-steps .card .fs-1{ line-height:1; margin-bottom:.6rem }
.process-steps .card .fs-1 i{ font-size: 2.1rem; opacity:.9 }

.process-steps h5{
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.28;
  margin-bottom: .35rem;
  white-space: normal;          /* гарантира хоризонтално четене */
  word-break: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.process-steps .card p{
  color: var(--muted);
  line-height: 1.55;
  font-size: .98rem;
  margin: 0;
}

/* На много широки екрани картите да не стават прекалено широки */
@media (min-width: 1440px){
  .process-steps .row > [class*="col-"]{
    flex-basis: clamp(260px, 24%, 360px);
  }
}

.highlight {
  font-weight: 900;
  background: linear-gradient(90deg, var(--primary), #ffd166);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}


/* === Social buttons in footer === */
.btn-social {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--primary), #ff9f3a);
  color: #101418;
  font-size: 1.25rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-social:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.55);
  color: #101418;
}

/* === Social buttons colored by platform === */
.btn-social {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 1.25rem;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.4);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-social:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.55);
  filter: brightness(1.1);
}

/* Специфични цветове */
.btn-social.linkedin  { background: #0A66C2; }
.btn-social.discord   { background: #5865F2; }
.btn-social.mail      { background: #D44638; } /* Gmail червено */
.btn-social.github    { background: #24292e; }

/* Малък бонус: светъл фон при hover */
.btn-social.linkedin:hover  { background:#0a5ab0; }
.btn-social.discord:hover   { background:#4e59d9; }
.btn-social.mail:hover      { background:#bb3b2e; }
.btn-social.github:hover    { background:#1b1f23; }


/* === Equal-height feature cards + sticky buttons === */
.cards-equal [class*="col-"]{
  display: flex;                 /* колоните стават flex-контейнери */
}
.cards-equal [class*="col-"] > .card{
  display: flex;                 /* картата е колона */
  flex-direction: column;
  width: 100%;
}
.cards-equal [class*="col-"] > .card .btn{
  margin-top: auto;              /* избутва бутона в дъното на картата */
  align-self: center;            /* по желание: center; може и flex-start */
}

.navbar-brand img {
  height: 40px; /* нагласи височината */
  width: auto;
  display: block;
}

.hero-logo {
  max-width: 220px;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.55));
  transition: transform .4s ease, box-shadow .3s ease, border .3s ease;
  cursor: pointer;
  border: 4px solid transparent;   /* без рамка по default */
  opacity: 0;                       /* скрито в НАЧАЛОто */
  animation: logoReveal .9s ease .1s forwards; /* fade-in само */
  will-change: transform;
}

.hero-logo:hover {
  transform: scale(1.08) rotate(6deg);        /* завъртане + zoom */
  border: 4px solid var(--primary);           /* оранжева рамка */
  box-shadow: 0 0 20px rgba(255,138,34,0.6);  /* „светене“ */
}

/* само opacity/blur, без transform — не пречи на :hover */
@keyframes logoReveal {
  from { opacity: 0; filter: blur(4px); }
  to   { opacity: 1; filter: blur(0); }
}

.hero .btn {
  margin-top: 1rem;
  min-width: clamp(140px, 60vw, 200px);
}

.hero-intro {
  opacity: 0;
  animation: textReveal .8s ease .2s forwards;
}

@keyframes textReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.navbar-logo {
  height: 40px;
  width: 40px;                   /* квадрат за да стане кръг */
  border-radius: 50%;            /* прави го кръгло */
  object-fit: cover;             /* подрязва правилно */
  border: 3px solid var(--primary); /* постоянна оранжева рамка */
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35));
  transition: transform .3s ease;
}

.navbar-logo:hover {
  transform: scale(1.08) rotate(6deg); /* леко завъртане при hover */
}

/* === Global Reveal Animations (scroll-in) === */
@media (prefers-reduced-motion: no-preference){
  .reveal {
    --reveal-translate: 6px;          /* колко да „повдигнем“ при вход */
    --reveal-duration: .85s;
    --reveal-delay: 0ms;                /* базово, може да се override-ва */
    --reveal-ease: ease;
    opacity: 0;
    transform: translateY(var(--reveal-translate));
    filter: blur(3px);
    transition:
      opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay),
      transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay),
      filter var(--reveal-duration) var(--reveal-ease) var(--reveal-delay);
    will-change: opacity, transform, filter;
  }

  /* Посоки (по избор) */
  .reveal-up    { --reveal-translate: 6px; }
  .reveal-down  { --reveal-translate: -16px; }
  .reveal-left  { --reveal-translate: 0; transform: translateX(-16px); }
  .reveal-right { --reveal-translate: 0; transform: translateX(16px);  }

  /* Когато влезе в изгледа */
  .is-visible {
    opacity: 1;
    transform: translate(0,0);
    filter: blur(0);
  }

  /* Stagger: използва --i = индекс (0,1,2...) */
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
    transition:
      opacity .85s ease calc( var(--i, 0) * 80ms ),
      transform .85s ease calc( var(--i, 0) * 80ms ),
      filter .85s ease calc( var(--i, 0) * 80ms );
  }
  .reveal-stagger.is-visible > * {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Удобни default-и: типични секции и блокове да влизат плавно */
.section .card,
.section .content p,
.section h2, .section h3, .section h4,
.section .container > p.fs-6,
.form-shell,
.table,
.stats .stat,
.about__highlights li {
  /* автоматично ги правим „reveal“ без да пипаш HTML */
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity .85s ease, transform .85s ease, filter .85s ease;
}
.is-visible.section .card,
.is-visible.section .content p,
.is-visible.section h2, .is-visible.section h3, .is-visible.section h4,
.is-visible.section .container > p.fs-6,
.is-visible.section .form-shell,
.is-visible.section .table,
.is-visible.section .stats .stat,
.is-visible.section .about__highlights li {
  opacity: 1; transform: none; filter: none;
}

.section p{
        color: var(--muted);     /* същият цвят като в секцията */
          max-width: 820px;
          margin: 0 auto;
}

/* По-фино: редове на таблици със собствен stagger */
.table.reveal-rows tbody tr{
  opacity: 0; transform: translateY(10px);
  transition: opacity .85s ease, transform .85s ease;
}
.is-visible .table.reveal-rows tbody tr{
  opacity: 1; transform: none;
}

.highlight a {
  color: inherit;            /* наследява цвета от highlight */
  text-decoration: none;     /* маха подчертаването */
  font-weight: inherit;
}

.highlight a:hover {
  text-decoration: underline; /* или каквото искаш като hover ефект */
}

/* === Equal buttons in .actions block === */
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem; /* разстояние между бутоните */
  margin-top: 2rem;
}

.actions .btn {
  flex: 1 1 220px;           /* еднаква ширина (min 220px, расте при нужда) */
  max-width: 260px;          /* лимит, за да не стават прекалено широки */
  padding: 1rem 1.4rem;      /* по-щедър padding */
  font-size: 1.05rem;
}

/* на по-тесни екрани — повече въздух и цял ред */
@media (max-width: 576px) {
  .actions {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;                 /* малко по-малък вертикален интервал */
  }
  .actions .btn,
  .tool.card .btn {
    width: 100%;
    max-width: none;
    padding: .7rem 1rem;         /* надолу от 1.15rem / 1.5rem */
    font-size: .98rem;           /* надолу от 1.1rem */
    border-radius: 12px;
    min-height: 44px;            /* запазваме UX стандарт за touch target */
  }
}

/* === One-line actions layout (force fit on large screens) === */
@media (min-width: 768px) {
  .actions {
    flex-wrap: nowrap;           /* не пренася бутоните */
    justify-content: center;
  }
  .actions .btn {
    flex: 1 1 auto;
    min-width: 160px;
    max-width: 200px;
    white-space: nowrap;         /* не позволява пренасяне на текста */
  }
}

/* === Center text in .tool cards === */
.tool.card {
  text-align: center;
}

.tool.card .card-title {
  margin-bottom: 0.75rem;
}

.tool.card p {
  margin-bottom: 1.5rem;
}

/* =============================================================
   Responsive overrides – 2025-10-17 (добавени най-отдолу)
   Тези правила само „надписват“ горните. Нищо не трием.
   ============================================================= */

/* по-стройни бутони по подразбиране */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1rem;        /* по-малък padding */
  font-weight: 800;
  border-radius: 12px;
}

/* HERO – нека не е твърде широк на телефон */
.hero .btn{
  min-width: clamp(140px, 60vw, 200px);
}

/* Контейнерът с оранжевите плочки (EasyImport / Тарифи / КАЛКУЛАТОР / Контакт) */
.actions{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 1→2→3 колони според ширината */
  gap: .9rem;
}

/* Самите „плочки“ (бутоните) вътре в actions */
.actions .btn{
  display: grid;               /* центрира съдържанието по двете оси */
  place-items: center;
  text-align: center;
  max-width: none;             /* махаме ограничители от други правила */
  padding: clamp(.7rem, 2.6vw, 1rem) clamp(1rem, 3vw, 1.2rem);
  font-size: clamp(.98rem, 2.5vw, 1.05rem);
  border-radius: 12px;
  min-height: clamp(110px, 20vw, 160px);   /* авто-височина: ниско на мобилно, малко по-високо на десктоп */
  line-height: 1.25;
}

/* Таблет и по-тесни лаптопи – още малко по-компактни */
@media (max-width: 768px){
  .actions{
    grid-template-columns: 1fr;   /* по 1 на ред */
    gap: .75rem;
  }
  .actions .btn{
    padding: .7rem 1rem;
    min-height: 120px;
    font-size: .98rem;
  }
}

/* ===== Ultra compact tiles — активира се с .actions--slim ===== */
.actions.actions--slim .btn{
  padding: .5rem .8rem;
  font-size: .92rem;
  border-radius: 10px;
  min-height: clamp(72px, 12vw, 100px);
}
@media (max-width: 768px){
  .actions.actions--slim .btn{
    min-height: 84px;
  }
}

.ts-dropdown { z-index: 2000 !important; }


/* ===== Tables: mobile-safe overflow & spacing (override) ===== */

/* никога да не клипваме съдържанието на картите, в които има таблици */
.card, .form-shell {
  overflow: visible; /* заоблените ъгли остават, но съдържанието не се реже */
}

/* истинско хоризонтално скролване само в контейнера на таблицата */
.table-responsive{
  display: block !important;
  width: 100%;
  overflow-x: auto;             /* ключът */
  -webkit-overflow-scrolling: touch;
}

/* самите таблици запълват ширината и не „избиват“ с излишни марджини */
.table{
  width: 100%;
  margin-bottom: 0;
  border-collapse: separate;    /* пазим твоите рамки/сенки */
  border-spacing: 0;
}

/* компактни клетки на малки екрани, без да стават микроскопични */
@media (max-width: 768px){
  .table th, .table td{
    padding: .55rem .6rem;      /* по-малко от desktop-а */
    font-size: .94rem;
    line-height: 1.35;
    white-space: nowrap;        /* избягваме „раздуване“ по височина */
  }
}

/* ако имаш декоративни „групи“ по редове – да не клипват при заоблени ъгли */
.port-group, .port-group-start, .port-group-end{
  overflow: visible;
}

/* понякога padding-ът на .card „събира“ скрол бара – даваме малко пространство */
.card .table-responsive{
  margin-inline: 0;             /* гарантира, че контейнерът не се реже от вътрешни падинги */
}

/* някои теми слагат overflow:hidden на секцията – забраняваме го */
.section{
  overflow: visible;
}

/* === Tables: fit-in на мобилно (без скалиране/скрол) === */
@media (max-width: 768px){

  /* 1) фиксиран layout и реална ширина */
  .table {
    table-layout: fixed;   /* колоните се изчисляват по ширини, не по съдържание */
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .92rem;     /* по-компактен текст */
  }

  /* 2) компактни клетки */
  .table th,
  .table td{
    padding: .5rem .6rem;
    line-height: 1.35;
    white-space: nowrap;        /* не чупим редове */
    overflow: hidden;
    text-overflow: ellipsis;    /* … при дълъг текст */
  }

  /* 3) разпределение по колони (на три колони ще се побере на 100%) */
  .table thead th:nth-child(1),
  .table tbody td:nth-child(1){ width: 44%; }   /* От пристанище */
  .table thead th:nth-child(2),
  .table tbody td:nth-child(2){ width: 36%; }   /* Вид автомобил */
  .table thead th:nth-child(3),
  .table tbody td:nth-child(3){ width: 20%; text-align: right; } /* Цена */

  /* 4) по-дребни заглавия */
  .card .card-title,
  .card h4.card-title{ font-size: 1rem; }

  /* 5) контейнерът не трябва да клипва */
  .card, .section, .form-shell{ overflow: visible; }

  /* 6) ако имаш групиращи рамки по редове – нека не излизат извън */
  .port-group, .port-group-start, .port-group-end{ overflow: visible; }

  /* 7) ако преди това е имало auto-scroll – забрани го, щом вече се побира */
  .card .table-responsive{ overflow-x: hidden; }
}

/* таблет – две колони една под друга (да не се стесняват излишно) */
@media (max-width: 992px){
  #results .col-md-6{ flex: 1 1 100%; max-width: 100%; }
}

/* ===== Final mobile polish for tables (без рязане в заглавията) ===== */
@media (max-width: 768px){

  /* 1) позволяваме пренасяне на заглавията (thead), за да няма 'OT PRISTA…' */
  .table thead th{
    white-space: normal;          /* пренасяй при нужда */
    overflow: visible;            /* да не клипва */
    text-overflow: clip;          /* без елипсис в thead */
    font-size: .82rem;            /* малко по-дребно заглавие */
    line-height: 1.15;
    padding: .4rem .5rem;
  }

  /* 2) редовете остават компактни, с елипсис при нужда */
  .table tbody td{
    white-space: nowrap;          /* да не набъбват на височина */
    overflow: hidden;
    text-overflow: ellipsis;      /* … ако е дълго */
    font-size: .9rem;             /* леко по-малък текст в тялото */
    padding: .5rem .6rem;
    line-height: 1.35;
  }

  /* 3) фиксираме по-удобни ширини за 3-те колони, за да се побират красиво */
  .table thead th:nth-child(1),
  .table tbody td:nth-child(1){ width: 46%; }   /* От пристанище */
  .table thead th:nth-child(2),
  .table tbody td:nth-child(2){ width: 34%; }   /* Вид автомобил */
  .table thead th:nth-child(3),
  .table tbody td:nth-child(3){
    width: 20%;
    text-align: right;            /* цената вдясно за лесно сканиране */
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
  }

  /* 4) заглавието на картата – една идея по-дребно, да не „бута“ ширината */
  .card .card-title{ font-size: 1rem; }
}

/* таблет: двете таблици една под друга, за да има въздух */
@media (max-width: 992px){
  #results .col-md-6{ flex: 1 1 100%; max-width: 100%; }
}


/* ===== Mobile tables: компактни, без преноси в thead, видима "Цена" ===== */
@media (max-width: 768px){

  /* 0) контейнерът да не клипва */
  .card .table-responsive { overflow-x: hidden; }

  /* 1) фиксиран layout + по-дребен текст */
  .table{
    table-layout: fixed;
    width: 100%;
    font-size: .86rem;           /* общ размер */
    border-collapse: separate;
    border-spacing: 0;
  }

  /* 2) заглавията в един ред (без грозни преноси) */
  .table thead th{
    white-space: nowrap;         /* НЕ пренасяй */
    overflow: hidden;
    text-overflow: ellipsis;     /* ако е тясно, сложи … */
    font-size: .78rem;           /* по-дребно от body-то */
    line-height: 1.1;
    padding: .35rem .45rem;
  }

  /* 3) клетките – компактни, без пренос; само 1-ва и 2-ра да имат елипсис */
  .table tbody td{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: .45rem .5rem;
    line-height: 1.3;
    font-size: .88rem;
  }

  /* 4) пропорции на колоните – пазим "Цена" винаги видима вдясно */
  .table thead th:nth-child(1),
  .table tbody td:nth-child(1){ width: 50%; }   /* От пристанище */
  .table thead th:nth-child(2),
  .table tbody td:nth-child(2){ width: 32%; }   /* Вид автомобил */
  .table thead th:nth-child(3),
  .table tbody td:nth-child(3){
    width: 18%;
    text-align: right;
    padding-right: .35rem;       /* по-малък десен падинг за да се събере */
    overflow: visible;           /* цената да не се реже */
    text-overflow: clip;         /* без … за цифрите */
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
  }

  /* 5) заглавието на картата – малко по-дребно */
  .card .card-title{ font-size: 1rem; }
}

/* още по-тесни екрани (~400px) – щипка допълнително свиване */
@media (max-width: 420px){
  .table{ font-size: .84rem; }
  .table thead th{ font-size: .74rem; }
  .table thead th:nth-child(1), .table tbody td:nth-child(1){ width: 52%; }
  .table thead th:nth-child(2), .table tbody td:nth-child(2){ width: 30%; }
  .table thead th:nth-child(3), .table tbody td:nth-child(3){ width: 18%; }
}

/* === Final ultra-compact table layout (mobile fix) === */
@media (max-width: 768px) {

  .table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.76rem;         /* още по-малък общ текст */
    border-collapse: collapse;
  }

  .table thead th {
    font-size: 0.7rem;          /* заглавията */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.25rem 0.35rem;
    line-height: 1.1;
  }

  .table tbody td {
    font-size: 0.78rem;
    padding: 0.3rem 0.4rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* прецизирани пропорции, за да се побира и цената */
  .table thead th:nth-child(1),
  .table tbody td:nth-child(1) { width: 48%; }   /* От пристанище */
  .table thead th:nth-child(2),
  .table tbody td:nth-child(2) { width: 30%; }   /* Вид автомобил */
  .table thead th:nth-child(3),
  .table tbody td:nth-child(3) {
    width: 22%;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    overflow: visible;
    text-overflow: clip;
    padding-right: 0.3rem;
  }

  .card .card-title { font-size: 0.9rem; }
}

/* супер тесни (~400px и надолу) */
@media (max-width: 400px) {
  .table { font-size: 0.74rem; }
  .table thead th { font-size: 0.68rem; }
  .table tbody td { font-size: 0.76rem; padding: 0.25rem 0.35rem; }
  .table thead th:nth-child(1),
  .table tbody td:nth-child(1) { width: 47%; }
  .table thead th:nth-child(2),
  .table tbody td:nth-child(2) { width: 29%; }
  .table thead th:nth-child(3),
  .table tbody td:nth-child(3) { width: 24%; }
}

/* === Perfect balanced compact tables for mobile === */
@media (max-width: 768px) {

  .table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.74rem;         /* малко по-малък текст */
    border-collapse: collapse;
  }

  .table thead th {
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.25rem 0.35rem;
    line-height: 1.1;
    text-align: center;
  }

  .table tbody td {
    font-size: 0.76rem;
    padding: 0.3rem 0.4rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }

  /* 💡 Ново балансиране на ширините — по-хармонично */
  .table thead th:nth-child(1),
  .table tbody td:nth-child(1) { width: 42%; }   /* От пристанище */
  .table thead th:nth-child(2),
  .table tbody td:nth-child(2) { width: 38%; }   /* Вид автомобил */
  .table thead th:nth-child(3),
  .table tbody td:nth-child(3) {
    width: 20%;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    padding-right: 0.35rem;
  }

  .card .card-title { font-size: 0.9rem; }
}

/* много тесни екрани (~400px и под) */
@media (max-width: 400px) {
  .table { font-size: 0.72rem; }
  .table thead th { font-size: 0.66rem; }
  .table tbody td { font-size: 0.74rem; padding: 0.25rem 0.35rem; }

  /* съвсем леко преразпределение */
  .table thead th:nth-child(1),
  .table tbody td:nth-child(1) { width: 43%; }
  .table thead th:nth-child(2),
  .table tbody td:nth-child(2) { width: 37%; }
  .table thead th:nth-child(3),
  .table tbody td:nth-child(3) { width: 20%; }
}

/* === Balanced compact table layout – final mobile tuning === */
@media (max-width: 768px) {

  .table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.75rem;         /* фин, четлив размер */
    border-collapse: collapse;
  }

  .table thead th {
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.25rem 0.35rem;
    line-height: 1.1;
    text-align: center;
  }

  .table tbody td {
    font-size: 0.76rem;
    padding: 0.3rem 0.4rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }

  /* ⚖️ Финално разпределение – повече място за "Цена" */
  .table thead th:nth-child(1),
  .table tbody td:nth-child(1) { width: 40%; }   /* От пристанище */
  .table thead th:nth-child(2),
  .table tbody td:nth-child(2) { width: 36%; }   /* Вид автомобил */
  .table thead th:nth-child(3),
  .table tbody td:nth-child(3) {
    width: 24%;                /* ↑ по-широко поле за цената */
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    padding-right: 0.4rem;
  }

  /* заглавие на картата */
  .card .card-title { font-size: 0.9rem; }
}

/* още по-тесни (~400px и под) */
@media (max-width: 400px) {
  .table { font-size: 0.73rem; }
  .table thead th { font-size: 0.68rem; }
  .table tbody td { font-size: 0.74rem; padding: 0.25rem 0.35rem; }

  .table thead th:nth-child(1),
  .table tbody td:nth-child(1) { width: 39%; }
  .table thead th:nth-child(2),
  .table tbody td:nth-child(2) { width: 35%; }
  .table thead th:nth-child(3),
  .table tbody td:nth-child(3) { width: 26%; }
}

/* ========== Compact & Centered EasyImport button fix ========== */
.actions {
  display: flex;
  justify-content: center;   /* центриране хоризонтално */
  align-items: center;       /* ако някъде има по-висок контейнер */
}

.btn-small {
  display: inline-block;
  padding: 0.6rem 1.6rem;
  font-size: 1rem;
  border-radius: 10px;
  line-height: 1.1;
  min-height: 44px;
  width: auto;
  max-width: 220px;
  text-align: center;
}

/* Мобилна версия */
@media (max-width: 768px) {
  .actions .btn-small {
    padding: 0.5rem 1.4rem;
    font-size: 0.95rem;
    min-height: 44px !important;
    width: auto;
    max-width: 240px;
    margin: 0 auto;           /* центриране в случай на block display */
  }
}

/* Десктоп – по-широк, но нисък */
@media (min-width: 992px) {
  .actions .btn-small {
    padding: 0.7rem 2.5rem;   /* хоризонтално по-голямо */
    min-height: 48px;         /* правоъгълна форма */
    max-width: none;
  }
}

/* ========== Compact utility за конкретния бутон ========== */
.btn-small{
  padding: .5rem .9rem;
  font-size: .95rem;
  border-radius: 10px;
  min-height: 44px;     /* достатъчно за touch */
  line-height: 1.1;
}

/* Не му позволявай да се разтяга на 100% в .actions */
.actions .btn-small{
  flex: 0 0 auto;       /* да не „расте” по флекс */
  width: auto;          /* не пълна ширина */
  max-width: 220px;     /* твърд горен лимит на десктоп */
}

/* На таблет/мобилен убиваме високите плочки */
@media (max-width: 768px){
  .actions .btn-small{
    min-height: 44px !important; /* надписва по-старото 120px */
    padding: .5rem .9rem;
    width: auto;
    max-width: 240px;
  }
}

/* По желание — още малко по-стегнат на големи екрани */
@media (min-width: 992px){
  .actions .btn-small{ max-width: 200px; }
}

/* ========== Compact & Centered EasyImport button fix ========== */
.actions {
  display: flex;
  justify-content: center;   /* центриране хоризонтално */
  align-items: center;       /* ако някъде има по-висок контейнер */
}

.btn-small {
  display: inline-block;
  padding: 0.6rem 1.6rem;
  font-size: 1rem;
  border-radius: 10px;
  line-height: 1.1;
  min-height: 44px;
  width: auto;
  max-width: 220px;
  text-align: center;
}

/* Мобилна версия */
@media (max-width: 768px) {
  .actions .btn-small {
    padding: 0.5rem 1.4rem;
    font-size: 0.95rem;
    min-height: 44px !important;
    width: auto;
    max-width: 240px;
    margin: 0 auto;           /* центриране в случай на block display */
  }
}

/* Десктоп – по-широк, но нисък */
@media (min-width: 992px) {
  .actions .btn-small {
    padding: 0.7rem 2.5rem;   /* хоризонтално по-голямо */
    min-height: 48px;         /* правоъгълна форма */
    max-width: none;
  }
}

/* ===== Compact horizontal buttons in .actions--slim (Refined) ===== */
.actions--slim {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* център на реда */
  gap: 16px;
}

.actions--slim .btn {
  display: flex;                 /* за вертикално центриране на текста */
  justify-content: center;
  align-items: center;           /* център вертикално */
  flex: 0 0 auto;
  width: auto;
  max-width: 240px;
  padding: 0.6rem 1.4rem;
  min-height: 48px !important;   /* фиксирана височина за равенство */
  line-height: 1.2;
  font-size: 1rem;
  border-radius: 12px;
  text-align: center;
  font-weight: 700;
}

/* ——— Mobile equal width + perfectly centered text ——— */
@media (max-width: 768px){
  .actions--slim{
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
  }

  .actions--slim .btn{
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Еднаква ширина за всички бутони */
    width: 92% !important;          /* побеждава старите width:auto */
    max-width: 280px !important;    /* горен лимит за компактност */

    /* Равна височина + плътен текст */
    min-height: 48px !important;
    padding: 0.6rem 1.2rem;
    line-height: 1;                  /* стегнато */
    font-weight: 700;                /* bold както преди */
    text-align: center;
    border-radius: 12px;
  }
}


/* Десктоп: по-ниски, правоъгълни и с центриран текст */
@media (min-width: 992px) {
  .actions--slim { gap: 18px; }
  .actions--slim .btn {
    padding: 0.7rem 2rem;
    min-height: 52px;
    justify-content: center;
    align-items: center;
    max-width: none;
  }
}

/* === Navbar logo (SVG) — rectangle, smaller, subtle zoom on hover === */
.navbar .navbar-brand .navbar-logo{
  height: 21px;         /* ↓ по-малко от 40px */
  width: auto;          /* без насилена ширина */
  border: 0;            /* без оранжева рамка */
  border-radius: 0px;   /* правоъгълник (можеш и 0) */
  display: inline-block;
  object-fit: contain;
  filter: none;
  box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* zoom напред, без завъртане */
.navbar .navbar-brand .navbar-logo:hover{
  transform: scale(1.08);                /* лек zoom */
  box-shadow: 0 6px 18px rgba(0,0,0,.35);/* деликатна сянка за „изпъкване“ */
}

/* === HERO photo: Rounded rectangle + white border + soft lift on hover === */
.hero-logo {
  display: block;
  width: clamp(200px, 28vw, 280px);
  height: auto;
  margin-inline: auto;
  border-radius: 18px; /* плавно заоблени ъгли */
  overflow: hidden;
  object-fit: cover;
  background-color: #111; /* фон при прозрачни снимки */
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.9),  /* бяла рамка */
    0 10px 25px rgba(0, 0, 0, 0.45);     /* дълбочина */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.hero-logo:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 1),   /* малко по-ярка рамка */
    0 16px 35px rgba(0, 0, 0, 0.6);
}

/* изчистваме старите форми и ефекти */
.hero-logo {
  border: none !important;
  clip-path: none !important;
  rotate: 0deg !important;
  padding: 0 !important;
  background: none !important;
}

/* === Fix: Real brand colors for footer social buttons === */

/* Общи стилове */
.btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.2rem;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  background: none;          /* премахваме общия оранжев фон */
  color: #fff;               /* иконите по подразбиране бели */
}

.btn-social:hover {
  transform: scale(1.1);
}

/* LinkedIn */
.btn-social.linkedin {
  background-color: #0077B5;
}
.btn-social.linkedin:hover {
  box-shadow: 0 0 12px rgba(0,119,181,0.6);
}

/* Discord */
.btn-social.discord {
  background-color: #5865F2;
}
.btn-social.discord:hover {
  box-shadow: 0 0 12px rgba(88,101,242,0.6);
}

/* Email */
.btn-social.mail {
  background-color: #D44638;
}
.btn-social.mail:hover {
  box-shadow: 0 0 12px rgba(212,70,56,0.6);
}

/* Instagram */
.btn-social.instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.btn-social.instagram:hover {
  box-shadow: 0 0 12px rgba(253,89,73,0.6);
}

/* Facebook */
.btn-social.facebook {
  background-color: #1877F2;
}
.btn-social.facebook:hover {
  box-shadow: 0 0 12px rgba(24,119,242,0.6);
}
/* === Animated hover bounce for social icons === */
.btn-social {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-social:hover {
  transform: translateY(-4px) scale(1.12);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
}

/* леко „затихване“ след подскока */
.btn-social:active {
  transform: translateY(0) scale(1);
  transition: transform 0.15s ease;
}

/* === Hero intro text alignment === */
.hero-intro {
  text-align: left;          /* по подразбиране вляво */
}

.hero-intro h2 {
  text-align: center;        /* само заглавието остава центрирано */
}

/* Текстът над формата на страницата "Цени" */
.section .container > p.fs-6 {
  max-width: 100%;
  margin: 0 0 2rem 0;   /* въздух под текста */
  text-align: left;     /* ляво подравняване */
  padding-left: .25rem; /* лек падинг вляво – коригирай по вкус */
}