/* Inowara palette + Bootstrap 5.3 remap. Isti fajl u sitebloger i sitesocial. */
:root {
  --ink: #0b0b1c;
  --ink-2: #12122a;
  --paper: #f5f6ff;
  --paper-2: #eaecfb;
  --copper: #8b5cf6;
  --copper-2: #7c3aed;
  --moss: #16a34a;
  --moss-2: #15803d;
  --clay: #f59e0b;
  --rust: #dc2626;
  --muted-ink: rgba(11, 11, 28, 0.62);
  --hair-ink: rgba(11, 11, 28, 0.12);

  --bs-primary: #8b5cf6;
  --bs-primary-rgb: 139, 92, 246;
  --bs-primary-text-emphasis: #7c3aed;
  --bs-primary-bg-subtle: #ede9fe;
  --bs-primary-border-subtle: #ddd6fe;
  --bs-secondary: #3f3f5a;
  --bs-secondary-rgb: 63, 63, 90;
  --bs-secondary-text-emphasis: #0b0b1c;
  --bs-secondary-bg-subtle: #eaeaf5;
  --bs-secondary-border-subtle: #d5d5e8;
  --bs-success: #16a34a;
  --bs-success-rgb: 22, 163, 74;
  --bs-success-text-emphasis: #15803d;
  --bs-success-bg-subtle: #dcfce7;
  --bs-success-border-subtle: #bbf7d0;
  --bs-info: #0891b2;
  --bs-info-rgb: 8, 145, 178;
  --bs-info-text-emphasis: #16a34a;
  --bs-info-bg-subtle: #cffafe;
  --bs-info-border-subtle: #a5f3fc;
  --bs-warning: #f59e0b;
  --bs-warning-rgb: 245, 158, 11;
  --bs-warning-text-emphasis: #0b0b1c;
  --bs-warning-bg-subtle: #fef3c7;
  --bs-warning-border-subtle: #fde68a;
  --bs-danger: #dc2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-text-emphasis: #b91c1c;
  --bs-danger-bg-subtle: #fee2e2;
  --bs-danger-border-subtle: #fecaca;
  --bs-light: #f5f6ff;
  --bs-light-rgb: 245, 246, 255;
  --bs-dark: #0b0b1c;
  --bs-dark-rgb: 11, 11, 28;
  --bs-body-color: #0b0b1c;
  --bs-body-bg: #f5f6ff;
  --bs-secondary-color: rgba(11, 11, 28, 0.62);
  --bs-tertiary-bg: #eaecfb;
  --bs-border-color: rgba(11, 11, 28, 0.12);
  --bs-link-color: #8b5cf6;
  --bs-link-color-rgb: 139, 92, 246;
  --bs-link-hover-color: #7c3aed;
  --bs-link-hover-color-rgb: 124, 58, 237;
  --bs-focus-ring-color: rgba(139, 92, 246, 0.28);
  --bs-code-color: #7c3aed;
}

body.bg-light,
.bg-light {
  background-color: var(--paper) !important;
}

.btn-primary {
  --bs-btn-color: #f5f6ff;
  --bs-btn-bg: #8b5cf6;
  --bs-btn-border-color: #8b5cf6;
  --bs-btn-hover-color: #f5f6ff;
  --bs-btn-hover-bg: #7c3aed;
  --bs-btn-hover-border-color: #7c3aed;
  --bs-btn-focus-shadow-rgb: 139, 92, 246;
  --bs-btn-active-color: #f5f6ff;
  --bs-btn-active-bg: #b91c1c;
  --bs-btn-active-border-color: #b91c1c;
  --bs-btn-disabled-color: #f5f6ff;
  --bs-btn-disabled-bg: #8b5cf6;
  --bs-btn-disabled-border-color: #8b5cf6;
}
.btn-success {
  --bs-btn-color: #f5f6ff;
  --bs-btn-bg: #16a34a;
  --bs-btn-border-color: #16a34a;
  --bs-btn-hover-color: #f5f6ff;
  --bs-btn-hover-bg: #15803d;
  --bs-btn-hover-border-color: #15803d;
  --bs-btn-focus-shadow-rgb: 22, 163, 74;
  --bs-btn-active-color: #f5f6ff;
  --bs-btn-active-bg: #14532d;
  --bs-btn-active-border-color: #14532d;
  --bs-btn-disabled-color: #f5f6ff;
  --bs-btn-disabled-bg: #16a34a;
  --bs-btn-disabled-border-color: #16a34a;
}
.btn-warning {
  --bs-btn-color: #0b0b1c;
  --bs-btn-bg: #f59e0b;
  --bs-btn-border-color: #f59e0b;
  --bs-btn-hover-color: #0b0b1c;
  --bs-btn-hover-bg: #b45309;
  --bs-btn-hover-border-color: #b45309;
  --bs-btn-focus-shadow-rgb: 245, 158, 11;
  --bs-btn-active-color: #0b0b1c;
  --bs-btn-active-bg: #a16207;
  --bs-btn-active-border-color: #a16207;
  --bs-btn-disabled-color: #0b0b1c;
  --bs-btn-disabled-bg: #f59e0b;
  --bs-btn-disabled-border-color: #f59e0b;
}
.btn-info {
  --bs-btn-color: #f5f6ff;
  --bs-btn-bg: #0891b2;
  --bs-btn-border-color: #0891b2;
  --bs-btn-hover-color: #f5f6ff;
  --bs-btn-hover-bg: #15803d;
  --bs-btn-hover-border-color: #15803d;
  --bs-btn-focus-shadow-rgb: 8, 145, 178;
  --bs-btn-active-color: #f5f6ff;
  --bs-btn-active-bg: #16a34a;
  --bs-btn-active-border-color: #16a34a;
  --bs-btn-disabled-color: #f5f6ff;
  --bs-btn-disabled-bg: #0891b2;
  --bs-btn-disabled-border-color: #0891b2;
}
.btn-danger {
  --bs-btn-color: #f5f6ff;
  --bs-btn-bg: #dc2626;
  --bs-btn-border-color: #dc2626;
  --bs-btn-hover-color: #f5f6ff;
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
  --bs-btn-active-color: #f5f6ff;
  --bs-btn-active-bg: #991b1b;
  --bs-btn-active-border-color: #991b1b;
  --bs-btn-disabled-color: #f5f6ff;
  --bs-btn-disabled-bg: #dc2626;
  --bs-btn-disabled-border-color: #dc2626;
}
.btn-secondary {
  --bs-btn-color: #f5f6ff;
  --bs-btn-bg: #3f3f5a;
  --bs-btn-border-color: #3f3f5a;
  --bs-btn-hover-color: #f5f6ff;
  --bs-btn-hover-bg: #0b0b1c;
  --bs-btn-hover-border-color: #0b0b1c;
  --bs-btn-focus-shadow-rgb: 63, 63, 90;
  --bs-btn-active-color: #f5f6ff;
  --bs-btn-active-bg: #0b0b1c;
  --bs-btn-active-border-color: #0b0b1c;
  --bs-btn-disabled-color: #f5f6ff;
  --bs-btn-disabled-bg: #3f3f5a;
  --bs-btn-disabled-border-color: #3f3f5a;
}
.btn-dark {
  --bs-btn-color: #f5f6ff;
  --bs-btn-bg: #0b0b1c;
  --bs-btn-border-color: #0b0b1c;
  --bs-btn-hover-color: #f5f6ff;
  --bs-btn-hover-bg: #12122a;
  --bs-btn-hover-border-color: #12122a;
  --bs-btn-focus-shadow-rgb: 11, 11, 28;
  --bs-btn-active-color: #f5f6ff;
  --bs-btn-active-bg: #12122a;
  --bs-btn-active-border-color: #12122a;
  --bs-btn-disabled-color: #f5f6ff;
  --bs-btn-disabled-bg: #0b0b1c;
  --bs-btn-disabled-border-color: #0b0b1c;
}
.btn-outline-primary {
  --bs-btn-color: #8b5cf6;
  --bs-btn-border-color: #8b5cf6;
  --bs-btn-hover-color: #f5f6ff;
  --bs-btn-hover-bg: #8b5cf6;
  --bs-btn-hover-border-color: #8b5cf6;
  --bs-btn-focus-shadow-rgb: 139, 92, 246;
  --bs-btn-active-color: #f5f6ff;
  --bs-btn-active-bg: #7c3aed;
  --bs-btn-active-border-color: #7c3aed;
  --bs-btn-disabled-color: #8b5cf6;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #8b5cf6;
}
.btn-outline-success {
  --bs-btn-color: #16a34a;
  --bs-btn-border-color: #16a34a;
  --bs-btn-hover-color: #f5f6ff;
  --bs-btn-hover-bg: #16a34a;
  --bs-btn-hover-border-color: #16a34a;
  --bs-btn-focus-shadow-rgb: 22, 163, 74;
  --bs-btn-active-color: #f5f6ff;
  --bs-btn-active-bg: #15803d;
  --bs-btn-active-border-color: #15803d;
  --bs-btn-disabled-color: #16a34a;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #16a34a;
}
.btn-outline-danger {
  --bs-btn-color: #dc2626;
  --bs-btn-border-color: #dc2626;
  --bs-btn-hover-color: #f5f6ff;
  --bs-btn-hover-bg: #dc2626;
  --bs-btn-hover-border-color: #dc2626;
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
  --bs-btn-active-color: #f5f6ff;
  --bs-btn-active-bg: #b91c1c;
  --bs-btn-active-border-color: #b91c1c;
  --bs-btn-disabled-color: #dc2626;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #dc2626;
}
.btn-outline-secondary {
  --bs-btn-color: #3f3f5a;
  --bs-btn-border-color: #c8c9dd;
  --bs-btn-hover-color: #f5f6ff;
  --bs-btn-hover-bg: #3f3f5a;
  --bs-btn-hover-border-color: #3f3f5a;
  --bs-btn-focus-shadow-rgb: 63, 63, 90;
  --bs-btn-active-color: #f5f6ff;
  --bs-btn-active-bg: #0b0b1c;
  --bs-btn-active-border-color: #0b0b1c;
  --bs-btn-disabled-color: #3f3f5a;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #c8c9dd;
}

.alert-success {
  --bs-alert-color: #15803d;
  --bs-alert-bg: #dcfce7;
  --bs-alert-border-color: #bbf7d0;
}
.alert-warning {
  --bs-alert-color: #0b0b1c;
  --bs-alert-bg: #fef3c7;
  --bs-alert-border-color: #fde68a;
}
.alert-danger {
  --bs-alert-color: #b91c1c;
  --bs-alert-bg: #fee2e2;
  --bs-alert-border-color: #fecaca;
}
.alert-info {
  --bs-alert-color: #16a34a;
  --bs-alert-bg: #cffafe;
  --bs-alert-border-color: #a5f3fc;
}

.card {
  --bs-card-border-color: rgba(11, 11, 28, 0.12);
  --bs-card-cap-bg: #e9eaf6;
  background-color: #fafaff;
}
.card.shadow,
.shadow {
  box-shadow: 0 10px 28px rgba(11, 11, 28, 0.07) !important;
}
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-info,
.modal-header.bg-primary,
.modal-header.bg-info,
.modal-header.bg-success {
  border-bottom: 0;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.22);
}
.form-check-input:checked {
  background-color: #8b5cf6;
  border-color: #8b5cf6;
}
.form-range::-webkit-slider-thumb { background: #8b5cf6; }
.form-range::-moz-range-thumb { background: #8b5cf6; }

.page-link { color: #8b5cf6; }
.page-link:hover { color: #7c3aed; background-color: #ede9fe; border-color: #ddd6fe; }
.page-item.active .page-link {
  background-color: #8b5cf6;
  border-color: #8b5cf6;
  color: #f5f6ff;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #8b5cf6;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: #8b5cf6;
}

.list-group-item.active {
  background-color: #8b5cf6;
  border-color: #8b5cf6;
}
.progress-bar { background-color: #8b5cf6; }

.table-primary { --bs-table-bg: #ede9fe; --bs-table-color: #0b0b1c; }
.table-success { --bs-table-bg: #dcfce7; --bs-table-color: #0b0b1c; }
.table-warning { --bs-table-bg: #fef3c7; --bs-table-color: #0b0b1c; }
.table-danger { --bs-table-bg: #fee2e2; --bs-table-color: #0b0b1c; }
.table-info { --bs-table-bg: #cffafe; --bs-table-color: #0b0b1c; }

.spinner-border.text-primary,
.text-primary { color: #8b5cf6 !important; }
.text-success { color: #16a34a !important; }
.text-warning { color: #7c3aed !important; }
.text-danger { color: #dc2626 !important; }
.text-info { color: #0891b2 !important; }

.badge.bg-light.text-success { color: #16a34a !important; }
.badge.bg-light.text-primary { color: #8b5cf6 !important; }
.btn-light.text-primary { color: #8b5cf6 !important; }

/* Cena radnje ispod dugmeta u Alatima — mora da se vidi pre klika, ali ne sme da nadjača
   samo dugme, pa je prigušena i odvojena tankom linijom umesto okvirom. */
.ino-cena {
  border-top: 1px dashed rgba(11, 11, 28, 0.15);
  padding-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6b625a;
}
.ino-cena strong { color: #0b0b1c; }

/* ═══ Pretplata: kartice paketa i kredita ═══
   Stranica je ranije bila u koloni od 640px sa četiri paketa u redu — svaka kartica ~140px,
   pa je cenovnik izgledao kao tabela sitnog teksta umesto kao ponuda. */
.ino-stanje-znak {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #a78bfa, #6366f1);
  color: #fff;
  font-size: 1.3rem;
}

.ino-paket {
  border: 1px solid rgba(13, 13, 30, 0.1);
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(13, 13, 30, 0.05);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.ino-paket:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(124, 58, 237, 0.14);
}

.ino-paket.je-preporuka {
  border: 2px solid #8b5cf6;
  box-shadow: 0 16px 44px rgba(124, 58, 237, 0.2);
}

.ino-paket.je-moj {
  border: 2px solid #16a34a;
}

.ino-badge-preporuka {
  background: linear-gradient(100deg, #a78bfa, #6366f1);
  color: #fff;
}

.ino-cena-veliko {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 6px;
  color: #0b0b1c;
}

.ino-cena-veliko .ino-valuta {
  font-size: 1.4rem;
  font-weight: 700;
}

.ino-cena-veliko .ino-period {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(13, 13, 30, 0.55);
}

.ino-dugme-glavno {
  background: linear-gradient(100deg, #a78bfa 0%, #8b5cf6 45%, #6366f1 100%);
  border: 0;
  color: #fff;
  font-weight: 600;
}

.ino-dugme-glavno:hover {
  filter: brightness(1.07);
  color: #fff;
}

.ino-kredit-kartica {
  border: 1px solid rgba(13, 13, 30, 0.1);
  border-radius: 14px;
  padding: 20px;
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.ino-kredit-kartica:hover {
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.12);
}