/* Additions to the original photographer design: booking button, owner banner, lightbox, accessibility. */

.owner-banner {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 10px 16px;
    font: 15px/1.4 system-ui, sans-serif;
    text-align: center;
    color: #fff;
    background: #b3433b;
}
.owner-banner a { color: inherit; text-decoration: underline; }
.owner-banner--soft { background: var(--dark-color-1); }

.about__town {
    display: block;
    margin-top: 8px;
    font-size: 0.45em;
    opacity: 0.75;
}
.about__book, .main-info__book {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.book-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    padding: 14px 22px;
    border-radius: 40px;
    font-size: 18px;
    color: var(--light-color);
    background: var(--primary-color-1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s;
}
.book-fab:hover { transform: scale(1.04); }
@media (min-width: 1197px) { .book-fab { display: none; } }

.foot-nav-item:hover { transform: scale(1.05); transition: 0.2s; }
.foot-nav-link { display: block; }
.foot-legal {
    margin-top: 24px;
    font-size: 14px;
    text-align: center;
    color: var(--light-color);
    opacity: 0.8;
}

/* FAQ question is a real button now */
.questions__question-img {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.soc-link { display: inline-flex; align-items: center; justify-content: center; color: var(--dark-color-1); }
.soc-link .soc-svg { width: 32px; height: 32px; }

.empty-note {
    padding: 40px 0;
    font-size: 20px;
    text-align: center;
    color: var(--dark-color-1);
}

img { max-width: 100%; height: auto; }

/* Lightbox */
.lb {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 16, 18, 0.92);
}
.lb[hidden] { display: none; }
.lb-img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.lb button {
    position: absolute;
    border: 0;
    background: none;
    color: #fff;
    font-size: 44px;
    line-height: 1;
    padding: 12px 18px;
    cursor: pointer;
}
.lb-close { top: 8px; right: 8px; }
.lb-prev { left: 4px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 4px; top: 50%; transform: translateY(-50%); }

:focus-visible { outline: 2px solid var(--primary-color-1); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}