/*
Theme Name: WPrentals Child
Template: wprentals
Version: 1.0
*/

/* ======================================================================
   WPrentals Child – Custom CSS (Frontend-only where needed)
   ----------------------------------------------------------------------
   Key principle:
   - NEVER let frontend layout fixes leak into WP Admin.
   - WP Admin pages use the body class .wp-admin.
   - So: any “responsive wrapper / table / row” fixes must be scoped with:
       body:not(.wp-admin)
   ====================================================================== */


/* ======================================================================
   1) FRONTEND DateRangePicker: hide days from other months
   ----------------------------------------------------------------------
   - Our JS marks “other month” cells with .hidden-other-month.
   - This must NOT affect any admin calendars.
   ====================================================================== */
body:not(.wp-admin) .daterangepicker td.hidden-other-month{
  opacity: 0 !important;
  color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  pointer-events: none !important;
  text-decoration: none !important;
}


/* ======================================================================
   2) PRICE: hide the “City” field used as a transport field
   ----------------------------------------------------------------------
   - In the contact-form builder you used the field “City” to submit
     the calculated total price via email.
   - We hide it visually, but keep it in the DOM so it can be submitted.
   - Scope: frontend only (admin forms should remain untouched).
   ====================================================================== */
body:not(.wp-admin) input[name="city"]{
  display: none !important;
}


/* ======================================================================
   3) PRICE: highlight the inline price summary (quiet, no blinking)
   ----------------------------------------------------------------------
   - Inserted by JS before the submit button.
   - Make it noticeable but calm.
   ====================================================================== */
.inline-price-summary{
  padding: 12px 14px !important;
  margin: 12px 0 14px !important;
  text-align: right !important;

  border: 1px solid rgba(0,0,0,.12) !important;
  border-left: 4px solid rgba(0,0,0,.45) !important;
  border-radius: 10px !important;

  background: rgba(0,0,0,.035) !important;

  font-size: 16px !important;
  line-height: 1.35 !important;
}

.inline-price-summary strong{
  font-weight: 800 !important;
  font-size: 18px !important;
}

.inline-price-summary span{
  font-size: 14px !important;
}
/* When a real price is present */
.inline-price-summary.has-price{
  background: #c8f64b !important;
  border-left-color: #7fae1e !important;
}

.inline-price-summary.has-price strong{
  color: #1b3a57 !important;
}


/* ======================================================================
   4) HEADER: Hybrid breakpoint so the menu is always usable
   ----------------------------------------------------------------------
   Why:
   - Desktop menu fits until ~1114px (after that it wraps and becomes unusable).
   - So we switch to the mobile header (hamburger) <=1114px.
   - And force the desktop header >=1115px.
   Notes:
   - This is a visual/header toggle only.
   - It does not touch layouts/content areas.
   ====================================================================== */

/* <=1114px: show mobile header + hamburger */
@media (max-width: 1114px){

  .master_header .mobile_header{
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99999 !important;
  }

  .master_header .header_wrapper{
    display: none !important;
  }

  /* Hamburger label (default EN) */
  .mobile_header .mobile-trigger i::after{
    content: " Menu" !important;
    font-family: "Jost", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-left: 4px !important;
    vertical-align: middle !important;
  }

  /* German */
  html[lang^="de"] .mobile_header .mobile-trigger i::after{
    content: " Menü" !important;
  }

  /* Croatian */
  html[lang^="hr"] .mobile_header .mobile-trigger i::after{
    content: " Izbornik" !important;
    font-family: Arial, sans-serif !important;
  }
}

/* >=1115px: show desktop header (full menu) */
@media (min-width: 1115px){

  .master_header .header_wrapper,
  .master_header .header_wrapper_inside,
  .master_header #access{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
  }

  .master_header .mobile_header{
    display: none !important;
  }
}


/* ======================================================================
   5) LISTING (single listing pages): fix fixed-width (1200px) wrappers
   ----------------------------------------------------------------------
   Symptom:
   - Listing content can overflow/clipped on tablet/phone because
     WPrentals uses fixed-width wrappers like .content-fixed-listing.
   Fix:
   - Make those wrappers responsive below 1200px.
   - Scope strictly to single listing pages AND frontend only.
   ====================================================================== */
@media (max-width: 1199px){

  body:not(.wp-admin).single_listing .content-fixed-listing,
  body:not(.wp-admin).single-estate_property .content-fixed-listing,
  body:not(.wp-admin).single_listing .listing_type_title_wrapper,
  body:not(.wp-admin).single-estate_property .listing_type_title_wrapper,
  body:not(.wp-admin).single_listing .listing_main_image_price,
  body:not(.wp-admin).single-estate_property .listing_main_image_price,
  body:not(.wp-admin).single_listing .listing_main_image_location,
  body:not(.wp-admin).single-estate_property .listing_main_image_location,
  body:not(.wp-admin).single_listing .listing_main_image,
  body:not(.wp-admin).single-estate_property .listing_main_image,
  body:not(.wp-admin).single_listing #listing_ajax_container,
  body:not(.wp-admin).single-estate_property #listing_ajax_container,
  body:not(.wp-admin).single_listing .single-content.listing-content,
  body:not(.wp-admin).single-estate_property .single-content.listing-content,
  body:not(.wp-admin).single_listing .booking_form_mobile,
  body:not(.wp-admin).single-estate_property .booking_form_mobile,
  body:not(.wp-admin).single_listing .category_wrapper,
  body:not(.wp-admin).single-estate_property .category_wrapper,
  body:not(.wp-admin).single_listing .listing_description_wrapper,
  body:not(.wp-admin).single-estate_property .listing_description_wrapper,
  body:not(.wp-admin).single_listing .row.content-fixed-listing,
  body:not(.wp-admin).single-estate_property .row.content-fixed-listing{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Extra safety: prevent horizontal scrolling on listing pages only */
  body:not(.wp-admin).single_listing,
  body:not(.wp-admin).single-estate_property{
    overflow-x: hidden !important;
  }
}


/* ======================================================================
   6) LISTING: ensure booking form is visible on small mobile (<=768px)
   ----------------------------------------------------------------------
   Some WPrentals styles hide / collapse the mobile booking form.
   We force visibility on the listing detail pages only.
   ====================================================================== */
@media (max-width: 768px){

  body:not(.wp-admin).single_listing #booking_form_request,
  body:not(.wp-admin).single-estate_property #booking_form_request,
  body:not(.wp-admin).single_listing .booking_form_mobile,
  body:not(.wp-admin).single-estate_property .booking_form_mobile,
  body:not(.wp-admin).single_listing .booking_form_request,
  body:not(.wp-admin).single-estate_property .booking_form_request{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
  }
}


/* ======================================================================
   7) BLOG (blog list + single post): fix fixed-width wrappers
   ----------------------------------------------------------------------
   Symptom:
   - Blog list and single posts can be clipped horizontally (1170/1200px).
   Cause:
   - WPrentals uses .row.content-fixed and related wrappers with fixed widths.
   Fix:
   - Make them responsive below 1200px.
   Critical:
   - Frontend-only (do not touch WP Admin calendars / tables).
   ====================================================================== */
@media (max-width: 1199px){

  body:not(.wp-admin).blog .row.content-fixed,
  body:not(.wp-admin).single-post .row.content-fixed,
  body:not(.wp-admin).blog .content_wrapper.row,
  body:not(.wp-admin).single-post .content_wrapper.row,
  body:not(.wp-admin).blog .blog_list_wrapper.row,
  body:not(.wp-admin).single-post .blog_list_wrapper.row,
  body:not(.wp-admin).blog .breadcrumb_container,
  body:not(.wp-admin).single-post .breadcrumb_container,
  body:not(.wp-admin).blog .new_blog.blog-unit-1,
  body:not(.wp-admin).single-post .new_blog.blog-unit-1,
  body:not(.wp-admin).blog .single-content.blog-list-content,
  body:not(.wp-admin).single-post .single-content.blog-list-content,
  body:not(.wp-admin).single-post .single-content{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Fix bootstrap columns when theme keeps 1200px widths */
  body:not(.wp-admin).blog .row.content-fixed > [class*="col-"],
  body:not(.wp-admin).single-post .row.content-fixed > [class*="col-"]{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
  }

  /* Prevent horizontal scroll on blog pages only */
  body:not(.wp-admin).blog,
  body:not(.wp-admin).single-post{
    overflow-x: hidden !important;
  }

  /* Media and tables should not overflow on blog pages */
  body:not(.wp-admin).blog img,
  body:not(.wp-admin).single-post img,
  body:not(.wp-admin).blog iframe,
  body:not(.wp-admin).single-post iframe,
  body:not(.wp-admin).blog video,
  body:not(.wp-admin).single-post video,
  body:not(.wp-admin).blog table,
  body:not(.wp-admin).single-post table{
    max-width: 100% !important;
  }

  /* Tables: allow horizontal scrolling on small screens (blog only) */
  body:not(.wp-admin).blog table,
  body:not(.wp-admin).single-post table{
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}
/* =========================================================
   HEADER: Mobile header sticky/fixed on scroll (<=1114px)
   - keep mobile menu always visible while scrolling
   ========================================================= */
@media (max-width: 1114px){

  /* make the mobile bar stick to the top */
  .master_header .mobile_header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
  }

  /* ensure header wrapper itself doesn't collapse */
  .master_header{
    position: relative !important;
    z-index: 999999 !important;
  }

  /* prevent content from hiding behind the fixed header */
  body{
    padding-top: 70px !important; /* adjust if your mobile header is taller */
  }
}

/* =========================================================
   DateRangePicker: while selecting CHECK-OUT, never show not-allowed cursor
========================================================= */
.daterangepicker.selecting-checkout td,
.daterangepicker.selecting-checkout td.disabled,
.daterangepicker.selecting-checkout td.off,
.daterangepicker.selecting-checkout td.booked_date{
  cursor: pointer !important;
}
/* =========================================================
   BLOG: Social Media Icons unter Artikeln entfernen
   ========================================================= */
body.single-post .prop_social,
body.single-post .share_unit,
body.blog .prop_social,
body.blog .share_unit{
  display: none !important;
}


/* =========================================================
   WPrentals DateRangePicker hint: "Select both dates..."
   Mark it clearly (yellow background)
   ========================================================= */
.daterangepicker .wpestate_section{
  display: block !important;
  width: 100% !important;

  padding: 10px 12px !important;
  margin: 8px 0 10px !important;

  border-radius: 10px !important;
  font-weight: 800 !important;

  background: #c8f64b !important;
  color: #000 !important;
}

/* Optional: emphasize Check-in / Check-out words */
.daterangepicker .wpestate_section .wpestate_section_start,
.daterangepicker .wpestate_section .wpestate_section_end{
  font-weight: 900 !important;
  text-decoration: underline;
}