/* calculator.css */
/* =========================================
   Карти
   ========================================= */

.service-card {
  border: 1px solid rgba(148, 163, 184, 0.35); /* сиво синкав бордер */
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 16px;
  background: rgba(15, 23, 42, 0.96); /* тъмносин фон като сайта */
  color: #e5e7eb;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.65);
}

.service-card .price {
  font-weight: 700;
  font-size: 15px;
  color: #e2e8f0;
}

.price .old {
  opacity: .7;
  text-decoration: line-through;
  margin-right: .35rem;
}

/* описанията вътре да са по светли на тъмен фон */
.service-card .text-muted {
  color: #cbd5f5 !important;
}

/* избрана карта */

.service-card.is-selected {
  background: radial-gradient(circle at top left, #16a34a 0, #0f172a 52%);
  border-color: #4ade80 !important;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow: 0 20px 50px rgba(22, 163, 74, 0.55);
}

.service-card.is-selected:hover {
  background: radial-gradient(circle at top left, #22c55e 0, #020617 55%);
}

/* описанията вътре да могат да имат списък */

.service-card .text-muted ul,
.service-card .text-muted ol {
  margin: .25rem 0 .5rem 1.25rem;
}

.service-card .text-muted li {
  margin: .1rem 0;
}

.service-card .text-muted ul {
  list-style: disc;
}

.service-card .text-muted li::marker {
  color: #0d6efd;
  font-weight: 700;
}

/* =========================================
   Sticky summary по средата долу
   ========================================= */

.sticky-summary {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;
  z-index: 1030;

  width: min(1120px, calc(100% - 24px));
  padding: 10px 14px;

  background: rgba(15, 23, 42, 0.92); /* леко тъмна, но полупрозрачна */
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 14px;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.9);
  overflow: visible !important;
}

.sticky-summary .total-amount {
  font-weight: 700;
  font-size: 1.15rem;
  color: #e5e7eb;
}

.sticky-summary .text-muted {
  color: #9ca3af !important;
  font-size: .85rem;
}

.sticky-summary .btn-primary {
  padding: .35rem .75rem;
  font-size: .9rem;
  box-shadow: none;
}

#totalDisplay {
  min-width: 280px;
  color: #e5e7eb;
}

/* да има място под калкулатора за плаващия блок */

#calc-root {
  padding-bottom: 160px;
}

/* safe area за iOS */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .sticky-summary {
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

/* състояние когато JS я скрива */

.sticky-summary.is-collapsed {
  display: none;
}

/* =========================================
   Списък в количката вътре в sticky summary
   ========================================= */

.cart-items {
  margin-top: .4rem;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  padding-top: .35rem;
  max-height: 200px;
  overflow: auto;
}

.cart-items ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.cart-items li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  padding: 2px 0;
}

.cart-items .ci-name {
  font-size: .82rem;
  color: #e5e7eb;
}

.cart-items .ci-meta {
  font-size: .75rem;
  color: #9ca3af;
}

.cart-items .ci-sum {
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  color: #e5e7eb;
}

/* =========================================
   Поле за оферта
   ========================================= */

#offerForm {
  overflow: hidden;
  transition: max-height .25s ease;
}

/* когато е скрита с d-none */

#offerForm.d-none {
  max-height: 0 !important;
}

/* контейнер за Turnstile */

#cfBox {
  min-width: 300px;
  display: flex;
  align-items: center;
}

@media (max-width: 576px) {
  #cfBox {
    min-width: 0;
  }
}

/* да не се реже от sticky */

#offerForm {
  position: relative;
  z-index: 20;
  padding-top: 20px;
  max-height: none !important;
  overflow: visible !important;
}

#offerForm .form-group:first-child,
#offerForm .controls-row:first-child {
  margin-top: 10px !important;
  position: relative;
  z-index: 50;
}

/* =========================================
   Suggest кутия под търсачката
   ========================================= */

.suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  max-height: 340px;
  overflow: auto;
  display: none;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.9);
}

.suggest-item {
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
  color: #e5e7eb;
}

.suggest-item:hover {
  background: rgba(31, 41, 55, 0.9);
}

/* =========================================
   Чипове за категории
   ========================================= */

.chipbar .btn {
  border-radius: 9999px;
  border-color: rgba(148, 163, 184, 0.6);
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
}

.chipbar .btn.active {
  background: #0d6efd;
  color: #fff;
}

/* малко разстояние под контролите */

.controls-row {
  margin-bottom: .5rem;
}

/* =========================================
   Промо елемент
   ========================================= */

.promo-line {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 28px;
  flex-direction: column;
  line-height: 1.1;
}

.promo-pill {
  font-size: .78rem;
  line-height: 1;
  padding: .35rem .6rem;
  border: 1px solid #ffd1d1;
  background: #fff5f5;
  color: #d03131;
  border-radius: 9999px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}

.promo-timer {
  font-size: .78rem;
  color: #f9fafb;
  white-space: nowrap;
  display: block;
  margin-top: .25rem;
}

/* =========================================
   Мобилно подреждане на картата
   ========================================= */

@media (max-width: 576px) {
  .card-row {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }

  .card-row .promo-line {
    order: 1;
  }

  .card-row .qty-wrap {
    order: 2;
    justify-content: flex-start;
  }

  .card-row .card-actions {
    order: 3;
    justify-content: flex-start;
  }

  .qty-wrap .form-control {
    max-width: 160px !important;
  }

  .service-card .card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
  }
}

/* =========================================
   Плаваща количка FAB долу вдясно
   ========================================= */

#calcCartFab {
  position: fixed;
  right: 18px;
  bottom: 86px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: #0d6efd;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .35);
  z-index: 1040;
  cursor: pointer;
}

#calcCartFab .calc-cart-icon {
  font-size: 22px;
  line-height: 1;
}

#calcCartFab .calc-cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 9999px;
  background: #dc3545;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0b1120;
}

/* safe area за бутона */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #calcCartFab {
    bottom: calc(86px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 576px) {
  #calcCartFab {
    right: 14px;
    bottom: 92px;
  }
}

/* =========================================
   Малки донагласяния за тъмния фон на сайта
   ========================================= */

#it-calculator p.text-muted.text-center {
  color: #e2e8f0 !important;
  opacity: 0.9 !important;
}