/* ==========================================================================
   Skaut — styles added on top of the purchased theme.
   ==========================================================================

   main.css and vendors.css are the theme as bought and are left alone, so a
   theme update does not overwrite anything here. This file holds the pieces
   the theme does not provide: the cookie bar, inline form feedback, and a few
   corrections to things the theme leaves inaccessible.

   Everything is prefixed or scoped so it cannot collide with theme classes.
   ========================================================================== */

:root {
    --sk-blue: #3554d1;
    --sk-dark: #051036;
    --sk-ink: #1c1f2b;
    --sk-muted: #697488;
    --sk-line: #e5e7ec;
    --sk-ok: #2f8055;
    --sk-ok-bg: #eef7f2;
    --sk-err: #c0332b;
    --sk-err-bg: #fdf1f0;
}

/* --------------------------------------------------------------------------
   Cookie consent
   -------------------------------------------------------------------------- */

.cookie-bar {
    position: fixed;
    z-index: 9999;
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--sk-line);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(5, 16, 54, .16);
    font-size: 14px;
    line-height: 1.55;
    color: var(--sk-ink);
    animation: sk-cookie-in .28s ease-out both;
}

@keyframes sk-cookie-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-bar { animation: none; }
}

.cookie-bar__text {
    flex: 1 1 320px;
    margin: 0;
    color: var(--sk-muted);
}

.cookie-bar__actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.cookie-bar__btn {
    padding: 10px 20px;
    border: 1px solid var(--sk-blue);
    border-radius: 4px;
    background: var(--sk-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.cookie-bar__btn:hover { background: #2a45b4; border-color: #2a45b4; }

.cookie-bar__btn--ghost {
    background: transparent;
    color: var(--sk-muted);
    border-color: var(--sk-line);
}

.cookie-bar__btn--ghost:hover { background: #f5f6f8; color: var(--sk-ink); }

/* --------------------------------------------------------------------------
   Inline form feedback
   Replaces alert() for the air-tickets enquiry form.
   -------------------------------------------------------------------------- */

.form-status {
    margin-top: 14px;
    padding: 11px 16px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    border-left: 3px solid transparent;
}

.form-status:empty { display: none; }

.form-status.is-ok {
    background: var(--sk-ok-bg);
    border-left-color: var(--sk-ok);
    color: #1f5c3c;
}

.form-status.is-error {
    background: var(--sk-err-bg);
    border-left-color: var(--sk-err);
    color: #8f1b15;
}

/* --------------------------------------------------------------------------
   Keyboard access
   -------------------------------------------------------------------------- */

/* The theme removes the focus ring on buttons and links and puts nothing in
   its place, so tabbing through the site gave no indication of where you
   were. :focus-visible only shows it for keyboard users, so the look with a
   mouse is unchanged. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--sk-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Skip link: the header menu is long, and without this a keyboard or screen
   reader user tabs through all of it on every page before reaching content. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: var(--sk-dark);
    color: #fff;
    font-size: 14px;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    left: 0;
    color: #fff;
}

/* Menu items that open a submenu are buttons now rather than <a> without
   href, so they need to inherit the theme's link appearance. */
.menu__nav .menu-toggle {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

/* --------------------------------------------------------------------------
   Images
   -------------------------------------------------------------------------- */

/* Offer photographs are uploaded at whatever size the office has to hand;
   several are over 2 MB and a few thousand pixels wide. This keeps one from
   pushing the page sideways on a phone while the resizing on upload catches
   up with the existing library. */
.offersCard__image img,
.topOfferCard__image img,
img.sk-fluid {
    max-width: 100%;
    height: auto;
}

/* Reserve the space a lazy-loaded image will occupy, so the page does not
   jump as photographs arrive. */
.sk-ratio-4x3 { aspect-ratio: 4 / 3; object-fit: cover; }
.sk-ratio-16x9 { aspect-ratio: 16 / 9; object-fit: cover; }

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */

/* The theme's menu button is a 20 px icon: too small to hit with a thumb. */
[data-x-click~="mobile-menu"] {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
}

@media (max-width: 767px) {
    /* A compact cookie bar: it covered a third of a phone screen. */
    .cookie-bar {
        left: 8px;
        right: 8px;
        bottom: 8px;
        gap: 10px;
        padding: 12px 14px;
        font-size: 13px;
        line-height: 1.45;
    }
    .cookie-bar__actions { width: 100%; }
    .cookie-bar__btn { flex: 1; min-height: 44px; }
}

/* Offer page: price and "check dates" always in reach on a phone. */
.sk-mobile-cta { display: none; }

@media (max-width: 991px) {
    .sk-mobile-cta {
        position: fixed;
        z-index: 900;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid var(--sk-line);
        box-shadow: 0 -6px 24px rgba(5, 16, 54, .10);
    }
    .sk-mobile-cta__price { flex: 1; font-size: 20px; font-weight: 600; color: var(--sk-dark); white-space: nowrap; }
    .sk-mobile-cta__price span { font-size: 13px; font-weight: 400; color: var(--sk-muted); }
    .sk-mobile-cta__call {
        display: inline-flex; align-items: center; justify-content: center;
        width: 48px; height: 48px; border-radius: 8px;
        border: 1px solid var(--sk-line); color: var(--sk-blue);
    }
    .sk-mobile-cta__go {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 48px; padding: 0 18px; border-radius: 8px;
        background: var(--sk-blue); color: #fff !important; font-weight: 500; white-space: nowrap;
    }
    /* Room for the bar at the end of the page, so it never hides the footer. */
    body:has(.sk-mobile-cta) footer { padding-bottom: 80px; }
    /* While the cookie bar is up it sits above the booking bar. */
    body:has(.sk-mobile-cta) .cookie-bar { bottom: 80px; }
}

@media (max-width: 575px) {
    /* The flag says enough; the word "Македонски" collided with the menu button. */
    .js-language-mainTitle { display: none; }
    .sk-mobile-cta { gap: 8px; padding-left: 12px; padding-right: 12px; }
    .sk-mobile-cta__go { padding: 0 14px; font-size: 15px; }
}