/* === BASE ========================================================== */
:root {
  --bg-light:#f7f7f8;
  --card-bg:#ffffff;
  --primary:#e54e26;
  --danger:#dc2626;
  --success:#22c55e;
  --warning:#f59e0b;
  --text-dark:#111;
  --border:#e5e7eb;
  --radius:10px;
}

body {
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg-light);
  color:var(--text-dark);
  line-height:1.6;
}

/* === LAYOUT ======================================================== */
.container {
  max-width:1100px;
  margin:40px auto;
  padding:0 20px;
}
.grid-2 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:20px;
}
.grid-3 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}

/* === HEADER / NAV ================================================== */
.navbar,.main-header,.admin-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 30px;
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:50;
}
.logo,.logo-text {
  font-family:'Masque',sans-serif;
  font-size:1.5rem;
  color:var(--primary);
  font-weight:700;
  text-decoration:none;
}
.main-nav a,.admin-nav a,.nav-links a {
  margin:0 8px;
  color:var(--text-dark);
  text-decoration:none;
  font-weight:500;
}
.main-nav a:hover,.admin-nav a:hover,.nav-links a:hover {
  color:var(--primary);
}
.admin-user { font-size:0.9rem; }

/* === CARDS & TABLES ================================================ */
.card {
  background:var(--card-bg);
  border-radius:var(--radius);
  border:1px solid var(--border);
  padding:20px;
}
.card.stat {
  text-align:center;
  padding:24px;
  border:1px solid var(--border);
  transition:.2s;
}
.card.stat:hover {
  transform:translateY(-3px);
  box-shadow:0 3px 8px rgba(0,0,0,0.08);
}
.table {
  width:100%;
  border-collapse:collapse;
}
.table th,.table td {
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:middle;
}
.table th {
  background:#f3f4f6;
  font-weight:600;
}

/* === BUTTONS ======================================================= */
.btn {
  display:inline-block;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-weight:500;
  padding:8px 14px;
  transition:background .2s;
  text-decoration:none;
  text-align:center;
}
.btn.primary { background:var(--primary); color:#fff; }
.btn.primary:hover { background:#c93f1d; }
.btn.secondary { background:#f0f0f0; color:#333; }
.btn.secondary:hover { background:#ddd; }
.btn.success { background:var(--success); color:#fff; }
.btn.success:hover { background:#1e9c4b; }
.btn.danger { background:var(--danger); color:#fff; }
.btn.danger:hover { background:#b3242d; }
.btn.small { font-size:0.85rem; padding:4px 9px; }

/* === BADGES ======================================================== */
.badge {
  display:inline-block;
  padding:4px 8px;
  border-radius:8px;
  font-size:0.8rem;
  font-weight:600;
  text-transform:capitalize;
}
.badge.paid { background:#c6f6d5; color:#155724; }
.badge.waiting-payment {
  background:#fff5f5;
  color:#b91c1c;
  position:relative;
  padding-left:1.3rem;
}
.badge.waiting-payment::before {
  content:"";
  width:7px;height:7px;
  background:#b91c1c;
  border-radius:50%;
  position:absolute;
  left:6px;top:50%;
  transform:translateY(-50%);
}
.badge.cancelled { background:#f8d7da; color:#842029; }
.badge.active { background:#d1fae5; color:#065f46; }

/* === FORMS ========================================================= */
.input,textarea,input[type=text],input[type=email],input[type=password],input[type=number],select {
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px;
  font-size:1rem;
  background:#fff;
  box-sizing:border-box;
}
input:focus,textarea:focus,select:focus {
  border-color:var(--primary);
  outline:none;
}
textarea { resize:vertical; }

/* === AUTH FORMS ==================================================== */
.auth-form {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.login-section,.register-section {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:80px 20px;
  min-height:70vh;
  background:#f5f6f7;
}
.login-card,.register-card {
  background:#fff;
  border-radius:16px;
  box-shadow:0 3px 12px rgba(0,0,0,0.08);
  padding:40px;
  width:100%;
  max-width:420px;
}
.login-title,.register-title {
  text-align:center;
  color:var(--primary);
  font-weight:700;
  margin-bottom:1.2rem;
}

/* === DASHBOARD ===================================================== */
.dashboard .card {
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.5rem;
}
.package-item {
  border:1px solid var(--border);
  border-radius:10px;
  padding:1rem;
  background:#fff;
  transition:all .2s;
}
.package-item:hover {
  background:#f9fafb;
}
.card.no-shadow { box-shadow:none!important; }

/* === ADMIN ========================================================= */
.admin-container { padding:30px; }
.admin-footer {
  text-align:center;
  padding:20px;
  font-size:0.85rem;
  color:#555;
  border-top:1px solid var(--border);
  background:#fff;
}

/* === ALERTS ======================================================== */
.alert {
  padding:0.75rem 1rem;
  border-radius:6px;
  margin-bottom:1rem;
}
.alert-success { background:#e7f9ed; color:#14532d; }
.alert-warning { background:#fff7e6; color:#8a5300; }
.alert-danger  { background:#fde8e8; color:#9b1c1c; }

/* === RESPONSIVE ==================================================== */
@media(max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr;}
}
@media(max-width:750px){
  .dashboard table thead{display:none;}
  .dashboard table tr{
    display:block;
    background:#fff;
    margin-bottom:1rem;
    border-radius:8px;
    box-shadow:0 1px 3px rgba(0,0,0,0.05);
    padding:10px;
  }
  .dashboard table td{
    display:flex;
    justify-content:space-between;
    padding:6px 8px;
    border:none;
  }
  .dashboard table td::before{
    content:attr(data-label);
    font-weight:600;
    color:#555;
  }
}
@media(max-width:768px){
  .nav-links{flex-direction:column;gap:1rem;}
  .navbar{box-shadow:0 3px 10px rgba(0,0,0,0.1);}
  .logo,.logo-text{font-family:'Masque',sans-serif!important;color:#ff6600!important;}
}
/* === ADMIN DASHBOARD STATS ROW (5 CARDS NEXT TO EACH OTHER) === */
.grid-5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}

.card.stat {
  flex: 1 1 calc(20% - 16px); /* 5 per row */
  min-width: 180px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.card.stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.card.stat h3 {
  margin-bottom: 6px;
  font-size: 1rem;
  color: var(--text-dark);
}

.card.stat p {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  color: var(--primary);
}

.card.stat small {
  color: #666;
  display: block;
  margin-top: 4px;
}

/* === RESPONSIVE ADAPTATION === */
@media (max-width: 1100px) {
  .card.stat { flex: 1 1 calc(33.333% - 16px); } /* 3 per row */
}
@media (max-width: 768px) {
  .card.stat { flex: 1 1 calc(50% - 16px); } /* 2 per row */
}
@media (max-width: 500px) {
  .card.stat { flex: 1 1 100%; } /* 1 per row */
}
/* === CUSTOM POPUPS (replace Bootstrap modals) === */
.popup {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}
.popup.show { display: flex; }

.popup-content {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  position: relative;
  animation: fadeInUp 0.25s ease-out;
}
.popup-content h3 {
  margin-top: 0;
  color: var(--primary);
  text-align: center;
}
.popup-content .input, .popup-content textarea, .popup-content select {
  width: 100%;
  margin-bottom: 10px;
}
.popup-content .btn {
  width: 100%;
  margin-top: 10px;
}

.close {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 1.6rem;
  cursor: pointer;
  color: #999;
  transition: color .2s;
}
.close:hover { color: #333; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* === POPUP WINDOWS === */
.popup {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.4);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup.active {
  display: flex;
}

.popup-content {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.popup-content h3 {
  margin-top: 0;
  color: #e54e26;
}

.popup-content .close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}
/* === POPUPS (Admin Dashboard) === */
.popup {
  display: none;
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(17, 17, 17, 0.6);
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
  transition: opacity 0.25s ease;
}

.popup.show {
  display: flex;
  animation: fadeInPopup 0.25s ease forwards;
}

.popup-content {
  background: #fff;
  border-radius: 14px;
  padding: 30px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  position: relative;
  animation: slideUpPopup 0.3s ease forwards;
}

.popup-content h3 {
  margin-top: 0;
  margin-bottom: 1.2rem;
  color: #e54e26;
  font-weight: 700;
  text-align: center;
}

.popup-content label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  color: #333;
}

.popup-content input,
.popup-content textarea,
.popup-content select {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  font-size: 1rem;
  margin-bottom: 12px;
  box-sizing: border-box;
  background: #fafafa;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.popup-content input:focus,
.popup-content textarea:focus,
.popup-content select:focus {
  border-color: #e54e26;
  box-shadow: 0 0 4px rgba(229, 78, 38, 0.3);
  outline: none;
}

.popup-content .btn.primary {
  background-color: #e54e26;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.popup-content .btn.primary:hover {
  background-color: #c93f1d;
}

/* Close button (top-right corner) */
.popup-content .close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 1.8rem;
  color: #aaa;
  cursor: pointer;
  transition: color 0.2s ease;
}

.popup-content .close:hover {
  color: #e54e26;
}

/* Small screen adjustments */
@media (max-width: 600px) {
  .popup-content {
    padding: 24px;
    max-width: 95%;
  }
}

/* Smooth entry animations */
@keyframes fadeInPopup {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUpPopup {
  from { transform: translateY(20px); opacity: 0.9; }
  to { transform: translateY(0); opacity: 1; }
}
.admin-logo .logo-text { 
  font-weight:700; 
  letter-spacing:0.5px; 
  color:#ff6600; /* Orange */
}
  <style>
    .notif-icon {
      position: relative;
      display: inline-block;
      margin-left: 10px;
    }
    .notif-icon .badge {
      position: absolute;
      top: -6px;
      right: -10px;
      background: red;
      color: white;
      font-size: 0.7rem;
      padding: 2px 6px;
      border-radius: 50%;
    }

    /* === Sticky Footer CSS zurĆ¼ckholen === */
    html, body {
      height: 100%;
      margin: 0;
    }
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    main.page-body {
      flex: 1;
    }
    footer {
      margin-top: auto;
      text-align: center;
      padding: 1rem 0;
    }
  </style>
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
#review-slider .review-track {
  display: flex;
  width: 100%;
}

#review-slider .card {
  flex: 0 0 100%;
  margin: 0;
  box-sizing: border-box;
}
.description {
  max-height: 120px; /* prika¸«öe samo dio teksta */
  overflow: hidden;
  position: relative;
}
.description.expanded {
  max-height: none;
}
.read-more {
  color: #ff6600;
  font-weight: 600;
  cursor: pointer;
  display: block;
  margin-top: 5px;
}
/* base */
.navbar {
  position: sticky;   /* ili fixed ako ¸«öeli¸«Ž da je uvijek gore */
  top: 0;
  z-index: 1000;      /* da bude iznad svega */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid #eee;
}


.nav-links {
  display:flex;
  gap:15px;
}

/* burger */
.burger {
  display:none;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
}
.burger span {
  width:25px;
  height:3px;
  background:#333;
  border-radius:2px;
}

/* notification always visible */
.notif-fixed {
  margin-left:auto;
  margin-right:10px;
}
.notif-icon {
  position:relative;
  font-size:1.3rem;
  color:#333;
}
.notif-icon .badge {
  position:absolute;
  top:-6px; right:-8px;
  background:red;
  color:white;
  font-size:0.7rem;
  padding:2px 6px;
  border-radius:50%;
}

/* responsive */
@media(max-width:768px){
  .nav-links {
    display:none;
    position:absolute;
    top:60px; left:0;
    width:100%;
    background:#fff;
    flex-direction:column;
    gap:10px;
    padding:15px;
    border-top:1px solid #eee;
  }
  .nav-links.show { display:flex; }
  .burger { display:flex; }
}
body {
  margin: 0;
}
main.page-body {
  padding-top: 70px; /* visina headera */
}
/* Chat layout */
#chat-box {
  max-height: 520px;
  overflow-y: auto;
  background: #fafafa;
  border-radius: 12px;
  padding: 12px;
}

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.chat-row.user { justify-content: flex-start; }
.chat-row.admin { justify-content: flex-end; }

.chat-row .avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: #1f2937;
  background: #e5e7eb; /* gray-200 */
}

/* Message container (so bubble widths behave) */
.chat-msg {
  max-width: min(78%, 620px);
}

/* Bubbles */
.chat-row.user .bubble {
  background: #f3f4f6;             /* gray-100 */
  border: 1px solid #e5e7eb;       /* gray-200 */
  color: #111827;                  /* gray-900 */
}

.chat-row.admin .bubble {
  background: #fff7ed;             /* orange-50 (soft) */
  border: 1px solid #fdba74;       /* orange-300 */
  color: #111827;
}

.bubble {
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.bubble .sender {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 4px;
  opacity: .9;
}

.bubble .text {
  white-space: pre-wrap;
  line-height: 1.45;
}

.bubble .meta {
  font-size: 0.72rem;
  color: #6b7280; /* gray-500 */
  margin-top: 6px;
  text-align: right;
}

/* Mobile tweaks */
@media (max-width: 576px) {
  .chat-msg { max-width: 88%; }
  .bubble { border-radius: 12px; padding: 9px 10px; }
}
/* === Services section improvements === */
.services {
  margin-top: 60px;      /* space above the cards section */
  margin-bottom: 100px;  /* space below before "Unsere Pakete" */
  text-align: center;
}

.services h2 {
  font-size: 2rem;
  margin-bottom: 50px;   /* space below the title before cards */
  font-weight: 700;
  color: #ff6a00;
}

.services .grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;             /* spacing between cards */
}

.services .card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.25s ease;
  padding: 30px 20px;
}

.services .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.services .card h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;   /* spacing between title and text */
  color: #111;
}

.services .card p {
  color: #444;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0;
}
/* === Webseite Verwaltung (public 2 packages) styling === */
.web-verwaltung {
  margin-top: 100px;       /* space above this section */
  margin-bottom: 100px;    /* space below before next section */
  text-align: center;
}

.web-verwaltung h2 {
  font-size: 2rem;
  margin-bottom: 50px;     /* spacing below title */
  font-weight: 700;
  color: #ff6a00;
}

.web-verwaltung .grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;               /* space between cards */
}

.web-verwaltung .card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.25s ease;
  padding: 30px 20px;
}

.web-verwaltung .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.web-verwaltung .card h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #111;
}

.web-verwaltung .card p {
  color: #444;
  font-size: 1rem;
  line-height: 1.5;
}
/* === Unified Section Title Style === */
.section-title {
  text-align: center;
  color: #ff6a00;
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.section-title i,
.section-title .icon {
  font-size: 2.2rem;
  line-height: 1;
}

/* optional hover glow */
.section-title:hover {
  text-shadow: 0 0 10px rgba(255,106,0,0.25);
  transition: text-shadow 0.3s ease;
}
<style>
.page-title {
  color: #ff6a00;
  text-align: center;
  font-weight: 700;
  margin-top: 30px;
  font-size: 2rem;
}

.section-title {
  text-align: center;
  color: #ff6a00;
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.section-title .icon {
  font-size: 1.9rem;
}

.available-packages h2 {
  text-align: center;
  color: #ff6a00;
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.grid-3 {
  margin-top: 20px;
}
</style>