/* =============================
   Global Styles - Glassmorphism Theme (Unified, cleaned)
   ============================= */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Marck+Script&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
:root {
  --color-primary: #2E8B57;
  --color-secondary: #1E3A8A;
  --color-accent: #F59E0B;
  --color-light: #F9FAFB;
  --color-dark: #111827;
  --color-white: #ffffff;

  --radius: 16px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  --blur: blur(12px);
  --transition: 0.3s ease-in-out;
}

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  color: var(--color-light);
  line-height: 1.6;
  min-height: 100vh;
}

/* =============================
   Header & Navigation
   ============================= */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
}

.nav-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
}

/* === Header logo (показва се пред текста в .logo a) === */
/* === Лого за всички страници (ползва съществуващото .logo a) === */
.logo a{
  display:inline-block;
  width: 200px;              /* ширина на логото */
  height: 200px;              /* височина на логото */
  background: url("/assets/img/logo.webp") left center / contain no-repeat;
  text-decoration:none;
  /* ако около логото фонът е тъмен — леко сенче */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* по-компактно на таблет */
@media (max-width: 992px){
  .logo a{ width: 160px; height: 160px; }
}

/* още по-малко на мобилни */
@media (max-width: 600px){
  .logo a{ width: 160px; height: 160px; }
}


.burger {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--color-light);
  background: transparent;
  border: none;
}
.burger[aria-expanded="true"] { color: var(--color-secondary); }

#navMenu { display: block; }
.nav-menu { list-style: none; display: flex; gap: 24px; }

.nav-menu li a {
  text-decoration: none;
  color: var(--color-light);
  font-weight: 500;
  transition: var(--transition);
}
.nav-menu li a:hover,
.nav-menu li a.active { color: var(--color-accent); }

/* Mobile menu (solid dropdown under burger) */
@media (max-width: 992px) {
  header { z-index: 2000; }
  .burger { display: block; position: relative; z-index: 10001; }

  #navMenu {
    position: fixed;
    top: 76px;
    right: 16px;
    left: auto;
    display: none;
    width: min(88vw, 340px);
    padding: 10px;
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    z-index: 10000;
  }
  #navMenu.active { display: block; }

  .nav-menu {
    margin: 0;
    padding: 6px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent !important;
  }
  .nav-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: #111827 !important;
    text-decoration: none;
    transition: 0.2s ease;
    text-align: left;
  }
  .nav-menu a:hover,
  .nav-menu a.active {
    background: #f3f4f6 !important;
    color: #1E3A8A !important;
  }
}

/* Desktop */
@media (min-width: 993px) {
  #navMenu { display: block; position: static; background: transparent; padding: 0; width: auto; }
  .nav-menu { flex-direction: row; gap: 24px; }
}

/* =============================
   Containers & Cards
   ============================= */
.container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.card, .panel, form, .table-container, .confirm-box {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--blur);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 20px;
  color: var(--color-light);
}

/* =============================
   Typography
   ============================= */
h1, h2, h3, h4 { font-weight: 600; margin-bottom: 16px; text-align: center; }
p { margin-bottom: 16px; text-align: center; }

/* =============================
   Buttons
   ============================= */
button, .btn {
  display: inline-block;
  color: var(--color-accent);
  padding: 12px 24px;
  background: var(--color-dark);
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: var(--transition);
}
.btn.btn-center, .btn-center { display: flex; justify-content: center; margin: 20px auto; }

.btn-primary { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: #256d47; }
.btn-secondary { background: var(--color-secondary); color: var(--color-white); }
.btn-secondary:hover { background: #162e6e; }
.btn-accent { background: var(--color-accent); color: var(--color-dark); }
.btn-accent:hover { background: #d97706; }
.btn-danger { background: #dc2626; color: var(--color-white); }
.btn-danger:hover { background: #b91c1c; }

.btn-reserve {
  background: var(--color-accent);
  color: var(--color-dark);
  padding: 14px 28px;
  border-radius: var(--radius);
  font-size: 1.2em;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: var(--transition);
}
.btn-reserve:hover { background: #d97706; transform: translateY(-2px); }

.btn-back {
  background: transparent;
  color: var(--color-light);
  border: 2px solid var(--color-light);
  padding: 10px 20px;
  border-radius: var(--radius);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  text-decoration: none;
}
.btn-back::before { content: "←"; font-size: 1.2em; }
.btn-back:hover { background: rgba(255, 255, 255, 0.15); color: var(--color-accent); border-color: var(--color-accent); }

/* =============================
   Forms
   ============================= */
input, select, textarea {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border: none;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-light);
  backdrop-filter: var(--blur);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-accent); }
label { display: block; font-weight: 500; margin-top: 12px; }

/* Better select contrast */
select { color: var(--color-dark); background: rgba(255,255,255,0.85); }
select:focus { background: rgba(255,255,255,0.95); }
select option { color: var(--color-dark); background: #fff; }
select option:checked { background: #e5e7eb; color: var(--color-dark); }
select option[disabled], select option[value=""] { color: #6b7280; }

/* Checkboxes/radios sizing + inline helper */
input[type="checkbox"], input[type="radio"] {
  width: auto !important;
  height: 18px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--color-accent);
}
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-direction: row-reverse; /* текстът първи, чекбоксът след него */
  margin-top: 12px;
  line-height: 1;
}
.checkbox-inline input[type="checkbox"] { flex: 0 0 auto; }

/* =============================
   Tables
   ============================= */
.table-container { width: 100%; overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; color: var(--color-light); }
thead th {
  background: rgba(255, 255, 255, 0.2);
  text-align: left;
  padding: 12px;
  position: sticky;
  top: 0;
  z-index: 2;
}
tbody td { padding: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.05); }
@media (max-width: 768px) {
  table, thead, tbody, th, td, tr { display: block; width: 100%; }
  thead { display: none; }
  tr { margin-bottom: 16px; background: rgba(255,255,255,0.08); border-radius: var(--radius); padding: 12px; }
  td { text-align: left; padding: 8px; position: relative; }
  td::before { content: attr(data-label); font-weight: 600; color: var(--color-accent); display: block; margin-bottom: 4px; }
}

/* =============================
   Admin
   ============================= */
.admin-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 20px;
}
.admin-box {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: var(--blur);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}
.admin-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 20px 0;
}
.admin-nav a {
  background: rgba(255, 255, 255, 0.1);
  padding: 12px 16px;
  border-radius: var(--radius);
  color: var(--color-light);
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}
.admin-nav a:hover { background: rgba(255, 255, 255, 0.2); color: var(--color-accent); }

/* CKEditor – toolbar и зона */
.admin-box .ck.ck-toolbar {
  background: rgba(255,255,255,0.95);
  border: 1px solid #e5e7eb;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
}
.admin-box .ck.ck-editor__main > .ck-editor__editable {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 12px 12px;
  min-height: 520px;
}
@media (min-width: 992px) {
  .admin-box .ck.ck-editor__main > .ck-editor__editable { min-height: 600px; }
}
.admin-box .ck.ck-editor__main > .ck-editor__editable,
.admin-box .ck-content {
  background: #ffffff !important;
  color: #111827 !important;
}
.admin-box .ck-content a { color: var(--color-secondary) !important; }
.admin-box .ck-content li { color: #111827 !important; }
.admin-box .ck-content .ck-placeholder { color: #6b7280 !important; }
.admin-box .ck-content pre {
  background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 10px 12px;
}

/* По-контрастни admin inputs */
.admin-box input[type="text"],
.admin-box input[type="email"],
.admin-box input[type="number"],
.admin-box input[type="tel"],
.admin-box select,
.admin-box textarea {
  background: rgba(255,255,255,0.92);
  color: var(--color-dark);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
}
.admin-box input::placeholder, .admin-box textarea::placeholder { color: #6b7280; opacity: 1; }
.admin-box input:focus, .admin-box select:focus, .admin-box textarea:focus {
  outline: 2px solid var(--color-accent);
  box-shadow: 0 0 0 3px rgba(245,158,11,.25);
}

/* =============================
   Sector Grid
   ============================= */
#sectorGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.sector {
  background: rgba(255, 255, 255, 0.15);
  padding: 16px;
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}
.sector:hover { background: var(--color-accent); color: var(--color-dark); }
.sector.selected { background: var(--color-primary); color: var(--color-white); }
.sector.booked, .sector.blocked, .sector.disabled {
  background: rgba(220, 38, 38, 0.25);
  border: 1px solid rgba(220, 38, 38, 0.5);
  color: #fca5a5; cursor: not-allowed; pointer-events: none; text-decoration: line-through;
}
.sector.booked:hover, .sector.blocked:hover, .sector.disabled:hover {
  background: rgba(220, 38, 38, 0.25); color: #fca5a5; transform: none;
}

/* =============================
   Confirm Page
   ============================= */
.confirm-box { max-width: 720px; margin: 40px auto; text-align: center; }
.payment-box {
  margin-top: 18px; padding: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px; text-align: center;
}
.payment-box b { display: block; margin-bottom: 8px; color: var(--color-accent); }
.payment-box .payment-text { white-space: pre-wrap; line-height: 1.6; }
.confirm-actions { margin-top: 20px; display: flex; justify-content: center; }
.confirm-actions .btn-reserve { padding: 12px 22px; }

/* =============================
   Gallery (public)
   ============================= */
.gallery-toolbar { display:flex; gap:10px; align-items:center; justify-content:center; margin:10px 0 16px; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
.gallery-item { position:relative; border-radius:var(--radius); overflow:hidden; background:rgba(255,255,255,0.08); box-shadow:var(--shadow); cursor:zoom-in; transition:transform .2s, box-shadow .2s; }
.gallery-item:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.gallery-item img { display:block; width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; }
.gallery-item::after { content:"🔍"; position:absolute; right:8px; bottom:8px; font-size:18px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .2s; z-index:3000; }
.lightbox.open { opacity:1; pointer-events:auto; }
.lightbox-content { max-width:min(96vw,1200px); max-height:90vh; border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); background:#000; }
.lightbox-content img { display:block; width:100%; height:auto; }
.lightbox-close, .lightbox-nav { position:absolute; top:16px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; backdrop-filter:var(--blur); padding:8px 12px; border-radius:999px; cursor:pointer; }
.lightbox-close { right:16px; }
.lightbox-nav { top:50%; transform:translateY(-50%); }
.lightbox-prev { left:16px; }
.lightbox-next { right:16px; }

/* =============================
   RICH TEXT (public content blocks)
   ============================= */
.rte { background: rgba(255,255,255,0.08); backdrop-filter: var(--blur); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; color: var(--color-light); }
.rte h1, .rte h2, .rte h3 { text-align:left; margin:.6em 0 .4em; }
.rte p { text-align:left; margin:.6em 0; }
.rte a { color: var(--color-accent); text-decoration: underline; }
.rte ul, .rte ol { margin:.6em 0 .6em 1.2em; }
.rte li { margin:.25em 0; }
.rte blockquote { margin:1em 0; padding:12px 16px; border-left:4px solid var(--color-accent); background:rgba(255,255,255,0.08); border-radius:8px; }
.rte img, .rte video, .rte iframe { max-width:100%; border-radius:12px; display:block; margin:12px auto; }
.rte table { width:100%; border-collapse:collapse; margin:12px 0; }
.rte th, .rte td { padding:8px 10px; border-bottom:1px solid rgba(255,255,255,0.15); text-align:left; }

/* =============================
   COMPETITIONS (listing + single)
   ============================= */

/* Grid: 1 / 2 / 3 колони */
.cards-grid.competitions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) { .cards-grid.competitions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .cards-grid.competitions-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card */
.cards-grid.competitions-grid .comp-card {
  background: rgba(255,255,255,0.10);
  backdrop-filter: var(--blur);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 12px;
  min-width: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cards-grid.competitions-grid .comp-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,.28); }

/* Image container with stable aspect (padding trick) */
.cards-grid.competitions-grid .comp-cover {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
}
/* Mobile: 4:3 */
.cards-grid.competitions-grid .comp-cover::before {
  content: "";
  display: block;
  padding-top: 75%;
}
@media (min-width: 577px) {
  /* ≥577px: 16:9 */
  .cards-grid.competitions-grid .comp-cover::before { padding-top: 56.25%; }
}

/* Fill the container; remove any fixed heights */
.cards-grid.competitions-grid .comp-cover img,
.cards-grid.competitions-grid .comp-hero {
  height: auto !important;
  max-height: none !important;
}
.cards-grid.competitions-grid .comp-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* Text */
.cards-grid.competitions-grid .comp-body { padding: 10px 4px 0; overflow: hidden; }
.cards-grid.competitions-grid .comp-title { margin: 8px 0 4px; text-align:left; font-size: 1.05rem; }
.cards-grid.competitions-grid .comp-title a { color: var(--color-light); text-decoration: none; }
.cards-grid.competitions-grid .comp-title a:hover { color: var(--color-accent); }
.cards-grid.competitions-grid .comp-meta { font-size: 0.92rem; opacity: 0.9; margin-bottom: 6px; text-align:left; }
.cards-grid.competitions-grid .comp-excerpt {
  text-align:left; margin:0 0 10px 0; font-size:.95rem; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cards-grid.competitions-grid .read-more { align-self:flex-start; }

/* Single */
.comp-single .comp-hero {
  width: 100%;
  height: auto;
  max-height: 520px;
  border-radius: 12px;
  margin: 12px 0 18px;
}
.comp-content { text-align: left; }
.comp-content p { margin: 0 0 12px 0; }

/* Pagination */
.pagination { margin-top: 24px; display: flex; justify-content: center; gap: 12px; align-items: center; }
.page-indicator { opacity: .9; }

/* =============================
   Helpers
   ============================= */
.empty-state {
  text-align: center;
  padding: 24px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.08);
  border: 1px dashed rgba(255,255,255,0.25);
}
.visually-hidden {
  position:absolute !important; height:1px;width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}
/* ===== Admin: tiles grid (exact 4 per row on desktop) ===== */
.admin-nav {
  display: grid;
  grid-template-columns: 1fr;            /* мобилно: 1 */
  gap: 16px;
  margin: 20px 0;
}

@media (min-width: 600px) {
  .admin-nav { grid-template-columns: repeat(2, 1fr); } /* малки таблети: 2 */
}
@media (min-width: 900px) {
  .admin-nav { grid-template-columns: repeat(3, 1fr); } /* таблети: 3 */
}
@media (min-width: 1200px) {
  .admin-nav { grid-template-columns: repeat(4, 1fr); } /* десктоп: 4 */
}

/* плочка */
.admin-nav a,
.admin-tile {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: var(--blur);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--color-light);
  text-decoration: none;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 18px;
  gap: 8px;
  text-align: center;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.admin-nav a:hover,
.admin-tile:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
}
/* ===== Admin: tiles grid (1fr mobile, 2/3/4 desktop) ===== */
.admin-nav {
  display: grid;
  grid-template-columns: 1fr;   /* мобилно: 1 колона */
  gap: 16px;
  margin: 20px 0;
}

/* защитно правило – ако някъде друго override-ва */
@media (max-width: 599.98px) {
  .admin-nav { grid-template-columns: 1fr !important; }
}

@media (min-width: 600px) {
  .admin-nav { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .admin-nav { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .admin-nav { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Competitions: mobile image cropping fix ===== */

/* По-малко изрязване: на мобилно правим контейнера квадратен
   вместо 4:3, за да се вижда повече от кадъра */
@media (max-width: 576px) {
  .cards-grid.competitions-grid .comp-cover::before {
    padding-top: 100% !important; /* 1:1 вместо 4:3 */
  }
  /* Показваме по-горната част от снимката (често е важна) */
  .cards-grid.competitions-grid .comp-cover img {
    object-position: 50% 20% !important; /* измести фокуса леко нагоре */
  }
}

/* Много малки екрани: напълно избягваме „рязане“
   (ще има леки “letterbox” полета, но се вижда целият кадър) */
@media (max-width: 380px) {
  .cards-grid.competitions-grid .comp-cover {
    background: #0b1220; /* тъмен фон зад снимката */
  }
  .cards-grid.competitions-grid .comp-cover img {
    object-fit: contain !important;  /* без crop */
    object-position: center !important;
  }
}
/* =============================
   ADMIN CALENDAR – контраст и четимост
   ============================= */
.admin-calendar #calendar {
  background: #ffffff;
  border-radius: 12px;
  padding: 8px;
}

/* Общ фон и граници */
.admin-calendar .fc-theme-standard .fc-scrollgrid {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px;
}

/* Заглавия, дни, номера на деня – тъмен текст */
.admin-calendar .fc .fc-toolbar-title,
.admin-calendar .fc .fc-col-header-cell-cushion,
.admin-calendar .fc .fc-daygrid-day-number {
  color: #111827 !important;
}

/* Хедър клетки и ден-клетки на бял фон */
.admin-calendar .fc .fc-col-header-cell,
.admin-calendar .fc .fc-daygrid-day {
  background: #ffffff !important;
}

/* Бутони */
.admin-calendar .fc .fc-button-primary {
  background: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: #ffffff !important;
}
.admin-calendar .fc .fc-button-primary:hover {
  background: #162e6e !important;
  border-color: #162e6e !important;
}

/* Граници */
.admin-calendar .fc-theme-standard td,
.admin-calendar .fc-theme-standard th {
  border-color: #e5e7eb !important;
}

/* Събития (ако не е подаден textColor от PHP) */
.admin-calendar .fc .fc-daygrid-event {
  border-radius: 8px;
  padding: 2px 6px;
  border: 1px solid rgba(0,0,0,0.08);
}

/* Днес – деликатен акцент */
.admin-calendar .fc .fc-day-today {
  background: #fff7ed !important; /* леко оранжево */
}
.status-pending {
  color: #f59e0b; /* жълто/оранжево */
  font-weight: bold;
}

.status-confirmed {
  color: #16a34a; /* зелено */
  font-weight: bold;
}

.status-denied {
  color: #dc2626; /* червено */
  font-weight: bold;
  text-decoration: line-through;
}
/* ✅ Mobile fix: 4 per row, fit inside screen */
@media (max-width: 480px) {
  #sectorGrid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px; /* по-малко разстояние, за да не прелива */
  }
  #sectorGrid .sector {
    padding: 8px;            /* по-малък padding на мобилно */
    font-size: 14px;         /* по-малък текст */
    box-sizing: border-box;  /* гарантира правилно оразмеряване */
  }
}
.gallery-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
/* =============================
   Unified Admin Buttons
   ============================= */
.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #111827; /* черен фон */
  color: var(--color-accent); /* жълто-оранжев текст */
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.admin-btn:hover {
  background: #1f2937; /* по-светъл черен */
  transform: translateY(-1px);
}

/* Вариации */
.admin-btn-primary { color: var(--color-white); background: var(--color-primary); }
.admin-btn-primary:hover { background: #256d47; }

.admin-btn-danger { color: #fff; background: #dc2626; }
.admin-btn-danger:hover { background: #b91c1c; }

.admin-btn-secondary { color: #fff; background: var(--color-secondary); }
.admin-btn-secondary:hover { background: #162e6e; }

}
/* === Mobile dropdown: absolute under header (not fixed), 85% opacity === */
@media (max-width: 600px){
  /* лого отгоре, burger в средата */
  header .nav-container{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  header { position: relative; z-index: 3000; }  /* за да е anchor за absolute менюто */
  header .logo{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  header .logo a{ margin: 0 auto; }
  header .burger{
    display:block !important;
    order:2;
    align-self:center;
    z-index: 3100;
  }

  /* падащото меню излиза извън хедъра и застъпва съдържанието отдолу */
  header #navMenu{
    position: absolute !important;   /* ВАЖНО: не е fixed */
    top: 100%;                        /* точно под хедъра */
    left: 0;
    right: 0;
    display: none;                    /* скрито по подразбиране */
    background: rgba(255,255,255,0.85);   /* 85% прозрачност */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 12px 16px;
    margin: 0;
    border: 0;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    z-index: 3050;                    /* над съдържанието */
    overflow-y: auto;
    max-height: calc(100vh - 120px);  /* да не излиза извън екрана */
  }
  header #navMenu.active{ display: block; }

  /* вертикален списък, центриран */
  header .nav-menu{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px;
    padding: 6px 0;
    margin: 0;
  }

  /* линковете – четими върху полупрозрачен фон */
  header .nav-menu a{
    display: block;
    width: 100%;
    max-width: 360px;
    text-align: center;
    padding: 12px 14px;
    border-radius: 12px;
    background: transparent !important;
    color: #111827 !important;
    text-decoration: none;
    transition: 0.2s ease;
  }
  header .nav-menu a:hover,
  header .nav-menu a.active{
    background: rgba(17,24,39,0.06) !important;
    color: #1E3A8A !important;
  }
}
/* === Mobile: центрирай падащото меню като панел === */
@media (max-width: 600px){
  header #navMenu{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(92vw, 420px);     /* по-тясно и центрирано */
    border-radius: 16px;         /* леко заобляне по желание */
  }

  /* линковете запълват панела и са центрирани */
  header .nav-menu{
    align-items: center !important;
    text-align: center;
  }
  header .nav-menu a{
    width: 100%;
    max-width: none;
  }
}
/* По-малки бутони за действия */
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0 2px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: #1f2937; /* тъмен фон */
  color: #fff;
  font-size: 12px; /* по-малък размер на емоджитата */
  transition: background 0.2s, transform 0.1s;
}

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

td.actions-cell {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
}

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

.view-btn:hover { background: #3b82f6; }
.confirm-btn:hover { background: #16a34a; }
.cancel-btn:hover { background: #dc2626; }
.delete-btn:hover { background: #b91c1c; }

.actions-cell form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

/* Новини – карта със стил като състезания */
.news-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

/* Заглавие и текст */
.news-card h3 {
  margin: 12px 0;
  font-size: 18px;
  font-weight: bold;
  color: #1e3a8a;
  text-align: center;
}

.news-body {
  padding: 15px;
  flex: 1;
  text-align: center;
}

/* Footer */
.news-footer {
  padding: 15px;
  border-top: 1px solid rgba(255,255,255,0.2);
  text-align: center;
}

/* Бутон "Прочети повече" – да е като "Виж повече" */
.news-footer .btn {
  background: #f59e0b;
  color: #111;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 18px;
  display: inline-block;
  text-decoration: none;
  transition: background 0.2s ease;
}

.news-footer .btn:hover {
  background: #d97706;
  color: #fff;
}
/* Base header (fixed) */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

/* Компенсация за височината на header-а */
body {
  padding-top: 200px; /* колкото е високо логото при нормално състояние */
}

/* Shrink състояние */
header.shrink .logo a {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, height 0.3s ease;
}

header.shrink .nav-container {
  padding-top: 8px;
  padding-bottom: 8px;
  transition: padding 0.3s ease;
}

/* На мобилни също скрива логото */
@media (max-width: 600px) {
  header.shrink .logo a {
    display: none !important;
  }
}