/*
Theme Name: Travel Init 
Author: WEN Solutions
Author URI: https://wensolutions.com/
Description: Travel Init is the  Full Site Editor theme that provides a comprehensive solution for your Tour/Travel and blogging website. It is suitable for any kind of blog niches: personal, corporate, fashion, food, lifestyle, travel, news, affiliate, etc.It is fast, light-weighted. travel-init uses available Gutenberg blocks and makes the experience seamless. Responsive and clean design provides great readability on any screen size and hence engages your readers to your content. CHECK OUT THE DEMO SITES HERE: https://demo.wensolutions.com/travel-init/ | CONTACT FOR SUPPORT: https://wensolutions.com
Version: 1.1
Requires at least: 6.0
Tested up to: 6.1.1
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: travel-init
Tags: full-site-editing, blog, news, one-column, custom-menu, editor-style, custom-colors, custom-logo, featured-images, full-width-template, template-editing, wide-blocks
*/
/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
/* Normalize
--------------------------------------------- */

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
.wp-block-post-author__avatar,
.wp-block-social-links,
.wp-block-post-excerpt__excerpt {
    margin: 0;
    padding: 0;
}

ul{
    list-style-type: none;
}
#trip_includes ul{
    list-style-type: disc;
    margin: 0 0 15px 15px;
    padding-left: 20px;
}
#trip_excludes ul{
    list-style-type: disc;
    margin: 0 0 15px 15px;
    padding-left: 20px;
}
html,
body {
    overflow-x: hidden;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
*{
    box-sizing: border-box !important;
}


button:hover,
button:focus,
input[type=button]:hover,
input[type=button]:focus,
input[type=reset]:hover,
input[type=reset]:focus,
input[type=submit]:hover,
input[type=submit]:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.button:hover,
.button:focus {
    text-decoration: none;
}
::marker{
    unicode-bidi: unset;
    font-variant-numeric: unset;

}
#section-itinerary-search div.wp-travel-search p select[type=button], #section-itinerary-search div.wp-travel-search p select[type=reset], #section-itinerary-search div.wp-travel-search p select[type=submit], button, input[type=button], input[type=reset], input[type=submit]{
    border: 0;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    background: #f83531;
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    padding: 0.5em 1em;
}
/* footer's links color  */
.travel-init-footer-one p a {
    color: white;
}
/*  */
a {
    text-decoration: none;
    color: #555;
    background-color: transparent;
    text-shadow: none;
    transition: color .3s,background-color .3s;
}

a:hover,
a:active {
    text-decoration-style: none;
}

ul {
    margin: 0;
    padding: 0;
    border: unset !important;
}

/*--------------------------------------------------------------
# Blocks
--------------------------------------------------------------*/
.wp-block-post-title a,
.wp-block-site-title a,
.wp-block-post-excerpt__more-text a,
.travel-init-sidebar-categories a,
.wp-block-query-pagination a,
.wp-block-post-terms a {
    text-decoration: none;
}

.wp-block-post-title a:hover,
.wp-block-site-title a:hover,
.wp-block-post-excerpt__more-text a:hover,
.travel-init-sidebar-categories a:hover,
.wp-block-query-pagination a:hover,
.wp-block-post-terms a:hover {
    text-decoration: underline;
}

.wp-site-blocks>*+* {
    margin-block-start: unset;
}

.all-trip-lists .wptravel-archive-wrapper.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
    gap: 2em;
}

.all-trip-lists .wptravel-archive-wrapper.grid-view .view-box .view-content {
    flex-direction: column;
    margin: 10px 0;
    padding: 15px 15px 0;
    width: auto;
}

.all-trip-lists .wptravel-archive-wrapper.grid-view .view-box .view-content .left-content .trip-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    border: 1px solid #e9e9e9;
    border-left: 0;
    border-right: 0;
    padding: 20px 10px;
    margin: 15px 0;
}
/* for breadcrumbs */
/* .breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.breadcrumb a {
    color: #428bca;
    text-decoration: none;
} */
/*  */


/* search trip select tag */
.wp-travel-toolbar .wp_travel_input_filters{
    width:145px;
    outline-color:#df1814;
    border:1px solid #ccc;
    background:#fff !important;
    height:32px;
}
.wp-travel-toolbar .wp-travel-view-mode-lists li.active-mode i{
    color:red;
}
/* end */
/* hovering effects on <a> */
#filters li span:hover, .post-item-wrapper .post-content h4:hover, .post-item-wrapper .post-content .read-more-link:hover, .post-item-wrapper:hover .post-content h4, .post-item-wrapper .post-content h4:hover, .post-item-wrapper .post-content .read-more-link:hover, footer#footer a:hover, footer#footer a:visited:hover, .travel-blog .featured-blog .blog-latest-post .post-item-wrapper .post-content h4:hover, .travel-blog .featured-blog .blog-latest-post .post-item-wrapper .post-content a:hover, .travel-blog .featured-blog .blog-latest-post .post-item-wrapper .post-content h4:hover a, .top-header ul a:hover, .widget.widget_archive ul li:before, .widget.widget_categories ul li:before, .widget.widget_meta ul li:before, .widget.widget_nav_menu ul li:before, .widget.widget_pages ul li:before, .widget.widget_recent_comments ul li:before, .widget.widget_recent_entries ul li:before, .widget.widget_rss ul li:before, .widget.widget_text ul li:before, .status-publish .entry-content a:hover, .status-public .entry-content a:hover, .share-handle .btn-floating:hover, #breadcrumb .trail-items li a:hover, .sidr ul li a:hover, .wp-travel.trip-headline-wrapper .wp-travel-booking-enquiry:hover, footer#footer .copy-right-footer .travel-copyright a:hover, .entry-meta a:hover, .comments-area ol .edit-link a, .comments-area ol .reply a, a:hover, a:focus, a:active, .widget table tbody a:hover, #header-search #search-form .close:hover{
    color: #df1814;
}
/* end: hovering effectson <a> */

/* anchor tag color */

.main-navigation li:not(.menu-btn) > a:hover, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_item > a, .main-navigation li:not(.menu-btn):hover > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-page-parent > a, .main-navigation licurrent-menu-ancestor > a, .status-publish .entry-content .theme-read-more, .status-public .entry-content .theme-read-more, #filters li span.active, .wp-travel-toolbar .wp-travel-view-mode-lists li.active-mode i, .wp-travel-navigation.wp-paging-navigation a.current, .wp-travel-navigation.wp-paging-navigation a:hover, .status-public .entry-content a, .status-publish .entry-content a, .wp-travel-tab-wrapper .tab-list.resp-tabs-list li.resp-tab-active, .widget_wp_travel_filter_search_widget #amount, .ui-slider .ui-widget-header, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active, .wp-travel-itinerary-items ul.wp-travel-itinerary-list .wp-travel-post-wrap-bg .recent-post-bottom-meta .trip-price ins, .wp-travel-trip-time i, .entry-meta .travel-info i, footer#footer .copy-right-footer .travel-copyright a, .checkout-page-wrap .checkout-block h3, .comments-area ol .reply a, .comments-area ol .edit-link a, .widget table tbody a{
    color: #f83531;
}

/* END anchor tag color */
.wp-travel-trip-code code{
    color: #f83531;
}
/* single-itineraries.php */

    /* booknow button */
.wptravel-book-your-trip {
    font-size: 22px;
    background: #f83531!important;
}
.wptravel-book-your-trip:hover {
    background-color: #df1814!important;
    color: #fff;
}

/* End: single-itineraries.php */

/* archive-itineraries 'explore' button */
.wptravel-layout-v2 .wptravel-archive-wrapper .view-box .view-content .right-content .explore-btn{
    color:white;
    background:#f83531;
}
.fa-calendar-alt:before{
    color: red;
}
.wptravel-layout-v2 .wptravel-archive-wrapper .view-box .view-content .left-content header .entry-title{
    font-size: 28px;
}
/* end */

/* trip-tab review section */
/* h3{
    font-size: 22px;
    font-weight: 400;
    line-height: 24px;
    color: #787878;
} */
/* #faq h4 a */
/* h4{
    font-size: 18px;
} */
.single-itineraries .wp-travel-related-posts h2{
    font-size: 26px;
    margin-bottom: 20px;
    color: #787878;
}
/* end */
/* trip-tab trip-outline section */
.timeline-contents h2{
    font-size: 26px;
    color:#787878;
    margin: 20px 0;
}
/* end */




/* nav bar */
.header3 nav ul li:hover,
.header3 nav ul li:focus-visible {
    color: #e89923 !important;
}

.header3 nav ul li a:focus-visible {
    color: #e89923;
}
.wp-block-navigation__responsive-container-content{
    gap: unset !important;
}

/* end navbar */

/* single trip page */
.single-itineraries #wp-travel-content .wp-travel-feature-slide-content {
    height: 632px !important;
}

.single-itineraries #wp-travel-content h1{
    font-size: 36px;
    margin: 0;
}
/* end single trip page */



/*banner section one*/


.banner-section-one div.wp-travel-search{
    background: #fff;
    padding: 20px;
}

.banner-section-one .wp-travel-search select,
.banner-section-one .wp-travel-search input{
    height: 30px;
}

.banner-section-one .wp-travel-search input.button{
    height: 50px;
}

/*about us section one*/

.about-section-one figure.wp-block-image img{
    height:auto;
}

/*service section one*/

.service-section-one figure.wp-block-image img{
    height:auto;
}

/*featured trip section one*/

.featured-trip-section-one .wp-block-button__link,
.featured-trip-section-one .trip-icons,
.featured-trip-section-one .trip-desc,
.featured-trip-section-one .offer{
    display: none !important;
}

.featured-trip-section-one .entry-title .heading-link{
    font-size: 24px !important;
}

.featured-trip-section-one .wp-travel-trip-currency,
.featured-trip-section-one .wp-travel-trip-price-figure{
    font-size: 18px !important;
}

.featured-trip-section-one .view-content{
    padding: 0px 15px 0 !important;
} 

.featured-trip-section-one .right-content{
    margin: 0px 0 !important;
} 

.featured-trip-section-one .price-here{
    margin: 5px 0 0px !important;
} 

/*testimonial section one*/
.testimonial-section-one figure.wp-block-image img{
    height: auto;
}

/*contact section one*/

.contact-section-one .wp-travel-enquiries-form-wrapper{
    background: #000;
    padding: 20px;
}

/*latest one section*/

.latest-post-section-one .wp-block-post-title{
    margin-top: 6px;
}


.latest-post-section-one .wp-block-post-date{
    margin-top: 6px;
}

.latest-post-section-one .wp-block-post-excerpt{
    margin-top: 6px;
}

/* end Homepage one */



/* for editor breadcrumbs */
.wptravel-block-breadcrumb ul {
	display: flex;
	flex-direction: row;
	list-style: none;
	align-items: center;
	padding-inline: 0;
	justify-content: flex-start;
	margin: 0;
	gap: 1.5rem;
  }

/* *************************************************************************************************** */


/* full site editor styling */
* {
    box-sizing: border-box !important;
}
header .entry-title {
  font-size: unset ;
}
a {
    text-decoration: none !important;
    color: #555;
    background-color: transparent;
    text-shadow: none;
    transition: color .3s,background-color .3s;
}

.wp-travel-search p label{
    color: white;
    font-style: italic;
}

.wp-travel-search p input,select{
    position: relative;
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
    padding: 5px 10px;
    min-width: 75px;
    width: 100%;
    text-transform: uppercase;
    border: rgb(204, 196, 196);
}
input[type=submit]{
    border: 0;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    background: #f83531;
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    padding: 0.5em 1em;
}


/* All trip block */
/* for explore button */
.wptravel-archive-wrapper .view-box .view-content .right-content .explore-btn {
  color: white;
  background: #f83531 ;
}
.wptravel-layout-v2 .wptravel-archive-wrapper.grid-view .view-box .view-content .right-content .explore-btn {
  width: 100%;
  text-align: center;
  border-radius: 3px;
}
.wp-block-button__link {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  word-break: break-word;
  box-sizing: border-box;
}
/* ------------------------------end :for explore button  ------------------------------*/

.all-trip-lists .wptravel-archive-wrapper.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
    gap: 2em;
}

.all-trip-lists .wptravel-archive-wrapper.grid-view .view-box .view-content {
    flex-direction: column;
    margin: 10px 0;
    padding: 15px 15px 0;
    width: auto;
}

.all-trip-lists .wptravel-archive-wrapper.grid-view .view-box .view-content .left-content .trip-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    border: 1px solid #e9e9e9;
    border-left: 0;
    border-right: 0;
    padding: 20px 10px;
    margin: 15px 0;
}
.wptravel-layout-v2 .wptravel-archive-wrapper .view-box .view-content .right-content .explore-btn{
    color:white;
    background:#f83531;
}
.fa-calendar-alt:before{
    color: red;
}
.wptravel-layout-v2 .wptravel-archive-wrapper .view-box .view-content .left-content header .entry-title{
    font-size: 28px;
}

/* END :all trip block */

/* trip list block */
.wptravel-archive-wrapper .view-box .view-content .left-content header .entry-title .heading-link {
    font-size: 28px;
    line-height: 34px;
    display: inline;
    text-transform: capitalize;
}

.wp-travel-trips-has-sidebar{
    width: 100%;
    float: none;
    display: flex;
}

#wptravel-archive-wrapper{
    width: 66.33%;
    

}
#wp-travel-secondary{
    width: 33.33%;
}
/* End */

/* start archive-itineraries.php */
/* removing header */
.description-left .entry-header{
    display: block !important;
}
.description-left .favourite a{
    top:17px;
}

/* single trip page breadcrumb */
.wptravel-block-wrapper.wptravel-block-breadcrumb ul li:last-child::after { display:none }
.wptravel-block-wrapper[class*="is-content-justification-"].is-content-justification-center {
    justify-content: center;
    display: flex;
}

.wptravel-block-wrapper.wptravel-block-breadcrumb ul li::after {
    content: "\00BB";
    position: absolute;
    font-family: wt-icon-solid;
    top: 50%;
    right: -15px;
    transform: translate(0, -50%);
}
.wptravel-block-wrapper.wptravel-block-breadcrumb ul li::after {
    content: "\00BB";
    position: absolute;
    font-family: wt-icon-solid;
    top: 50%;
    right: -15px;
    transform: translate(0, -50%);
}
.wptravel-block-wrapper.wptravel-block-breadcrumb ul li {
    position: relative;
}
.post-type-archive .wp-travel-toolbar{
    margin-top: 60px;
}
/* --Widget-- */
#page .wp-travel-trips-has-sidebar #wptravel-archive-wrapper
{
    padding-right: 15px;
}
#page .wp-travel-trips-has-sidebar #wp-travel-secondary{
    padding: 30px;
}
#page .wp-travel-trips-has-sidebar #wp-travel-secondary >section{
    padding: 0 20px 15px;
    margin: 0 0 1.5rem;
    padding: 0;
}
#page .wp-travel-trips-has-sidebar #wp-travel-secondary section h2{
    padding-bottom: 5px;
}
#wp-travel-secondary {
    box-shadow: 0 0 30px rgb(0 0 0 / 7%);
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 8px;
}
#wp-travel-secondary {
    margin-bottom: 66px;
}
input[type=text], input[type=time], input[type=url], input[type=week], textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px;
}
input, select {
    outline-color: #df1814;
}
iv.wp-travel-search p select, body, button, input, select, textarea {
    font-size: 14px;
    line-height: 1.5;
}
.wp-travel-trips-has-sidebar h2{
    font-size: 26px;;
    line-height: 40px;
}


/* end archive-itineraries.php */


/*Third Homepage*/


body .homepage-three .testimonial-three,
body .homepage-three .recent-post-three,
body .homepage-three .popular-trip-three,
body .homepage-three .partner-three,
body .homepage-three .contact-three,
body .homepage-three .gallery-three,
body .homepage-three .cta-three,
body .homepage-three .popular-places-three,
body .homepage-three .about-section-three,
body .homepage-three .service-section-three,
body .homepage-three .search-section-three {
    margin-top: 0px;
}

body .homepage-three .testimonial-three .wp-block-column,
body .homepage-three .service-content,
body .homepage-three .wp-block-cover img{
    border-radius: 4px;
}


/*Service section*/
.service-section-three .service-card .post-title{
    margin-top: 5px;
}

.service-section-three .service-card p{
    margin-top: 10px;
}

/*About section*/

.about-section-three .about-section-counter p{
    margin-top: 10px;
}

.about-section-three figure.wp-block-image img{
    height: auto;
}

/*Trip Search*/

.search-section-three form label{
    color: #fff;
}

.search-section-three form select,
.search-section-three form input{
    height: 40px;
}

.search-section-three form input#wp-travel-search{
    background-color: #000;
}

/*popular places*/

.popular-places-three h3{
    margin-top: 15px;
}

.popular-places-three p{
    margin-top: 15px;
}

/*partner*/

.partner-three figure.wp-block-image img{
    height: auto;
}

/*popular trip*/

.popular-trip-three .entry-title .heading-link{
    font-size: 24px !important;
    letter-spacing: 2px;
    font-weight: 500;
    font-style: normal;
}

.popular-trip-three .price-here{
    font-size: 18px !important;
}

.popular-trip-three .explore-btn{
    display: none;
}

.popular-trip-three .view-content .right-content{
    margin: 10px 0 0 0 !important;
}

/*testimonial*/

.testimonial-three figure.wp-block-image img{
    height: auto;
}


#travel-init-to-top {
    position: fixed;
    right: 2%;
    bottom: 20px;
    background: white;
    padding: 5px;
    z-index: 999;
}
.wptravel-layout-v2 .trip-desc{
    word-break: break-all;
}

/* ------------------fixes---------------- */
/* wp travel search widget label white label color issue */
.widget.widget_wp_travel_search label{
    color: #000 ;
    font-style: normal;
}
/*  */
/*---------------------responsive-------------------------------*/
@media(max-width:592px){
    .single-itineraries #wp-travel-content .wp-travel-feature-slide-content{
        height: auto !important;
    }
}
@media(min-width:768px){
    .wrapper{
        width: 750px;
        padding-left: 15px;
        padding-right: 15px;
        margin: 0 auto;
    }
}
@media(min-width:992px){
    .wrapper{
    max-width: 970px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    }
}
@media(min-width:1200px) {
    .wrapper {
        width: 90%;
        max-width: 1170px;
        margin: 0 auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    .post-type-archive-itineraries h1,.page-header{
    font-size: 36px;
    text-align: center;
    }
    .single-itineraries .wp-travel-content.container{
        padding: 60px 0;
    }
}

/* General form styling */
#booking-form {
    max-width: 600px;
    margin: 0 auto; /* Center the form */
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* Style individual form groups */
#booking-form .form-group {
    margin-bottom: 20px;
}

/* Align labels and inputs */
#booking-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Style inputs and radio buttons */
#booking-form input,
#booking-form select,
#booking-form button {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Style radio buttons */
#booking-form .form-group div label {
    display: inline-block;
    margin-right: 10px;
    font-weight: normal;
}

/* Style the submit button */
#booking-form button {
    background: #e74c3c;
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

#booking-form button:hover {
    background: #c0392b;
}

/* Align radio buttons and labels */
#booking-form .form-group div label {
    display: flex;
    align-items: center;
    margin-right: 15px; /* Add spacing between the labels */
}

#booking-form .form-group div label input {
    margin-right: 5px; /* Add spacing between the radio button and the label text */
}

/* Center the group of radio buttons */
#booking-form .form-group div {
    display: flex;
    align-items: center;
}


/* Wrapper for the calendar */
#calendar-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: visible;
    padding: 10px;
}

/* Fix for calendar container */
.flatpickr-calendar {
    font-family: 'Arial', sans-serif;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    margin: 0 auto; /* Center align */
}

/* Month navigation */
.flatpickr-month {
    background-color: #4CAF50; /* Green background */
    color: white;
    padding: 10px;
    font-size: 16px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between; /* Adjust alignment */
    align-items: center;
    gap: 10px;
}

/* Month and year title */
.flatpickr-month .flatpickr-current-month {
    font-size: 18px;
    font-weight: bold;
    flex-grow: 1;
    text-align: center; /* Center the month/year */
}

/* Arrow navigation */
.flatpickr-month .flatpickr-prev-month,
.flatpickr-month .flatpickr-next-month {
    cursor: pointer;
    font-size: 20px;
    padding: 5px;
    transition: all 0.2s ease;
}

.flatpickr-month .flatpickr-prev-month:hover,
.flatpickr-month .flatpickr-next-month:hover {
    background-color: #fff;
    color: #4CAF50;
    border-radius: 50%;
}

/* Day cells */
.flatpickr-day {
    font-size: 14px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 2px;
    transition: all 0.3s ease;
}

.flatpickr-day:hover {
    background-color: #f0f0f0;
    transform: scale(1.1);
    cursor: pointer;
}

/* Available days */
.flatpickr-day.available {
    background-color: #d4edda !important; /* Light green */
    color: #155724 !important; /* Dark green text */
    border-color: #c3e6cb !important;
    font-weight: bold;
}

/* Unavailable days */
.flatpickr-day.unavailable {
    background-color: #f8d7da !important; /* Light red */
    color: #721c24 !important; /* Dark red text */
    border-color: #f5c6cb !important;
    pointer-events: none;
}

/* Selected days */
.flatpickr-day.selected {
    background-color: #007BFF !important; /* Blue for selected */
    color: white !important;
    border-color: #0056b3 !important;
}


/* Weekday headings */
.flatpickr-weekdays {
    background-color: #f9f9f9;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    padding: 5px 0;
    text-transform: uppercase;
    color: #333;
}

/* Fix spacing to prevent cutting off */
.flatpickr-days {
    box-sizing: border-box; /* Ensure spacing is respected */
}


/* Fix for right container */
.flatpickr-rContainer {
    flex-grow: 1;
    width: 100%; /* Ensure it does not exceed the container width */
    max-width: 350px; /* Match the calendar width */
    overflow: hidden;
    box-sizing: border-box;
}

/* Fix spacing between the calendar and form */
#calendar {
    margin-bottom: 20px; /* Add space below calendar */
}

/* Style for check-out (half red, half green) */
.flatpickr-day.half-available-checkout {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-align: center;
    line-height: 36px;
    color: #000;
    background-color: transparent;
    border: 1px solid #ccc;
    overflow: hidden;
}

/* Left half (red) for check-out */
.flatpickr-day.half-available-checkout::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: #d4edda !important; /* Red */
    z-index: -1;
}

/* Right half (green) for check-out */
.flatpickr-day.half-available-checkout::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: #f8d7da !important; /* Green */
    z-index: -1;
}

/* Style for check-in (half green, half red) */
.flatpickr-day.half-available-checkin {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-align: center;
    line-height: 36px;
    color: #000;
    background-color: transparent;
    border: 1px solid #ccc;
    overflow: hidden;
}

/* Left half (green) for check-in */
.flatpickr-day.half-available-checkin::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: #f8d7da !important; /* Green */
    z-index: -1;
}

/* Right half (red) for check-in */
.flatpickr-day.half-available-checkin::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: #d4edda !important; /* Red */
    z-index: -1;
}

/* Ensure text color aligns with check-in style */
.flatpickr-day.half-available-checkin {
    color: #721c24 !important; /* Dark red for text color */
}

.calendar-container {
    text-align: center; /* Center everything inside the container */
    margin-top: 20px; /* Add some space above */
}

.calendar-key {
    margin-top: 20px;
    display: inline-block; /* Shrink to content */
    text-align: left; /* Align text properly within the inline block */
}

.calendar-key h3 {
    font-size: 18px;
    margin-bottom: 10px;
text-align: center
}

.key-list {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center; /* Center key items horizontally */
    flex-wrap: wrap; /* Wrap to the next line if necessary */
    gap: 20px; /* Add spacing between items */
    margin-top: 10px;
}

.key-item {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.color-box {
    width: 36px; /* Match calendar day size */
    height: 36px;
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc; /* Optional: Match calendar borders */
}

/* Unavailable Dates */
.color-box.unavailable {
    background-color: #f8d7da; /* Red */
}

/* Fully Available Dates */
.color-box.available {
    background-color: #d4edda; /* Green */
}

/* Half-Available Check-In Dates */
.color-box.half-available-checkin::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: #f8d7da; /* Green */
}

.color-box.half-available-checkin::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: #d4edda; /* Red */
}

/* Half-Available Check-Out Dates */
.color-box.half-available-checkout::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: #d4edda; /* Red */
}

.color-box.half-available-checkout::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: #f8d7da; /* Green */
}

.booking-buttons-container {
    display: flex;
    justify-content: center; /* Center buttons horizontally */
    gap: 15px; /* Adds spacing between buttons */
    margin-top: 30px; /* Adds space above the buttons */
    width: 100%; /* Ensure the container spans the available width */
    clear: both; /* Prevent overlap with floated content */
    text-align: center; /* Center align the container itself */
}

.booking-button {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: normal;
    font-family: Arial, sans-serif; /* Ensure consistent font family */
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    display: inline-block;
}

.booking-button.cancel {
    background-color: #dc3545; /* Red */
    color: white;
}

.booking-button.cancel:hover {
    background-color: #c82333;
}

.booking-button.make-new {
    background-color: #28a745; /* Green */
    color: white;
}

.booking-button.make-new:hover {
    background-color: #218838;
}
/* General styling for the radio button group */
#booking-form .form-group.radio-group {
    display: flex;
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    gap: 20px; /* Add spacing between radio options */
    padding: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Wrap on smaller screens */
}

/* Ensure proper alignment of labels and radio buttons */
#booking-form .form-group.radio-group label {
    display: inline-flex; /* Inline-flex for better alignment */
    align-items: center; /* Align radio button and text */
    justify-content: center; /* Center content inside label */
    gap: 5px; /* Space between radio button and text */
    font-weight: normal;
    text-align: center;
}

/* Fix radio button size for iOS */
#booking-form .form-group.radio-group input[type="radio"] {
    -webkit-appearance: none; /* Remove default styling */
    -moz-appearance: none; /* For Firefox */
    appearance: none; /* Standard */
    width: 20px;
    height: 20px;
    border: 2px solid #333; /* Custom border */
    border-radius: 50%; /* Make it circular */
    outline: none;
    margin: 0; /* Reset margin */
    background-color: white; /* Background color */
    cursor: pointer; /* Pointer cursor */
    display: inline-block;
    position: relative;
}

/* Checked state styling */
#booking-form .form-group.radio-group input[type="radio"]:checked {
    background-color: #007bff; /* Blue for checked state */
    border-color: #007bff;
    box-shadow: 0 0 2px #007bff; /* Subtle glow */
}

/* Adjust for smaller screens */
@media (max-width: 768px) {
    #booking-form .form-group.radio-group {
        flex-direction: column; /* Stack items vertically */
        gap: 15px; /* Space between items */
    }

    #booking-form .form-group.radio-group label {
        justify-content: flex-start; /* Align to the start */
    }
}

/* Optional: Add focus/active state for better usability */
#booking-form .form-group.radio-group input[type="radio"]:focus {
    box-shadow: 0 0 3px rgba(0, 123, 255, 0.8); /* Highlight on focus */
}