/*---------------------------------------------------------------------------------

 Theme Name:   Divi child
 Theme URI:    https://trattoriacapri.co.uk
 Description:  Divi Child
 Author:       G Michail
 Author URI:   https://tre-host.com
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/

/*fix date picker for small screens*/
/* WP Hotelier Date Picker Mobile Fix - Stacked Months */
@media (max-width: 768px) {
    .hotelier .datepicker-input-select {
        width: 100%!important;
    }

    .datepicker__inner {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .datepicker__months {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .datepicker__month {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
        margin-bottom: 20px !important;
    }
    
    .datepicker__month-caption,
    .datepicker__week-days,
    .datepicker__week-row {
        width: 100% !important;
        display: table;
        table-layout: fixed;
    }
    
    .datepicker__month-name {
        font-size: 14px !important;
    }
    
    .datepicker__week-name,
    .datepicker__month-day {
        width: 14.28% !important;
        text-align: center;
        padding: 8px 2px !important;
        font-size: 12px !important;
    }
    
    .datepicker__topbar {
        display: flex;
        flex-direction: column;
        padding: 10px !important;
    }
    
    .datepicker__info {
        margin-bottom: 10px;
        text-align: center;
        font-size: 12px !important;
    }
    
    .datepicker__buttons {
        text-align: center;
    }

    .hotelier .datepicker-input-select {
        width:100%;
    }
    #datepicker-button {
        width:100%;
        margin-top:7px;
    }
}

@media (max-width: 480px) {
    .datepicker__month-name {
        font-size: 12px !important;
    }
    
    .datepicker__week-name,
    .datepicker__month-day {
        padding: 6px 1px !important;
        font-size: 11px !important;
    }
}

/* Input fields (text, datepicker) */
.hotelier input, 
.hotelier date-input, 
.hotelier .select2-selection--single {
    background-color: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    border-radius: 3px !important;
    padding: 10px 12px !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px !important;
    color: #333 !important;
    height: auto !important;
}

/* Focus state */
.hotelier input:focus, 
.hotelier date-input:focus {
    border-color: #f9c908 !important;
    background-color: #fff !important;
}

/* Main buttons */
.hotelier button, 
.hotelier .button--view-rooms, 
.hotelier .button--request-room, 
.hotelier .button--book-now {
    background-color: #8a8a8a !important; /* Divi's blue */
    color: #fff !important;
    border: none !important;
    border-radius: 3px !important;
    padding: 12px 24px !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

/* Hover effect */
.hotelier button:hover, 
.hotelier .button--view-rooms:hover, 
.hotelier .button--request-room:hover, 
.hotelier .button--book-now:hover {
    background-color: #565657 !important; /* Slightly darker blue */
    opacity: 0.9 !important;
}

/* Room tables (pricing, extras) */
.hotelier .room__table, 
.hotelier .room__table th, 
.hotelier .room__table td {
    border: 1px solid #e5e5e5 !important;
    font-family: 'Open Sans', sans-serif !important;
}

/* Room titles */
.hotelier .room__title {
    font-family: 'Open Sans', sans-serif !important;
    color: #333 !important;
}

.hotelier ul.listing__list, ul.hotelier-notice hotelier-notice--error {
    list-style: none!important;
}

.hotelier mark.room__only-x-left {
    background-color: #fff;
    color:antiquewhite;
}

.hotelier a.button {
    background-color: #000;
    color:antiquewhite;
    padding: 0.6em;
}

.hotelier .datepicker-input-select {
    width:40%;
}

.hotelier #reserve-rooms-button {
    margin-bottom: 1em;
}

.hotelier mark.room__only-x-left {
    color: #ff8300;
    margin-left: -10px;
}

.hotelier-notice {
    padding: 10px!important;
}
.reservation-table__room-non-cancellable {
    margin-bottom:10px;
}
/* ============================================= */
/* WP Hotelier Form Styling (Labels & Inputs) */
/* ============================================= */

/* Container for all form rows */
#post-183 .hotelier .guest-details-fields,
#post-183 .hotelier .guest-additional-information-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Adjust spacing between rows */
}

/* All form rows (p tags) */
#post-183 .hotelier .form-row {
    display: flex;
    flex-direction: column;
    width: 100%; /* Full width by default */
    margin-bottom: 15px !important;
}

/* First/Last Name Fields (50% width) */
#post-183 .hotelier .form-row--first,
#post-183 .hotelier .form-row--last {
    width: calc(50% - 10px); /* Half width minus gap */
}

/* Wide Fields (100% width) */
#post-183 .hotelier .form-row--wide {
    width: 100%;
}

/* Labels (fixed width + alignment) */
#post-183 .hotelier .form-row__label {
    width: 100% !important; /* Full width (stacked above inputs) */
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

/* Inputs, Selects, Textareas (consistent styling) */
#post-183 .hotelier .input-text,
#post-183 .hotelier .select,
#post-183 .hotelier textarea {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background-color: #f9f9f9 !important;
    font-family: inherit !important;
    font-size: 14px !important;
}

/* Focus state */
#post-183 .hotelier .input-text:focus,
#post-183 .hotelier .select:focus,
#post-183 .hotelier textarea:focus {
    border-color: #565657 !important;
    background-color: #fff !important;
    outline: none !important;
}

/* Select2 dropdowns (country, arrival time) */
#post-183 .hotelier .select2-container .select2-selection--single {
    height: auto !important;
    padding: 12px !important;
    border: 1px solid #ddd !important;
}

/* Textarea (special requests) */
#post-183 .hotelier textarea {
    min-height: 120px !important;
}

/* Required field asterisk */
#post-183 .hotelier .form-row__label .required {
    color: #ff0000 !important;
}


.hotelier .listing__room {
    border: 1px solid #eee;
}

.hotelier.room-loop--related-rooms li{
    list-style-type: none; 
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #post-183 .hotelier .form-row--first,
    #post-183 .hotelier .form-row--last {
        width: 100%; /* Stack on mobile */
    }
}

/*==============single room=================*/
/* Constrain the room single template to match theme width */
.room, .room-loop, header h1.page-title {
    max-width: 1100px; /* Adjust to match your theme's content width */
    margin: 12px auto; /* Center the content */
    padding: 20px 20px; /* Add some side padding */
}

.room .room__thumbnail.room__thumbnail--single img {
    /* Targets room archive images in WP Hotelier*/
    width: 100%;
    height: 400px; /* Fixed height (adjust as needed) */
    object-fit: cover; /* Crops the image while maintaining aspect ratio */
    object-position: center; /* Focus on the center (adjust as needed: top, bottom) */
}

/* Make sure all elements within respect the container */
.single-room .room__details--single,
.single-room .room__description--single,
.single-room .room__facilities--single {
    width: 100%;
    max-width: 100%;
}

/* Fix the datepicker width */
.single-room .datepicker-form {
    max-width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .single-room .entry-content {
        padding: 0 15px;
    }
}

/* rooms =================*/
/*make all thumb img same size*/
.room__thumbnail--loop img {
  width: 500px;
  height: 200px;
}

 .datepicker__months::before {
    left:unset;
    background: white;
 }

 /*stripe plugin*/
 .asp-order-details-heading {
    margin-top:1em;
 }

 /*Book listings thumbnail size*/
.attachment-room_thumbnail.size-room_thumbnail.wp-post-image {
    width: 175px!important;
}

/* Booking stylings*/
/* remove not refundable nodification*/

.reservation-table__room-non-cancellable, .reservation-non-cancellable-disclaimer__text, .room__non-cancellable-info.room__non-cancellable-info--listing {
   /* display: none; */
    color: #578b48;
} 

.room__deposit.room__deposit--listing {
   display: none;
} 

.reservation-table__room-name.reservation-table__room-name--body {
    padding-top: 15px;
}

/* Extras CSS*/
/* General extras container */
.room__extras {
  margin: 1.5rem 0;
  font-family: inherit;
}

.room__extras h5 {
    font-size:13px;
    padding-bottom: 0;
}

/* One line for each extra */
.room-extra {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.8rem;
  gap: 10px;
}

/* Hide Options title */
.room-extras__title {
  display: none;
}

/* Flex styling for content */
.room-extra__content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}

/* Titles */
.room-extra__title {
  margin: 0;
  font-weight: 500;
}

/* Put checkbox in front for Cot */
.room-extra--819 .room-extra__input {
  order: -1;
}

/* Style number input */
.room-extra__input input[type="number"] {
  width: 60px;
  padding: 3px!important;
  text-align: center;
}

/* Price text */
.room-extra__price {
  color: #444;
  font-size: 0.9em;
  margin-left: 5px;
}

.room-extra--819 .room-extra__input input[type="checkbox"] {
  transform: translateY(2px); /* move slightly down */
  cursor: pointer;
}

/*single room details - remove deposit 100% and modify style for min stay */
.room__deposit.room__deposit--single {
    display: none;
}

.room__min-max-stay.room__min-max-stay--single, .room__min-max-stay.room__min-max-stay--listing {
  padding: 6px 24px;
  margin-top: 24px;
  display: inline-block;
  background-color: #eee;

}

/*card design*/
/* From Uiverse.io by akshat-patel28 */ 
.items-body-content {
    margin: 2px;
    padding: 5px;
    padding-right: 0px;
    /*display: grid;
    grid-template-columns: 10fr 1fr;*/
    font-size: 12px;
    /*grid-gap: 10px;*/
    border-radius: 15px;
    line-height: 1.3em;
}

.blue-var {
    border: 1px solid #0B5AA2;
}

.green-var {
    border: 1px solid #0ba272;
}

.red-var {
    border: 1px solid #a20b0b;
}

.purple-var {
    border: 1px solid #a20b77;
}

.gold-var {
    border: 1px solid #a2980b;
}

.text-w {
    font-weight: 600;
}