@charset "UTF-8";
/* =========================================================================
   D`PENARIK BALI VILLA — PAGE COMPONENTS
   File: assets/css/dpbv-pages.css   ·   loaded after dpbv-chrome.css
   Layout patterns specific to the ten rebuilt pages. Everything is composed
   from the tokens in dpbv-ds.css so the pages stay visually identical in
   rhythm, colour and type.
   ========================================================================= */

/* -------------------------------------------------------------------------
   MOTIF BANNER
   Inner-page banner built entirely from gradients + CSS motifs. The villa's
   photography is portrait-orientation, which crops badly into a wide strip,
   so the banner is decorative and the photographs are used in arch frames
   further down each page. It also costs zero image requests.
   ---------------------------------------------------------------------- */
.dpbv-mbanner {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    padding-block: calc(var(--dpbv-s8) + 2.2rem) var(--dpbv-s7);
    background:
        radial-gradient(120% 90% at 12% 8%,  rgba(61,133,103,.34), transparent 58%),
        radial-gradient(110% 80% at 88% 4%,  rgba(201,162,39,.20), transparent 52%),
        radial-gradient(140% 100% at 50% 108%, rgba(31,107,122,.32), transparent 60%),
        linear-gradient(158deg, #1b3b30 0%, #16211c 52%, #10251d 100%);
    color: var(--dpbv-shell);
    overflow: hidden;
    isolation: isolate;
}
/* woven alang-alang texture */
.dpbv-mbanner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        repeating-linear-gradient(45deg,  rgba(230,205,124,.030) 0 2px, transparent 2px 7px),
        repeating-linear-gradient(-45deg, rgba(230,205,124,.022) 0 2px, transparent 2px 7px);
}
/* carved gate arch, centred and subtle */
.dpbv-mbanner::after {
    content: "";
    position: absolute;
    z-index: -1;
    inline-size: min(30rem, 74vw);
    aspect-ratio: 1 / 1.05;
    inset-block-start: -14%;
    inset-inline-start: 50%;
    translate: -50% 0;
    border: 1px solid rgba(230,205,124,.20);
    border-radius: 50% 50% 0 0 / 62% 62% 0 0;
    background:
        radial-gradient(80% 60% at 50% 100%, rgba(201,162,39,.10), transparent 70%);
    pointer-events: none;
}
.dpbv-mbanner__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 60rem;
    margin-inline: auto;
    padding-inline: var(--dpbv-gutter);
}
.dpbv-mbanner__title {
    margin: 0 0 var(--dpbv-s3);
    font-family: var(--dpbv-font-display);
    font-size: var(--dpbv-t-h1);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.018em;
    color: var(--dpbv-shell);
    text-wrap: balance;
}
.dpbv-mbanner__sub {
    margin: 0 auto;
    max-width: 56ch;
    font-size: var(--dpbv-t-lead);
    line-height: 1.6;
    color: rgba(251,247,240,.78);
}
.dpbv-mbanner .dpbv-eyebrow { color: var(--dpbv-brass-lt); }
.dpbv-mbanner .dpbv-eyebrow::before,
.dpbv-mbanner .dpbv-eyebrow::after { background: var(--dpbv-brass-lt); }

/* small frangipani flourish under the subtitle */
.dpbv-mbanner__flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dpbv-s3);
    margin-top: var(--dpbv-s4);
}
.dpbv-mbanner__flourish::before,
.dpbv-mbanner__flourish::after {
    content: "";
    width: clamp(2.5rem, 8vw, 5rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(230,205,124,.6));
}
.dpbv-mbanner__flourish::after { background: linear-gradient(270deg, transparent, rgba(230,205,124,.6)); }
.dpbv-mbanner__flourish .dpbv-jepun {
    --dpbv-jepun-c: var(--dpbv-brass-lt);
    width: 22px; height: 22px;
    opacity: .9;
}

/* -------------------------------------------------------------------------
   STAT BAR — three-up facts, overlapping the banner edge
   ---------------------------------------------------------------------- */
.dpbv-statbar {
    position: relative;
    z-index: 3;
    display: grid;
    gap: var(--dpbv-s3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    width: 100%;
    max-width: 56rem;
    margin: calc(var(--dpbv-s6) * -1) auto 0;
    padding-inline: var(--dpbv-gutter);
}
.dpbv-stat {
    display: grid;
    gap: .2rem;
    padding: var(--dpbv-s3) var(--dpbv-s3);
    text-align: center;
    background: var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    border-top: 2px solid var(--dpbv-brass);
    border-radius: var(--dpbv-r-md);
    box-shadow: var(--dpbv-e2);
}
.dpbv-stat__label {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dpbv-muted);
}
.dpbv-stat__value {
    font-family: var(--dpbv-font-display);
    font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
    font-weight: 600;
    color: var(--dpbv-jade);
    line-height: 1.2;
}

/* -------------------------------------------------------------------------
   MAP + CONTACT
   ---------------------------------------------------------------------- */
.dpbv-mapgrid {
    display: grid;
    gap: var(--dpbv-s4);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 62rem) {
    .dpbv-mapgrid { grid-template-columns: 1.55fr 1fr; gap: var(--dpbv-s5); }
}
.dpbv-panel {
    background: var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-lg);
    box-shadow: var(--dpbv-e1);
    padding: var(--dpbv-s4);
}
.dpbv-panel--flush { padding: 0; overflow: hidden; }
.dpbv-panel__head { margin-bottom: var(--dpbv-s3); }
.dpbv-panel__head h2,
.dpbv-panel__head h3 { margin: 0 0 .4rem; }
.dpbv-panel__head p { margin: 0; color: var(--dpbv-muted); font-size: .96rem; }

.dpbv-map {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--dpbv-r-md);
    overflow: hidden;
    background: var(--dpbv-jade-wash);
    border: 1px solid var(--dpbv-line);
}
.dpbv-map iframe,
.dpbv-map > div {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* placeholder shown until the deferred iframe swaps its src in */
.dpbv-map__ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    gap: .5rem;
    color: var(--dpbv-muted);
    font-size: .88rem;
    background:
        repeating-linear-gradient(45deg, rgba(31,77,61,.04) 0 8px, transparent 8px 16px),
        var(--dpbv-jade-wash);
}
.dpbv-map__ph .dpbv-ico { color: var(--dpbv-jade); font-size: 1.6rem; }

.dpbv-mapgrid--center { align-items: center; }

/* large stat variant used as a pull-out figure beside prose */
.dpbv-stat--lg { padding: var(--dpbv-s4); gap: .3rem; }
.dpbv-stat--lg .dpbv-stat__value { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
.dpbv-stat--lg .dpbv-hint { font-size: .82rem; }
.dpbv-section--ink .dpbv-stat--lg {
    background: rgba(251,247,240,.055);
    border-color: rgba(251,247,240,.14);
    border-top-color: var(--dpbv-brass);
}
.dpbv-section--ink .dpbv-stat--lg .dpbv-stat__label { color: rgba(251,247,240,.66); }
.dpbv-section--ink .dpbv-stat--lg .dpbv-stat__value { color: var(--dpbv-brass-lt); }
.dpbv-section--ink .dpbv-stat--lg .dpbv-hint { color: rgba(251,247,240,.6); }

/* distance list — place name on the left, km badge on the right */
.dpbv-distlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.dpbv-distlist li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dpbv-s3);
    padding: .62rem .1rem;
    border-bottom: 1px dashed var(--dpbv-line);
    font-size: .95rem;
}
.dpbv-distlist li:last-child { border-bottom: 0; }
.dpbv-distlist span { color: var(--dpbv-ink-soft); min-width: 0; }
.dpbv-distlist strong {
    flex: 0 0 auto;
    padding: .2em .6em;
    border-radius: 999px;
    background: var(--dpbv-jade-wash);
    border: 1px solid var(--dpbv-line-gold);
    color: var(--dpbv-brass-deep);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

/* panels sitting on the ink section invert */
.dpbv-section--ink .dpbv-panel {
    background: rgba(251,247,240,.045);
    border-color: rgba(251,247,240,.13);
}
.dpbv-section--ink .dpbv-panel__head p,
.dpbv-section--ink .dpbv-lead { color: rgba(251,247,240,.74); }
.dpbv-section--ink .dpbv-distlist span { color: rgba(251,247,240,.8); }
.dpbv-section--ink .dpbv-distlist li { border-bottom-color: rgba(251,247,240,.12); }
.dpbv-section--ink .dpbv-feature__icon {
    background: rgba(251,247,240,.08);
    border-color: rgba(230,205,124,.4);
    color: var(--dpbv-brass-lt);
}

.dpbv-contactlist { display: grid; gap: .2rem; margin: 0 0 var(--dpbv-s3); padding: 0; list-style: none; }
.dpbv-contactlist li {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .7rem .2rem;
    border-bottom: 1px solid var(--dpbv-line);
}
.dpbv-contactlist li:last-child { border-bottom: 0; }
.dpbv-contactlist .dpbv-ico { color: var(--dpbv-brass-deep); font-size: 1.15rem; margin-top: .15em; }
.dpbv-contactlist strong {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--dpbv-muted);
    margin-bottom: .12rem;
}
.dpbv-contactlist a { color: var(--dpbv-jade); text-decoration: none; border-bottom: 1px solid var(--dpbv-line-gold); }
.dpbv-contactlist a:hover { color: var(--dpbv-jade-mid); border-bottom-color: var(--dpbv-brass); }

/* -------------------------------------------------------------------------
   ICON FEATURE TILES
   ---------------------------------------------------------------------- */
.dpbv-feature {
    display: flex;
    flex-direction: column;
    gap: var(--dpbv-s2);
    padding: var(--dpbv-s4);
    background: var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-lg);
    box-shadow: var(--dpbv-e1);
    transition: transform var(--dpbv-dur) var(--dpbv-ease-out),
                box-shadow var(--dpbv-dur) var(--dpbv-ease),
                border-color var(--dpbv-dur) var(--dpbv-ease);
}
.dpbv-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--dpbv-e2);
    border-color: var(--dpbv-line-gold);
}
.dpbv-feature__icon {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--dpbv-jade-wash);
    border: 1px solid var(--dpbv-line-gold);
    color: var(--dpbv-jade);
    margin-bottom: .35rem;
}
.dpbv-feature__icon .dpbv-ico { font-size: 1.4rem; }
.dpbv-feature h2,
.dpbv-feature h3,
.dpbv-feature h4 {
    margin: 0;
    font-size: var(--dpbv-t-h4);
    letter-spacing: 0;
}
.dpbv-feature p { margin: 0; color: var(--dpbv-muted); font-size: .96rem; }

/* -------------------------------------------------------------------------
   NUMBERED STEPS / TIMELINE
   ---------------------------------------------------------------------- */
.dpbv-steps { display: grid; gap: var(--dpbv-s4); counter-reset: dpbv-step; }
@media (min-width: 48rem) { .dpbv-steps--3 { grid-template-columns: repeat(3, 1fr); } }
.dpbv-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--dpbv-s2);
    padding: var(--dpbv-s4);
    background: var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-lg);
    box-shadow: var(--dpbv-e1);
}
.dpbv-step::before {
    counter-increment: dpbv-step;
    content: counter(dpbv-step, decimal-leading-zero);
    font-family: var(--dpbv-font-display);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1;
    color: var(--dpbv-brass);
}
.dpbv-step h3, .dpbv-step h4 { margin: 0; font-size: var(--dpbv-t-h4); }
.dpbv-step p { margin: 0; color: var(--dpbv-muted); font-size: .96rem; }

/* -------------------------------------------------------------------------
   LONG-FORM PROSE  (policy + privacy pages)
   Readability first: a comfortable measure, real heading hierarchy,
   styled lists, and a sticky table of contents on wide screens.
   ---------------------------------------------------------------------- */
.dpbv-doc {
    display: grid;
    gap: var(--dpbv-s5);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 68rem) {
    .dpbv-doc { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--dpbv-s6); }
}
.dpbv-toc {
    position: sticky;
    top: 6.5rem;
    padding: var(--dpbv-s4);
    background: var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    border-left: 2px solid var(--dpbv-brass);
    border-radius: var(--dpbv-r-md);
    box-shadow: var(--dpbv-e1);
}
.dpbv-toc__title {
    margin: 0 0 var(--dpbv-s2);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dpbv-brass-deep);
}
.dpbv-toc ol { margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: .1rem; }
.dpbv-toc a {
    display: block;
    padding: .34rem 0;
    font-size: .9rem;
    color: var(--dpbv-ink-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.dpbv-toc a:hover { color: var(--dpbv-jade); border-bottom-color: var(--dpbv-line-gold); }

.dpbv-prose { max-width: 70ch; }
.dpbv-prose > * + * { margin-top: var(--dpbv-s3); }
.dpbv-prose h2 {
    margin-top: var(--dpbv-s5);
    padding-top: var(--dpbv-s3);
    border-top: 1px solid var(--dpbv-line);
    font-size: var(--dpbv-t-h3);
    scroll-margin-top: 7rem;
}
.dpbv-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dpbv-prose h3 { margin-top: var(--dpbv-s4); font-size: var(--dpbv-t-h4); scroll-margin-top: 7rem; }
.dpbv-prose p { color: var(--dpbv-ink-soft); }
.dpbv-prose ul, .dpbv-prose ol { margin: 0; padding-left: 0; list-style: none; display: grid; gap: .55rem; }
.dpbv-prose ul > li {
    position: relative;
    padding-left: 1.7rem;
    color: var(--dpbv-ink-soft);
}
.dpbv-prose ul > li::before {
    content: "";
    position: absolute;
    inset-inline-start: .28rem;
    inset-block-start: .62em;
    width: 6px; height: 6px;
    rotate: 45deg;
    background: var(--dpbv-brass);
}
.dpbv-prose ol { counter-reset: dpbv-ol; }
.dpbv-prose ol > li {
    position: relative;
    padding-left: 2.1rem;
    color: var(--dpbv-ink-soft);
}
.dpbv-prose ol > li::before {
    counter-increment: dpbv-ol;
    content: counter(dpbv-ol) ".";
    position: absolute;
    inset-inline-start: 0;
    font-weight: 700;
    color: var(--dpbv-brass-deep);
}
/* :not(.dpbv-btn) so a button placed inside prose is not underlined —
   `.dpbv-prose a` (0,1,1) would otherwise outrank `.dpbv-btn` (0,1,0). */
.dpbv-prose a:not(.dpbv-btn) {
    color: var(--dpbv-jade);
    text-decoration: underline;
    text-decoration-color: var(--dpbv-line-gold);
    text-underline-offset: .18em;
}
.dpbv-prose a:not(.dpbv-btn):hover { color: var(--dpbv-jade-mid); text-decoration-color: var(--dpbv-brass); }
.dpbv-prose a.dpbv-btn { text-decoration: none; }
.dpbv-prose strong { color: var(--dpbv-ink); font-weight: 650; }

/* callout — used for the acknowledgement / important notices */
.dpbv-callout {
    display: flex;
    gap: var(--dpbv-s3);
    padding: var(--dpbv-s4);
    background: var(--dpbv-jade-wash);
    border: 1px solid var(--dpbv-line);
    border-left: 3px solid var(--dpbv-jade);
    border-radius: var(--dpbv-r-md);
}
.dpbv-callout--gold { background: rgba(201,162,39,.09); border-left-color: var(--dpbv-brass); }
.dpbv-callout--clay { background: rgba(193,101,63,.08); border-left-color: var(--dpbv-terracotta); }
.dpbv-callout .dpbv-ico { flex: 0 0 auto; font-size: 1.3rem; color: var(--dpbv-jade); margin-top: .1em; }
.dpbv-callout--gold .dpbv-ico { color: var(--dpbv-brass-deep); }
.dpbv-callout--clay .dpbv-ico { color: var(--dpbv-terracotta-dp); }
.dpbv-callout p { margin: 0; }
.dpbv-callout p + p { margin-top: .6rem; }

/* rule card — a strict policy point */
.dpbv-rules { display: grid; gap: var(--dpbv-s3); }
@media (min-width: 48rem) { .dpbv-rules--2 { grid-template-columns: repeat(2, 1fr); } }
.dpbv-rule-card {
    display: flex;
    flex-direction: column;
    gap: var(--dpbv-s2);
    padding: var(--dpbv-s4);
    background: var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-lg);
    box-shadow: var(--dpbv-e1);
}
.dpbv-rule-card__head {
    display: flex;
    align-items: center;
    gap: .7rem;
}
.dpbv-rule-card__head h3 { margin: 0; font-size: var(--dpbv-t-h4); }
.dpbv-rule-card__head .dpbv-ico { font-size: 1.25rem; color: var(--dpbv-terracotta); }
.dpbv-rule-card--ok .dpbv-rule-card__head .dpbv-ico { color: var(--dpbv-jade-lt); }
.dpbv-rule-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.dpbv-rule-card li {
    position: relative;
    padding-left: 1.5rem;
    font-size: .96rem;
    color: var(--dpbv-muted);
}
.dpbv-rule-card li::before {
    content: "";
    position: absolute;
    inset-inline-start: .2rem;
    inset-block-start: .6em;
    width: 5px; height: 5px;
    rotate: 45deg;
    background: var(--dpbv-brass);
}

/* -------------------------------------------------------------------------
   GALLERY — arch-framed portrait imagery
   ---------------------------------------------------------------------- */
.dpbv-gallery {
    display: grid;
    gap: var(--dpbv-s3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.dpbv-gallery figure { margin: 0; position: relative; }
.dpbv-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--dpbv-r-arch);
    box-shadow: var(--dpbv-e2);
    transition: transform var(--dpbv-dur) var(--dpbv-ease-out),
                box-shadow var(--dpbv-dur) var(--dpbv-ease);
}
.dpbv-gallery figure:hover img { transform: translateY(-4px); box-shadow: var(--dpbv-e3); }
.dpbv-gallery figcaption {
    margin-top: .55rem;
    text-align: center;
    font-size: .85rem;
    color: var(--dpbv-muted);
}

/* editorial split media, arch-topped */
.dpbv-split__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--dpbv-r-arch);
    box-shadow: var(--dpbv-e3);
}
.dpbv-split__media { position: relative; }
/* gold hairline frame offset behind the image */
.dpbv-split__media::before {
    content: "";
    position: absolute;
    inset: 14px -14px -14px 14px;
    border: 1px solid var(--dpbv-line-gold);
    border-radius: var(--dpbv-r-arch);
    z-index: -1;
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   ABOUT — brand lockup beside the story copy
   ---------------------------------------------------------------------- */
.dpbv-aboutbrand {
    display: flex;
    align-items: center;
    gap: var(--dpbv-s3);
    padding: var(--dpbv-s3);
    background: linear-gradient(180deg, var(--dpbv-white), var(--dpbv-sand));
    border: 1px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-lg);
    box-shadow: var(--dpbv-e1);
}
.dpbv-aboutbrand img {
    flex: 0 0 auto;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(31,77,61,.18);
}
.dpbv-aboutbrand p { margin: 0; }
.dpbv-aboutbrand p + p { margin-top: .25rem; }

/* -------------------------------------------------------------------------
   REVIEWS
   ---------------------------------------------------------------------- */
.dpbv-quote {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--dpbv-s3);
    padding: var(--dpbv-s5) var(--dpbv-s4) var(--dpbv-s4);
    background: var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-lg);
    box-shadow: var(--dpbv-e1);
    transition: transform var(--dpbv-dur) var(--dpbv-ease-out), box-shadow var(--dpbv-dur) var(--dpbv-ease);
}
.dpbv-quote:hover { transform: translateY(-4px); box-shadow: var(--dpbv-e2); }
.dpbv-quote::before {
    content: "\201C";
    position: absolute;
    inset-block-start: -.05em;
    inset-inline-start: var(--dpbv-s4);
    font-family: var(--dpbv-font-display);
    font-size: 4.4rem;
    line-height: 1;
    color: var(--dpbv-line-gold);
    pointer-events: none;
}
.dpbv-quote__stars { display: flex; gap: .12rem; color: var(--dpbv-brass); }
.dpbv-quote__stars .dpbv-ico { font-size: .95rem; }
.dpbv-quote__text { margin: 0; color: var(--dpbv-ink-soft); font-size: 1.01rem; line-height: 1.68; }
.dpbv-quote__by {
    margin: auto 0 0;
    padding-top: var(--dpbv-s2);
    border-top: 1px solid var(--dpbv-line);
    font-size: .88rem;
    font-weight: 650;
    color: var(--dpbv-jade);
}
.dpbv-quote__by span { display: block; font-weight: 400; color: var(--dpbv-muted); font-size: .82rem; }

/* -------------------------------------------------------------------------
   GOOGLE REVIEW CALL-OUT
   ---------------------------------------------------------------------- */
.dpbv-googlebox {
    display: grid;
    gap: var(--dpbv-s4);
    align-items: center;
    padding: var(--dpbv-s5) var(--dpbv-s4);
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(61,133,103,.10), transparent 60%),
        var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    border-left: 3px solid var(--dpbv-brass);
    border-radius: var(--dpbv-r-lg);
    box-shadow: var(--dpbv-e1);
}
@media (min-width: 56rem) {
    .dpbv-googlebox { grid-template-columns: minmax(0, 1fr) auto; }
}
.dpbv-googlebox h2 { margin: 0 0 .4rem; font-size: var(--dpbv-t-h3); }
.dpbv-googlebox p { margin: 0; color: var(--dpbv-muted); }
.dpbv-googlebox__action { justify-self: start; }
@media (min-width: 56rem) { .dpbv-googlebox__action { justify-self: end; } }

/* -------------------------------------------------------------------------
   THIRD-PARTY REVIEW GRID (homestay-review-showcase shortcode)
   The plugin's own markup is left untouched; only spacing and framing are
   harmonised so it sits correctly inside the new section rhythm.
   ---------------------------------------------------------------------- */
.dpbv-reviewgrid { margin: 0; }
.dpbv-reviewgrid .hrsc-grid {
    display: grid !important;
    gap: var(--dpbv-s3) !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)) !important;
}
.dpbv-reviewgrid .hrsc-grid-item {
    border-radius: var(--dpbv-r-lg) !important;
    overflow: hidden !important;
    border: 1px solid var(--dpbv-line) !important;
    background: var(--dpbv-white) !important;
    box-shadow: var(--dpbv-e1) !important;
    transition: transform var(--dpbv-dur) var(--dpbv-ease-out), box-shadow var(--dpbv-dur) var(--dpbv-ease);
}
.dpbv-reviewgrid .hrsc-grid-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--dpbv-e2) !important;
}
.dpbv-reviewgrid .hrsc-grid-item img {
    display: block;
    width: 100%;
    height: auto;
}
.dpbv-reviewgrid .hrsc-name { color: var(--dpbv-ink) !important; font-weight: 650 !important; }
.dpbv-reviewgrid .hrsc-rating { color: var(--dpbv-brass) !important; }

/* -------------------------------------------------------------------------
   VIDEO variants
   ---------------------------------------------------------------------- */
/* Portrait facade (TikTok clips).
   NOTE: no `margin-inline: auto` here. Every child of .dpbv-video is
   position:absolute, so the box has no in-flow content; as a grid/flex item an
   auto inline margin makes it shrink-to-fit that empty content and collapse to
   0x0 — the clip silently disappeared while its caption still rendered.
   Width is taken from the parent instead, which does the centring. */
.dpbv-video--portrait {
    aspect-ratio: 9 / 16;
    width: 100%;
    max-width: 24rem;
    margin-inline: 0;
}

/* --- video arrangement -------------------------------------------------
   The two self-hosted clips are 16:9 and belong together as a pair; the
   TikTok clip is 9:16, so mixing all three in one auto-fit grid left the
   portrait one orphaned at an odd width on the second row. They are laid
   out explicitly instead.
   ------------------------------------------------------------------- */
.dpbv-videopair {
    display: grid;
    gap: var(--dpbv-s4);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
    .dpbv-videopair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dpbv-videosolo { display: flex; justify-content: center; }

.dpbv-videocard { margin: 0; display: grid; gap: var(--dpbv-s2); }
.dpbv-videocard--portrait { width: min(24rem, 100%); }
.dpbv-videocard figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--dpbv-muted);
    text-align: center;
}
.dpbv-video__still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .4s var(--dpbv-ease);
}

/* -------------------------------------------------------------------------
   PANEL accent variant
   ---------------------------------------------------------------------- */
.dpbv-panel--accent {
    border-color: var(--dpbv-line-gold);
    border-top: 3px solid var(--dpbv-brass);
    box-shadow: var(--dpbv-e2);
}

/* -------------------------------------------------------------------------
   TICK LIST + PRICE
   ---------------------------------------------------------------------- */
.dpbv-ticklist { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.dpbv-ticklist li {
    position: relative;
    padding-left: 1.65rem;
    font-size: .95rem;
    color: var(--dpbv-muted);
}
.dpbv-ticklist li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: .28em;
    width: 1.05em;
    height: 1.05em;
    background-color: var(--dpbv-jade-lt);
    -webkit-mask: var(--i-check) center/contain no-repeat;
            mask: var(--i-check) center/contain no-repeat;
}

.dpbv-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dpbv-s2);
    padding: .7rem .9rem;
    background: var(--dpbv-jade-wash);
    border: 1px dashed var(--dpbv-line-gold);
    border-radius: var(--dpbv-r-md);
}
.dpbv-price__label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dpbv-muted);
}
.dpbv-price__value {
    font-family: var(--dpbv-font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--dpbv-brass-deep);
}

/* -------------------------------------------------------------------------
   FAQ / ACCORDION
   ---------------------------------------------------------------------- */
.dpbv-faq { display: grid; gap: var(--dpbv-s2); }
.dpbv-faq__item {
    background: var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-md);
    box-shadow: var(--dpbv-e1);
    overflow: hidden;
    transition: border-color var(--dpbv-dur) var(--dpbv-ease),
                box-shadow var(--dpbv-dur) var(--dpbv-ease);
}
.dpbv-faq__item[open] { border-color: var(--dpbv-line-gold); box-shadow: var(--dpbv-e2); }
.dpbv-faq__item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dpbv-s3);
    min-height: 56px;
    padding: var(--dpbv-s3) var(--dpbv-s4);
    cursor: pointer;
    list-style: none;
    font-family: var(--dpbv-font-body);
    font-size: 1.01rem;
    font-weight: 600;
    color: var(--dpbv-ink);
}
.dpbv-faq__item > summary::-webkit-details-marker { display: none; }
.dpbv-faq__item > summary::after {
    content: "";
    flex: 0 0 auto;
    width: .58em;
    height: .58em;
    border-right: 2px solid var(--dpbv-brass);
    border-bottom: 2px solid var(--dpbv-brass);
    rotate: 45deg;
    translate: 0 -.14em;
    transition: rotate .3s var(--dpbv-ease);
}
.dpbv-faq__item[open] > summary::after { rotate: 225deg; translate: 0 .1em; }
.dpbv-faq__item > summary:hover { background: var(--dpbv-jade-wash); }
.dpbv-faq__body {
    padding: 0 var(--dpbv-s4) var(--dpbv-s4);
    color: var(--dpbv-muted);
}
.dpbv-faq__body p { margin: 0; }

/* -------------------------------------------------------------------------
   MY ACCOUNT — style WooCommerce's own markup without changing its structure
   ---------------------------------------------------------------------- */
.dpbv-account { padding-block: var(--dpbv-s6); }
.dpbv-account .woocommerce {
    width: 100%;
    max-width: var(--dpbv-max);
    margin-inline: auto;
    padding-inline: var(--dpbv-gutter);
}
/* login / register columns */
.dpbv-account .u-column1,
.dpbv-account .u-column2,
.dpbv-account .woocommerce-form-login,
.dpbv-account .woocommerce-form-register {
    background: var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-lg);
    box-shadow: var(--dpbv-e1);
    padding: var(--dpbv-s4);
}
.dpbv-account .woocommerce-form-login,
.dpbv-account .woocommerce-form-register {
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-top: var(--dpbv-s3);
}
.dpbv-account h2 {
    font-family: var(--dpbv-font-display);
    font-size: var(--dpbv-t-h3);
    margin: 0 0 var(--dpbv-s2);
    color: var(--dpbv-ink);
}
.dpbv-account label { font-size: .875rem; font-weight: 600; color: var(--dpbv-ink); }
.dpbv-account .woocommerce-form-login__rememberme { font-weight: 400; }

/* account dashboard: nav + content */
.dpbv-account .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .2rem;
}
.dpbv-account .woocommerce-MyAccount-navigation a {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 48px;
    padding: .7rem 1rem;
    border-radius: var(--dpbv-r-md);
    color: var(--dpbv-ink-soft);
    text-decoration: none;
    font-weight: 550;
    border: 1px solid transparent;
    transition: background-color .24s var(--dpbv-ease), color .24s var(--dpbv-ease),
                border-color .24s var(--dpbv-ease);
}
.dpbv-account .woocommerce-MyAccount-navigation a:hover {
    background: var(--dpbv-jade-wash);
    color: var(--dpbv-jade);
}
.dpbv-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--dpbv-jade-wash);
    border-color: var(--dpbv-line-gold);
    color: var(--dpbv-jade);
}
.dpbv-account .woocommerce-MyAccount-content {
    background: var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-lg);
    box-shadow: var(--dpbv-e1);
    padding: var(--dpbv-s4);
}

/* --- MotoPress account shortcode [mphb_account] -------------------------
   This page renders MotoPress markup, not WooCommerce's. The form structure,
   field names and the reCAPTCHA widget are left exactly as the plugin emits
   them — only presentation is layered on.
   ---------------------------------------------------------------------- */
.dpbv-accountgrid {
    display: grid;
    gap: var(--dpbv-s4);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 62rem) {
    .dpbv-accountgrid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--dpbv-s5); }
}
.dpbv-accountside { display: grid; gap: var(--dpbv-s4); }

.dpbv-mbanner--short { padding-block: calc(var(--dpbv-s7) + 2rem) var(--dpbv-s6); }

.dpbv-accountpanel .mphb_sc_account,
.dpbv-accountpanel .mphb-account-content { margin: 0; }

.dpbv-accountpanel .mphb-login-form form,
.dpbv-accountpanel form#loginform { margin: 0; }

.dpbv-accountpanel form#loginform p {
    display: flex;
    flex-direction: column;
    gap: var(--dpbv-s1);
    margin: 0 0 var(--dpbv-s3);
}
.dpbv-accountpanel form#loginform label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--dpbv-ink);
    letter-spacing: .01em;
}
.dpbv-accountpanel form#loginform input[type="text"],
.dpbv-accountpanel form#loginform input[type="password"] {
    width: 100%;
    min-height: 48px;
    padding: .8em 1em;
    background: var(--dpbv-white);
    border: 1.5px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-md);
    font-family: var(--dpbv-font-body);
    font-size: 1rem;
    color: var(--dpbv-ink);
    box-shadow: inset 0 1px 2px rgba(22,33,28,.03);
    transition: border-color .22s var(--dpbv-ease), box-shadow .22s var(--dpbv-ease);
}
.dpbv-accountpanel form#loginform input[type="text"]:focus,
.dpbv-accountpanel form#loginform input[type="password"]:focus {
    outline: none;
    border-color: var(--dpbv-jade-lt);
    box-shadow: 0 0 0 4px rgba(61,133,103,.16);
}
/* remember-me sits inline, not stacked */
.dpbv-accountpanel form#loginform p.login-remember { flex-direction: row; align-items: center; }
.dpbv-accountpanel form#loginform p.login-remember label {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 400;
    color: var(--dpbv-muted);
    cursor: pointer;
}
.dpbv-accountpanel form#loginform input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    accent-color: var(--dpbv-jade);
    margin: 0;
}
/* reCAPTCHA: the widget's iframe has a fixed intrinsic width (~274-304px).
   Constraining or clipping the container cut the checkbox off on phones, so
   the container is left free to take the widget's natural width and is only
   scaled down where the viewport genuinely cannot fit it. The widget itself
   is never restructured — clicks and the challenge flow stay intact. */
.dpbv-accountpanel .g-recaptcha {
    margin: var(--dpbv-s2) 0 var(--dpbv-s3);
    width: 100%;
    max-width: none;
    overflow: visible;
}
.dpbv-accountpanel .g-recaptcha > div { max-width: none !important; }

/* Reclaim width on small screens: the panel padding first, then the plugin's
   own 14px inner padding on .mphb-login-form. That fits the widget down to
   about 360px without touching its scale. */
@media (max-width: 27rem) {
    .dpbv-accountpanel { padding: var(--dpbv-s3); }
    .dpbv-accountpanel .mphb-login-form {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* At 320-344px even that is not enough (the widget's intrinsic box is ~304px),
   so it is scaled down a touch. A pre-existing rule already applies
   scale(.9); this raises specificity to win only at these widths, and the
   height is reserved so the Log In button never overlaps. */
@media (max-width: 21.5rem) {
    .dpbv-page--account .dpbv-accountpanel .g-recaptcha {
        transform: scale(.82) !important;
        transform-origin: left top !important;
        height: 66px;
    }
}
.dpbv-accountpanel form#loginform p.login-submit { margin-bottom: var(--dpbv-s2); }
.dpbv-accountpanel form#loginform input[type="submit"],
.dpbv-accountpanel form#loginform #wp-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px !important;
    padding: .9em 2em !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--dpbv-jade) !important;
    color: var(--dpbv-shell) !important;
    font-family: var(--dpbv-font-body) !important;
    font-size: .98rem !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
    cursor: pointer;
    box-shadow: var(--dpbv-e1) !important;
    transition: background-color var(--dpbv-dur) var(--dpbv-ease),
                transform var(--dpbv-dur) var(--dpbv-ease-out) !important;
}
.dpbv-accountpanel form#loginform input[type="submit"]:hover,
.dpbv-accountpanel form#loginform #wp-submit:hover {
    background: var(--dpbv-jade-mid) !important;
    transform: translateY(-2px);
}
/* lost-password link that follows the form */
.dpbv-accountpanel .mphb-login-form > a,
.dpbv-accountpanel .mphb-account-content > a {
    display: inline-block;
    margin-top: var(--dpbv-s2);
    font-size: .9rem;
    color: var(--dpbv-jade) !important;
    text-decoration: underline;
    text-decoration-color: var(--dpbv-line-gold);
    text-underline-offset: .18em;
}
.dpbv-accountpanel .mphb-login-form > a:hover { color: var(--dpbv-jade-mid) !important; }

/* --- LOGGED-IN DASHBOARD ------------------------------------------------
   The two-column layout above is sized for a login form. Once signed in,
   [mphb_account] renders a full dashboard (its own 220px nav + content grid,
   a bookings table and a multi-column details form) which was being squeezed
   into a 308px content column and clipped. When WordPress adds `logged-in` to
   <body>, the panel takes the whole shell and the help cards drop to a row
   underneath.
   ---------------------------------------------------------------------- */
body.logged-in .dpbv-accountgrid { grid-template-columns: minmax(0, 1fr); }

body.logged-in .dpbv-accountside {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    align-items: start;
}
body.logged-in .dpbv-accountside .dpbv-trust {
    display: contents;      /* let the trust cards join the same row */
}

/* swap the panel heading: the sign-in copy is wrong once authenticated */
.dpbv-accounthead--in  { display: none; }
body.logged-in .dpbv-accounthead--out { display: none; }
body.logged-in .dpbv-accounthead--in  { display: block; }

/* MotoPress's own nav + content grid, now with room to breathe */
body.logged-in .dpbv-accountpanel .mphb_sc_account {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--dpbv-s4);
}
@media (max-width: 48rem) {
    body.logged-in .dpbv-accountpanel .mphb_sc_account {
        grid-template-columns: minmax(0, 1fr);
    }
}
body.logged-in .dpbv-accountpanel .mphb-account-content { min-width: 0; }

/* account menu styled as a real sidebar nav */
.dpbv-accountpanel .mphb-account-menu ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .2rem; }
.dpbv-accountpanel .mphb-account-menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: .7rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--dpbv-r-md);
    color: var(--dpbv-ink-soft) !important;
    text-decoration: none;
    font-weight: 600;
    transition: background-color .24s var(--dpbv-ease), color .24s var(--dpbv-ease),
                border-color .24s var(--dpbv-ease);
}
.dpbv-accountpanel .mphb-account-menu a:hover,
.dpbv-accountpanel .mphb-account-menu .is-active > a,
.dpbv-accountpanel .mphb-account-menu .current-menu-item > a {
    background: var(--dpbv-jade-wash);
    border-color: var(--dpbv-line-gold);
    color: var(--dpbv-jade) !important;
}

/* bookings table — wide tables scroll inside their own box, never clip */
.dpbv-accountpanel .mphb-account-content { overflow-x: auto; }
.dpbv-accountpanel table,
.dpbv-accountpanel table.mphb-account-bookings {
    width: 100%;
    min-width: 34rem;               /* forces the scroll rather than crushing columns */
    border-collapse: collapse;
    font-size: .94rem;
}
.dpbv-accountpanel table th,
.dpbv-accountpanel table td {
    padding: .7rem .7rem;
    text-align: start;
    vertical-align: middle;
    border-bottom: 1px solid var(--dpbv-line);
    white-space: nowrap;
}
.dpbv-accountpanel table th {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dpbv-muted);
    background: var(--dpbv-sand);
}
.dpbv-accountpanel table tbody tr:hover { background: var(--dpbv-jade-wash); }
.dpbv-accountpanel .booking-status { white-space: normal; }

/* account details form — two columns on desktop, one on mobile */
.dpbv-accountpanel .mphb-account-details-form {
    display: grid;
    gap: var(--dpbv-s3) var(--dpbv-s4);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) {
    .dpbv-accountpanel .mphb-account-details-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* fields that deserve the full row */
    .dpbv-accountpanel .mphb-customer-address1,
    .dpbv-accountpanel .mphb-account-change-password,
    .dpbv-accountpanel .mphb-account-details-form > p:last-of-type,
    .dpbv-accountpanel .mphb-account-details-form > button,
    .dpbv-accountpanel .mphb-account-details-form > input[type="submit"] {
        grid-column: 1 / -1;
    }
}
.dpbv-accountpanel .mphb-account-details-form > p,
.dpbv-accountpanel .mphb-account-details-form > .mphb-account-details {
    display: flex;
    flex-direction: column;
    gap: var(--dpbv-s1);
    margin: 0;
    min-width: 0;
}
.dpbv-accountpanel .mphb-account-details-form :is(input[type="text"], input[type="email"],
    input[type="tel"], input[type="password"], select) {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: .8em 1em;
    background: var(--dpbv-white);
    border: 1.5px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-md);
    font-family: var(--dpbv-font-body);
    font-size: 1rem;
    color: var(--dpbv-ink);
}
.dpbv-accountpanel .mphb-account-details-form :is(input, select):focus {
    outline: none;
    border-color: var(--dpbv-jade-lt);
    box-shadow: 0 0 0 4px rgba(61,133,103,.16);
}
/* the change-password block reads as its own grouped card */
.dpbv-accountpanel .mphb-account-change-password {
    display: grid;
    gap: var(--dpbv-s3);
    grid-template-columns: minmax(0, 1fr);
    padding: var(--dpbv-s4);
    margin-top: var(--dpbv-s2);
    background: var(--dpbv-sand);
    border: 1px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-lg);
}
@media (min-width: 48rem) {
    .dpbv-accountpanel .mphb-account-change-password { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dpbv-accountpanel .mphb-account-change-password > :first-child { grid-column: 1 / -1; }

/* pagination under the bookings table */
.dpbv-accountpanel .mphb-pagination { margin-top: var(--dpbv-s3); }
.dpbv-accountpanel .mphb-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 .6rem;
    border: 1px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-sm);
    margin-right: .3rem;
    color: var(--dpbv-ink-soft) !important;
    text-decoration: none;
}
.dpbv-accountpanel .mphb-pagination .page-numbers.current,
.dpbv-accountpanel .mphb-pagination .page-numbers:hover {
    background: var(--dpbv-jade-wash);
    border-color: var(--dpbv-line-gold);
    color: var(--dpbv-jade) !important;
}

/* feature tiles that are whole links */
.dpbv-feature--link { text-decoration: none; }
.dpbv-feature--link h3 { color: var(--dpbv-ink); }
.dpbv-feature--link:hover h3 { color: var(--dpbv-jade); }

/* trust row under the login form */
.dpbv-trust {
    display: grid;
    gap: var(--dpbv-s3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    margin-top: var(--dpbv-s5);
}
.dpbv-trust__item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: var(--dpbv-s3);
    background: var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-md);
}
.dpbv-trust__item .dpbv-ico { color: var(--dpbv-brass-deep); font-size: 1.2rem; margin-top: .1em; }
.dpbv-trust__item strong { display: block; font-size: .92rem; color: var(--dpbv-ink); }
.dpbv-trust__item span { font-size: .85rem; color: var(--dpbv-muted); }

/* -------------------------------------------------------------------------
   BOOKING CONFIRMATION FLOW
   Pages 51 reservation-received, 49 booking-confirmed and 52 transaction-failed
   render bare MotoPress output. Everything here is scoped under
   .mphb_sc_booking_confirmation (or .dpbv-page--confirm) so the CHECKOUT page,
   which is governed by the existing Customizer CSS, is never touched — verified
   that /checkout/, /cart/ and /booking-confirmation/ emit no
   .mphb-booking-details markup at all.
   ---------------------------------------------------------------------- */
.dpbv-confirmgrid {
    display: grid;
    gap: var(--dpbv-s4);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}
@media (min-width: 62rem) {
    .dpbv-confirmgrid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--dpbv-s5); }
}
.dpbv-confirmside { display: grid; gap: var(--dpbv-s4); }

/* compact numbered steps used in the confirmation sidebar */
.dpbv-steps--compact { gap: var(--dpbv-s2); margin: 0; padding: 0; list-style: none; }
.dpbv-steps--compact .dpbv-step {
    padding: var(--dpbv-s3);
    box-shadow: none;
    background: var(--dpbv-shell);
}
.dpbv-steps--compact .dpbv-step::before { font-size: 1.25rem; }
.dpbv-steps--compact .dpbv-step h3 { font-size: 1.02rem; }
.dpbv-steps--compact .dpbv-step p { font-size: .92rem; }

.dpbv-confirmpanel .mphb_sc_booking_confirmation,
.dpbv-page--confirm .mphb_sc_booking_confirmation { display: grid; gap: var(--dpbv-s4); }

/* intro sentence the shortcode prints before the sections */
.dpbv-page--confirm .mphb_sc_booking_confirmation > p {
    margin: 0;
    font-size: var(--dpbv-t-lead);
    line-height: 1.6;
    color: var(--dpbv-muted);
}

/* each details block becomes a card */
.dpbv-page--confirm .mphb-booking-details-section {
    padding: var(--dpbv-s4);
    background: var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    border-top: 3px solid var(--dpbv-brass);
    border-radius: var(--dpbv-r-lg);
    box-shadow: var(--dpbv-e1);
}
.dpbv-page--confirm .mphb-booking-details-section.payment { border-top-color: var(--dpbv-jade); }

.dpbv-page--confirm .mphb-booking-details-title {
    margin: 0 0 var(--dpbv-s3);
    padding-bottom: var(--dpbv-s2);
    border-bottom: 1px solid var(--dpbv-line);
    font-family: var(--dpbv-font-display);
    font-size: var(--dpbv-t-h3);
    font-weight: 600;
    color: var(--dpbv-ink);
}

/* The label/value pairs become mini-stat tiles. Flex (not grid) so a trailing
   row of 2 stretches to fill the width instead of leaving empty grid tracks —
   the 5 fields were laying out 3 + 2 with two dead slots. */
.dpbv-page--confirm ul.mphb-booking-details {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--dpbv-s2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.dpbv-page--confirm ul.mphb-booking-details > li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
    flex: 1 1 8.5rem;          /* grow to share the row evenly */
    min-width: 0;
    margin: 0;
    padding: var(--dpbv-s2) var(--dpbv-s3);
    background: var(--dpbv-shell);
    border: 1px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-md);
    list-style: none;
}
/* the payment-method value is long — give it more of the row and a slightly
   smaller face so gateway names fit on one line */
.dpbv-page--confirm ul.mphb-booking-details > li.dpbv-f-wide { flex: 2 1 14rem; }
.dpbv-page--confirm .dpbv-f-wide .value { font-size: 1rem; line-height: 1.3; }
.dpbv-page--confirm ul.mphb-booking-details > li::before,
.dpbv-page--confirm ul.mphb-booking-details > li::marker { content: none; }

.dpbv-page--confirm ul.mphb-booking-details .label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dpbv-muted);
}
.dpbv-page--confirm ul.mphb-booking-details .value {
    font-family: var(--dpbv-font-display);
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--dpbv-ink);
    line-height: 1.25;
    overflow-wrap: anywhere;
}
/* the money value reads as the headline figure — dpbv-f-money is added by
   dpbv_tidy_booking_confirmation() since MotoPress gives every payment row
   the same class */
.dpbv-page--confirm .booking-price .value,
.dpbv-page--confirm .payment-price .value,
.dpbv-page--confirm .dpbv-f-money .value { color: var(--dpbv-brass-deep); }

/* status as a pill, consistently on both the booking and payment cards */
.dpbv-page--confirm .booking-status .value,
.dpbv-page--confirm .payment-status .value,
.dpbv-page--confirm .dpbv-f-status .value {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: .22em .7em;
    border-radius: 999px;
    background: var(--dpbv-jade-wash);
    border: 1px solid var(--dpbv-line-gold);
    color: var(--dpbv-jade);
    font-family: var(--dpbv-font-body);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* accommodation line under the booking card */
.dpbv-page--confirm .accommodations {
    margin-top: var(--dpbv-s3);
    padding-top: var(--dpbv-s3);
    border-top: 1px dashed var(--dpbv-line);
    font-size: .96rem;
}
.dpbv-page--confirm .accommodations-title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dpbv-muted);
    margin-right: .5rem;
}
.dpbv-page--confirm .accommodations-list a { font-weight: 600; }

/* cancellation button, if the shortcode renders one */
.dpbv-page--confirm .mphb-cancel-booking-button,
.dpbv-page--confirm .mphb_sc_booking_confirmation .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .8em 1.8em;
    border: 1.5px solid var(--dpbv-line-gold) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--dpbv-jade) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-decoration: none !important;
}

/* -------------------------------------------------------------------------
   PRICE / PACKAGE CARDS  (deco service)
   ---------------------------------------------------------------------- */
.dpbv-pkg {
    display: flex;
    flex-direction: column;
    gap: var(--dpbv-s3);
    padding: var(--dpbv-s4);
    background: var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-lg);
    box-shadow: var(--dpbv-e1);
    transition: transform var(--dpbv-dur) var(--dpbv-ease-out),
                box-shadow var(--dpbv-dur) var(--dpbv-ease),
                border-color var(--dpbv-dur) var(--dpbv-ease);
}
.dpbv-pkg:hover { transform: translateY(-5px); box-shadow: var(--dpbv-e3); border-color: var(--dpbv-line-gold); }
.dpbv-pkg--featured {
    border-color: var(--dpbv-brass);
    box-shadow: var(--dpbv-e-gold);
}
.dpbv-pkg__media {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: calc(var(--dpbv-s4) * -1) calc(var(--dpbv-s4) * -1) 0;
    overflow: hidden;
    background: var(--dpbv-sand);
}
.dpbv-pkg__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .9s var(--dpbv-ease-out); }
.dpbv-pkg:hover .dpbv-pkg__media img { scale: 1.05; }
.dpbv-pkg__title { margin: 0; font-family: var(--dpbv-font-display); font-size: var(--dpbv-t-h4); font-weight: 600; color: var(--dpbv-ink); }
.dpbv-pkg__text { margin: 0; color: var(--dpbv-muted); font-size: .96rem; }
.dpbv-pkg__foot { margin-top: auto; }

/* -------------------------------------------------------------------------
   HOME
   ---------------------------------------------------------------------- */
.dpbv-mbanner--hero {
    min-height: clamp(30rem, 24rem + 22vh, 44rem);
    align-content: center;
}

/* the villa carousel keeps its own layout CSS and JS untouched — only the
   accent colours and control chrome are brought into the house palette */
.dpbv-page--home .dpbv-villa-stack { margin-top: var(--dpbv-s4); }
.dpbv-page--home .dpbv-villa-stack__label {
    color: var(--dpbv-brass-deep) !important;
    letter-spacing: .16em !important;
}
.dpbv-page--home .dpbv-villa-stack__title {
    font-family: var(--dpbv-font-display) !important;
    color: var(--dpbv-ink) !important;
}
.dpbv-page--home .dpbv-villa-stack__button {
    background: var(--dpbv-jade) !important;
    color: var(--dpbv-shell) !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
}
.dpbv-page--home .dpbv-villa-stack__nav {
    background: var(--dpbv-white) !important;
    border: 1px solid var(--dpbv-line-gold) !important;
    color: var(--dpbv-jade) !important;
    box-shadow: var(--dpbv-e1) !important;
}
.dpbv-page--home .dpbv-villa-stack__nav:hover {
    background: var(--dpbv-brass) !important;
    color: var(--dpbv-ink) !important;
    border-color: var(--dpbv-brass) !important;
}
.dpbv-page--home .dpbv-villa-stack__dot {
    background: rgba(31, 77, 61, .22) !important;
    position: relative;
}
.dpbv-page--home .dpbv-villa-stack__dot[aria-current="true"] {
    background: var(--dpbv-brass) !important;
}
/* The dots are an 8px visual, which is far below a usable touch target.
   An invisible expanded hit area keeps the design while making them tappable. */
.dpbv-page--home .dpbv-villa-stack__dot::after {
    content: "";
    position: absolute;
    inset: -10px -8px;
    border-radius: 999px;
}

/* booking search widget — a framed panel, form internals left to the plugin
   and the existing Customizer rules that govern the booking flow */
.dpbv-searchpanel {
    position: relative;
    padding: var(--dpbv-s4);
    background: var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    border-top: 3px solid var(--dpbv-brass);
    border-radius: var(--dpbv-r-lg);
    box-shadow: var(--dpbv-e2);
}
.dpbv-searchpanel > *:last-child { margin-bottom: 0; }
@media (min-width: 48rem) {
    .dpbv-searchpanel { padding: var(--dpbv-s5); }
}

/* -------------------------------------------------------------------------
   MISC
   ---------------------------------------------------------------------- */
.dpbv-center { text-align: center; }
.dpbv-mt4 { margin-top: var(--dpbv-s4); }
.dpbv-mt5 { margin-top: var(--dpbv-s5); }
.dpbv-anchor { scroll-margin-top: 7rem; }

/* never let embedded media punch out of its column */
.dpbv-page :is(img, video, iframe, embed, object) { max-width: 100%; }
.dpbv-page iframe { border: 0; }

/* the visitor-tracker marquee is fixed to the bottom; keep clear of it */
body.dpbv-redesign #colophon { padding-bottom: 2.2rem; }