/*
    Shared chrome for the anonymous-safe public pages: the top bar (brand, language, theme, signed-in
    user) and the footer.

    One definition rather than one per layout. The guest booking/photo pages and the video pages are
    different layouts for good reasons — the video pages carry the og: block that builds a link
    preview, the guest pages carry the booking form's bundles — but a visitor moving between them is
    looking at the same site, and two hand-matched copies of a header drift the moment either is
    touched. Both layouts link this file and render the same partials.

    Theming keys off data-bs-theme, which is what the Metronic bundles and Bootstrap 5.3 already
    follow, so dropdowns and buttons pick up dark mode without a second set of rules.
*/

:root {
    --public-bg: #ffffff;
    --public-surface: #ffffff;
    --public-text: #3f4254;
    --public-muted: #7e8299;
    --public-border: #ebedf3;
    --public-accent: #3699ff;
}

[data-bs-theme="dark"] {
    --public-bg: #15171c;
    --public-surface: #1e2128;
    --public-text: #cdd0d8;
    --public-muted: #9aa3b0;
    --public-border: #2b2f3a;
    --public-accent: #3699ff;
}

body {
    background: var(--public-bg);
    color: var(--public-text);
}

/* ---- Top bar ---- */

.public-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--public-border);
    background: var(--public-surface);
}

.public-nav .public-brand { display: flex; align-items: center; margin-right: 8px; }
/* 25/30px is the pair the landing header uses (h-25px h-lg-30px), so the mark is the same size
   wherever a visitor meets it. */
.public-nav .public-brand img { height: 25px; }

@media (min-width: 992px) {
    .public-nav .public-brand img { height: 30px; }
}

/* Two logos, one shown: the full lockup from md up, the mark alone below it, where the lockup beside
   the links, the flag, the theme toggle and the login pushed "Log in" onto two lines. The login does
   a similar trade -- icon AND words when there is room, the icon alone when there is not. The icon
   is always there, on the left, so the button does not change its face between the two, only its
   width. Same shape as .landing-login in _LandingLayout; keep the two in step. */
.public-nav .public-brand img.public-brand-narrow { display: none; }
.public-nav .public-login { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.public-nav .public-login .login-icon { display: inline-flex; line-height: 1; }

@media (max-width: 767.98px) {
    .public-nav .public-brand img.public-brand-wide { display: none; }
    .public-nav .public-brand img.public-brand-narrow { display: block; }

    /* A 40px square, the same size as the flag box and the theme toggle beside it. */
    .public-nav .public-login {
        width: 40px; height: 40px; padding: 0; gap: 0;
        border-radius: 10px;
    }
    .public-nav .public-login .public-login-text { display: none; }
}
.public-nav .public-links { display: flex; gap: 18px; }

.public-nav .public-links a {
    color: var(--public-text);
    font-weight: 500;
    text-decoration: none;
    padding: 6px 4px;
    border-bottom: 2px solid transparent;
}

.public-nav .public-links a:hover { color: var(--public-accent); }
.public-nav .public-links a.active { color: var(--public-accent); border-bottom-color: var(--public-accent); }

/* 8px, not 14: the flag box and the theme toggle sit as a tight pair on www.avento.hr. */
.public-nav .public-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.public-nav .public-actions .language-switch-area { display: flex; gap: 8px; }
.public-nav .public-actions .language-icon { color: var(--public-text); font-size: 18px; opacity: .6; }
.public-nav .public-actions .language-icon.language-icon-current { opacity: 1; }

/* Grouped language dropdown trigger (current flag) and the theme toggle beside it. Both are styled as
   the pair on www.avento.hr: two 40px bordered squares, 10px radius, transparent until hover, so the
   company site and the product sites read as one family. Keep the two blocks in step — they are
   deliberately identical apart from the icon each one holds. */
.public-lang {
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    background: transparent;
    border: 1px solid var(--public-border);
    border-radius: 10px;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.public-lang:hover { border-color: var(--public-accent); background: var(--public-border); }
.public-lang > i { font-size: 18px; line-height: 1; }

.public-theme-toggle {
    background: transparent;
    border: 1px solid var(--public-border);
    border-radius: 10px;
    color: var(--public-text);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    width: 40px; height: 40px; padding: 0;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
    display: inline-flex; align-items: center; justify-content: center;
}

.public-theme-toggle:hover { color: var(--public-accent); border-color: var(--public-accent); background: var(--public-border); }

/* Single-click sun/moon icon, matching the authenticated app's toggle. The correct icon is shown
   based on the resolved data-bs-theme; sun in light, moon in dark. */
.public-theme-toggle .svg-icon svg { width: 18px; height: 18px; }
.public-theme-toggle .theme-icon-dark { display: none; }
[data-bs-theme="dark"] .public-theme-toggle .theme-icon-light { display: none; }
[data-bs-theme="dark"] .public-theme-toggle .theme-icon-dark { display: inline-flex; }

/* Signed-in user: the same treatment as the landing header — the name reads as a control in the
   brand blue, NOT as a bordered pill. A standalone toggle bound to its menu by id
   (data-kt-menu-target — see PublicNav's markup for why the explicit binding is mandatory in this
   bar). Free to grow, because "Tenant\username" does not fit a fixed width. */
.public-user-toggle {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 .5rem;
    color: var(--bs-primary);
    font-weight: 700;
    font-size: 1.15rem;
    white-space: nowrap;
    cursor: pointer;
}

.public-user-toggle:hover { color: var(--bs-primary); }

@media (max-width: 575px) {
    .public-nav { gap: 12px; padding: 8px 12px; }
    .public-nav .public-brand img { height: 28px; }
    /* The name is the first thing to give up room on a phone; the controls beside it are fixed
       squares and cannot shrink. */
    .public-user-toggle {
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1rem;
    }
}

/* Phones: the page, the container and the card each kept their desktop padding, ~55px a side before
   any content, and a seven-column price table ran past the screen. html-prefixed to beat the layout's
   own inline .public-content rule, which comes later in <head>. */
@media (max-width: 575.98px) {
    html .public-content { padding: 8px; }
    html .public-content .container-fluid { padding-left: 0; padding-right: 0; }
    html .public-content .card > .card-body { padding-left: 12px; padding-right: 12px; }
}

/* ---- Footer ---- */

.public-footer { padding: 1.5rem 1rem; text-align: center; }
.public-footer .public-footer-line + .public-footer-line { margin-top: .25rem; }

/* ---- Iframe-embed mode (html.public-embed, set by _PublicLayout for the chrome-less
   ReservationAndPrices/View and Photos/View variants) ----
   The host page sizes the frame from the embed's height messages, so the embed's own scrollbar
   is noise -- but only its LOOKS are removed. Scrolling itself stays possible on purpose: it is
   the fallback that keeps content reachable when the sizing chain is absent (the host's
   <noscript> iframe, blocked JS) or refuses a height (the host clamps against runaway values).
   With overflow hidden instead, any of those cases left the form's bottom half unreachable.
   And the frame IS the chrome out there: no padding ring, the card surface runs to the border. */
html.public-embed { scrollbar-width: none; -ms-overflow-style: none; }
html.public-embed::-webkit-scrollbar { display: none; width: 0; height: 0; }
html.public-embed .public-content { padding: 0; }
html.public-embed .public-content .content { padding: 0; }
html.public-embed .public-content .container-fluid { padding-left: 0; padding-right: 0; }
html.public-embed .public-content .card { margin-bottom: 0; }
/* The card body's own bottom padding is the last piece of that ring: standalone it separates the
   content from the card's edge, but inside the frame it reads as dead space under the map before
   the host's border, which is exactly the gap the ring rules above set out to remove. */
html.public-embed .public-content .card-body { padding-bottom: 0; }

/* The embed's own surface colour. Standalone, dark mode is the neutral charcoal above; inside a
   frame the widget is a panel in somebody else's page, and a charcoal rectangle on a navy site
   reads as a hole rather than as part of the page. These are maestral-camping.hr's dark surface
   tokens, the only host embedding today -- when a second host appears, this is the pair that has
   to come from the host rather than from here. Light mode already lands on white for everyone. */
html.public-embed[data-bs-theme="dark"] {
    --public-bg: #112536;
    --public-surface: #112536;
    --public-border: #244159;
}

/* Zebra striping, corrected for dark mode. Bootstrap lightens nothing: it tints the odd
   row with --bs-table-striped-bg, and the Metronic dark bundle sets that to a near-black
   rgba(27,28,34,.75) -- so the stripe DARKENS in dark mode exactly as it does in light,
   and on the embed's navy surface the odd rows sink almost to black.
   A white overlay at the same 5% Bootstrap uses for light mode gets the direction right
   on any surface: the stripe is now a lift, not a hole, and it follows --public-surface
   wherever that is set rather than being pinned to one charcoal.
   The html prefix is only there to outrank the bundle's own .table rule whatever the
   link order ends up being. */
html[data-bs-theme="dark"] .table { --bs-table-striped-bg: rgba(255, 255, 255, .05); }