/* Loaded on every page — reset, typography, header/footer, and the small
   set of utility classes every page-specific stylesheet builds on top of.
   Kept deliberately small: page-specific rules belong in that page's own
   stylesheet (home.css/tour.css/page.css/tour-grid.css), not here. */

/* ?v=2 on every font url() below is a manual cache-buster — these files
   themselves aren't fingerprinted like css/js (see SiteSetting::
   fingerprint), so Cloudflare's edge cache keys on the bare path alone;
   bump this (and the matching ?v= on the 3 preload <link>s in
   layouts/app.blade.php) if a font file's own content ever changes, or
   to force Cloudflare to drop a stale cache-control it's still serving
   from before this. */

/* Self-hosted (files in /fonts/inter) rather than linked from Google
   Fonts — same font, but without the extra DNS lookup/connection to a
   third-party origin (fonts.googleapis.com + fonts.gstatic.com) that
   loading it from Google would add. Also the same font the katalay.org
   panel itself uses (Filament's own default) and, since this file loads
   on every page, what public/js/widgets/reservation.js's own
   .katalay-res rule picks up for free wherever that widget is embedded —
   one consistent font across panel, site, and reservation form. Only
   the subsets this site actually needs (Latin, Latin Extended-A for
   Turkish's ğ/ş/ı/İ, Cyrillic for Russian, Greek) — not the full
   Vietnamese/etc. set Google serves by default. Arabic/Urdu/Hindi/
   Chinese/Japanese/Korean have no web-font equivalent here on purpose —
   no modern typeface (this one included) covers those scripts, so they
   fall through to the visitor's own system font, same as everywhere
   else on the web. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/inter/inter-latin-400-normal.woff2?v=2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/inter/inter-latin-ext-400-normal.woff2?v=2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/inter/inter-latin-500-normal.woff2?v=2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/inter/inter-latin-ext-500-normal.woff2?v=2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/inter/inter-latin-600-normal.woff2?v=2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/inter/inter-latin-ext-600-normal.woff2?v=2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/inter/inter-latin-700-normal.woff2?v=2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/inter/inter-latin-ext-700-normal.woff2?v=2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cyrillic (Russian) + Greek — General Sans has neither, so these are
   what actually render for those two languages; the per-glyph browser
   fallback in body's font-family list below reaches Inter automatically
   for any character General Sans has no glyph for. Arabic/Urdu/Hindi/
   Chinese/Japanese/Korean have no equivalent here on purpose — no
   modern web font (this pair, Lexend Deca, or GT Eesti) covers those
   scripts either, so they fall through to the visitor's own system
   font, same as everywhere else on the web. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/inter/inter-cyrillic-400-normal.woff2?v=2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/inter/inter-greek-400-normal.woff2?v=2") format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/inter/inter-cyrillic-500-normal.woff2?v=2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/inter/inter-greek-500-normal.woff2?v=2") format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/inter/inter-cyrillic-600-normal.woff2?v=2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/inter/inter-greek-600-normal.woff2?v=2") format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/inter/inter-cyrillic-700-normal.woff2?v=2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/inter/inter-greek-700-normal.woff2?v=2") format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #ffffff;
    color: #475569;
    line-height: 1.5;
}

h1, h2, h3 {
    color: #0f172a;
}

h1 {
    font-weight: 800;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: #2563eb;
}

.container {
    max-width: 83.75rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.empty {
    color: #94a3b8;
    font-style: italic;
}

/* Site header — logo/name + primary nav, present on every page so a
   visitor can always get back to the tour list or home. */
.site-header {
    border-bottom: 1px solid #e2e8f0;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.header-menu {
    display: flex;
    align-items: center;
    flex: 1;
    /* flex-end, not space-between — on pages where .site-search doesn't
       render (the homepage, see @unless in app.blade.php), .site-nav
       would be this flex row's ONLY child, and space-between packs a
       lone child to the start (left) instead of the end. .site-search's
       own flex:1 already pushes .site-nav to the right whenever the
       search form IS present, so flex-end here doesn't change that case. */
    justify-content: flex-end;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #1e293b;
    cursor: pointer;
}

.site-search {
    display: flex;
    flex: 1;
    min-width: 8rem;
    max-width: 20rem;
    margin: 0 1.5rem;
}

.site-search input {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-right: none;
    border-radius: 0.5rem 0 0 0.5rem;
    font-size: 0.875rem;
}

.site-search button {
    display: flex;
    align-items: center;
    padding: 0 0.625rem;
    border: 1px solid #e2e8f0;
    border-radius: 0 0.5rem 0.5rem 0;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
}

.site-search button:hover {
    background: #f1f5f9;
}

.site-header a.brand {
    display: flex;
    /* logo.svg's own visual weight (wordmark + icon) sits in the upper
       ~60% of its viewBox — the "A Katalay Company" tagline trails below
       it — so box-centering the whole image against .site-nav's now
       padding-driven height leaves the wordmark looking slightly high.
       Padding (not margin) so it also grows .brand's own clickable area. */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.site-nav a {
    color: #475569;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 700;
}

.site-nav a:hover {
    color: #1e293b;
}

/* Visual-only placeholder (see app.blade.php's own comment on
   .lang-switcher) — styled to match the rest of .site-nav's link
   treatment (same color/weight as .site-nav a) rather than looking like
   a distinct form control. Hidden by $showLangSwitcher whenever this
   domain has only one configured language (currently always, on this
   site) — this CSS just needs to already be here for whenever a second
   language is added. */
.lang-switcher {
    position: relative;
}

.lang-switcher-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #475569;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.lang-switcher-toggle::-webkit-details-marker {
    display: none;
}

.lang-switcher-toggle:hover {
    color: #1e293b;
}

.lang-switcher-toggle svg {
    display: block;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.lang-switcher[open] .lang-switcher-toggle svg {
    transform: rotate(180deg);
}

.lang-flag {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
}

.lang-switcher-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 20;
    display: grid;
    gap: 0.125rem;
    width: 12rem;
    max-height: 20rem;
    overflow-y: auto;
    padding: 0.5rem;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.lang-switcher-menu a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    /* Not wired up yet (see the comment in app.blade.php) — cursor: default
       instead of pointer so hovering doesn't itself imply it's clickable
       in the normal sense, on top of the "Coming soon" title tooltip. */
    cursor: default;
}

.lang-switcher-menu a:hover {
    background: #f1f5f9;
}

.nav-tours,
.nav-favorites,
.nav-about,
.nav-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.nav-favorites-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: 9999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    /* Nudged up and left off its own inline position — reads as a badge
       sitting on the icon/label instead of just another word in the row. */
    position: relative;
    top: -0.375rem;
    margin-left: -0.5rem;
    line-height: 1;
}

/* Device-local "favorites" list (see public/js/favorites.js) — base look
   shared by the tour card (tour-grid.css adds its own absolute-
   position-over-the-image variant) and the tour detail page. Bookmark
   icon (same convention as Instagram/Twitter's own "Save"), not a
   heart — filled red once favorited. */
.favorite-like {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    /* Not a fixed gray — matches whatever text color it's actually
       sitting next to (card body text, subheader text), the same way
       plain text would, instead of standing out as its own color. */
    color: inherit;
    cursor: pointer;
}

.favorite-like.is-favorited {
    color: #dc2626;
}

.favorite-like.is-favorited svg {
    fill: #dc2626;
}

.favorite-like-pop svg {
    animation: favorite-pop 0.35s ease;
}

@keyframes favorite-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Viator-style top-of-page confirmation banner — created on demand by
   favorites.js, not present in the markup until the first click. Fixed
   (not absolute) so it sits above everything regardless of scroll
   position, same reasoning as any toast/snackbar pattern. */
.favorite-toast {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translate(-50%, -150%);
    z-index: 1000;
    background: #1e293b;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.favorite-toast.is-visible {
    transform: translate(-50%, 0);
}

.badge {
    display: inline-block;
    color: #64748b;
}

.badge.package {
    background: #dcfce7;
    color: #166534;
}

.card {
    background: #f1f5f9;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.btn {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    background: #2563eb;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
}

.btn:hover {
    background: #1d4ed8;
}

/* Site footer — present on every page, gives crawlers/users a consistent
   way back to key pages plus real contact info (helps trust/E-E-A-T
   signals, not just SEO boilerplate). */
.site-footer {
    border-top: 1px solid #e2e8f0;
    margin-top: 3rem;
}

.site-footer .container {
    padding-top: 2rem;
    padding-bottom: 2rem;
    color: #64748b;
    font-size: 0.875rem;
}

.site-footer a {
    color: #64748b;
}

.site-footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.75rem;
}

/* Cookie consent banner — bottom bar, shown only until the visitor picks
   accept/reject (see cookie-consent.js). z-index above everything else
   fixed/sticky on the page, including the katalay.org-hosted chat widget
   (chat-widget.js's own bubble/panel sit at 9998/9999) — needs to stay
   clickable and visible above it regardless of what else is on screen the
   first time a visitor lands. */
.cookie-consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    padding: 1rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cookie-consent-text {
    flex: 1 1 20rem;
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.5;
}

.cookie-consent-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cookie-consent-actions .btn {
    border: none;
    cursor: pointer;
}

.cookie-consent-reject {
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
}

.cookie-consent-reject:hover {
    background: #f1f5f9;
}

@media (max-width: 40rem) {
    .cookie-consent-banner {
        padding: 0.875rem 1rem;
    }

    .cookie-consent-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .nav-toggle {
        display: flex;
    }

    .header-menu {
        display: none;
        flex: none;
        order: 3;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        padding-bottom: 1rem;
    }

    .header-menu.is-open {
        display: flex;
    }

    .site-search {
        margin: 0 0 0.75rem;
        max-width: none;
    }

    .site-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding-top: 0;
        padding-bottom: 0;
    }
}