/* SedixWeb Bosphorus Tour Booking Card — scoped styles */
.sdxcr-root, .sdxcr-root * { box-sizing: border-box; }
.sdxcr-root img { max-width: 100%; height: auto; }
.sdxcr-root ul { margin: 0; padding: 0; list-style: none; }
.sdxcr-root a { text-decoration: none; }

.sdxcr-root {
  --sdxcr-night: #0F2439;
  --sdxcr-water: #1B5566;
  --sdxcr-lantern: #D9A441;
  --sdxcr-lantern-soft: #F2D8A0;
  --sdxcr-coral: #C1432B;
  --sdxcr-cream: #FBF6EC;
  --sdxcr-ink: #1D2733;
  --sdxcr-ink-soft: #667080;
  --sdxcr-line: #E9E1D2;

  display: block;
  width: 100%;
}

/* Width Mode: default = fill container (for grid/column usage).
   If "Fixed Width" is selected in the widget panel, the .sdxcr-width-fixed class
   is added and the slider control on the PHP side applies max-width via that class. */
.sdxcr-width-fixed .sdxcr-root {
  max-width: 420px; /* default if not changed from the panel */
  margin: 0 auto;
}

.sdxcr-root .sdxcr-card {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--sdxcr-ink);
  background: var(--sdxcr-cream);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,36,57,0.06), 0 16px 36px -22px rgba(15,36,57,0.4);
  border: 1px solid rgba(15,36,57,0.07);
}

/* ---------- HEADER ---------- */
.sdxcr-root .sdxcr-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px 16px;
}

.sdxcr-root .sdxcr-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15,36,57,0.06);
}

/* ---- carousel / slider ---- */
.sdxcr-root .sdxcr-thumb-track { position: relative; width: 100%; height: 100%; }
.sdxcr-root .sdxcr-thumb-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.sdxcr-root .sdxcr-thumb-slide.is-active { opacity: 1; z-index: 1; }
.sdxcr-root .sdxcr-thumb-slide img,
.sdxcr-root .sdxcr-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sdxcr-root .sdxcr-thumb-prev,
.sdxcr-root .sdxcr-thumb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(15,36,57,0.55);
  color: #FBF6EC;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.sdxcr-root .sdxcr-thumb-prev { left: 4px; }
.sdxcr-root .sdxcr-thumb-next { right: 4px; }
.sdxcr-root .sdxcr-thumb-prev:hover,
.sdxcr-root .sdxcr-thumb-next:hover { background: rgba(15,36,57,0.8); }

.sdxcr-root .sdxcr-thumb-dots {
  position: absolute;
  z-index: 2;
  bottom: 5px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.sdxcr-root .sdxcr-thumb-dot {
  width: 5px;
  height: 5px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  cursor: pointer;
}
.sdxcr-root .sdxcr-thumb-dot.is-active { background: #FBF6EC; }

.sdxcr-root .sdxcr-headtext { flex: 1 1 auto; min-width: 0; padding-top: 1px; }

/* ---- Image Position: Top (full-width hero banner) ---- */
.sdxcr-imgpos-top .sdxcr-head {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0 0 16px;
}
.sdxcr-imgpos-top .sdxcr-thumb {
  width: 100% !important;
  margin-bottom: 14px;
}
.sdxcr-imgpos-top .sdxcr-headtext { padding: 0 20px; }

.sdxcr-root .sdxcr-eyebrow {
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sdxcr-coral);
  margin: 0 0 5px;
}

.sdxcr-root .sdxcr-title {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--sdxcr-night);
}

.sdxcr-root .sdxcr-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  flex-wrap: wrap;
}
.sdxcr-root .sdxcr-stars { display: inline-flex; gap: 2px; line-height: 0; }
.sdxcr-root .sdxcr-stars svg { width: 14px; height: 14px; display: block; }
.sdxcr-root .sdxcr-rating-score {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--sdxcr-night);
}
.sdxcr-root .sdxcr-rating-count { color: var(--sdxcr-ink-soft); }

/* ---------- PRICE / BADGES ---------- */
.sdxcr-root .sdxcr-priceblock {
  padding: 2px 20px 16px;
  border-top: 1px solid var(--sdxcr-line);
  padding-top: 16px;
  margin: 0 20px;
  padding-left: 0;
  padding-right: 0;
}
.sdxcr-root .sdxcr-priceRow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.sdxcr-root .sdxcr-priceLabel { font-size: 13.5px; color: var(--sdxcr-ink-soft); margin: 0 0 3px; }
.sdxcr-root .sdxcr-price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 33px;
  font-weight: 600;
  color: var(--sdxcr-night);
  line-height: 1;
}
.sdxcr-root .sdxcr-price span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--sdxcr-ink-soft);
  margin-left: 5px;
}
.sdxcr-root .sdxcr-sale {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--sdxcr-lantern);
  color: #3A2600;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 999px;
  white-space: nowrap;
}

.sdxcr-root .sdxcr-booked {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--sdxcr-ink-soft);
}
.sdxcr-root .sdxcr-booked strong {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--sdxcr-water);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- SIGNATURE: BOSPHORUS WATER LINE ---------- */
.sdxcr-root .sdxcr-wave {
  position: relative;
  height: 34px;
  margin-top: 16px;
  background: var(--sdxcr-night);
  overflow: hidden;
}
.sdxcr-root .sdxcr-wave svg { display: block; width: 100%; height: 100%; }
.sdxcr-root .sdxcr-light { animation: sdxcr-twinkle 3.2s ease-in-out infinite; }
.sdxcr-root .sdxcr-light:nth-child(2) { animation-delay: .8s; }
.sdxcr-root .sdxcr-light:nth-child(3) { animation-delay: 1.6s; }
.sdxcr-root .sdxcr-light:nth-child(4) { animation-delay: 2.4s; }
@keyframes sdxcr-twinkle { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.sdxcr-root .sdxcr-boat { animation: sdxcr-sail 10s linear infinite; }
@keyframes sdxcr-sail { 0% { transform: translateX(-30px); } 100% { transform: translateX(370px); } }
@media (prefers-reduced-motion: reduce) {
  .sdxcr-root .sdxcr-light, .sdxcr-root .sdxcr-boat { animation: none !important; }
}

/* ---------- FEATURES ---------- */
.sdxcr-root .sdxcr-body { padding: 16px 20px 4px; }

.sdxcr-root .sdxcr-features { list-style: none; margin: 0; padding: 0; }
.sdxcr-root .sdxcr-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--sdxcr-ink);
  padding: 7px 0;
}
.sdxcr-root .sdxcr-features li + li { border-top: 1px solid rgba(15,36,57,0.05); }
.sdxcr-root .sdxcr-features svg { flex: 0 0 auto; margin-top: 2px; }

.sdxcr-root .sdxcr-optional {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--sdxcr-line);
  font-size: 13.5px;
  color: var(--sdxcr-ink-soft);
  line-height: 1.5;
}
.sdxcr-root .sdxcr-optional strong { color: var(--sdxcr-ink); font-weight: 700; }

/* ---------- FOOTER / CTA ---------- */
.sdxcr-root .sdxcr-footer { padding: 16px 20px 6px; }
.sdxcr-root .sdxcr-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  background: var(--sdxcr-night);
  color: var(--sdxcr-cream);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  padding: 13px 18px;
  border-radius: 11px;
  transition: transform .15s ease, background .15s ease;
}
.sdxcr-root .sdxcr-cta:hover { background: #16324a; transform: translateY(-1px); color: var(--sdxcr-cream); }
.sdxcr-root .sdxcr-cta svg { flex: 0 0 auto; }
.sdxcr-root button.sdxcr-cta {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

.sdxcr-root .sdxcr-note {
  font-size: 12.5px;
  color: var(--sdxcr-ink-soft);
  text-align: center;
  margin: 10px 20px 18px;
}

/* ---------- GRID (multiple cards side by side) ----------
   Add this class to the "CSS Classes" field of the Container/Section
   that holds your cards in Elementor. If each widget inside it keeps its
   "Width Mode" setting on "Fill Container", all cards will always be
   exactly equal width (regardless of column width). */
.sdxcr-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(var(--sdxcr-grid-cols, 3), 1fr);
  align-items: stretch;
}
.sdxcr-grid .sdxcr-root { max-width: none !important; margin: 0 !important; height: 100%; }
.sdxcr-grid .sdxcr-card { height: 100%; display: flex; flex-direction: column; }
.sdxcr-grid .sdxcr-body { flex: 1 1 auto; }

@media (max-width: 1024px) {
  .sdxcr-grid { grid-template-columns: repeat(var(--sdxcr-grid-cols-tablet, 2), 1fr); }
}
@media (max-width: 640px) {
  .sdxcr-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .sdxcr-root .sdxcr-price { font-size: 27px; }
  .sdxcr-root .sdxcr-title { font-size: 18px; }
}