/* =========================
   תמונת ACF בראש הכרטיס
   ========================= */
.attraction-card .acf-image {
  width: 100%;
  height: 200px; /* גובה קבוע – אפשר לשנות */
  overflow: hidden;
  border-radius: 14px 14px 0 0; /* רדיוס לפינות עליונות כמו הכרטיס */
  margin-bottom: 12px;
  position: relative;
}

.attraction-card .acf-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ממלא את המסגרת בלי לעוות */
  display: block;
}

/* טקסט בכפתורי דרופדאון */
.dd-toggle.btn-audience,
.dd-toggle.btn-type,
.dd-toggle.btn-duration,
.dd-toggle.btn-tags,
.dd-toggle.btn-access {
  font-size: 15px;
  font-weight: 500; /* או 13px, 14px וכו׳ */
}

/* ========= עיגולי פינות לשלישייה (משך זמן | תגים | נגישות) ========= */
.dd-toggle.btn-3-left {
  border-radius: 0 25px 25px 0;
  min-width: 110px;
}
.dd-toggle.btn-3-mid {
  border-radius: 0;
}
.dd-toggle.btn-3-right {
  border-radius: 25px 0 0 25px;
}

/* =======================================================
   DESIGN TOKENS — משתני עיצוב גלובליים
   ======================================================= */
:root {
  --bg: #fff;          /* צבע רקע כללי */
  --card: #ffffff;     /* צבע רקע לכרטיסים/קונטיינרים */
  --ink: #111;         /* צבע טקסט ראשי */
  --muted: #6b7280;    /* צבע טקסט משני */
  --line: #e5e7eb;     /* צבע גבולות עדין */

  --brand: #2563eb;    /* צבע מותג/כפתורים */
  --brand-600: #1d4ed8;

  --r-card: 14px;      /* רדיוס פינות כרטיסים */
  --r-el: 10px;        /* רדיוס פינות לאלמנטים */

  --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
  --shadow-md: 0 6px 18px rgba(0,0,0,.10);

  --gap: 22px;         /* רווח בין עמודות/אריחים */
}

/* =======================================================
   PAGE BASE
   ======================================================= */
body {
  background: var(--bg);
  color: var(--ink);
}

/* =======================================================
   HEADER OFFSET
   ======================================================= */
.archive-attractions-layout {
  margin-top: 100px; /* אם תרצי שהחלק יהיה יותר קרוב לתפריט – אפשר להוריד ל-40px */
}

/* =======================================================
   LAYOUT GRID
   ======================================================= */
.archive-attractions-layout {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
  display: grid !important;
  grid-template-columns: 340px minmax(0, 1fr); /* סיידבר משמאל, גריד מימין */
  gap: 32px;
  align-items: start;
  direction: ltr;
}

/* =======================================================
   RTL INSIDE AREAS
   ======================================================= */
.attractions-filter,
.attractions-list {
  direction: rtl;
  text-align: right;
}

/* =======================================================
   SIDEBAR CARD
   ======================================================= */
.attractions-filter {
  background: #fff;
  border-radius: 24px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  padding: 20px;
  position: sticky;
  top: 120px;
  max-height: calc(100vh - 140px);
  overflow: auto;
}

/* =======================================================
   SIDEBAR HEADINGS
   ======================================================= */
.attractions-filter h3 {
  margin: 0 0 12px;
  font-size: 1.15rem;
}

/* =======================================================
   FILTER LABELS
   ======================================================= */
.attractions-filter label {
  display: block;
  margin: 10px 0 6px;
  font-size: .80rem;
  font-weight: 600;
}

/* =======================================================
   INPUTS (מיקום, סלקטים)
   ======================================================= */
.attractions-filter input[type="text"],
.attractions-filter select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  background: #fafafa;
  border-radius: 25px;
  padding: 10px 12px;
  font-size: .95rem;
  outline: none;
}

.attractions-filter input[type="text"]::placeholder {
  color: #9aa0a6;
}

.attractions-filter input[type="text"]:focus,
.attractions-filter select:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(37,99,235,.25);
  background: #fff;
}

/* =======================================================
   INLINE CHECKBOX
   ======================================================= */
.checkbox-inline {
  display: block;
  margin: 6px 0;
  font-weight: 400;
}

/* =======================================================
   RESULTS WRAPPER
   ======================================================= */
.attractions-list {
  width: 100%;
  min-width: 0;
}

/* =======================================================
   RESULTS GRID – 1 / 2 / 3 / 4 כרטיסים
   ======================================================= */

/* ברירת מחדל – מובייל: כרטיס אחד בשורה */
.attractions-grid {
  display: grid !important;
  gap: 20px;
  align-items: start;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* מ-700px ומעלה – 2 כרטיסים בשורה */
@media (min-width: 700px) {
  .attractions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* מ-1024px ומעלה – 3 כרטיסים בשורה */
@media (min-width: 1024px) {
  .attractions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* מ-1400px ומעלה – 4 כרטיסים בשורה */
@media (min-width: 1400px) {
  .attractions-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* אל תתנו לשום כרטיס "לפרוץ" את הטור שלו */
.attractions-grid > * {
  min-width: 0;
  max-width: 100%;
}

/* =======================================================
   CARD
   ======================================================= */
.attraction-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}

.attraction-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.attraction-card .thumb img,
.attraction-card .acf-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.attraction-card .title {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 700;
}

.attraction-card .subtitle {
  margin: 0 0 8px;
  color: #374151;
  font-size: .93rem;
}

.attraction-card .meta {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  font-size: .9rem;
}

.attraction-card .meta li {
  margin: 0 0 4px;
}

.attraction-card .btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  text-decoration: none;
  background: #111827;
  color: #fff;
  font-size: 14px;
}

.attraction-card .btn-more:hover {
  background: #000;
}

/* =======================================================
   META + עונות
   ======================================================= */
.meta {
  font-size: 14px;
  color: #374151;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* שורה ראשונה */
.meta-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.meta-type {
  font-weight: 600;
  font-size: 15px;
  color: #2563eb; /* כחול */
}

.meta-sep {
  color: #9ca3af;
}

.meta-access {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #2563eb; /* כחול */
}

.meta-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* עונות */
.meta-seasons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 2px 12px; /* קצת רווח פנימי */
  border-radius: 30px;
  background: #fff;   /* רקע לבן כדי שהצל יבלוט */
  box-shadow: 0 2px 8px rgba(0,0,0,0.12); /* 👈 הצל */
}

.meta-season {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #6b7280; /* אפור לטקסט */
}

.meta-season .meta-icon {
  filter: grayscale(100%) brightness(0.5); /* אפור */
}

/* =======================================================
   תוספות כרטיס – chips + stars
   ======================================================= */
.cb-card-extras {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cb-row-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1;
  color: #111827;
}

.cb-chip img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: inline-block;
}

.cb-row-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #111827;
}

.cb-stars {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  position: relative;
}

.cb-star {
  width: 18px;
  height: 18px;
  position: relative;
  display: inline-block;
}

.cb-star img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: grayscale(100%) brightness(0.4); /* מצב ריק כברירת מחדל */
}

/* מלא: בלי פילטר */
.cb-star.is-full img {
  filter: none;
}

/* חצי: מסכה שמסתירה חצי */
.cb-star.is-half {
  overflow: hidden;
}

.cb-star.is-half img {
  filter: none;
  clip-path: inset(0 50% 0 0); /* מציג חצי שמאלי (מתאים ל-RTL להיראות "חצי") */
}

.cb-row-cta {
  margin-top: 4px;
}

/* רספונסיביות קטנה לכרטיס */
@media (max-width: 540px) {
  .cb-chip {
    font-size: 12px;
    padding: 6px 9px;
  }
  .cb-star {
    width: 16px;
    height: 16px;
  }
}

/* =======================================================
   Select2
   ======================================================= */
.select2-container {
  direction: rtl;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--line);
  border-radius: var(--r-el) !important;
  min-height: 44px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  background: #fafafa;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink);
  padding: 0 6px;
}

.select2-dropdown {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.select2-results__option {
  padding: 10px 12px;
}

.select2-results__option--highlighted[aria-selected] {
  background: #eef2ff;
  color: var(--ink);
}

/* =======================================================
   FILTER GROUPS + ROWS
   ======================================================= */
.filter-group {
  margin-top: 12px;
}

.group-title {
  display: inline-block;
  background: #eaeef2;
  color: #111;
  border: 0;
  border-radius: 22px;
  padding: 8px 16px;
  font-weight: 400;
  margin: 14px 0 10px;
}

.filter-row {
  margin-bottom: 16px;
}

.filter-row.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.filter-row.three-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

/* =======================================================
   DROPDOWN BUTTONS
   ======================================================= */
.dd {
  position: relative;
}

.dd-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #eaeef2;
  color: #111;
  border: 0;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: .15s ease;
}

.dd-toggle:focus {
  box-shadow: 0 0 0 3px rgba(37,99,235,.25);
  outline: 0;
}

.dd-caret {
  margin-inline-start: 8px;
  opacity: .7;
}

/* פינות לשני מסננים */
.dd-toggle.btn-left {
  border-radius: 0 25px 25px 0;
}
.dd-toggle.btn-right {
  border-radius: 25px 0 0 25px;
}
.dd-toggle.btn-pill {
  border-radius: 25px;
}

/* תפריט הדרופדאון */
.dd-menu {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 6px);
  width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 10px;
  display: none;
  z-index: 50;
}

.dd[aria-open="true"] .dd-menu {
  display: block;
}

.dd-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  border-radius: 8px;
}

.dd-item:hover {
  background: #f6f7f9;
}

.dd-check {
  accent-color: var(--brand); /* משנה צבע לסימון המותג שלך */
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* =======================================================
   CHIPS בסיסיים
   ======================================================= */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  background: #fff;
  color: #111;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  transition: .15s ease;
  user-select: none;
  cursor: pointer;
}

.chip:hover {
  background: #e3e7ec;
}

/* הסתרת צ'קבוקסים של העונות */
.chip-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
}

/* אייקוני עונות */
.chips.seasons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;   /* מרכז אופקית */
  align-items: center;       /* מרכז אנכית (אם יש גובה קבוע) */
}

.chips.seasons img {
  filter: grayscale(100%) brightness(0);
  transition: filter 0.25s ease;
}

.chips.seasons .chip:hover img {
  filter: none;
}

/* ===== צ'יפס לתגים רנדומליים ===== */
.chips.random-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: right; /* אפשר לשנות ל-start אם רוצים מיושרים לשמאל */
  margin: 10px 0 20px;
}

.chips.random-tags .chip-input {
  display: none;
}

.chips.random-tags .chip {
  display: inline-block;
  padding: 1px 12px;
  border-radius: 16px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* 👈 הצל */
}

.chips.random-tags .chip:hover {
  background-color: #e2e8f0;
}

.chips.random-tags .chip-input:checked + .chip {
  background-color: #2563eb; /* כחול מותג */
  color: #fff;
  border-color: #1d4ed8;
}

/* כפתורי פילטר ספציפיים */
.dd-toggle.btn-audience {
  background: #f0f9ff;
  color: #0c4a6e;
}
.dd-toggle.btn-type {
  background: #fff7ed;
  color: #9a3412;
}
.dd-toggle.btn-duration {
  background: #f0fdf4;
  color: #166534;
}
.dd-toggle.btn-tags {
  background: #fdf2f8;
  color: #9d174d;
}
.dd-toggle.btn-access {
  background: #f3f4f6;
  color: #111827;
}

/* =======================================================
   RESPONSIVE – לייאאוט כללי
   ======================================================= */
@media (max-width: 1024px) {
  .archive-attractions-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .archive-attractions-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .attractions-filter {
    position: static;
    max-height: none;
  }
}

@media (max-width: 860px) {
  .filter-row.two-cols {
    grid-template-columns: 1fr;
  }

  .dd-toggle.btn-left,
  .dd-toggle.btn-right {
    border-radius: 25px;
  }

  .attractions-filter {
    width: 100% !important;
    max-width: 100% !important;
    position: static;   /* לא sticky במובייל */
    top: auto;
    height: auto;       /* לבטל 80vh במובייל */
    max-height: none;   /* לבטל הגבלה אם קיימת */
    overflow: visible;  /* שלא תיווצר גלילה פנימית בכוח */
    margin-top: 70px;   /* רווח מעל הסיידבר */
  }

  .filter-row,
  .dd,
  .dd-menu {
    width: 100%;
  }
}