/* ============================================================================
 * overrides.css — small targeted fixes layered on top of style.css.
 * Loaded AFTER plugins.css and style.css from head.php so it always wins.
 * Keep this file short and well-commented.
 * ============================================================================ */

/* ── Booking widget: rebalance after removing the apartments_count cell ──
 * Old layout: c1 20% · c2 20% · c3 14% · c4 14% · c5 14% · c6 18%  (= 100%)
 * New layout: c1 22% · c2 22% · c3 16% · c4 16% ·          · c6 24%  (= 100%)
 * Also slightly reduce button letter-spacing so "CHECK AVAILABILITY" fits.
 * Wrapped in min-width media query so existing tablet/mobile rules in
 * style.css (which kick in below 992px) keep working.
 * ────────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
    .form1 .col1.c1 { width: 22%; }
    .form1 .col1.c2 { width: 22%; }
    .form1 .col2.c3 { width: 16%; }
    .form1 .col2.c4 { width: 16%; }
    .form1 .col3.c6 { width: 24%; }
}

.btn-form1-submit {
    letter-spacing: 1.5px;       /* down from 3px so it fits in one line */
    font-size: 14px;
    white-space: nowrap;
    padding: 0 12px;
}
@media (max-width: 1199px) {
    .btn-form1-submit { letter-spacing: 1px; font-size: 13px; }
}

/* ── Adults dropdown: make the entire wrapper clickable like Children ──
 * The select2 instance was being painted UNDER the wrapper because of a
 * z-index / pointer-events oddity on the leftmost select. Lift it.
 * ────────────────────────────────────────────────────────────────────── */
.form1 .select1_wrapper { position: relative; cursor: pointer; }
.form1 .select1_wrapper .select1_inner,
.form1 .select1_wrapper .select2-container { position: relative; z-index: 2; }
.form1 .select1_wrapper .select2-selection { cursor: pointer !important; }
.form1 .select1_wrapper > label { pointer-events: none; }   /* label was eating clicks */

/* ── Magnific Popup: make sure the close button is visible & gallery arrows on ─
 * Some custom themes hide the X. Force it to show on all gallery instances.
 * ────────────────────────────────────────────────────────────────────── */
.mfp-close, .mfp-close:active {
    color: #fff !important;
    opacity: 0.85 !important;
    font-size: 38px !important;
    line-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    right: 4px !important;
    top: 4px !important;
}
.mfp-close:hover { opacity: 1 !important; }
.mfp-arrow { opacity: 0.85; }
.mfp-arrow:hover { opacity: 1; }

/* ── Apartment preview row: small gutter between thumbs ──────────────── */
.preview-row { row-gap: 14px; }
.preview-row [class*="col-"] { padding-left: 7px; padding-right: 7px; }
.preview-row > [class*="col-"]:first-child { padding-left: 15px; }
.preview-row > [class*="col-"]:last-child  { padding-right: 15px; }
@media (max-width: 991px) {
    .preview-row > [class*="col-"] { padding-left: 7px !important; padding-right: 7px !important; }
}

/* ── Facility cards: center icon + text (consistency with why-direct) ──
 * The template default left-aligns icon and text. Make every card a
 * compact, centered, white tile so all "small div" cards on the site
 * read the same way.
 * ────────────────────────────────────────────────────────────────────── */
.facilties .single-facility {
    background: #fff;
    border-radius: 8px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
    transition: transform .2s, box-shadow .2s;
    height: 100%;
    margin-bottom: 25px;
}
.facilties .single-facility:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.facilties .single-facility > span {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #fdfaf3;
    color: #a68a64 !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    font-size: 26px !important;
    margin: 0 auto 18px !important;
    transition: background-color .2s, color .2s;
}
.facilties .single-facility:hover > span {
    background: #a68a64;
    color: #fff !important;
}
.facilties .single-facility h5 { font-size: 18px !important; }
.facilties .single-facility p { line-height: 1.7; }
.facilties .single-facility .facility-shape { display: none; }   /* drop the giant ghost icon */

/* ──────────────────────────────────────────────────────────────────────
 * CONSISTENT ROUNDED CORNERS ON ALL CONTENT IMAGES
 *   - 10px radius on cards / cover tiles / featured shots
 *   - 8px radius on smaller content images and previews
 *   - Background-image hero banners stay sharp (no rounding)
 *   - Logos, icons, social icons stay un-rounded
 * ──────────────────────────────────────────────────────────────────── */

/* Apply gentle rounding to every content <img>, then carve out exceptions. */
.about img,
.rooms1 img, .apt-cards img,
.services .img img, .services img,
.story-collage img,
.cavtat-img-wrap img, .dubrovnik-photo img,
.preview-row .preview-tile img,
.apt-overview-grid .overview-tile img,
.apt-cover img,
.gallery-page .gp-cover img,
.gallery-uniform .g-thumb img,
.amenity-card img,
.testimonials img.author-img,
.pricing-card img,
.facilties .single-facility img,
img.rounded-img {
    border-radius: 8px;
}

/* Card-style covers and big featured shots get a slightly larger radius. */
.gp-cover, .gp-cover img,
.story-collage .story-img, .story-collage .story-img img,
.cavtat-img-wrap, .cavtat-img-wrap img,
.dubrovnik-photo, .dubrovnik-photo img,
.apt-cards .apt-card-rich, .apt-cards .acr-img img,
.preview-row .preview-tile,
.apt-overview-grid .overview-tile,
.gallery-uniform .g-thumb,
.contact-map-section .map-frame iframe {
    border-radius: 10px;
}

/* Never round logos / favicons / social-icon avatars / tiny brand marks */
.logo-img, .logo img,
.footer img[alt*="favicon"i],
.footer-about img,
.footer-about-social-list img,
.brand img,
.contact-side .cs-social img {
    border-radius: 0 !important;
}

/* Hero banner backgrounds use background-image, not <img>, so no rounding
   needed — but if any banner contains an actual <img>, keep it square. */
.banner-header img,
.bg-img > img {
    border-radius: 0 !important;
}

/* ── Background images: keep the subject centered, never anchored top ───
 * Default in style.css uses background-position:top — that crops out
 * the centre of upright photos. Force center-center on every bg image.
 * ────────────────────────────────────────────────────────────────────── */
.bg-img,
.banner-header,
.testimonials .background,
.apt-cover {
    background-position: center center !important;
    background-size:     cover !important;
    background-repeat:   no-repeat !important;
}

/* iOS Safari + most Android browsers do NOT support background-attachment:fixed
 * cleanly — it causes the bg image to be rendered at viewport size and crop
 * very oddly, making the section look stretched and oversized. Disable it on
 * touch devices and on small screens. */
@media (max-width: 991px), (hover: none) {
    .bg-fixed,
    .banner-header.bg-fixed,
    .testimonials .bg-fixed {
        background-attachment: scroll !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * MOBILE POLISH
 * ──────────────────────────────────────────────────────────────────── */

/* Hero banner heights on mobile — the default 60vh is enormous on phones,
 * and the apartment cover at 560px takes most of the screen.
 * The secondary page banners (.banner-header) are NOT the hero — they're
 * just title bars — so they should be small enough that the actual content
 * starts above the fold without scrolling.
 * The HOMEPAGE hero (.header.slider, .header.slider-fade) and the apartment
 * cover (.apt-cover) stay generous because they ARE the hero. */
@media (max-width: 991px) {
    .banner-header                 { height: auto !important; min-height: 0 !important; padding: 90px 0 40px !important; }
    .banner-header .caption        { margin-top: 0 !important; }
    .banner-header h1              { font-size: 32px !important; line-height: 1.2 !important; margin-bottom: 0 !important; }
    .banner-header h5              { font-size: 12px !important; letter-spacing: 4px !important; margin-bottom: 8px !important; }

    .apt-cover                     { min-height: 360px !important; }
    .apt-cover .apt-cover-inner    { padding: 90px 0 60px !important; }
    .apt-cover .caption h1         { font-size: 32px !important; line-height: 1.2 !important; }
    .apt-cover .caption h4         { font-size: 16px !important; }
    .header.slider,
    .header.slider-fade            { min-height: 60vh !important; }
}

@media (max-width: 600px) {
    /* Tiny title bar — about 200 px so heading plus first content show
       without a single scroll. */
    .banner-header                 { padding: 80px 0 28px !important; }
    .banner-header h1              { font-size: 26px !important; }
    .banner-header h5              { font-size: 11px !important; letter-spacing: 3px !important; }

    .apt-cover                     { min-height: 280px !important; }
    .apt-cover .apt-cover-inner    { padding: 80px 0 40px !important; }
    .apt-cover .caption h1         { font-size: 26px !important; }
    .apt-cover .caption h4         { font-size: 14px !important; }

    .header.slider,
    .header.slider-fade            { min-height: 50vh !important; }
    .header.slider .item,
    .header.slider-fade .item      { min-height: 50vh !important; }
}

/* Give every container a bit of breathing room on small screens so text
   doesn't rub the screen edge. */
@media (max-width: 767px) {
    .container, .container-fluid {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    /* Section banners with overlay text need extra breathing room */
    .banner-header .caption,
    .apt-cover .caption {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    /* Hero typography scales down */
    .banner-header h1 { font-size: 36px !important; line-height: 1.2 !important; }
    .banner-header h5 { font-size: 13px !important; }
    .section-title  { font-size: 28px !important; line-height: 1.3 !important; }
    .section-subtitle { font-size: 12px !important; }
    /* Stop section padding from being huge on phones */
    .section-padding { padding-top: 60px !important; padding-bottom: 60px !important; }
    /* Cards / tiles tighten up */
    .card, .pillar, .wd-card, .fact-card, .article-card, .amenity-card,
    .single-facility, .todo, .pay-option, .booking-summary, .contact-side {
        padding: 22px 18px !important;
    }
    /* Booking summary stops being sticky on small screens (it never fits) */
    .booking-summary { position: static !important; }
}

/* Reservation step continue-bar must always be visible on mobile.
   Drop the sticky position there and stack neatly. */
@media (max-width: 767px) {
    .summary-bar {
        position: static !important;
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 18px;
        border-radius: 8px;
        background: #fdfaf3 !important;
        border: 1px solid #ead9b8;
        box-shadow: none;
    }
    .summary-bar #continueBtn {
        width: 100% !important;
        padding: 14px 20px !important;
    }
    .summary-bar .summary-text { width: 100%; }
}

/* Forms shouldn't overflow horizontally on tiny screens */
@media (max-width: 767px) {
    .form1 .col1, .form1 .col2, .form1 .col3 {
        float: none !important;
        width: 100% !important;
        border-right: none !important;
    }
    .form1 .c1, .form1 .c2, .form1 .c3, .form1 .c4 { height: auto; margin-bottom: 8px; }
    .btn-form1-submit { line-height: 50px; }
}

/* ──────────────────────────────────────────────────────────────────────
 * GLOBAL POLISH — small refinements applied last so they always win.
 * ──────────────────────────────────────────────────────────────────── */

/* Smooth scroll site-wide (not just where smooth-scroll.min.js is wired). */
html { scroll-behavior: smooth; }

/* Better default focus ring — visible but on-brand. */
:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid #a68a64;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Selection colour on-brand. */
::selection { background: #ead9b8; color: #2a2a2a; }

/* Native scrollbar — matched to brand on supporting browsers. */
@supports (scrollbar-color: auto) {
    html { scrollbar-color: #a68a64 #f5f0e6; }
}
@supports (-webkit-scrollbar) or selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar        { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track  { background: #f5f0e6; }
    ::-webkit-scrollbar-thumb  { background: #a68a64; border-radius: 5px; }
    ::-webkit-scrollbar-thumb:hover { background: #8d7350; }
}

/* Image smoothness: stop browsers showing alt-text outline before image loads. */
img { color: transparent; }

/* Buttons are interactive — make sure cursor agrees, even on legacy themes. */
button, [role="button"], .butn-dark, .butn-light, .btn { cursor: pointer; }

/* Headings tighter on mobile so they breathe. */
@media (max-width: 600px) {
    h1, .h1 { font-size: 30px !important; line-height: 1.25 !important; }
    h2, .h2 { font-size: 24px !important; }
    h3, .h3 { font-size: 20px !important; }
}

/* ── Animate-box: one-shot fade + slight slide, GPU-accelerated ─────────
 * Replaces the template's waypoint+animate.css chain which was firing on
 * every near-viewport scroll and felt jumpy. Now elements fade in once
 * with a short translate; hovering doesn't compete with the entrance.
 * ────────────────────────────────────────────────────────────────────── */
html.js .animate-box,
.js .animate-box {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease-out, transform .55s ease-out;
    will-change: opacity, transform;
}
html.js .animate-box.is-revealed,
.js .animate-box.is-revealed,
.animate-box.is-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* Direction-specific entrances kept subtle so hover/scroll don't fight. */
.animate-box[data-animate-effect="fadeInLeft"]  { transform: translateX(-22px); }
.animate-box[data-animate-effect="fadeInRight"] { transform: translateX(22px); }
.animate-box[data-animate-effect="fadeInLeft"].is-revealed,
.animate-box[data-animate-effect="fadeInRight"].is-revealed { transform: translate(0,0) !important; }

/* Disable the old animate.css classes so they don't double-animate. */
.animate-box.fadeIn,
.animate-box.fadeInUp,
.animate-box.fadeInLeft,
.animate-box.fadeInRight,
.animate-box.animated { animation: none !important; }

/* Hover transforms: GPU-accelerated and short, never fight the scroll
 * reveal because the entrance finishes before any hover state can fire. */
.apt-cards .apt-card-rich,
.amenity-card,
.fact-card,
.todo,
.gp-cover,
.preview-row .preview-tile,
.gallery-uniform .g-thumb,
.tile,
.wd-card,
.pillar {
    transform: translateZ(0);              /* promote to its own layer */
    transition: transform .25s ease, box-shadow .25s ease;
    backface-visibility: hidden;
}
.apt-cards .apt-card-rich:hover,
.amenity-card:hover,
.fact-card:hover,
.todo:hover,
.gp-cover:hover,
.tile:hover,
.wd-card:hover,
.pillar:hover {
    transform: translateY(-3px);
}

/* Respect users who prefer no motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .animate-box { opacity: 1 !important; transform: none !important; }
}

/* ── Contact channel tiles: calmer, predictable hover ────────────────── */
.cc-tile {
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}
.cc-tile:hover {
    background: #fdfaf3;
    border-color: #ead9b8;
    transform: none !important;     /* kill the bouncy translateY */
}
.cc-tile:hover .cc-icon {
    background: #a68a64;
    color: #fff;
}
.cc-icon { transition: background-color .15s ease, color .15s ease; }