/* ==========================================================================
   Traveyo polish layer (2026-11-12)
   Loaded after traveyo.css. CSS-only refinements; no markup changes.
   Each block is independent, so any of them can be removed safely.
   ========================================================================== */

:root {
  --trvp-navy: #0b1d35;
  --trvp-navy-2: #12304d;
  --trvp-teal: #0b8f9b;
  --trvp-teal-soft: #e8f6f7;
  --trvp-text: #1f3550;
  --trvp-muted: #55697f;
  --trvp-line: #dde7ed;
  --trvp-radius: 14px;
  --trvp-shadow-sm: 0 2px 6px rgba(11, 29, 53, .05), 0 8px 22px rgba(11, 29, 53, .06);
  --trvp-shadow-md: 0 6px 14px rgba(11, 29, 53, .07), 0 18px 40px rgba(11, 29, 53, .10);
}

/* 1. Inner-page header ---------------------------------------------------
   The header gradient fades to transparent at both edges. Over the home hero
   that works, but on inner pages it sits on a white background, so the white
   "Giriş Yap / Kaydol" links and the logo area wash out. Inner pages get a
   solid navy header instead. */
body:has(> main.trv-page-inner) .page-header,
body:has(> main:not(.page-main--home)) .page-header {
  background:
    radial-gradient(circle at 16% 0%, rgba(34, 196, 202, .16), transparent 34%),
    radial-gradient(circle at 84% 0%, rgba(253, 150, 44, .08), transparent 30%),
    linear-gradient(100deg, #081a30 0%, var(--trvp-navy-2) 52%, #081a30 100%) !important;
}

/* 2. Mobile horizontal overflow on hotel detail ---------------------------
   The "related hotels" track uses min-width:max-content, which stretched the
   whole page to ~2600px on phones. Keep the section inside the viewport and
   let only the track scroll. */
.trv-related-hotels,
.trv-related-hotels > .container,
.trv-related-hotels__viewport {
  min-width: 0;
  max-width: 100%;
}
.trv-related-hotels__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.trv-related-hotel-card { scroll-snap-align: start; }
html, body { overflow-x: clip; }

/* The original template reserves a 20px left strip on <992px for a side menu
   that this site does not have, so every page sat 20px off-centre on phones. */
@media (max-width: 991px) {
  body { padding-left: 0 !important; }
  html.rtl body { padding-right: 0 !important; }
}

/* 3. Readability -----------------------------------------------------------
   Body copy was light grey on white at 12-13px. Darken muted text a little
   and give paragraphs more line height. Sizes are left alone. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.page-main p { line-height: 1.6; }
.trv-catalog-summary__text,
.trv-hotel-row__description,
.trv-hotel-row__booking small,
.trv-hotel-row__booking > span {
  color: var(--trvp-muted) !important;
}

/* 4. Focus states (keyboard users) --------------------------------------- */
.page-main a:focus-visible,
.page-main button:focus-visible,
.page-main .btn:focus-visible,
.page-main input:focus-visible,
.page-main select:focus-visible,
.page-header a:focus-visible,
.page-header button:focus-visible {
  outline: 2px solid #22c4ca !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* 5. Breadcrumb ----------------------------------------------------------- */
.breadcrumb-nav .breadcrumb-item a {
  transition: background-color .2s ease, color .2s ease;
}
.breadcrumb-nav .breadcrumb-item a:hover {
  color: var(--trvp-teal) !important;
}

/* 6. Hotel listing cards --------------------------------------------------- */
body .trv-hotel-row {
  border: 1px solid var(--trvp-line) !important;
  border-radius: var(--trvp-radius) !important;
  overflow: hidden;
  box-shadow: var(--trvp-shadow-sm) !important;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
body .trv-hotel-row:not(.trv-hotel-row--skeleton):hover {
  border-color: #c5dbe3 !important;
  box-shadow: var(--trvp-shadow-md) !important;
  transform: translateY(-2px);
}
body .trv-hotel-row__media {
  border-radius: 10px !important;
  overflow: hidden;
}
body .trv-hotel-row__media img {
  transition: transform .5s ease;
}
body .trv-hotel-row:hover .trv-hotel-row__media img {
  transform: scale(1.04);
}
body .trv-hotel-row__body h2 a {
  transition: color .2s ease;
}
body .trv-hotel-row__body h2 a:hover {
  color: var(--trvp-teal) !important;
}
body .trv-hotel-row__booking {
  background: linear-gradient(180deg, #fbfdfe 0%, #f4f9fb 100%) !important;
}
body .trv-hotel-row__date-button,
body .trv-hotel-row__detail-link {
  border-radius: 9px !important;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
body .trv-hotel-row__date-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(35, 162, 105, .25);
}
body .trv-hotel-row__footer {
  background: #fbfdfe !important;
}
body .trv-hotel-row__footer > span {
  border-radius: 999px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* 7. Sidebar filter & catalog summary ------------------------------------- */
@media (min-width: 992px) {
  body .sidebar-filter.card {
    border: 1px solid var(--trvp-line) !important;
    border-radius: var(--trvp-radius) !important;
    box-shadow: var(--trvp-shadow-sm) !important;
    overflow: hidden;
  }
}
body .trv-catalog-summary {
  border-radius: var(--trvp-radius) !important;
  box-shadow: var(--trvp-shadow-sm) !important;
}

/* 8. Empty results (e.g. "Filtreye uygun tur bulunamadı") ------------------- */
.category-content__items .hotel-card:only-child:not(:has(img)) {
  position: relative;
  padding: 44px 28px 40px 28px !important;
  border: 1px dashed #bcd3dc !important;
  border-radius: var(--trvp-radius) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5fafb 100%) !important;
  box-shadow: none !important;
  text-align: center;
}
.category-content__items .hotel-card:only-child:not(:has(img))::before {
  content: "\f002";
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--trvp-teal-soft);
  color: var(--trvp-teal);
  font: normal normal normal 22px/1 FontAwesome;
}
.category-content__items .hotel-card:only-child:not(:has(img)) h3 {
  color: var(--trvp-navy);
  font-weight: 700 !important;
}
.category-content__items .hotel-card:only-child:not(:has(img)) p {
  color: var(--trvp-muted);
}

/* 9. Hotel detail: room cards ---------------------------------------------- */
body .trv-room-card {
  border-radius: var(--trvp-radius) !important;
  box-shadow: var(--trvp-shadow-sm) !important;
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
body .trv-room-card:hover {
  box-shadow: var(--trvp-shadow-md) !important;
}
body .trv-room-card__cover {
  border-radius: 10px;
  overflow: hidden;
}
body .trv-room-card__cover:not(:has(img)) {
  background:
    radial-gradient(circle at 30% 20%, rgba(34, 196, 202, .18), transparent 60%),
    linear-gradient(135deg, #eef6f8 0%, #e2eef2 100%) !important;
  color: #7aa3b2 !important;
}
body .trv-room-card__date-button {
  border-radius: 9px !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
body .trv-room-card__date-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(11, 143, 155, .25);
}
body .trv-room-card__calendar-toggle > summary {
  cursor: pointer;
}

/* 10. Related hotel cards --------------------------------------------------- */
.trv-related-hotel-card {
  border-radius: var(--trvp-radius) !important;
  transition: box-shadow .25s ease, transform .25s ease;
}
.trv-related-hotel-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--trvp-shadow-md) !important;
}

/* 11. Footer ---------------------------------------------------------------- */
.trv-footer-upper a {
  transition: color .2s ease, padding-left .2s ease;
}
.trv-footer-upper .col-lg-3 a:not(.navbar-logo):not([class*="logo"]):hover {
  color: #5fe0e3 !important;
}

/* 12. Motion preference ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body .trv-hotel-row,
  body .trv-hotel-row__media img,
  body .trv-room-card,
  .trv-related-hotel-card {
    transition: none !important;
  }
  body .trv-hotel-row:hover,
  .trv-related-hotel-card:hover {
    transform: none !important;
  }
}