/* =====================================================================
   Four Walls — custom overrides
   Loaded AFTER the theme stylesheets so it always wins.
   Keep site-specific tweaks here instead of editing the minified build.
   ===================================================================== */

/* Brand pink (primary accent used across the .fw build) = #ff0062
   Darker hover shade = #d1004f                                          */

/* Current-page indicator --------------------------------------------- */
/* js/fourwalls.js adds .current-page to the nav item matching the open
   page; the page is highlighted in brand pink (no icon).                */
.theme-main-menu .nav-item.current-page > .nav-link {
  color: #ff0062;
}
.theme-main-menu .navbar-nav .dropdown-item.current-page > span {
  color: #ff0062;
  font-weight: 600;
}

/* Logo lockup sizing -------------------------------------------------- */
/* fourwalls_logo.svg was rebalanced: bigger cube, smaller wordmark, both
   centred on one middle line, viewBox measured tight to include the cube's
   full top (~5.5:1). The .fw build sizes it at 38px (header) / 48px (footer)
   against the OLD 1434x140 viewBox; re-height it here for the new aspect so
   the cube reads larger (~34px header) and the wide "FOURWALLS" lockup no
   longer runs off a phone's right edge.                                    */
.theme-main-menu .logo img {
  height: 40px;
}
.footer-one .logo img {
  height: 50px;
}

/* Footer logo — vertical brand lockup ------------------------------- */
/* Optional stacked icon + wordmark + "REAL ESTATE" tagline, sized larger. */
.footer-one .footer-intro .logo img.footer-logo-vertical {
  height: 130px;
  width: auto;
}

/* "All pages" mega menu ---------------------------------------------- */
/* Wider than the theme's default mega dropdown, pinned to the right and
   kept within the viewport so a long link list never overflows.        */
@media (min-width: 992px) {
  .navbar .mega-dropdown-lg .dropdown-menu {
    width: min(940px, calc(100vw - 40px));
    min-width: 0;
    left: auto;
    right: 0;
    padding: 12px 6px;
    max-height: 80vh;
    overflow-y: auto;
  }
}

.navbar .mega-dropdown-lg .menu-column + .menu-column {
  margin-top: 18px;
}

/* Hero search dropdowns ---------------------------------------------- */
/* Same search bar is embedded in the listings-page banner
   (.inner-banner-one, listing_03.html), so the fixes cover both.       */
/* Labels sit in narrow columns, so keep each on a single line.         */
.hero-banner-one .search-wrapper-one .input-box-one .label,
.inner-banner-one .search-wrapper-one .input-box-one .label {
  white-space: nowrap;
}
/* The select popups hold long labels (e.g. price ranges) that are wider
   than their column. The theme sets overflow-y:auto on the list, which
   makes the browser promote overflow-x to auto too and adds a stray
   horizontal scrollbar. Let the list grow to fit its content and drop
   both scrollbars (our lists are short and curated).                   */
.hero-banner-one .search-wrapper-one .nice-select .list,
.inner-banner-one .search-wrapper-one .nice-select .list {
  max-height: none;
  min-width: max-content;
  overflow: visible;
}
/* The box fills its (narrow) column, so a long selected value — e.g. a
   rent price range — would overflow to the right, over the dropdown
   arrow and outside the box. Clip it with an ellipsis; the full label is
   still readable in the open list above.                                */
.hero-banner-one .search-wrapper-one .nice-select .current,
.inner-banner-one .search-wrapper-one .nice-select .current {
  display: inline-block;
  max-width: calc(100% - 6px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Tablet layout (iPad): the search collapses to three rows —
   [ Ενδιαφέρομαι για... ] / [ Τύπος · Περιοχή · Εύρος τιμής ] / [ button ]
   via col-12 / col-md-4 / col-12 on the fields. The theme only turns the
   vertical dividers into underlines below 992px, so between 992–1199px the
   full-width first field would show a stray right divider — drop it.      */
@media (max-width: 1199px) {
  .hero-banner-one .search-wrapper-one .row > div:first-child .input-box-one.border-left,
  .inner-banner-one .search-wrapper-one .row > div:first-child .input-box-one.border-left {
    border-right: none;
  }
}

/* The banner search pairs the sliders icon with the theme's search button
   (width:90%, min-width:150px) in one flex row — at some widths their sum
   is wider than the column and the button pokes out of the white box. Let
   the button take exactly the space left next to the icon instead.        */
.inner-banner-one .search-wrapper-one .search-btn {
  width: 100%;
  min-width: 0;
}

/* Δημοφιλείς περιοχές — illustrated area cards ----------------------- */
/* The neighbourhood maps are LIGHT (cream) artwork with navy/pink line
   work, whereas .location-card-one is built for dark photos: a black
   bottom scrim (mix-blend luminosity) + white label. Over the cream the
   white label would vanish, so we swap the scrim for a solid navy
   (#1C3457) gradient that only covers the lower strip — the centred
   landmark stays clear and the label reads white on navy.               */
.location-card-illustrated {
  background-color: #f3f1e6; /* matches the artwork's paper, hides any edge */
  background-position: center;
}
.location-card-illustrated:before {
  background: linear-gradient(180deg, rgba(28, 52, 87, 0) 45%, rgba(28, 52, 87, 0.92) 100%);
  mix-blend-mode: normal;
}

/* Listing sections — index «Νέες καταχωρήσεις» (.property-listing-one) and
   the listings page (.property-listing-six) --------------------------- */
/* Swap the section's cream .bg-pink-two (#f5ede8) for the same blue→navy
   gradient the index hero uses (.hero-banner-one.bg-pink), and recolour
   the teal "sale" tag (theme green #00b579) to brand navy so it reads as
   blue. The "rent" tag already inherits brand pink (#ff0062) from the
   .fw build.                                                            */
.property-listing-one.bg-pink-two,
.property-listing-six.bg-pink-two {
  background: linear-gradient(180deg, #c4d4ec 0%, #1c3457 100%);
}
.property-listing-one .listing-card-one .img-gallery .tag.sale,
.property-listing-six .listing-card-one .img-gallery .tag.sale {
  background: #1c3457;
}
/* The tags are tiny 11px uppercase pills. Embolden + enlarge them a touch
   and let the pill size to its (now Προς-less) label so «ΕΝΟΙΚΙΑΣΗ» /
   «ΠΩΛΗΣΗ» read clearly over the busy listing photos.                   */
.property-listing-one .listing-card-one .img-gallery .tag,
.property-listing-six .listing-card-one .img-gallery .tag {
  width: auto;
  min-width: 80px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
}
/* The gradient darkens to navy at the foot of the section, where the
   pagination sits — its default black text would vanish. Make it white,
   with the active/hover pill in brand pink.                             */
.property-listing-six .pagination-one li a {
  color: #fff;
}
.property-listing-six .pagination-one li.active a,
.property-listing-six .pagination-one li a:hover {
  background: #ff0062;
  color: #fff;
}

/* Εκτίμηση ακινήτου — doodle illustration (index) -------------------- */
/* The valuation doodle is a square white drawing with its own hand-drawn
   navy frame, but the theme's .img-bg pane is taller than wide, so
   `cover` would crop its sides off. Fit the whole drawing inside with
   some breathing room on a white pane.                                 */
.block-feature-four .img-gallery .img-bg {
  background-color: #fff;
  background-size: contain;
  background-origin: content-box;
  padding: 24px;
}
/* The theme's striped backdrop (.img-gallery:before, shape_06.svg) was
   meant to peek out behind a full-bleed photo pane; behind the floating
   framed sketch it just juts out oddly — drop it.                      */
.block-feature-four .img-gallery:before {
  display: none;
}
/* On phones the theme forces the floating price card to min-width 280px,
   which makes it as wide as the doodle pane itself. Cap it well below the
   drawing and scale its type with it. The gallery's 25px inset existed
   for the striped backdrop we dropped above — zero it so the doodle gets
   the full column width.                                                */
@media (max-width: 575px) {
  .block-feature-four .img-gallery {
    padding: 0;
  }
  .block-feature-four .img-gallery .img-bg {
    padding: 8px;
  }
  .block-feature-four .img-gallery .card-one {
    min-width: 0;
    max-width: 175px;
  }
  /* Keep caption + price inside the artwork's white strip — the map pin's
     head pokes up into it, so the text must stay above the pin.          */
  .block-feature-four .img-gallery .card-one .text {
    padding: 8px 4px 0;
  }
  .block-feature-four .img-gallery .card-one .text h6 {
    font-size: 11px;
    letter-spacing: 0;
    margin-bottom: 2px;
  }
  .block-feature-four .img-gallery .card-one .text h3 {
    font-size: 20px;
    line-height: 1.2;
  }
}

/* Ποιοι είμαστε — office doodle (index) ------------------------------ */
/* Swap the theme's stock photo for the hand-drawn office doodle. The
   drawing is square on solid white, so `cover` would crop it: pin it to
   the right edge with `contain` and let the heading sit on the white
   left half. A navy border keeps the white pane from melting into the
   page background.                                                     */
.block-feature-two .block-one {
  background: #fff url(../images/media/office_doodle_01.fw.jpg) no-repeat right center;
  background-size: contain;
  border: 2px solid #1C3457;
}

/* Reviews (index feedback slider) ----------------------------------- */
/* The Google star rating is an SVG; cap its width so it doesn't stretch
   to fill the column. The reviewer avatar keeps its own .avatar size.   */
.feedback-block-one .col-md-3 img.lazy-img {
  max-width: 132px;
  height: auto;
}

/* About page — reviews block on a blue→navy gradient ----------------- */
/* The "Τι λένε οι πελάτες" section keeps its white review cards
   (.feedback-block-six) but sits on the brand blue gradient instead of the
   cream .bg-pink-two. Only the heading and the slider dots land directly on
   the blue, so those flip to white/pink; the card text stays dark on white. */
.fw-reviews-blue {
  background: linear-gradient(180deg, #2d5596 0%, #1c3457 100%);
}
.fw-reviews-blue .title-one h3,
.fw-reviews-blue .title-one p {
  color: #fff;
}
/* Slick dots: the theme's dark-bordered/grey dots vanish on navy — give
   them a white ring, filled brand pink when active.                    */
.fw-reviews-blue .slick-dots li button {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
}
.fw-reviews-blue .slick-dots li.slick-active button {
  background: #ff0062;
  border-color: #ff0062;
}

/* Services — «Βασικές Υπηρεσίες» grid on the brand blue --------------- */
/* The theme paints .block-feature-seventeen with the peachy .bg-pink-three
   (#faf1ec). The section sits on the same blue→navy gradient as the
   about-page reviews instead. Only the heading/subtitle land directly on
   the blue, so they flip to white — the white service cards stay as-is.
   The template's pale line-art corner shapes would ghost on navy, so
   they're hidden.                                                       */
.fw-services-blue {
  background: linear-gradient(180deg, #2d5596 0%, #1c3457 100%);
}
.fw-services-blue .title-one h3,
.fw-services-blue .title-one p {
  color: #fff;
}
.fw-services-blue > .shapes {
  display: none;
}

/* CTA banner («Ξεκινήστε το ταξίδι σας μαζί μας») ---------------------- */
/* .fancy-banner-two ships with a photo background (a grey placeholder in
   this build) darkened by a 55% black :before overlay. Swap in the
   Thessaloniki street map (OSM data rendered via city-roads, brand navy +
   pink) and soften the overlay to a navy tint so the map shows through.
   Keep the theme's fixed-attachment parallax on desktop; touch devices
   fall back to scroll because iOS Safari breaks fixed backgrounds. */
.fancy-banner-two {
  background: #1c3457 url(../images/media/thessaloniki-map.fw.png) no-repeat center 60%;
  background-size: cover;
  background-attachment: fixed;
}
@media (hover: none) and (pointer: coarse) {
  .fancy-banner-two {
    background-attachment: scroll;
  }
}
.fancy-banner-two:before {
  background: rgba(18, 28, 52, 0.35);
}
/* On small screens the heading sits over the dense city centre — darken. */
@media (max-width: 991px) {
  .fancy-banner-two:before {
    background: rgba(18, 28, 52, 0.5);
  }
}
/* Solid-navy variant used on the diaxeirisi/polisi service pages. */
.fancy-banner-two.fw-banner-blue {
  background: #1c3457;
}
.fancy-banner-two.fw-banner-blue:before {
  display: none;
}
/* Services sidebar menu — the theme circles each row's arrow in black
   and fills it peach (#ffc8b1) on hover/active; use brand pink instead. */
.service-category ul a:after {
  color: #ff0062;
  border-color: #ff0062;
}
.service-category ul a:hover:after,
.service-details .service-sidebar .service-category ul a.active:after {
  background: #ff0062;
  color: #fff;
}
/* Grey callout quote on service pages — the theme only styles
   .quote-wrapper inside blog details, so restate the look here.        */
.service-details .quote-wrapper {
  text-align: center;
  background: #f3f3f3;
  border-radius: 20px;
  margin: 55px 0 50px;
  padding: 40px 30px 45px;
}

/* Contact page (contact.html) --------------------------------------- */
/* The form + map block uses .bg-pink, which in the .fw build is the
   blue→navy gradient. Per request, make it a solid brand navy so it reads
   as one clean colour block. The form's default dark heading/labels and
   the theme's reddish validation text (#ff4d44) would be illegible on
   navy, so flip them to white.                                          */
.contact-us .bg-pink {
  background: #1c3457;
}
.contact-us .form-style-one h3 {
  color: #fff;
}
.contact-us .form-style-one .input-group-meta label {
  color: rgba(255, 255, 255, 0.85);
}
.contact-us .form-style-one .help-block,
.contact-us .form-style-one .help-block.with-errors li {
  color: #fff;
}

/* Branded contact map (MapLibre GL, see js/map.fw.js) ----------------- */
.fw-map {
  min-height: 450px;
  border-radius: inherit;
}
/* Shown until JS runs, and permanently if MapLibre/WebGL is unavailable */
.fw-map-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 450px;
  color: #1c3457;
  text-decoration: underline;
}
/* The pin: white disc with the brand icon, pink ring, diamond tail.
   Sizing is coupled to the Marker offset in js/map.fw.js.              */
.fw-map-pin {
  display: block;
  position: relative;
  width: 54px;
  height: 54px;
  background: #fff;
  border: 3px solid #ff0062;
  border-radius: 50%;
  box-shadow: 0 12px 24px rgba(28, 52, 87, 0.3);
  cursor: pointer;
}
.fw-map-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 12px;
  height: 12px;
  background: #ff0062;
  transform: translateX(-50%) rotate(45deg);
}
.fw-map-pin img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30px;
  height: 33px;
  z-index: 1;
}
/* MapLibre UI, nudged toward the brand */
.fw-map .maplibregl-ctrl-group {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(28, 52, 87, 0.18);
}
.fw-map .maplibregl-ctrl-attrib {
  font-size: 10px;
}

/* Listing details pages (listing_details_*) --------------------------- */
/* The theme wraps the ENTIRE page content in one .bg-pink section, which
   the .fw build turns into the blue→navy hero gradient. Stretched over a
   ~10.000px page its lower half is solid navy, where the bare section
   headings (Floor Plans, Location, Reviews…) that sit directly on the
   background would drown. Keep the section on the light end of the brand
   blue instead — the white content cards and dark text stay legible top
   to bottom.                                                            */
.listing-details-one.bg-pink {
  background: linear-gradient(180deg, #c4d4ec 0%, #e3ebf7 100%);
}
/* The "FOR SELL/RENT" pill is plain black in the theme — recolour to
   brand navy so it matches the «ΠΩΛΗΣΗ» tags on the listing cards.     */
.theme-details-one .list-type {
  background: #1c3457;
  border-color: #1c3457;
}

/* Listings grid & details — white variant (listing_03 / akinita /
   akinito) ------------------------------------------------------------ */
/* Chosen over the blue→navy gradient after an A/B: the section sits on
   plain white, with the white cards outlined in brand navy so they
   still separate from the background. On the details page (akinito) the
   same outline goes on every white content card — :not(.tag) skips the
   small white «ΠΩΛΗΣΗ» pills inside the similar-property cards. The
   outline joins the card-wide pink hover below.                         */
.property-listing-six.fw-listing-white,
.listing-details-one.fw-listing-white {
  background: #fff;
}
.fw-listing-white .listing-card-one,
.listing-details-one.fw-listing-white .bg-white:not(.tag) {
  border: 2px solid #1c3457;
}
.fw-listing-white .listing-card-one:hover {
  border-color: #ff0062;
}

/* Property cards — the whole box is one link -------------------------- */
/* The card title carries Bootstrap's .stretched-link, whose ::after
   overlay (z-index:1) pins to the nearest positioned ancestor — make
   that the card itself so clicks anywhere on the box open the listing.
   Interactive bits inside keep working ABOVE the overlay: the photo
   carousel dots are already z-index:2 in Bootstrap; the footer action
   icons (details page) are lifted here.                                 */
.listing-card-one {
  position: relative;
}
/* At its Bootstrap z-index:1 the overlay ties with the search banner
   above (.z-1) and wins on DOM order, so an open filter dropdown
   (nice-select .list) reaching into the first card row had its clicks
   stolen by the card. 0 keeps it above the card's static content but
   below the banner and its dropdowns.                                   */
.listing-card-one .stretched-link::after {
  z-index: 0;
}
.listing-card-one .action-icons {
  position: relative;
  z-index: 2;
}
/* Hovering anywhere on the card fires every element's pink state — not
   just the element under the cursor — so the box reads as one control.  */
.listing-card-one:hover .property-info .title {
  color: #ff0062;
}
.listing-card-one:hover .btn-four {
  background: #ff0062;
}

/* Featured-property banner tag ("Επιλεγμένο ακίνητο του μήνα") ------- */
/* The .fancy-banner-one card is white, but its tag is the same teal
   (#00b579) as the listing "sale" tags — recolour to brand navy and
   embolden so it matches the «ΠΩΛΗΣΗ» pills in the section above.       */
.fancy-banner-one .property-item .tag {
  background: #1c3457;
  font-weight: 600;
}
/* js/listings.fw.js fills .fw-feat-collage with the featured listing's
   photos — a grid of cover-cropped tiles (4×3 desktop, 2×3 phones), so
   every photo keeps its aspect ratio instead of stretching to the
   section height. It sits between the section background (z -2) and
   the veil below (z -1).
   The collage overshoots the section by 220px top and bottom: the
   parallax in js/fourwalls.js translates it up to ±210px as the page
   scrolls, and the overshoot keeps the section edges covered. The
   section clips the overshoot.                                          */
#fw-featured {
  overflow: hidden;
}
.fw-feat-collage {
  position: absolute;
  inset: -220px 0;
  z-index: -2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  overflow: hidden;
  will-change: transform;
}
.fw-feat-collage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A single-photo listing gets one img spanning the whole grid (see
   listings.fw.js), so it covers the section and still rides the
   parallax.                                                             */
.fw-feat-collage img:only-child {
  grid-column: 1 / -1;
}
@media (max-width: 767px) {
  .fw-feat-collage {
    grid-template-columns: repeat(2, 1fr);
  }
  .fw-feat-collage img:nth-child(n + 7) {
    display: none;
  }
}
/* Replace the theme's sideways black gradient with a white veil at ~50%
   (about the strength of the theme's original scrim) so the photos stay
   clearly visible — the section copy is dark text now, so the index.html
   markup drops the .text-white classes in this section.                 */
#fw-featured:before {
  background: rgba(255, 255, 255, 0.5);
}
/* The arrow button carries .stretched-link, so the whole box is one link
   to the featured listing. Mirror the listing-card hover wherever the
   cursor is over the box: lift with a shadow, title to brand pink, and
   light up the arrow button.                                            */
.fancy-banner-one .property-item {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow: 0 15px 35px rgba(28, 52, 87, 0.12);
}
.fancy-banner-one .property-item:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}
.fancy-banner-one .property-item .fw-feat-title {
  transition: color 0.3s ease;
}
.fancy-banner-one .property-item:hover .fw-feat-title {
  color: #ff0062;
}
.fancy-banner-one .property-item:hover .btn-four {
  background: #ff0062;
  color: #fff;
}

/* =====================================================================
   Listings feed pages (akinita.html / akinito.html)
   ===================================================================== */
/* CRM descriptions keep their line breaks without needing <br> tags */
.fw-pre-line { white-space: pre-line; }
/* CRM photos come in arbitrary aspect ratios — normalize the frames */
#fw-grid .carousel-item img,
#fw-latest .carousel-item img { aspect-ratio: 3 / 2; object-fit: cover; }
#fw-similar .img-gallery img { aspect-ratio: 3 / 2; object-fit: cover; }
#fw-gallery .carousel-item img { aspect-ratio: 16 / 10; object-fit: cover; }

/* Sort pill («Ταξινόμηση») — the theme fixes it at 126px, which squeezes
   the long Greek labels («Τιμή (αύξουσα)») right up against the arrow,
   and its 1px black border aliases into a ragged edge on the 30px pill
   radius. Let it size to the label, give the arrow breathing room, and
   outline it in navy like the listing cards on the same page.           */
.short-filter .nice-select {
  width: auto;
  min-width: 150px;
  padding: 0 40px 0 18px;
  border: 2px solid #1c3457;
}
.short-filter .nice-select:after {
  right: 16px;
}
.short-filter .nice-select .current {
  max-width: none;
}

/* Advance-filter modal: the theme renders the «Τετραγωνικά» min/max as
   45px outlined boxes — taller than the neighbouring underlined fields
   (so the row's shared bottom border drops lower than «Λέξη-κλειδί»'s)
   and visually foreign to the modal. Restyle them as plain inputs so
   the row matches the other fields; the spinner buttons go too.         */
.advance-search-panel .main-bg .sqf-ranger input {
  width: calc(50% - 33px);
  height: 35px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  font-size: 18px;
}
.advance-search-panel .main-bg .sqf-ranger input::placeholder {
  color: #000;
}
.advance-search-panel .main-bg .sqf-ranger input::-webkit-outer-spin-button,
.advance-search-panel .main-bg .sqf-ranger input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.advance-search-panel .main-bg .sqf-ranger input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
#fw-thumbs img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Empty search results — «Δεν βρήκατε αυτό που ψάχνετε;» CTA ---------- */
/* A failed search is a lead: offer to search on the visitor's behalf —
   the button opens contact.html with their criteria pre-filled (?msg=) —
   plus a free-valuation link for owners scouting prices in their area.
   Reuses the index CTA look (fancy-banner-three: title-one heading with
   the pink swash + btn-five), sized down to sit inside the grid.        */
.fw-empty-cta {
  max-width: 640px;
  margin: 70px auto 0;
}
.fw-empty-cta .title-one h3 {
  font-size: 42px;
  line-height: 1.25em;
}
/* The swash ships at its index-hero width (327px); scale it to the words
   it underlines and drop it below the baseline — at this smaller heading
   the theme's bottom:-2% lands mid-letter and reads as a strikethrough. */
.fw-empty-cta .title-one span img {
  width: 100%;
  max-width: 327px;
  bottom: -14px;
}
.fw-empty-cta .fw-cta-alt {
  font-size: 16px;
  margin-bottom: 0;
}
.fw-empty-cta .fw-cta-alt a {
  color: #ff0062;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fw-empty-cta .fw-cta-alt a:hover {
  color: #1c3457;
}
/* Below ~768px the heading wraps to two lines, which collapses the span
   and leaves the swash as a stray squiggle — drop it there.             */
@media (max-width: 767px) {
  .fw-empty-cta .title-one span img {
    display: none;
  }
}
@media (max-width: 575px) {
  .fw-empty-cta .title-one h3 {
    font-size: 32px;
  }
}

/* «Καθαρισμός φίλτρων» — outlined navy pill with a refresh icon, echoing
   the sort pill styled above (.short-filter .nice-select) on the page.  */
.fw-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  border: 2px solid #1c3457;
  border-radius: 30px;
  line-height: 40px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 500;
  color: #1c3457;
  transition: all 0.3s ease-in-out;
}
.fw-reset-btn:hover {
  border-color: #ff0062;
  background: #ff0062;
  color: #fff;
}

/* =====================================================================
   Νομικές σελίδες (oroi_xrisis / politiki_aporritou / cookies)
   ===================================================================== */
/* Plain-prose pages built outside the theme's blocks: a readable text
   measure, consistent heading rhythm and real bullets (the theme only
   styles lists opted into its own classes).                             */
.fw-legal {
  max-width: 800px;
}
.fw-legal .fw-updated {
  font-size: 15px;
  color: #979797;
  margin-bottom: 40px;
}
.fw-legal h2 {
  font-size: 26px;
  margin: 45px 0 18px;
  color: #1c3457;
}
.fw-legal p,
.fw-legal li {
  font-size: 17px;
  line-height: 1.9;
}
.fw-legal p {
  margin-bottom: 18px;
}
.fw-legal ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 22px;
}
.fw-legal li {
  margin-bottom: 8px;
}
.fw-legal a {
  color: #ff0062;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fw-legal a:hover {
  color: #1c3457;
}
/* Cookies page: the small category table */
.fw-legal .fw-cookie-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 25px;
  font-size: 16px;
}
.fw-legal .fw-cookie-table th,
.fw-legal .fw-cookie-table td {
  border: 1px solid #e4e4e4;
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.fw-legal .fw-cookie-table th {
  background: #f6f8fb;
  font-weight: 600;
  color: #1c3457;
}

/* =====================================================================
   404 (404.html)
   ===================================================================== */
/* The theme's error page is a footer-less full-viewport section; the .fw
   build adds the shared footer below it, so drop the 100vh minimum and
   let the blue→navy .bg-pink band size to its content instead.          */
.error-section {
  min-height: auto;
  padding: 250px 0 150px;
}
/* Secondary way out under the main button — same underlined-pink link
   treatment as the empty-search CTA on akinita.html (.fw-cta-alt).      */
.fw-error-alt a {
  color: #ff0062;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fw-error-alt a:hover {
  color: #1c3457;
}

/* =====================================================================
   SEO headings (site-wide)
   =====================================================================
   Every sub-page's banner title is the page <h1> (was a theme <h3> —
   search engines need exactly one h1 per page). These rules reproduce
   the theme's h3 scale (css/style.css + css/responsive.css) so the
   change is visually a no-op. h1.property-titlee is the listing title
   on akinito.html; .error-section h1 is the 404 heading.               */
.inner-banner h1,
h1.property-titlee {
  font-size: 64px;
  line-height: 1.25em;
}
.inner-banner h1 {
  letter-spacing: -1px;
}
.error-section h1 {
  font-size: 82px;
}
@media (min-width: 992px) and (max-width: 1399px) {
  .inner-banner h1,
  h1.property-titlee {
    font-size: 48px;
  }
  .error-section h1 {
    font-size: 50px;
  }
}
@media (max-width: 991px) {
  .inner-banner h1,
  h1.property-titlee {
    font-size: 38px;
  }
  .error-section h1 {
    font-size: 40px;
  }
}

/* =====================================================================
   Contact form confirmation popup (contact.html)
   =====================================================================
   Shown by js/fourwalls.js after the message is sent — the theme's own
   confirmation depended on inc/contact.php (PHP), which never runs on
   the Worker host. The markup is injected by JS; no HTML to edit. The
   button reuses the theme's .btn-nine (pink in the .fw build).         */
.fw-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(28, 52, 87, 0.55); /* navy scrim */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.fw-popup-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
body.fw-popup-lock {
  overflow: hidden;
}
.fw-popup {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 20px;
  padding: 45px 35px 40px;
  text-align: center;
  transform: translateY(14px) scale(0.97);
  transition: transform 0.25s ease;
}
.fw-popup-overlay.is-open .fw-popup {
  transform: none;
}
.fw-popup-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(255, 0, 98, 0.08);
  color: #ff0062;
  margin-bottom: 22px;
}
.fw-popup-check svg {
  width: 34px;
  height: 34px;
}
.fw-popup h3 {
  font-size: 28px;
  margin-bottom: 12px;
}
.fw-popup p {
  color: #6a6a6a;
  margin-bottom: 28px;
}
/* The theme's global `button { display: block }` would pin the OK
   button to the left edge; inline-block lets the popup's
   text-align: center do its job.                                       */
.fw-popup .btn-nine {
  display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
  .fw-popup-overlay,
  .fw-popup {
    transition: none;
  }
}
/* Failure fallback: links inside the .messages alert (direct email/
   phone) inherit the alert's red instead of the theme link color.      */
.form-style-one .messages .alert a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Honeypot field (bot trap) — parked off-screen instead of display:none
   so naive bots still "see" and fill it; visitors and screen readers
   never do (aria-hidden + tabindex="-1" on the input).                 */
.form-style-one .fw-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Scroll target for links arriving at /contact#contact-form (and the
   ?thema=/?msg= auto-scroll in js/fourwalls.js): land the form just
   below the sticky menu instead of underneath it.                      */
#contact-form {
  scroll-margin-top: 120px;
}
/* Contact address banner: the opening-hours entry is plain text
   (nothing to click) — match the theme's .address-banner .text a look. */
.address-banner .text .fw-note {
  color: rgba(22, 22, 22, 0.45);
}