/* Existing Paulin roles, not a new theme. Loaded after component/vendor CSS.
 * Marketing brown and functional brown remain distinct intentional roles. */
body {
    --pp-design-brand: #3b2b26;
    --pp-design-accent: #4a3731;
    --pp-design-hover: #5a433b;
    --pp-design-paper: #f4f2ef;
    --pp-design-ink: #151515;
    --pp-design-muted: #746f6b;
    --pp-design-control-radius: 4px;
    --pp-design-touch-target: 44px;
    --ppbd-accent: var(--pp-design-accent);
    --ppop-brown: var(--pp-design-accent);
}

body .ppbd-inline-search {
    --ppbd-inline-accent: var(--pp-design-accent);
}

body :is(.pas, .pas-success) {
    --pas-accent: var(--pp-design-accent);
    --pas-accent-hover: var(--pp-design-hover);
}

/* The guest book is a functional service like booking, not a marketing hero. */
body .pgb {
    --pgb-brown: var(--pp-design-accent);
    --pgb-hover: var(--pp-design-hover);
}

/* Local Elementor widget rules can outrank the kit. Limit !important to
 * button lettering; leave hero text overlays and all button geometry intact. */
body .elementor-button,
body .elementor-button .elementor-button-text,
body .phb .phb__quantity-button,
body.pp-vikbooking-themed .vbo-showprc-head-wrapper .room_buttons_box .booknow {
    text-shadow: none !important;
}

/* Elementor's admin-bar rule makes lightboxes sticky in document flow.
 * Restore actual frontend popups only; do not touch editor dialogs. */
body.admin-bar .dialog-type-lightbox.elementor-popup-modal {
    position: fixed;
    inset: 0;
}

#elementor-popup-modal-7513 .dialog-widget-content,
#elementor-popup-modal-7513 .dialog-message {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
}

#elementor-popup-modal-7513 .dialog-message {
    overflow-y: auto;
    overscroll-behavior: contain;
}

body #elementor-popup-modal-7513 .dialog-close-button {
    display: grid;
    place-items: center;
    top: 8px;
    right: 8px;
    width: var(--pp-design-touch-target);
    height: var(--pp-design-touch-target);
    padding: 0;
    border-radius: var(--pp-design-control-radius);
    color: var(--pp-design-accent);
    line-height: 1;
}

#elementor-popup-modal-7513 .dialog-close-button svg {
    width: 15px;
    height: 15px;
}

/* The native gallery sets this root class while open. Temporarily hide only
 * our fixed booking/comparison panels; keep their state and event handlers. */
html.vikfxg-img-active body.pp-vikbooking-themed :is(#ppbd-price-popup, .ppbd-price-reopen, .pp-vbo-mobile-booking-bar) {
    visibility: hidden;
    pointer-events: none;
}

/* Native gallery controls inherited black, blurred lettering on brown.
 * Legacy inline mobile CSS forces34px/font26px and asymmetric padding with
 * !important. Override only those properties on these three native controls.
 * Keep the native gallery/image behavior and handlers. */
body.pp-vikbooking-themed .vikfxg-wrapper :is(.vikfxg-close, .vikfxg-prev, .vikfxg-next) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--pp-design-touch-target) !important;
    height: var(--pp-design-touch-target) !important;
    padding: 0 !important;
    border-radius: var(--pp-design-control-radius);
    background-color: var(--pp-design-accent);
    color: #fff;
    text-shadow: none;
    line-height: 1;
    transition: background-color 180ms ease;
}

body.pp-vikbooking-themed .vikfxg-wrapper .vikfxg-close {
    top: 16px;
    right: 16px;
    margin: 0;
}

body.pp-vikbooking-themed .vikfxg-wrapper :is(.vikfxg-prev, .vikfxg-next) {
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
    font-size: 0 !important;
}

body.pp-vikbooking-themed .vikfxg-wrapper :is(.vikfxg-prev, .vikfxg-next)::after {
    content: '';
    width: 20px;
    height: 20px;
    background: center / 20px 20px no-repeat;
    pointer-events: none;
}

body.pp-vikbooking-themed .vikfxg-wrapper .vikfxg-prev::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 4 7 10l6 6'/%3E%3C/svg%3E");
}

body.pp-vikbooking-themed .vikfxg-wrapper .vikfxg-next::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 4 6 6-6 6'/%3E%3C/svg%3E");
}

body.pp-vikbooking-themed .vikfxg-wrapper button:focus-visible {
    outline: 2px solid var(--pp-design-accent);
    outline-offset: 3px;
}

@media (hover: hover) {
    body.pp-vikbooking-themed .vikfxg-wrapper button:hover {
        background-color: var(--pp-design-hover);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.pp-vikbooking-themed .vikfxg-wrapper button {
        transition-duration: 1ms;
    }
}

/* Solid keyboard rings match the booking controls, without a hover/lift. */
body.ppop-body .ppop-app :is(a, button, input, select, textarea, summary):focus-visible,
body .elementor-form :is(input, select, textarea):focus-visible,
body .elementor-popup-modal .dialog-close-button:focus-visible {
    outline: 2px solid var(--pp-design-accent);
    outline-offset: 3px;
}

body.ppop-body :is(.ppop-filters button, .ppop-owner-stay button, .ppop-stay-item button, .ppop-button):focus-visible {
    transform: none;
}

/* The sidebar is intentional. Only the too-wide overview grid is repaired. */
@media (min-width: 768px) and (max-width: 899px) {
    body.ppop-body .ppop-hero.has-image {
        grid-template-columns: minmax(0, 1fr);
    }

    body.ppop-body .ppop-hero.has-image .ppop-property-image {
        width: 100%;
        height: auto;
        aspect-ratio: 2.25 / 1;
    }

    body.ppop-body .ppop-hero.has-image .ppop-month-form {
        grid-column: 1;
        grid-row: 3;
        width: min(210px, 100%);
        justify-self: start;
    }

    body.ppop-body .ppop-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.ppop-body .ppop-cards:not(.is-legacy-airbnb-only) .ppop-card:last-child {
        grid-column: 1 / -1;
    }
}

/* Increase actual touch targets, not just the drawn +/- or calendar glyph. */
@media (max-width: 900px) {
    body.ppbd-inline-booking-page .ppbd-inline-date-control,
    body.ppbd-inline-booking-page .ppbd-inline-search .ppbd-inline-destination-control select {
        height: var(--pp-design-touch-target) !important;
        min-height: var(--pp-design-touch-target) !important;
    }

    body.ppbd-inline-booking-page .ppbd-inline-guest-control {
        grid-template-columns: var(--pp-design-touch-target) minmax(0, 1fr) var(--pp-design-touch-target);
        min-height: var(--pp-design-touch-target);
    }

    body.ppbd-inline-booking-page .ppbd-inline-guest-control button {
        width: var(--pp-design-touch-target);
        height: var(--pp-design-touch-target);
    }
}