/* Free Vacation promotion pop-up (PowerPack Modal Box + saved row "Free Vacation Popup"), Nov 2026.
   The pop-up is the postcard image itself (1320 x 1701, pixel for pixel) with the CTA button laid over its lower edge.
   Loaded only where the pop-up renders. Oswald is the self-hosted font shared with trip-promotion. */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/Oswald-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/Oswald-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- the modal shell: sized to the postcard's 1320:1701 ratio and never taller than the screen ---- */
/* PowerPack moves the dialog to <body>, so the shell is matched by its content (:has) */
.pp-modal-wrap:has(.bp-vp) { z-index: 2147483000 !important; }
.pp-modal-wrap:has(.bp-vp) .pp-modal-overlay { display: block !important; background-color: rgba(11,14,20,.72) !important; }
.pp-modal:has(.bp-vp) {
  width: min(576px, calc((100vw - 32px) * 0.9), calc((100vh - 48px) * 0.776 * 0.9)) !important; /* 10% smaller than the first draft */ max-width: none !important;
  border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); background: #0b0e14;
}
.pp-modal-wrap:has(.bp-vp) .pp-modal-content, .pp-modal-wrap:has(.bp-vp) .pp-modal-content-inner { padding: 0 !important; background: transparent; }
.pp-modal-wrap:has(.bp-vp) .pp-modal-close { position: absolute !important; z-index: 5; margin: 0 !important; float: none !important; } /* some theme pages reflow it into a block above the content */
.pp-modal-wrap:has(.bp-vp) .pp-modal-close.box-top-right { top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; color: #111; }

/* ---- the postcard ---- */
.bp-vp .fl-module, .bp-vp .fl-module > .fl-module-content { margin: 0; }
.fl-row.bp-vp > .fl-row-content-wrap { padding: 0 !important; margin: 0 !important; }
.bp-vp .fl-row-content { max-width: none !important; }
.bp-vp .fl-col-group::before, .bp-vp .fl-col-group::after { content: none !important; display: none !important; }
.bp-vp .fl-col.bp-vp__card { float: none; width: 100% !important; position: relative; container-type: inline-size; line-height: 0; }
.bp-vp .bp-vp__img .fl-photo, .bp-vp .bp-vp__img .fl-photo-content { display: block; width: 100%; }
.bp-vp .bp-vp__img img { display: block; width: 100% !important; height: auto !important; max-width: none; border-radius: 0; }
.bp-vp .bp-vp__img .fl-photo-caption { display: none; }

/* ---- CTA button over the postcard's lower edge (scales with the card: cqw = 1% of its width) ---- */
.bp-vp .bp-vp__cta { position: absolute; left: 0; right: 0; bottom: 8.5cqw; /* raised from 4.6cqw */ z-index: 2; line-height: normal; }
.bp-vp .bp-vp__cta .fl-button-wrap { display: flex; justify-content: center; }
body .fl-builder-content .bp-vp .bp-vp__cta a.fl-button, body .fl-builder-content .bp-vp .bp-vp__cta a.fl-button:visited, body .pp-modal .bp-vp .bp-vp__cta a.fl-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 8.4cqw; padding: 0 4.2cqw !important; border-radius: 1.9cqw !important;
  border: .35cqw solid #f7d97c !important; background: linear-gradient(180deg, #e5232a 0%, #be1219 100%) !important; color: #fff !important;
  font-family: 'Oswald', Impact, sans-serif !important; font-weight: 700 !important; font-size: 3.1cqw !important; letter-spacing: .05em !important; text-transform: uppercase !important; text-shadow: none !important; text-decoration: none;
  box-shadow: 0 1.6cqw 3.6cqw rgba(0,0,0,.42) !important; transition: transform .14s, filter .14s;
}
body .fl-builder-content .bp-vp .bp-vp__cta a.fl-button:hover, body .pp-modal .bp-vp .bp-vp__cta a.fl-button:hover { background: linear-gradient(180deg, #e5232a 0%, #be1219 100%) !important; color: #fff !important; filter: brightness(1.06); transform: translateY(-1px); }
body .fl-builder-content .bp-vp .bp-vp__cta a.fl-button .fl-button-text, body .pp-modal .bp-vp .bp-vp__cta a.fl-button .fl-button-text { color: #fff !important; }
.bp-vp .bp-vp__cta a.fl-button::after { content: ''; width: 1em; height: 1em; flex-shrink: 0; transition: transform .14s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain; }
.bp-vp .bp-vp__cta a.fl-button:hover::after { transform: translateX(3px); }

/* ---- phones ---- */
@media (max-width: 767px) {
  .pp-modal:has(.bp-vp) { border-radius: 14px; }
  .pp-modal-wrap:has(.bp-vp) .pp-modal-close.box-top-right { width: 30px; height: 30px; top: 8px; right: 8px; }
}

/* injected site-wide: the holder row collapses and its note is hidden (the modal itself is moved to <body> when it opens) */
.bp-vp-injected .bp-vp-note { display: none !important; }
.bp-vp-injected .fl-row.bp-vp-holder > .fl-row-content-wrap { padding: 0 !important; margin: 0 !important; }
/* close X drawn here (PowerPack's bar spans take their colour from per-node CSS a nested layout doesn't get) */
.pp-modal-wrap:has(.bp-vp) .pp-modal-close .bar-wrap { display: none !important; }
.pp-modal-wrap:has(.bp-vp) .pp-modal-close { cursor: pointer; }
.pp-modal-wrap:has(.bp-vp) .pp-modal-close::before, .pp-modal-wrap:has(.bp-vp) .pp-modal-close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.5px; border-radius: 2px; background: #111; transform: translate(-50%, -50%) rotate(45deg); }
.pp-modal-wrap:has(.bp-vp) .pp-modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.pp-modal-wrap:has(.bp-vp) .pp-modal-close:hover { background: #fff; }