/* ============================================================================
   FrTravel palette on the Turie template.
   Loaded AFTER main.css. Recolours via the Turie CSS custom properties, then
   patches the handful of components we actually use that hardcode hex values.
   Light + dark (data-theme / prefers-color-scheme), matching the old B2C theme.
   ========================================================================== */

:root {
  /* Turie tokens → FrTravel palette.
     Design guide (Guide_design_options_FRTRAVEL): deep navy on the strong zones
     (header, footer, hero, primary buttons, accents), gold on prices/stars/
     small details, ivory ground. */
  --tp-common-white:   #FBF8F0;   /* paper — card / surface bg */
  --tp-common-white-2: #F2EBDC;   /* parchment */
  --tp-common-black:   #16130E;   /* ink — headings, strong text */
  --tp-common-yellow:  #C79F51;   /* gold — rating stars, small accents */
  --tp-common-red:     #12293F;   /* navy-deep — primary button hover */
  --tp-common-petals:  #E4EFEF;   /* zellige tint */
  --tp-grey-1:         #3C362A;   /* body copy */
  --tp-grey-2:         #7C7460;   /* muted / faint */
  --tp-grey-3:         #F2EBDC;   /* subtle fill */
  --tp-theme-1:        #1B3A5C;   /* deep navy — primary accent */
  --tp-border-1:       rgba(22, 19, 14, 0.10);

  /* Deep-navy brand colour for the strong zones */
  --ft-navy:         #1B3A5C;
  --ft-navy-deep:    #12293F;

  /* FrTravel extras reused by our own widgets */
  --ft-brass:        #A9813C;
  --ft-brass-deep:   #8A6A2E;
  --ft-brass-bright: #C79F51;
  --ft-gold:         #C79F51;
  --ft-zellige:      #1C5C61;
  --ft-clay:         #A8482F;
  --ft-ink:          #16130E;
  --ft-paper:        #FBF8F0;
  --ft-parchment:    #F2EBDC;
  --ft-surface:      #FBF8F0;
  --ft-surface-2:    #F2EBDC;
  --ft-text:         #16130E;
  --ft-text-muted:   #3C362A;
  --ft-text-faint:   #7C7460;
  --ft-line:         rgba(22, 19, 14, 0.10);
  --ft-shadow-1: 0 1px 2px rgba(22,19,14,.06), 0 1px 3px rgba(22,19,14,.08);
  --ft-shadow-2: 0 6px 20px rgba(22,19,14,.10), 0 2px 6px rgba(22,19,14,.08);
  --ft-shadow-3: 0 20px 48px rgba(22,19,14,.18), 0 6px 16px rgba(22,19,14,.10);
}

/* ---- Dark ---------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tp-common-white:   #1A1712;
    --tp-common-white-2: #211D16;
    --tp-common-black:   #F0E9D8;
    --tp-common-yellow:  #D8B36A;
    --tp-common-red:     #A9C6E4;
    --tp-common-petals:  #22302F;
    --tp-grey-1:         #C9BEA3;
    --tp-grey-2:         #8F866D;
    --tp-grey-3:         #211D16;
    --tp-theme-1:        #7EA8D2;
    --tp-border-1:       rgba(240, 233, 216, 0.12);

    --ft-navy:      #21456B;
    --ft-navy-deep: #16324F;

    --ft-surface:    #1A1712;
    --ft-surface-2:  #211D16;
    --ft-text:       #F0E9D8;
    --ft-text-muted: #C9BEA3;
    --ft-text-faint: #8F866D;
    --ft-line:       rgba(240, 233, 216, 0.12);
    --ft-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
    --ft-shadow-2: 0 6px 20px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
    --ft-shadow-3: 0 24px 56px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --tp-common-white:   #1A1712;
  --tp-common-white-2: #211D16;
  --tp-common-black:   #F0E9D8;
  --tp-common-yellow:  #D8B36A;
  --tp-common-red:     #A9C6E4;
  --tp-common-petals:  #22302F;
  --tp-grey-1:         #C9BEA3;
  --tp-grey-2:         #8F866D;
  --tp-grey-3:         #211D16;
  --tp-theme-1:        #7EA8D2;
  --tp-border-1:       rgba(240, 233, 216, 0.12);

  --ft-navy:      #21456B;
  --ft-navy-deep: #16324F;

  --ft-surface:    #1A1712;
  --ft-surface-2:  #211D16;
  --ft-text:       #F0E9D8;
  --ft-text-muted: #C9BEA3;
  --ft-text-faint: #8F866D;
  --ft-line:       rgba(240, 233, 216, 0.12);
  --ft-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --ft-shadow-2: 0 6px 20px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  --ft-shadow-3: 0 24px 56px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.35);
}

/* ---- Page ground ------------------------------------------------------------ */
body {
  background: var(--ft-surface);
  transition: background .3s ease, color .3s ease;
}

/* ---- Component patches: Turie rules that hardcode the coral hex ------------- */
.tp-btn-sm {
  color: var(--tp-theme-1);
  border-color: rgba(169, 129, 60, 0.30);
}
.tp-btn-sm:hover {
  background: var(--tp-theme-1);
  border-color: var(--tp-theme-1);
  color: var(--tp-common-white);
}
.tp-tour-item {
  border: 1px solid var(--tp-border-1);
  overflow: hidden;
}
.tp-tour-content { padding: 22px 24px 24px; }
.tp-tour-title, .tp-tour-title a { color: var(--tp-common-black); }
.tp-tour-review-score { color: var(--tp-grey-1); }
.tp-tour-item { background: var(--tp-common-white); }
.tp-tour-info { display: flex; flex-direction: column; gap: 7px; margin: 12px 0 16px; font-size: 14px; color: var(--tp-grey-1); }
.tp-tour-info span { display: inline-flex; align-items: center; gap: 8px; }
.tp-tour-info span i { color: var(--tp-theme-1); width: 14px; text-align: center; }
.tp-tour-thumb img { width: 100%; height: 230px; object-fit: cover; }
.tp-tour-media-meta { display: flex; gap: 6px; }
.tp-tour-media-meta span { width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.tp-tour-prefix { font-size: 13px; color: var(--tp-grey-2); display: block; }
.tp-tour-suffix { font-size: 13px; color: var(--tp-grey-2); }

.tp-tour-list .tp-tour-item,
.tp-tour-sidebar-widget,
.tp-filter-item,
.tp-tour-widget-form input,
.tp-tour-widget-form textarea,
input.tp-input,
.tp-select {
  border-color: var(--tp-border-1) !important;
}
.tp-tour-badge .discount {
  background: var(--tp-theme-1);
  color: var(--tp-common-white);
}
.tp-tour-new-price,
.tp-tour-price .tp-tour-bottom-price .tp-tour-new-price {
  color: var(--tp-theme-1);
}
.tp-tour-review span svg { color: var(--tp-common-yellow); }

/* niceSelect dropdown surfaces */
.nice-select { background-color: var(--tp-common-white); border-color: var(--tp-border-1); color: var(--tp-common-black); }
.nice-select .list { background-color: var(--tp-common-white); box-shadow: var(--ft-shadow-2); }
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus { background-color: var(--tp-grey-3); }

/* ion.rangeSlider — recolour coral → brass */
.irs--flat .irs-bar,
.irs--flat .irs-from,
.irs--flat .irs-to,
.irs--flat .irs-single { background-color: var(--tp-theme-1); }
.irs--flat .irs-from::before,
.irs--flat .irs-to::before,
.irs--flat .irs-single::before { border-top-color: var(--tp-theme-1); }
.irs--flat .irs-handle > i:first-child { background-color: var(--tp-theme-1); }
.irs--flat .irs-handle.state_hover > i:first-child,
.irs--flat .irs-handle:hover > i:first-child { background-color: var(--tp-common-red); }
.irs--flat .irs-line { background-color: var(--tp-grey-3); }
.irs--flat .irs-min, .irs--flat .irs-max { background-color: var(--tp-grey-3); color: var(--tp-grey-1); }
/* generic (non-flat skin) fallbacks */
.irs-bar, .irs-from, .irs-to, .irs-single { background: var(--tp-theme-1) !important; }
.irs-handle { border-color: var(--tp-theme-1) !important; }

/* magnific / offcanvas overlays already use rgba black — fine in both themes */

/* Links */
a { color: inherit; }
.tp-tour-title a:hover,
.tp-footer-widget-content a:hover { color: var(--tp-theme-1); }

/* Breadcrumb (used by the details page) */
.breadcrumb__content .breadcrumb__title { color: var(--tp-common-white); }

/* ---- Navy header (B2C) ----------------------------------------------------
   The design guide puts the header in the deep-navy brand colour with light
   nav text. Only the top-level bar is recoloured — the dropdown / megamenu
   panels keep their ivory background, so their links stay ink. */
#header-sticky.tp-header-area {
  background: var(--ft-navy);
}
/* The brand mark is a single-colour navy glyph — render it white on the bar,
   the same treatment the footer already uses. */
#header-sticky .tp-header-logo img {
  filter: brightness(0) invert(1);
}
#header-sticky .tp-main-menu > nav > ul > li > a {
  color: rgba(255, 255, 255, 0.82);
}
#header-sticky .tp-main-menu > nav > ul > li:hover > a,
#header-sticky .tp-main-menu > nav > ul > li.active > a {
  color: #fff;
}
#header-sticky .tp-main-menu > nav > ul > li.has-dropdown > a::after {
  color: rgba(255, 255, 255, 0.82);
}
#header-sticky .tp-main-menu > nav > ul > li:hover.has-dropdown > a::after,
#header-sticky .tp-main-menu > nav > ul > li.active.has-dropdown > a::after {
  color: #fff;
}
#header-sticky .tp-header-toogle {
  border-color: rgba(255, 255, 255, 0.28);
}
#header-sticky .tp-header-toogle span,
#header-sticky .tp-header-toogle:hover span {
  background: #fff;
}
#header-sticky .ft-theme-btn {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.28);
}
#header-sticky .ft-theme-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
/* Nav count badge → gold on the navy bar (invisible if left navy-on-navy) */
#header-sticky .ft-fav-count {
  background: var(--tp-common-yellow);
  color: var(--ft-navy);
}