:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --burgundy: #7b1e3a;
  --burgundy-dark: #5c1530;
  --accent: #eab308;
  --accent-light: #fef9c3;
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --danger: #dc2626;
  --success: #16a34a;
  --radius: 10px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 8px 20px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14);
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.logo {
  font-size: 21px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.3px;
}
.logo span { color: var(--burgundy); }
.logo .tld { color: var(--accent); }
.logo:hover { text-decoration: none; }

nav#siteNav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; flex: 1; gap: 6px 4px; }
nav a { font-weight: 500; color: var(--text); font-size: 15px; white-space: nowrap; }
nav a:hover { color: var(--primary); text-decoration: none; }
.btn-nav {
  background: var(--primary);
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.btn-nav:hover { background: var(--primary-dark); }

.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; }
.nav-account {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-left: 12px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
.role-bar { background: var(--bg); border-top: 1px solid var(--border); }
.role-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 10px 20px; }
.role-bar a { font-size: 14px; font-weight: 600; color: var(--primary); }

/* A dual-role account gets one row per kind of work. The rows carry a leading label and a
   tinted left edge so it stays obvious which hat a link belongs to — the two inboxes in
   particular are easy to confuse when they share a row. */
.role-bar-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 2px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, .05); flex: 0 0 auto; cursor: help;
}
.role-bar-supply { box-shadow: inset 3px 0 0 var(--primary); }
.role-bar-supply .role-bar-label { color: var(--primary); background: rgba(37, 99, 235, .1); }

/* The page you are on, in either bar or the main nav. Without this there is no way to tell
   which of several similarly named pages you actually opened. */
.role-bar a.is-current,
.nav-links a.is-current { color: var(--text); border-bottom: 2px solid var(--primary); }

/* Plain-language hint under a nav label. On a pointer device the tooltip carries it and the
   text would only add clutter, so it is hidden there and revealed on the stacked mobile menu
   where there is room and no hover to rely on. */
.nav-hint { display: none; }

/* "Nerede / Ne zaman" on the listing form. Each option carries a line of plain language under
   it, because the difference between "belirli bir tarihte" and "katılımcının belirlediği
   tarihte" is the whole point and a bare radio label does not carry it. */
.mode-choices { display: grid; gap: 8px; margin-bottom: 14px; }
.mode-choice {
  display: flex; align-items: flex-start; gap: 10px; width: auto; font-weight: 400;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; cursor: pointer; background: var(--card);
}
.mode-choice:hover { border-color: var(--primary); }
.mode-choice input { width: auto; margin: 2px 0 0; flex: 0 0 auto; }
.mode-choice span { display: block; }
.mode-choice strong { display: block; font-size: 14px; }
.mode-choice small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.mode-choice:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

.nav-bell { position: relative; display: inline-flex; align-items: center; }
.nav-bell .badge { position: absolute; top: -7px; right: -11px; font-size: 10px; line-height: 1; padding: 3px 5px; }
.nav-avatar { display: inline-flex; align-items: center; }
.nav-avatar img { width: 28px; height: 28px; object-fit: cover; border-radius: 50%; }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .logo { font-size: 18px; }

  nav#siteNav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 8px 20px 16px;
    z-index: 20;
    gap: 0;
  }
  nav#siteNav.open { display: flex; }
  .nav-links, .nav-account {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
  .nav-links a, .nav-account a {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }

  /* No hover on a phone, so the tooltip is unreachable — show the hint as a subtitle instead.
     Only inside the hamburger menu, which is stacked, has the width, and is short. */
  .nav-links .nav-hint {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--muted);
    margin-top: 2px;
  }

  /* The workspace bars sit above the page, not behind the hamburger, so stacking them would
     push every page down by a screen and a half before a word of content appeared. Each stays
     one line and scrolls sideways instead; the group pill stays pinned to the left edge so it
     is still clear which set is being scrolled. The labels are explicit enough on their own
     here ("Gelen Teklif İstekleri"), so the hints stay hidden. */
  .role-bar-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0 16px;
    padding: 6px 20px;
  }
  .role-bar-inner::-webkit-scrollbar { display: none; }
  .role-bar a { padding: 9px 0; white-space: nowrap; flex: 0 0 auto; }
  .role-bar .nav-hint { display: none; }
  .role-bar-label {
    position: sticky; left: 0; flex: 0 0 auto;
    background: var(--bg); box-shadow: 0 0 6px 6px var(--bg);
  }
  .role-bar-supply .role-bar-label { background: #eef2ff; box-shadow: 0 0 6px 6px #eef2ff; }
  .nav-account a:last-child { border-bottom: none; }
  .nav-account .btn-nav { display: inline-block; margin-top: 8px; text-align: center; border-bottom: none; }
}

.help-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.help-item { padding: 16px 20px; margin-bottom: 0; }
.help-item summary { font-weight: 600; cursor: pointer; list-style: none; font-size: 15px; }
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary::before { content: '+'; display: inline-block; width: 18px; color: var(--primary); font-weight: 700; }
.help-item[open] summary::before { content: '−'; }
.help-item p { margin: 12px 0 0 18px; color: var(--text); font-size: 15px; }

.hero-carousel {
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
  background: #0f172a;
  box-shadow: var(--shadow-lg);
}
.hc-track { position: relative; width: 100%; height: 100%; }
.hc-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.hc-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.hc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 32px;
  background: linear-gradient(transparent, rgba(15, 23, 42, 0.85));
  color: #fff;
}
.hc-caption-text { font-weight: 700; font-size: 22px; }
.hc-caption-organizer {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin-top: 4px;
}
.hc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, 0.45);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.hc-arrow:hover { background: rgba(15, 23, 42, 0.7); }
.hc-prev { left: 16px; }
.hc-next { right: 16px; }
.hc-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}
.hc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.15s ease;
}
.hc-dot.active { background: var(--accent); }

.hc-slide-promo {
  background: linear-gradient(135deg, var(--primary) 0%, var(--burgundy) 100%);
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.hc-promo-content { max-width: 620px; text-align: center; padding: 20px 32px; color: #fff; }
.hc-promo-content h2 { color: #fff; font-size: 28px; margin: 14px 0 10px; }
.hc-promo-content p { color: rgba(255,255,255,0.88); font-size: 15px; margin: 0 auto 18px; }
.hc-promo-content .btn { margin-top: 0; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--primary); }
.hc-promo-content .btn:hover { background: rgba(255,255,255,0.9); }

@media (max-width: 640px) {
  .hc-promo-content h2 { font-size: 19px; }
  .hc-promo-content p { font-size: 13px; }
}

@media (max-width: 640px) {
  .hero-carousel { height: 220px; }
  .hc-caption { padding: 14px 18px; }
  .hc-caption-text { font-size: 16px; }
}

main { padding: 32px 20px 60px; min-height: 70vh; }

.hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--burgundy) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 52px 32px 68px;
  margin-bottom: -40px;
  text-align: center;
}
.hero h1 { color: #fff; font-size: 34px; margin: 0 0 10px; font-weight: 800; letter-spacing: -0.5px; }
.hero p { color: rgba(255,255,255,0.88); margin: 0 auto; max-width: 520px; font-size: 16px; }

.search-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 640px;
  margin: 0 auto 32px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#resultsArea { transition: opacity 0.15s ease; min-height: 80px; }
#resultsArea.loading { opacity: 0.45; pointer-events: none; }
.search-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border); background: var(--bg); }
.search-tab {
  flex: 1;
  min-width: 110px;
  background: none;
  border: none;
  padding: 14px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.search-tab:hover { color: var(--text); }
.search-tab.active { color: var(--primary); border-bottom-color: var(--accent); background: var(--card); }

.search-panel { display: flex; gap: 8px; padding: 20px; }
.search-panel.hidden { display: none; }
.search-panel input[type=text], .search-panel select {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 15px;
  font-family: inherit;
  background: var(--card);
}
.search-panel .btn { margin-top: 0; white-space: nowrap; }

.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.section-heading h2 { margin: 0; }
.section-heading .count { color: var(--muted); font-size: 14px; }

h1, h2, h3 { color: var(--text); font-weight: 700; letter-spacing: -0.3px; }

.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-weight: 500;
}
.alert-success { background: #f0fdf4; color: var(--success); border: 1px solid #bbf7d0; }
.alert-error { background: #fef2f2; color: var(--danger); border: 1px solid #fecaca; }
.alert-info { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.chat-thread { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; }
.chat-msg { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; max-width: 80%; }
.chat-msg-mine { align-self: flex-end; background: #eff6ff; border-color: #bfdbfe; }
.chat-msg-meta { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.chat-msg-body { font-size: 14px; white-space: pre-wrap; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
/* "Benzer ilanlar" under a listing: smaller cards, three across the listing column. */
.similar-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.similar-head { flex-wrap: wrap; gap: 6px 14px; }
.similar-head h2 { white-space: nowrap; }
.similar-grid .tour-card img { height: 120px; }
.similar-grid .tour-card .body { padding: 12px; }
/* Home page featured block: three to a row on a desktop, two on a tablet, one on a phone. */
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3 { grid-template-columns: 1fr; } }

.tour-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.tour-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #c7d7fb; }
.tour-card img { width: 100%; height: 170px; object-fit: cover; background: #ddd; }
.tour-card .body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.tour-card h3 { margin: 0 0 6px; font-size: 18px; }
.tour-card .dest { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.tour-card .price { font-weight: 700; color: var(--primary); font-size: 18px; margin-top: auto; }
.tour-card .meta { font-size: 13px; color: var(--muted); margin-bottom: 12px; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.badge-pending { background: var(--accent-light); color: #854d0e; }
.badge-approved { background: #f0fdf4; color: var(--success); }
.badge-rejected { background: #fef2f2; color: var(--danger); }
.badge-confirmed { background: #f0fdf4; color: var(--success); }
.badge-cancelled { background: #f1f5f9; color: var(--muted); }
.badge-tag { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

form.form-box { max-width: 480px; }
label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: 14px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  outline: none;
}
textarea { resize: vertical; min-height: 100px; }

.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 16px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; box-shadow: var(--shadow-sm); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #b91c1c; }
.btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--bg); border-color: var(--primary); }

/* The one action the site most wants a visitor to take — get a quote — in the accent colour
   so it reads as different from every blue button around it. On the blue-to-burgundy hero the
   default link blue was nearly invisible; links there are white and underlined instead. */
.btn-accent { background: var(--accent); color: #1f1300; border: 1px solid transparent; font-weight: 700; box-shadow: 0 6px 18px rgba(234, 179, 8, 0.35); }
.btn-accent:hover { background: #facc15; color: #1f1300; transform: translateY(-1px); }
.btn-ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.7); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.12); color: #fff; }
.hero p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.hero .hero-actions { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hero .hero-actions .btn { margin-top: 0; }
/* The small "Teklif Al" on a listing card. A span, not a link, because the card itself is one;
   the footer's click handler sends it to data-href. Sits in the card's bottom row beside the price. */
.tour-card .card-cta { margin-top: 10px; align-self: flex-start; font-size: 13px; padding: 6px 12px; cursor: pointer; }
.tour-card .price + .card-cta { margin-top: 8px; }
.nav-links a.nav-cta { color: #1f1300; background: var(--accent); padding: 6px 14px; border-radius: 999px; font-weight: 700; }
.nav-links a.nav-cta:hover { background: #facc15; }
.btn-sm { padding: 6px 13px; font-size: 13px; margin-top: 0; }

table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
/* footer.php wraps every table in this; on a phone the table keeps a readable width and the
   strip scrolls sideways, instead of the last columns being cut off. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 768px) {
  .table-scroll table { min-width: 640px; }
  .table-scroll { margin: 0 -20px; padding: 0 20px; }
}
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { background: var(--bg); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
th a.sort-th { color: inherit; text-decoration: none; }
th a.sort-th:hover { text-decoration: underline; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f8fafc; }

.tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.tabs a { padding: 8px 16px; border-radius: 8px; background: var(--card); border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 500; transition: all 0.15s ease; }
.tabs a:hover { border-color: var(--primary); text-decoration: none; }
.tabs a.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* On a phone the page tabs (admin panel and the like) become one row of chips that scrolls
   sideways, like the role bars, instead of wrapping into a wall of buttons. footer.php scrolls
   the current one into view. */
@media (max-width: 768px) {
  /* A tinted band behind the strip, so the page tabs read as navigation and not as part of the
     content below. The organizer role bars get the same band and chips (further down). */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; margin: 0 -20px 18px; padding: 10px 20px; background: #e8effd; border-top: 1px solid #c7d7fb; border-bottom: 1px solid #c7d7fb; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: 0 0 auto; white-space: nowrap; border-radius: 999px; }
  .role-bar { background: #e8effd; border-color: #c7d7fb; }
  .role-bar-inner { gap: 0 8px; padding: 8px 20px; }
  .role-bar a { padding: 6px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-size: 13px; }
  .role-bar a.is-current { background: var(--primary); color: #fff; border-color: var(--primary); }
  .role-bar-label { background: #e8effd; }
  .role-bar-label::after { background: linear-gradient(90deg, #e8effd, rgba(232, 239, 253, 0)); }
}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center; box-shadow: var(--shadow-sm); }
.stat-card .num { font-size: 26px; font-weight: 800; color: var(--primary); letter-spacing: -0.5px; }
.stat-card .label { color: var(--muted); font-size: 13px; margin-top: 4px; }

.gallery-strip { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.gallery-strip img {
  width: 90px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  flex: 0 0 auto;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.gallery-strip img:hover { opacity: 1; }

.video-wrap { position: relative; width: 100%; padding-top: 56.25%; border-radius: 8px; overflow: hidden; background: #000; }
.video-wrap iframe, .video-wrap video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.itinerary { list-style: none; margin: 0; padding: 0; }
.itinerary li {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.itinerary li:last-child { border-bottom: none; }
.itinerary-day {
  flex: 0 0 auto;
  background: var(--burgundy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  height: fit-content;
  white-space: nowrap;
}
.itinerary-text { color: var(--text); }

.site-footer { border-top: 1px solid var(--border); padding: 24px 0; color: var(--muted); font-size: 13px; text-align: center; }
/* Pages opened inside the mobile app: the app has its own tabs and menu, so the site's navigation,
   role bars and footer are hidden and only the logo strip remains. See header.php. */
body.in-app .site-header, body.in-app .site-footer, body.in-app .tabs, body.in-app .tabs-select, body.in-app .role-bar { display: none !important; }
body.in-app main { padding-top: 8px; }

/* On the mobile WEBSITE the admin-style page tabs become a picker (footer.php builds it from the
   links): ten chips in a row are more than a thumb wants to drag through. */
.tabs-select { display: none; }
@media (max-width: 768px) {
  .tabs-select { display: block; width: 100%; margin: 0 0 18px; padding: 11px 40px 11px 14px; font-size: 15px; font-weight: 600; color: var(--text);
    background: var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 14px center;
    border: 1px solid #c7d7fb; border-radius: 10px; box-shadow: var(--shadow-sm); -webkit-appearance: none; appearance: none; }
  .tabs.has-select { display: none; }
  /* Role bars on the mobile website: the group pill stays, the link row becomes one picker. */
  .role-bar.has-select .role-bar-inner { overflow: visible; padding: 8px 20px; gap: 0 10px; align-items: center; }
  .role-bar.has-select .role-bar-inner a { display: none; }
  .role-bar.has-select .role-bar-label { position: static; }
  .role-bar-select.tabs-select { flex: 1 1 auto; width: auto; margin: 0; padding: 9px 36px 9px 12px; font-size: 14px; }
}

/* The Android app badge in the footer: a small dark pill, the way store badges look. */
/* "Bugüne özel" strip on the home page: one special day at a time, thin and wide. */
.today-strip { display: flex; align-items: center; gap: 14px; margin: 14px 36px 0; padding: 8px 10px 8px 14px; background: linear-gradient(90deg, #fff7d6, #fef3c7); border: 1px solid #fde68a; border-radius: 12px; min-height: 48px; }
.today-label { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #92400e; }
.today-items { flex: 1 1 auto; position: relative; min-height: 32px; }
.today-item { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; }
.today-item.active { opacity: 1; visibility: visible; }
.today-item:hover { text-decoration: none; }
.today-emoji { font-size: 20px; line-height: 1; }
.today-when { flex: 0 0 auto; background: #b45309; color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; }
.today-item strong { flex: 0 0 auto; font-size: 14px; }
.today-blurb { flex: 1 1 auto; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.today-cta { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--primary); }
.today-all { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #92400e; white-space: nowrap; }
@media (max-width: 768px) {
  .today-strip { margin: 12px 0 0; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .today-items { flex-basis: 100%; min-height: 58px; }
  .today-item { flex-wrap: wrap; white-space: normal; gap: 6px 10px; }
  .today-blurb { flex-basis: 100%; white-space: normal; }
  .today-all { margin-left: auto; }
}
/* Special-days calendar page. */
.special-card .body { gap: 6px; }
.special-top { display: flex; justify-content: space-between; align-items: center; }
.special-card .special-emoji { font-size: 30px; line-height: 1; }
.special-list { display: flex; flex-direction: column; gap: 8px; }
.special-row { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; }
.special-row.is-now { border-color: var(--accent); background: var(--accent-light); }
.special-date { flex: 0 0 46px; text-align: center; line-height: 1; }
.special-day { display: block; font-size: 22px; font-weight: 800; }
.special-mon { display: block; font-size: 11px; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.special-row .special-emoji { flex: 0 0 auto; font-size: 24px; }
.special-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; }
.special-side { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
@media (max-width: 640px) { .special-row { flex-wrap: wrap; } .special-side { flex-basis: 100%; justify-content: space-between; } }
/* Legal links row in the footer, and the long-form legal pages themselves. */
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 14px 0 10px; font-size: 13px; }
.footer-legal a { color: var(--muted); }
.legal { max-width: 820px; margin: 0 auto; line-height: 1.65; font-size: 15px; }
.legal h1 { font-size: 28px; margin-bottom: 4px; }
.legal h2 { font-size: 19px; margin: 28px 0 8px; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.legal-table th, .legal-table td { padding: 8px 10px; font-size: 14px; }
.legal-links { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.footer-app {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
  padding: 8px 16px 8px 12px; border-radius: 10px; background: var(--text); color: #fff;
  text-align: left; line-height: 1.15; transition: background 0.15s ease, transform 0.15s ease;
}
.footer-app:hover { background: #1e293b; color: #fff; text-decoration: none; transform: translateY(-1px); }
.footer-app svg { flex: 0 0 auto; color: #a3e635; }
.footer-app strong { display: block; font-size: 13px; font-weight: 700; }
.footer-app small { display: block; font-size: 11px; color: #cbd5e1; margin-top: 2px; }

/* ---------- Home page hero (index.php): rotating marketing banners, a static search box ---------- */
/* Every banner is a full panel (photo, badge, headline, price, button) and fades to the next;
   the first one is the site's own promise with the listing collage. The search form is not part
   of any banner: it sits on the hero's bottom edge and stays put while the banners change. */
.hero2 { position: relative; margin: 16px 0 0; height: 440px; overflow: hidden; background: var(--text); color: #fff; border-radius: 22px; box-shadow: var(--shadow-md); }
.hero2-banner { position: absolute; inset: 0; display: block; color: #fff; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; text-decoration: none; }
.hero2-banner:hover { color: #fff; text-decoration: none; }
.hero2-banner.active { opacity: 1; visibility: visible; z-index: 1; }
.hero2-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero2-bg-fallback { background: linear-gradient(135deg, var(--primary) 0%, var(--burgundy) 100%); }
.hero2-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,23,42,.86) 0%, rgba(15,23,42,.58) 50%, rgba(15,23,42,.25) 100%); }
.hero2-banner-brand::after { background: linear-gradient(90deg, rgba(15,23,42,.35) 0%, rgba(15,23,42,.15) 100%); }
/* Built-in marketing banners: no photo needed. Each theme is a gradient in the site's palette
   with two soft shapes for depth; the text carries the message. */
.hero2-banner-market::after { background: linear-gradient(90deg, rgba(15,23,42,.28) 0%, rgba(15,23,42,0) 70%); }
.hero2-market-bg { overflow: hidden; }
.hero2-market-bg::before, .hero2-market-bg::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.10); }
.hero2-market-bg::before { width: 520px; height: 520px; right: -120px; top: -220px; }
.hero2-market-bg::after { width: 320px; height: 320px; right: 220px; bottom: -200px; background: rgba(255,255,255,.07); }
.theme-wedding .hero2-market-bg { background: linear-gradient(120deg, #7b1e3a 0%, #a8325a 55%, #d97706 100%); }
.theme-boat .hero2-market-bg { background: linear-gradient(120deg, #0c4a6e 0%, #2563eb 55%, #22d3ee 100%); }
.theme-corporate .hero2-market-bg { background: linear-gradient(120deg, #0f172a 0%, #1e3a8a 60%, #2563eb 100%); }
.theme-supply .hero2-market-bg { background: linear-gradient(120deg, #14532d 0%, #0f766e 55%, #eab308 100%); }
.theme-provider .hero2-market-bg { background: linear-gradient(120deg, #3b0764 0%, #7b1e3a 55%, #ea580c 100%); }
.hero2-banner-inner { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 56px 84px; }
.hero2-copy { max-width: 600px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.hero2-kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.hero2-copy h1, .hero2-copy h2 { margin: 0; font-size: 40px; line-height: 1.08; font-weight: 900; letter-spacing: -1px; color: #fff; }
.hero2-copy > p { margin: 0; font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.88); max-width: 520px; }
.hero2-copy .hero2-price { font-size: 22px; font-weight: 800; color: var(--accent); }
.hero2-deal-badge { background: var(--accent); color: #1f1300; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.hero2-banner-btn { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; }
.hero2-sub { font-size: 14px; color: rgba(255,255,255,.85); }
.hero2-sub a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hero2-collage { position: relative; width: 400px; height: 300px; flex: 0 0 auto; }
.hero2-collage-item { position: absolute; display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px rgba(15,23,42,.35); background: #1e293b; }
.hero2-collage-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero2-collage-item.c1 { left: 0; top: 26px; width: 236px; height: 150px; transform: rotate(-3deg); }
.hero2-collage-item.c2 { right: 0; top: 0; width: 184px; height: 196px; transform: rotate(2deg); }
.hero2-collage-item.c3 { left: 86px; bottom: 0; width: 258px; height: 130px; transform: rotate(1.5deg); }
.hero2-tag { position: absolute; z-index: 2; font-size: 13px; font-weight: 700; border-radius: 10px; padding: 7px 12px; box-shadow: 0 8px 20px rgba(15,23,42,.2); }
.hero2-tag-price { left: 16px; bottom: 16px; background: var(--accent); color: #1f1300; border-radius: 999px; }
.hero2-tag-note { left: 214px; top: 80px; background: var(--card); color: var(--text); display: flex; flex-direction: column; gap: 1px; }
.hero2-tag-note .muted { font-size: 11px; font-weight: 600; }
.hero2-arrow { position: absolute; top: 50%; z-index: 3; transform: translateY(-60%); width: 40px; height: 40px; border-radius: 50%; background: rgba(15,23,42,.45); border: 1px solid rgba(255,255,255,.4); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.hero2-arrow:hover { background: rgba(15,23,42,.75); }
.hero2-prev { left: 18px; }
.hero2-next { right: 18px; }
.hero2-dots { position: absolute; right: 56px; bottom: 96px; z-index: 3; display: flex; gap: 6px; align-items: center; }
.hero2-dot { width: 8px; height: 8px; border-radius: 999px; border: none; padding: 0; background: rgba(255,255,255,.5); cursor: pointer; transition: width .2s ease; }
.hero2-dot.active { width: 22px; background: var(--accent); }
/* The static search box, overlapping the hero's bottom edge. */
.hero2-search { position: relative; z-index: 4; margin: -64px 56px 0; display: flex; gap: 8px; background: var(--card); padding: 8px; border-radius: 14px; box-shadow: 0 12px 30px rgba(15,23,42,.25); }
.hero2-search-field { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 48px; border-radius: 10px; background: var(--bg); color: var(--muted); margin: 0; font-weight: 400; }
.hero2-search-field input { border: none; background: transparent; padding: 0; height: 100%; font-size: 15px; box-shadow: none; }
.hero2-search-field input:focus { box-shadow: none; }
.hero2-search .btn { margin-top: 0; height: 48px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 10px; white-space: nowrap; }
.hero2-search .hero2-cta { padding: 0 26px; font-size: 16px; }
.hero2-compact { display: flex; justify-content: space-between; align-items: center; padding: 14px 0 6px; font-size: 14px; }

.proof-strip { position: relative; z-index: 3; margin: 18px 36px 0; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: var(--shadow-sm); }
.proof-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.proof-stat { display: flex; flex-direction: column; gap: 2px; min-width: 100px; }
.proof-n { font-size: 26px; font-weight: 900; letter-spacing: -0.5px; color: var(--primary); line-height: 1; }
.proof-l { font-size: 13px; color: var(--muted); }
.proof-cta { display: flex; flex-direction: column; gap: 3px; text-align: right; font-size: 13px; }
.proof-cta strong { font-size: 15px; color: var(--primary); }
.proof-cta:hover { text-decoration: none; }
.home-block { margin-top: 40px; }
.home-block-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-chip { padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--text); }
.cat-chip:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.cat-chip-more { color: var(--primary); border-style: dashed; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.step-n { width: 32px; height: 32px; border-radius: 50%; background: var(--burgundy); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.step h3 { margin: 10px 0 6px; font-size: 16px; }
.step p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

@media (max-width: 1000px) {
  .hero2-collage { display: none; }
  .hero2-copy { max-width: none; }
}
@media (max-width: 768px) {
  .hero2 { height: 400px; margin: 10px 0 0; border-radius: 16px; }
  .hero2-banner::after { background: linear-gradient(180deg, rgba(15,23,42,.35) 0%, rgba(15,23,42,.9) 65%); }
  .hero2-banner-brand::after { background: linear-gradient(180deg, rgba(15,23,42,.2) 0%, rgba(15,23,42,.45) 100%); }
  .hero2-banner-inner { padding: 22px 20px 96px; align-items: flex-end; }
  .hero2-copy { gap: 10px; }
  .hero2-copy h1, .hero2-copy h2 { font-size: 27px; letter-spacing: -0.6px; }
  .hero2-copy > p { font-size: 14px; line-height: 1.45; }
  .hero2-copy .hero2-price { font-size: 18px; }
  .hero2-sub { font-size: 13px; }
  .hero2-arrow { display: none; }
  .hero2-dots { right: 20px; bottom: 76px; }
  .hero2-search { margin: -56px 20px 0; flex-wrap: wrap; }
  .hero2-search-field { flex: 1 1 100%; }
  .hero2-search .btn { flex: 1 1 0; justify-content: center; height: 46px; }
  .hero2-search .hero2-cta { flex: 2 1 0; }
  .proof-strip { margin: 14px 0 0; padding: 14px 16px; flex-direction: column; align-items: stretch; }
  .proof-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .proof-n { font-size: 22px; }
  .proof-cta { text-align: left; border-top: 1px solid var(--border); padding-top: 12px; }
  .home-block { margin-top: 28px; }
  .cat-chip { font-size: 13px; padding: 7px 12px; }
  .steps { grid-template-columns: 1fr; }
}

.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }

.stops-map { width: 100%; height: 380px; border-radius: var(--radius); border: 1px solid var(--border); margin-top: 8px; z-index: 1; }
.stop-search { display: flex; gap: 8px; margin-top: 8px; position: relative; }
.stop-search input { flex: 1; }
.stop-search-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-md); margin-top: 4px; max-height: 220px; overflow-y: auto;
}
.stop-search-results div { padding: 10px 14px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--border); }
.stop-search-results div:last-child { border-bottom: none; }
.stop-search-results div:hover { background: var(--bg); }
.stop-list { list-style: none; margin: 12px 0 0; padding: 0; }
.stop-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.stop-list li:last-child { border-bottom: none; }
.stop-list input[type=text] { flex: 1; }
.stop-number {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700;
}
.stop-remove { flex: 0 0 auto; background: none; border: none; color: var(--danger); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 8px; }
.stop-remove:hover { opacity: 0.7; }

.category-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 6px 6px 6px 12px; font-size: 13px; }
.category-chip-remove { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; }
.category-chip-remove:hover { opacity: 0.7; }

.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two-col-grid > * { min-width: 0; }

.tour-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-top: 16px; align-items: start; }
.tour-layout > * { min-width: 0; }

@media (max-width: 860px) {
  .tour-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .two-col-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* The table is its own horizontal scroller here. Nothing on screen said so, so the columns
     past the right edge were simply invisible — these four layers are the standard scrolling
     shadow: the white pair masks the dark pair, and because the white pair scrolls WITH the
     content (background-attachment: local) the shadow only shows on a side there is more to
     reach. Pure CSS, and it disappears by itself once you scroll to the end. */
  table {
    display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
    background-image:
      linear-gradient(to right,  var(--card) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to left,   var(--card) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to right,  rgba(15, 23, 42, .16), rgba(15, 23, 42, 0)),
      linear-gradient(to left,   rgba(15, 23, 42, .16), rgba(15, 23, 42, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* List tables become a stack of cards (footer.php adds .stack and the data-label of each
     cell). The action buttons were the last column, off the right edge of every phone; here
     they close the card, full width, no sideways scrolling. */
  .table-scroll table.stack { min-width: 0; width: 100%; white-space: normal; background-image: none; overflow: visible; }
  table.stack, table.stack tbody { display: block; }
  table.stack .stack-head { display: none; }
  table.stack tr { display: block; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 6px 12px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
  table.stack td { display: block; position: relative; padding: 7px 0 7px 38%; border-bottom: 1px solid var(--border); font-size: 14px; overflow-wrap: anywhere; }
  table.stack td:last-child { border-bottom: none; }
  table.stack td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 9px; width: 34%; font-size: 11px; line-height: 1.3; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
  table.stack td:first-child { font-size: 15px; padding: 9px 0 7px; }
  table.stack td:first-child[data-label]::before { display: none; }
  table.stack td.actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 8px; }
  table.stack td.actions::before { display: none; }
  table.stack td.actions .btn, table.stack td.actions form { flex: 1 1 auto; text-align: center; }
  table.stack td.actions .btn { justify-content: center; }
  table.stack td:empty { display: none; }
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  display: inline-block;
  flex-shrink: 0;
}
.icon-sm { width: 0.75em; height: 0.75em; }
.icon-star { width: 18px; height: 18px; color: var(--accent); vertical-align: -0.2em; margin-right: 2px; }
.icon-star-empty { color: var(--border); }
.badge-tag .icon, .dest .icon, .tour-card .dest .icon { margin-right: 3px; }
th a.sort-th { display: inline-flex; align-items: center; }
.hc-arrow .icon { width: 18px; height: 18px; }
.search-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
nav a[href$="notifications.php"] { display: inline-flex; align-items: center; gap: 4px; }

.hidden { display: none !important; }

/* Visible to screen readers/search engines but not sighted users — for a page's real <h1> when
   the visual heading needs to be a different tag for styling reasons (e.g. matching a card). */
/* Breadcrumb trail on listing and profile pages (mirrors the BreadcrumbList structured data). */
.crumbs { font-size: 13px; margin: 0 0 12px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.crumbs li + li::before { content: '›'; color: var(--muted); margin-right: 4px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); font-weight: 500; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Multi-step wizard (registration, etc.) */
.wizard-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.wizard-step {
  width: 28px; height: 28px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border);
  color: var(--muted); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.15s ease;
}
.wizard-step.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.wizard-step.done { background: var(--success); border-color: var(--success); color: #fff; }
.wizard-step-line { flex: 1; height: 2px; background: var(--border); }
.wizard-step-line.done { background: var(--success); }

.role-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 10px; }
.role-choice-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 2px solid var(--border); border-radius: var(--radius);
  padding: 20px; font: inherit; color: inherit; transition: all 0.15s ease;
}
.role-choice-card:hover { border-color: #c7d7fb; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.role-choice-card.selected { border-color: var(--primary); background: #eff4ff; }
.role-choice-card h3 { margin: 0 0 6px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.role-choice-card p { margin: 0; color: var(--muted); font-size: 13px; }

/* Listing detail tabs (tour.php, tedarik-ilani.php): a tab bar on a desktop, an accordion on a
   phone, driven by footer.php. Lists of included / excluded items carry a tick or a cross. */
.detail-tabs { margin-top: 16px; }
.detail-tabbar { display: flex; gap: 4px; align-items: flex-end; padding: 0 10px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.detail-tabbar::-webkit-scrollbar { display: none; }
/* Framed tabs: each one a folder tab, the active one white and joined to the panel below it. */
.detail-tab { flex: 0 0 auto; position: relative; background: var(--bg); border: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0; margin-bottom: -1px; padding: 10px 16px 11px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; box-shadow: inset 0 3px 0 transparent; }
.detail-tab:hover { color: var(--text); background: #eef2ff; }
.detail-tab.active { background: var(--card); color: var(--primary); box-shadow: inset 0 3px 0 var(--primary); z-index: 1; }
.detail-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--card); }
.detail-panel { display: none; }
.detail-panel.active { display: block; }
.detail-panel .detail-body { background: var(--card); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 10px 10px; padding: 18px 20px; }
.detail-body > h3:first-child { margin-top: 0; }
.detail-body .sub-head { margin: 20px 0 8px; font-size: 16px; }
.detail-acc { display: none; }
.mark-list { list-style: none; margin: 0; padding: 0; }
.mark-list li { position: relative; padding: 6px 0 6px 28px; border-bottom: 1px solid var(--border); font-size: 15px; }
.mark-list li:last-child { border-bottom: 0; }
.mark-list li::before { position: absolute; left: 4px; top: 6px; font-weight: 700; }
.mark-check li::before { content: "\2713"; color: #15803d; }
.mark-cross li::before { content: "\2717"; color: #b91c1c; }
.mark-dot li::before { content: "\2022"; color: var(--primary); }
.two-col-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) {
  .two-col-lists { grid-template-columns: 1fr; }
  .detail-tabbar { display: none; }
  .detail-panel { display: block; border: 1px solid var(--border); border-radius: 10px; background: var(--card); margin-bottom: 10px; }
  .detail-acc { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; background: none; border: 0; padding: 14px 16px; font: inherit; font-size: 16px; font-weight: 700; color: var(--text); text-align: left; cursor: pointer; }
  .detail-acc .icon { flex-shrink: 0; transition: transform .15s; }
  .detail-panel.open .detail-acc .icon { transform: rotate(180deg); }
  .detail-panel .detail-body { display: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 14px 16px; }
  .detail-panel.open .detail-body { display: block; }
}