@charset "UTF-8";
/* CSS Document */

/* Align language dropdown with search icon in header */
ul#top_tools .dropdown-mini {
    vertical-align: middle;
}
ul#top_tools a#lang_link {
    font-size: 13px;
    line-height: 18px;
}
ul#top_tools a#lang_link:before {
    font-size: 18px;
    top: -1px;
}

/* Beach amenities - compact icon list */
ul.beach-amenities {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
ul.beach-amenities li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f5f5;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    color: #555;
}
ul.beach-amenities li i.fa-solid {
    font-size: 15px;
    color: #0097a7;
}

/* Beach list amenity icons */
.beach-list-amenities {
    display: flex;
    gap: 8px;
    margin-top: 5px;
}
.beach-list-amenities i.fa-solid {
    font-size: 14px;
    color: #999;
}

/* InfoBox image sizing */
.marker_info_2 img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

/* List page thumbnail cropping */
.img_list {
    min-height: 220px;
}
.img_list img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Footer active language */
footer li.active a {
    font-weight: 600;
}

/* Search overlay: base citytours CSS targets input[type="text"] but we use
   input[type="search"] for accessibility. Mirror the styling. */
.search-overlay-menu input[type="search"] {
    height: 100%;
    width: 100%;
    color: #fff;
    background: transparent;
    border-top: 0 solid transparent;
    border-bottom: 2px solid #909090 !important;
    border-left: 0 solid transparent;
    border-right: 0 solid transparent;
    font-size: 32px;
    font-weight: 400;
    outline: none;
    padding: 10px 0;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}
.search-overlay-menu input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* Uniform card thumbnails (3:2 aspect ratio) across article, hotel, resort, camping, restaurant cards */
.tour_container .img_container,
.hotel_container .img_container,
.resort_container .img_container,
.camping_container .img_container,
.restaurant_container .img_container {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.tour_container .img_container img,
.hotel_container .img_container img,
.resort_container .img_container img,
.camping_container .img_container img,
.restaurant_container .img_container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Footer weather widget */
footer .weather-widget {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 12px 14px;
    max-width: 320px;
    color: #bfbfbf;
    font-size: 14px;
}
footer .weather-current {
    font-size: 15px;
    color: #fff;
}
footer .weather-current strong {
    font-size: 16px;
}
footer .weather-current .weather-icon {
    font-size: 20px;
    margin-right: 4px;
}
footer .weather-current-vals {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
footer .weather-current .weather-sea {
    font-size: 13px;
    color: #cfcfcf;
    position: relative;
    padding-left: 12px;
}
footer .weather-current .weather-sea::before {
    content: '·';
    position: absolute;
    left: 0;
    color: #777;
}
footer .weather-current .weather-sea i {
    margin-right: 4px;
    color: #bfbfbf;
}
footer .weather-extra {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 8px;
    font-size: 13px;
    color: #ddd;
    gap: 6px 10px;
}
footer .weather-extra span {
    white-space: nowrap;
}
footer .weather-extra i {
    color: #bfbfbf;
    margin-right: 4px;
    width: 14px;
    text-align: center;
}
footer .weather-forecast {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 8px;
    gap: 8px;
}
footer .weather-day {
    flex: 1;
}
footer .weather-day-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
}
footer .weather-day .weather-icon {
    font-size: 22px;
    line-height: 1.2;
    margin: 2px 0;
}
footer .weather-day-temp {
    font-size: 13px;
    color: #ddd;
}
footer .weather-source {
    font-size: 11px;
    color: #666;
}

/* Article TOC — subtle in-body table of contents (CityTours has no equivalent shortcode) */
.article-body .article-toc {
    background: #eef5fa;
    border-left: 3px solid #4a90e2;
    border-radius: 4px;
    padding: 18px 22px;
    margin: 24px 0 32px 0;
}
.article-body .article-toc p {
    margin: 0 0 8px 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #3c6897;
}
.article-body .article-toc ul {
    margin: 0;
    padding-left: 20px;
    columns: 2;
    column-gap: 24px;
}
.article-body .article-toc li {
    margin-bottom: 4px;
    break-inside: avoid;
}
.article-body .article-toc a {
    color: #2a2a2a;
    text-decoration: none;
    border-bottom: 1px dotted #a9c5e4;
}
.article-body .article-toc a:hover {
    color: #2b6db8;
    border-bottom-color: #2b6db8;
}
@media (max-width: 767px) {
    .article-body .article-toc ul { columns: 1; }
}

/* Article disclaimer — subtle warning block for legal/tax/financial content */
.article-body .article-disclaimer {
    background: #fff8e6;
    border-left: 3px solid #e6a817;
    border-radius: 4px;
    padding: 14px 18px;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.55;
    color: #4a3d15;
}
.article-body .article-disclaimer p {
    margin: 0;
}
.article-body .article-disclaimer strong:first-child {
    color: #8a5f0a;
}
.article-body .article-disclaimer a {
    color: #8a5f0a;
    text-decoration: underline;
}
.article-body .article-disclaimer a:hover {
    color: #e6a817;
}

/* Smooth scroll + offset so anchor jumps don't hide behind sticky header */
html { scroll-behavior: smooth; }
.article-body h2[id] { scroll-margin-top: 90px; }

/* Footer webcams link — sits under weather widget */
footer .footer-webcams-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 10px;
    font-size: 13px;
    color: #ddd;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
footer .footer-webcams-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
}
footer .footer-webcams-link i {
    font-size: 15px;
}

/* Webcams page — long-form content with inline live-stream embeds */
.webcams-page .lead {
    font-size: 17px;
    line-height: 1.55;
    color: #2a2a2a;
}
.webcams-page .webcam-section {
    margin-top: 48px;
}
.webcams-page .webcam-section h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
}
.webcams-page .webcam-section h3 {
    font-size: 17px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 8px;
}
.webcams-page .webcam-player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.webcams-page .webcam-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Click-to-play facade: show a lightweight snapshot poster and only load the
   heavy live-stream iframe when the visitor clicks. Six live players at once
   made this page crawl on mobile; posters are a fraction of the weight. */
.webcams-page .webcam-player[data-embed] {
    cursor: pointer;
}
.webcams-page .webcam-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.webcams-page .webcam-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    border-radius: 40px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: background 0.15s;
}
.webcams-page .webcam-player:hover .webcam-play {
    background: rgba(0, 0, 0, 0.82);
}

/* Mobile header — give language selector breathing room from the hamburger icon */
@media (max-width: 991px) {
    #top_tools {
        margin-right: 20px;
    }
    #top_tools > li {
        padding-right: 4px;
    }
}

/* Real estate — WhatsApp CTA button (rounded, soft shadow, hover lift) */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #25D366;
    color: #fff;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 12px 24px;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(37, 211, 102, .35);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
    text-decoration: none;
    cursor: pointer;
}
.btn-whatsapp:hover,
.btn-whatsapp:focus {
    background-color: #1ebe5b;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(37, 211, 102, .45);
}
.btn-whatsapp i { font-size: 1.3em; line-height: 1; }
.btn-whatsapp--block { display: flex; width: 100%; }

/* Real estate — tighten the "browse by" intent-link chips */
.re-intent-links .btn_1.outline {
    padding: 8px 16px;
    font-size: 12px;
}

/* The seller invitation, under the listings.
   ---------------------------------------------------------------------------
   It used to be a filled chip at the end of the row above, which was wrong on
   both counts: every other chip there narrows the list of things to buy, and
   with five of them wrapping it landed alone on a second line. Here it follows
   the grid, which is the one moment an owner has just held every asking price
   in Rovinj up against his own place. The whole band is the link — one line of
   text on the page's own quiet grey, no fill and no button, because it must
   not outshout the listings it sits under. */
.re-sell-band a {
    display: block;
    padding: 16px 20px;
    margin-bottom: 30px;
    background: #f6f7f9;
    border: 1px solid #ececec;
    border-radius: 3px;
}
.re-sell-band a::after {
    content: " \2192";
    white-space: nowrap;
}
.re-sell-band a:hover,
.re-sell-band a:focus {
    background: #f0f1f4;
}

/* Seller landing header band.
   ---------------------------------------------------------------------------
   A plain background band, not the site's `parallax-window`. The parallax
   plugin can only anchor an image top / centre / bottom or at a pixel offset,
   and this photo needs a percentage: it is 1600x1066 behind a 470px band, so
   roughly two thirds of its height is cropped, and WHICH two thirds is the
   whole decision. Centre lands on open water; flush top lands on empty sky and
   the sun flare, where white type sits worst. `center 22%` keeps the sun and
   the lit roofs in frame and drops the empty water at the bottom — and being a
   percentage it holds at every viewport width, which a pixel offset would not.
   The inner .parallax-content-1 / .opacity-mask markup is unchanged, so the
   height, typography and dark mask match every other header on the site.

   The asset is 1600px wide against a full-bleed band: it is shown 1:1 up to a
   1600px viewport and upscaled beyond it (1.2x at 1920, 1.6x on a 2560
   monitor). Acceptable behind a 45% black mask; a ~2400px export would remove
   the compromise entirely. */
.sell-hero {
    min-height: 470px;
    position: relative;
    background-color: #23404d;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 22%;
}
/* Matches the 767px breakpoint where style.css drops .parallax-content-1 to
   360px — the band and its content must shrink together or the mask stops
   covering the photo. */
@media (max-width: 767px) {
    .sell-hero {
        min-height: 360px;
    }
}

/* Seller landing — the numbered "what happens next" list and the proof line.
   The proof (traffic + who reads it) is the whole argument of the page, so it
   is set larger than body copy and given the accent rule. */
.sell-proof {
    border-left: 3px solid #2d8a8a;
    padding-left: 16px;
}
.sell-point h3,
.sell-steps h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}
.sell-point {
    margin-bottom: 18px;
}
.sell-steps {
    counter-reset: sellstep;
    list-style: none;
    padding-left: 0;
}
.sell-steps > li {
    counter-increment: sellstep;
    position: relative;
    padding-left: 46px;
    margin-bottom: 18px;
}
.sell-steps > li:before {
    content: counter(sellstep);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2d8a8a;
    color: #fff;
    font-weight: 700;
    text-align: center;
    line-height: 32px;
}
/* The steps are also the row's columns. `padding-left` on the li would
   otherwise replace Bootstrap's gutter rather than add to it, and the counter
   circle at `left: 0` would sit in the gutter instead of on the text edge — so
   both are re-expressed against the live gutter width. */
.sell-steps.row > li {
    padding-left: calc(46px + var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
}
.sell-steps.row > li:before {
    left: calc(var(--bs-gutter-x) * 0.5);
}
.realestate-sell-box .form-group {
    margin-bottom: 12px;
}
/* One form, at the end of the page. The hero's button is a link to it, which
   is what keeps the phone reader's route to the form short now that there is
   no copy of it near the top. */
.sell-hero-cta {
    margin-top: 22px;
}
.sell-page .realestate-sell-box {
    margin-top: 40px;
    /* The header is sticky and `html` scrolls smoothly, so without this the
       jump from the hero lands with the form's own heading behind the nav. */
    scroll-margin-top: 90px;
}

/* ------------------------------------------------------------------
   In-article partner card (replaces the old dark "banner ad" block).
   The old markup used aspect-ratio:4/1 + min-height:120px, and CSS
   transfers a min-height through the ratio into min-width (120*4=480px),
   so the card blew past a 366px article column and gave the whole page
   a horizontal scrollbar on mobile. No aspect-ratio here — the card
   sizes from its content, and min-width:0 keeps the flex kids honest.
   ------------------------------------------------------------------ */
.partner-card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 30px 0 42px;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    text-decoration: none !important;
    color: inherit;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
/* Lifted-corner shadow recycled from the CityTours .banner component. */
.partner-card:after,
.partner-card:before {
    position: absolute;
    content: "";
    z-index: 1;
    height: 18px;
    width: 50%;
    top: 100%;
    pointer-events: none;
}
.partner-card:after { left: 0; background: url("../img/shadow-bg.bb9034419f6b.png") no-repeat top left; }
.partner-card:before { right: 0; background: url("../img/shadow-bg.bb9034419f6b.png") no-repeat top right; }
.partner-card:hover,
.partner-card:focus-visible {
    border-color: #d0d5dd;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .13);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Corner ribbon — adapted from the theme's .ribbon_3, in our partner green. */
.partner-card__ribbon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 78px;
    height: 78px;
    overflow: hidden;
    pointer-events: none;
}
.partner-card__ribbon span {
    position: absolute;
    top: 17px;
    left: -25px;
    display: block;
    width: 110px;
    background: linear-gradient(#3cb87a 0%, #2b8d5b 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .25);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    transform: rotate(-45deg);
}
.partner-card__media {
    flex: 0 0 104px;
    min-width: 0;
    align-self: stretch;
    min-height: 104px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.partner-card__body {
    flex: 1 1 180px;
    min-width: 0;
    padding: 13px 16px;
}
.partner-card__eyebrow {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #8a94a6;
    margin-bottom: 3px;
}
.partner-card__title {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: #222;
    margin-bottom: 3px;
}
.partner-card__price {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #2b8d5b;
    margin-bottom: 4px;
}
.partner-card__price .partner-card__unit {
    font-weight: 400;
    font-size: 12.5px;
    color: #8a94a6;
}
.partner-card__trust {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #8a94a6;
}
.partner-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.45;
    color: #6b7280;
    margin: 0;
}
.partner-card__cta {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 46px;
    padding: 12px 18px;
    background: #32a067;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.partner-card:hover .partner-card__cta { background: #2b8d5b; }
.partner-card__cta .partner-card__arrow {
    transition: transform .18s ease;
}
.partner-card:hover .partner-card__arrow { transform: translateX(3px); }

/* Partner detail — quick-facts strip above the prose */
.partner-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 26px;
    margin-bottom: 26px;
    padding: 14px 18px;
    background: #f7f9fa;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
}
.partner-facts__price {
    font-size: 22px;
    font-weight: 700;
    color: #2b8d5b;
    line-height: 1.2;
}
.partner-facts__price span {
    font-size: 13px;
    font-weight: 400;
    color: #8a94a6;
}
.partner-facts__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 0;
    padding: 0;
    font-size: 13.5px;
    color: #6b7280;
}
.partner-facts__list li { margin: 0; }
.partner-facts__list i { color: #8a94a6; margin-right: 4px; }

/* End-of-article recommendation block */
.partner-recos {
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid #e4e7ec;
}
.partner-recos__title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 18px;
}
.partner-recos .partner-card { margin-top: 0; }

/* Side-by-side only when the row genuinely fits (media + text + button).
   Below this the CTA orphans under the photo as a stray pill — keep the
   stacked layout with the full-width button instead. nowrap so the button
   can never wrap out of the row; the text column shrinks first. */
@media (min-width: 768px) {
    .partner-card { flex-wrap: nowrap; }
    .partner-card__media { flex-basis: 168px; min-height: 128px; }
    .partner-card__body { padding: 16px 20px; align-self: center; }
    .partner-card__title { font-size: 19px; }
    .partner-card__cta {
        flex: 0 0 auto;
        align-self: center;
        margin: 0 20px 0 8px;
        border-radius: 8px;
        min-height: 44px;
    }
}