/*******************************************************************************/
/*  Multidays   -   C O L O R    S K I N          ****************************/
/*******************************************************************************/
/* For better compatibility, please change here only folowing properties:      */
/* 
*        background , background-color, background-repeat, background-image,  background-repeat, background-position
*        border
*        box-shadow, -moz-box-shadow, -webkit-box-shadow
*        border-radius, -moz-border-radius, -webkit-border-radius
*        color
*        font-weight
*        text-shadow
*        text-transform
*
*/

/* Full Calendar Frame */
.datepick-inline {
	background: #fff;										/* FixIn: 9.3.1.4 */
	border: 1px solid #fefefe;
	box-shadow: 0 0 1px #7a7a7a;
	-moz-box-shadow: 0 0 1px #7a7a7a;
	-webkit-box-shadow: 0 0 1px #7a7a7a;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}
/* Background of one calendar month */
.datepick-inline .datepick{
  background:  transparent;
}
/* Previous & Next links  and TITLE BACKGROUND */
.datepick-inline .calendar-links {
    border-bottom:none;										/* FixIn: 9.3.1.4 */
    background: transparent;
}
/* Prev - Next Text */
.datepick-inline .calendar-links .datepick-prev a,
.datepick-inline .calendar-links .datepick-next a,
.datepick-inline .calendar-links .datepick-prev a:hover,
.datepick-inline .calendar-links .datepick-next a:hover{
	color: #5f5f5f;											/* FixIn: 9.3.1.4 */
	text-shadow: none;
	font-weight: 600;
}
/* Month Titles */
.datepick-inline .datepick-header {
	color: #5f5f5f;											/* FixIn: 9.3.1.4 */
	font-weight: 600;
	text-shadow: none;
}
/* Week Titles */
div.datepick-inline .datepick-title-row th{
    border: 1px solid #ccc;     
    color: #555;
    font-weight: 600;    
    text-transform: uppercase;    
}
/* Cell border*/
.block_hints .block_free, .block_hints .block_time, .block_hints .block_booked, .block_hints .block_pending, .block_hints .block_check_in_out, 
.datepick-inline .datepick-days-cell{
    border: 1px solid #ccc;
    color:#757575;
}
/******************************************************************************** FixIn: 9.5.0.2 */
/*  New Stripes - Unavailable Cells - for  Booking > Availability page  ********/
/*******************************************************************************/
/* Stripes */
.wpbc_ajx_availability_container .datepick-inline .datepick {
    background: repeating-linear-gradient(  135deg, #efefff, #efefff 4px, #ddd 4px, #ddd 8px  );
}
/* Unselectable dates  &  headers - calendar empty cells */
.wpbc_ajx_availability_container .datepick-inline  th,
.wpbc_ajx_availability_container .datepick-inline .datepick-days-cell.datepick-unselectable{
    background: #fff;                                   										   /* Here the same color as at line #18 for  "Full Calendar Frame":   .datepick-inline { ... }  */
}
/* It is all unavailable dates */
.wpbc_ajx_availability_container .datepick-inline .date_user_unavailable,
.wpbc_ajx_availability_container .datepick-inline .before_after_unavailable,		/* "Before/After" unavailable days from	 Settings General page in "Availability" section */
.wpbc_ajx_availability_container .datepick-inline .weekdays_unavailable, 			/* "Weekdays" unavailable  from	 Settings General page in "Availability" section */
.wpbc_ajx_availability_container .datepick-inline .season_unavailable				/* "SEASON" unavailable dates  defined at  Booking > Resources > Availability page */
{
   background: #fff;
}
/* It is all unavailable RESOURCE dates defined at Booking > Availability page */
.wpbc_ajx_availability_container .resource_unavailable:not(.datepick-unselectable) {
    background: transparent;
    color:#fff;
}
/* Unavailable SELECTABLE days for Booking > Availability page */
.block_hints .datepick-inline .datepick-days-cell.date_user_unavailable a,
.datepick-inline .datepick-days-cell.date_user_unavailable:not(.datepick-unselectable) a{
	color:#757575;
}
/* Unselectable dates - hide check in/out */
.wpbc_ajx_availability_container .datepick-inline td.datepick-days-cell.check_in_time.datepick-unselectable .wpbc-cell-box .wpbc-diagonal-el,
.wpbc_ajx_availability_container .datepick-inline td.datepick-days-cell.check_out_time.datepick-unselectable .wpbc-cell-box .wpbc-diagonal-el{
	display: none;
}
/*********************************************************************************/
/* U N S E L E C T A B L E    -   Usually when we select 1st date with range dates selection mode, previous dates become unselectable. */
div.wpbc_ajx_availability_container .datepick-inline .datepick-unselectable,
.datepick-inline .datepick-unselectable{
  color: #ddd;
  text-shadow: 0 0px 0 #ddd;
}
.datepick-inline .datepick-unselectable span{                                                        /*  //FixIn: 8.9.4.13 */
    text-shadow: none;
}
/******************************************************************************** FixIn End: 9.5.0.2 */

/*******************************************************************************/
/*  Dates Cells       **********************************************************/
/*******************************************************************************/

/* A V A I L A B L E - BACKGROUND */
.block_hints .block_free,
.block_hints .block_time, 
.block_hints .block_check_in_out div.check-in-div,                             /* Item  for the LEGEND */
.block_hints .block_check_in_out div.check-out-div,                             /* Item  for the LEGEND */
.datepick-inline .date_available,
.datepick-inline .timespartly.check_in_time div.check-in-div,                   /* Define the COLOR fot the check  in / out times the same as available*/
.datepick-inline .timespartly.check_out_time div.check-out-div {
  background: none repeat scroll 0 0 #3E9C56;
}
/* A V A I L A B L E  - Text A */
.block_hints .block_free a,
.block_hints .block_time, 
.datepick-inline .date_available a{
    color:#fff;
    font-weight: 600;
    text-shadow: none;
}
/*******************************************************************************/

/* T I M E   S L O T S */
.block_hints .block_time, 
.datepick-inline .timespartly{
  /*background-image: url("../../assets/img/clock_fill.png");*/                                                     /*  //FixIn: 8.9.4.13 */
  background-repeat: no-repeat;
  background-position:100% 100%; 
}
/*******************************************************************************/

/* A P P R O V E D  - BACKGROUND */
.block_hints .date_approved.block_check_in_out, 
.block_hints .block_booked, 
.datepick-inline .date_approved, 
/* A P P R O V E D  - BACKGROUND for Check In Pending & Check Out Approved ||  Check Out Pending & Check In Approved   Dates    //FixIn: 6.0.1.2 */
td.timespartly.check_in_time.check_out_time.check_in_time_date2approve.check_out_time_date_approved div.check-in-div, 
td.timespartly.check_in_time.check_out_time.check_out_time_date2approve.check_in_time_date_approved div.check-out-div {    
    background-color: #C9552A;
}
/* A P P R O V E D  -  T E X T /including partially booked - timeslots/ */
.block_hints .date_approved.block_check_in_out,  
.block_hints .block_booked, 
.datepick-inline .date_approved,   
.block_hints .block_booked a, 
.datepick-inline .date_approved a{
    color: #a23c08;
    font-weight: 600;
    text-shadow: none;
}
/* CHECK IN and CHECK OUT  Borders for the approved cells - the COLOR have to be the SAME as BACKGROUND of this cell*/
.block_hints .date_approved.block_check_in_out div.check-in-div,                /* Item  for the LEGEND */
.datepick-inline .date_approved.timespartly.check_in_time div.check-in-div{
    border-right: 1px dotted #C9552A;
}
.block_hints .date_approved.block_check_in_out div.check-out-div,               /* Item  for the LEGEND */
.datepick-inline .date_approved.timespartly.check_out_time div.check-out-div{
    border-left: 1px dotted #C9552A;
}
/*******************************************************************************/

/* P E N D I N G  - BACKGROUND */
.block_hints .date2approve.block_check_in_out, 
.block_hints .block_pending, 
.datepick-inline .date2approve, 
/* P E N D I N G  - BACKGROUND for Check In Approved & Check Out Pending ||  Check Out Approved & Check In Pending    Dates     //FixIn: 6.0.1.2  */
td.timespartly.check_in_time.check_out_time.check_in_time_date_approved.check_out_time_date2approve div.check-in-div, 
td.timespartly.check_in_time.check_out_time.check_out_time_date_approved.check_in_time_date2approve div.check-out-div {    
  background-color: #E5B84B;
}
/* P E N D I N G  -  T E X T /including partially booked - timeslots/ */
.block_hints .date2approve.block_check_in_out, 
.block_hints .block_pending, 
.datepick-inline .date2approve, 
.block_hints .block_pending a, 
.datepick-inline .date2approve a {
    color: #8e7c28;
    font-weight: 600;
    text-shadow: none;
}
/* CHECK IN and CHECK OUT  Borders for the approved cells - the COLOR have to be the SAME as BACKGROUND of this cell*/
.block_hints .date2approve.block_check_in_out div.check-in-div,                 /* Item  for the LEGEND */
.datepick-inline .date2approve.timespartly.check_in_time div.check-in-div{
    border-right: 1px dotted #E5B84B;
}
.block_hints .date2approve.block_check_in_out div.check-out-div,                /* Item  for the LEGEND */
.datepick-inline .date2approve.timespartly.check_out_time div.check-out-div{
    border-left: 1px dotted #E5B84B;
}
/*******************************************************************************/

/* S E L E C T E D   Dates - Background */
.datepick-inline .datepick-one-month .datepick .datepick-current-day {
  background-color: #555;
}
/* S E L E C T E D   Dates - Text color */
.datepick-inline .datepick-one-month .datepick .datepick-current-day .wpbc_time_dots,                               /*  //FixIn: 8.9.4.13 */
.datepick-inline .datepick-one-month .datepick .datepick-current-day a{
    color: #EEEEEE;
    text-shadow: 0 -1px 0 #000000;
}
/*******************************************************************************/

/* C e l l   O V E R   Dates - Background */
.wpbc_timeslot_day_bg_as_available .datepick-inline .times_clock.datepick-days-cell-over,
.datepick-inline .datepick .datepick-days-cell-over{
    background:#aaa;
}
/* C e l l   O V E R   Dates - Text color */
.datepick-inline  .datepick-one-month .datepick .datepick-days-cell-over .wpbc_time_dots,                                                /*  //FixIn: 8.9.4.13 */
.datepick-inline  .datepick-one-month .datepick td.datepick-days-cell-over a:hover,
.datepick-inline  .datepick-one-month .datepick td.datepick-days-cell-over a{
    color: #eee;
    text-shadow: none;
}
/*******************************************************************************/
/* FixIn: 6.0.1.2 */
/* Text style for Check In Approved & Check Out Pending ||  Check Out Approved & Check In Pending || Check In Pending & Check Out Approved ||  Check Out Pending & Check In Approved   */
td.timespartly.check_in_time.check_out_time.check_in_time_date_approved.check_out_time_date2approve span, 
td.timespartly.check_in_time.check_out_time.check_out_time_date_approved.check_in_time_date2approve span, 
td.timespartly.check_in_time.check_out_time.check_in_time_date2approve.check_out_time_date_approved span, 
td.timespartly.check_in_time.check_out_time.check_out_time_date2approve.check_in_time_date_approved span {    
    font-weight: 600;
    text-shadow: none;
}

/* Show partially (time-slots) booked days with Background color as for available days ********************************/
/** //FixIn: 8.2.1.27   Updated 2018-07-04   ****/
/* Color as in this section A V A I L A B L E - BACKGROUND */
.wpbc_timeslot_day_bg_as_available .datepick-inline .times_clock {
    background-color: #3E9C56;
}
/* Same as in this Section above --- A V A I L A B L E  - Text A  */
.wpbc_timeslot_day_bg_as_available .datepick-inline .times_clock.date_available a {
    color:#fff;
    font-weight: 600;
    text-shadow: none;
}
/*  Same as in this Section above --- S E L E C T E D   Dates - Text color */
.wpbc_timeslot_day_bg_as_available .datepick-inline .datepick-one-month .datepick .times_clock.date_available.datepick-current-day a{
    color: #EEEEEE;
    text-shadow: 0 -1px 0 #000000;
}
/*   Same as in this Section above --- A V A I L A B L E  and UNSELECTABLE - Text */
.wpbc_timeslot_day_bg_as_available .datepick-inline .date_available {
  color: #888;                                                               /* This style for the uvailbale date, when we are select the dates */
  text-shadow: none;                                                 /* This style for the unavailable date, when we are select the dates */
}
.datepick-inline .date_available span {
    text-shadow: none;
}

/*******************************************************************************/
/*  CHECK IN / OUT      as          P.O.L.Y.G.O.N.S        //FixIn: 8.9.4.13   */
/*******************************************************************************/
/* Fill diagonal check  in/out items with AVAILABLE background color */
.wpbc-cell-box .wpbc-diagonal-el svg polygon{
    fill: #3E9C56;
}
/* Firstly we define background of the day cells background as available */
.datepick-inline td.datepick-days-cell.check_in_time,
.datepick-inline td.datepick-days-cell.check_out_time {
    background-color: #3E9C56;
}
/* Pending */
.datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date2approve     .wpbc-cell-box .wpbc-co-in svg polygon,     /* Check In  */
.datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date2approve   .wpbc-cell-box .wpbc-co-out svg polygon     /* Check Out */
{
    fill: #E5B84B;
}
/* Approved */
.datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date_approved    .wpbc-cell-box .wpbc-co-in svg polygon,     /* Check In  */
.datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date_approved  .wpbc-cell-box .wpbc-co-out svg polygon     /* Check Out */
{
    fill: #C9552A;
}
/* C e l l   O V E R   Dates */
.datepick-inline td.datepick-days-cell.check_in_time.datepick-days-cell-over,
.datepick-inline td.datepick-days-cell.check_out_time.datepick-days-cell-over {
    background-color: #aaa;
}
/* == PALETTE (repainted 2026-09-08, redesign plan 02 / tasks 11 + 15) =
   Booking Calendar's stock #00D025 / #FF5500 / #FFD200 were replaced
   throughout this file by the villanatica redesign palette. Task 11
   used #6DB57A / #D9723F; Joe reviewed four options on 2026-09-08
   (dev/screenshots/calendar-options.png in the theme repo) and chose
   V3 "Deep", which is what is in the file now:
       available  #3E9C56   (--vn-avail)   was #6DB57A
       booked     #C9552A   (--vn-booked)  was #D9723F
       pending    #E5B84B   (--vn-pending) unchanged
   These MUST stay in step with .vn-availability__swatch--free/--busy in
   the theme's assets/css/main.css, which paints the home page's legend
   right beside this grid.
   NOTE this file lives in wp-content/uploads and is SHARED between
   www.villanatica.be and dev.villanatica.be (uploads symlink), so an
   edit here is live on production immediately. It is enqueued as
   ?ver=<plugin version> only; the theme appends the file's mtime
   (villanatica_version_calendar_skin in inc/assets.php) so an edit
   actually reaches browsers instead of sitting behind a 1-year cache. */

/* == v11.7 compatibility (added 2026-09-07, joe) =====================
   Booking Calendar 11.x base CSS resets td backgrounds with !important
   (.datepick-inline td { background: 0 0 !important }) and its new
   SVG-based painting does not engage for legacy-rendered forms.
   Restore full-day cell colors + legend + day-number link color.
   Partial (timespartly) cells keep the engine-drawn SVG triangles. */
td.datepick-days-cell.date_available:not(.timespartly) { background: #3E9C56 !important; }
td.datepick-days-cell.full_day_booking.date_approved:not(.timespartly),
td.datepick-days-cell.date_user_unavailable.full_day_booking:not(.timespartly) { background: #C9552A !important; }
td.datepick-days-cell.full_day_booking.date2approve:not(.timespartly) { background: #E5B84B !important; }
td.datepick-days-cell a { color: inherit !important; text-decoration: none !important; }
/* v11.7 compat part 2: fill checkout/checkin SVG wedges (new wrapper class names) */
td.datepick-days-cell.check_out_time .wpbc-co-out svg polygon { fill: #C9552A !important; }
td.datepick-days-cell.check_in_time .wpbc-co-in svg polygon { fill: #C9552A !important; }
td.datepick-days-cell.check_out_time.date2approve .wpbc-co-out svg polygon,
td.datepick-days-cell.check_in_time.date2approve .wpbc-co-in svg polygon { fill: #E5B84B !important; }
/* Clicked/selected day stays visible under the resets above (task-14 fix round 1, item 9;
   task-15 review concern #1). The plugin's own selected-day background
   (`.datepick-current-day{background-color:#555}` near the top of this file, NOT !important)
   ties on specificity with `td.datepick-days-cell.date_available:not(.timespartly){background:
   … !important}` two sections up and loses, so a clicked date on /contact/ never visibly
   changed color. #555 is the plugin's own colour, unaffected by the V3 repaint (that only
   touched the available/booked/pending hexes). WPBC applies `.datepick-current-day` to BOTH
   ends of a range selection, so one rule covers the range end date too. White 600 for the day
   number matches the V3 day-number treatment below, for the same reason: the base plugin's own
   #EEEEEE + text-shadow reads low-contrast on this background. */
td.datepick-days-cell.datepick-current-day, td.datepick-days-cell.datepick-current-day.date_available { background: #555 !important; }
td.datepick-days-cell.datepick-current-day,
td.datepick-days-cell.datepick-current-day a { color: #fff !important; font-weight: 600 !important; text-shadow: none !important; }

/* == V3 "Deep" — day numbers + cell grid (added 2026-09-08, task 15 §E) ===
   Everything below is UNLAYERED plugin scope and competes with Booking
   Calendar's own !important rules, so !important is required here. It does
   NOT count against the theme's budget (dev/check-dev.sh counts main.css).

   1. DAY NUMBERS.  The compat rule above (`td.datepick-days-cell a { color:
      inherit !important }`) makes every day number inherit its cell's colour:
      #757575 on an available cell and #a23c08 on a booked one. Both are thin
      and low-contrast on the deeper V3 green/orange. White at 600 instead.

      Measured on dev 2026-09-08 (getComputedStyle over all 84 cells), which
      is why the selector is not the obvious one:
        - a BOOKED cell has NO <a> at all — the number sits in a <span>, so an
          `a`-only rule would have missed every booked day. The colour is
          therefore set on the CELL as well, and the number inherits it.
        - booked cells ARE `.datepick-unselectable` (you cannot book them), so
          a blanket `:not(.datepick-unselectable)` would have excluded exactly
          the cells that needed it most.
      The three class names below are the ones that actually carry a colour.
      Past days and other-month days carry NONE of them — they are
      `date_user_unavailable` / `datepick-other-month` on a white background
      and keep the plugin's muted #ddd. Verified: nothing turns white on
      white. */
td.datepick-days-cell.date_available,
td.datepick-days-cell.full_day_booking,
td.datepick-days-cell.timespartly,
td.datepick-days-cell.date_available a,
td.datepick-days-cell.full_day_booking a,
td.datepick-days-cell.timespartly a { color: #fff !important; font-weight: 600 !important; }

/* 2. CELL GRID — a 6px-rounded tile per day with a 2px white gutter.
      Drawn on the inner .wpbc-cell-box, NOT on the <td>, and again that is
      measurement rather than taste. Two things make the obvious
      `td { border: 2px solid #fff; border-radius: 6px }` a no-op here:
        - the calendar table is `border-collapse: collapse`, and per spec
          border-radius has no effect on a cell of a collapsed table;
        - Booking Calendar's own base CSS pins the cell border to
          `.5px solid transparent` with !important at a higher specificity —
          measured: with `border: 2px solid #fff !important` in place the
          computed border-width was still 0.5px (only the colour took).
      The .wpbc-cell-box is an ordinary <div> the plugin already puts inside
      every cell, so a radius on it just works. `overflow: hidden` clips the
      SVG check-in/check-out wedges to that radius. The white gutter is an
      ::after ring rather than a border on the box: a border would resize the
      box, and — the actual reason — the wedge SVGs are CHILDREN of the box
      and paint over any background or inset shadow it carries, so on a
      check-in/check-out day the gutter would simply have been painted over.
      ::after paints after them. pointer-events:none keeps the cell clickable
      (the whole td carries the plugin's onclick). */
.datepick-inline td.datepick-days-cell .wpbc-cell-box { border-radius: 6px; overflow: hidden; }
.datepick-inline td.datepick-days-cell .wpbc-cell-box::after { content: ""; position: absolute; inset: 0; border: 2px solid #fff; border-radius: 6px; pointer-events: none; z-index: 1; }