:root{
    --cTFontFamily: 'Calibri';
    --cTFontSize: 11pt;
    --cTPrimaryColor: #0078d7;
    --cTSecondaryColor: #737373;
    
    --cTWhiteColor: #FFFFFF;
    
    --cTBodyBgColor: #ffffff;
    --cTBodyTextColor: #000000;
    
    --cTTodayCellBgColor: #eeeeee;
    --cTTodayCellTextColor: #000000;

    --cTHeaderBgColor: #eeeeee;
    --ctFooterBgColor: #eeeeee;
    --cTSectionBgColor: #f5f5f5;

    --cTDefaultFontSize: 18pt;
    --cTSmFontSize: 10pt;
    --cTMdFontSize: 12pt;
    --cTLgFontSize: 14pt;
    --cTXlFontSize: 16pt;

    --start_1: 2%;
    --start_2: 4%;
    --start_3: 6%;
    --start_4: 8%;
    --start_5: 10%;
    --start_6: 12%;
    --start_7: 14%;
    --start_8: 16%;
    --start_9: 18%;
    --start_10: 20%;
    --start_11: 22%;
    --start_12: 24%;

    --end_1: 2%;
    --end_2: 4%;
    --end_3: 6%;
    --end_4: 8%;
    --end_5: 10%;
    --end_6: 12%;
    --end_7: 14%;
    --end_8: 16%;
    --end_9: 18%;
    --end_10: 20%;
    --end_11: 22%;
    --end_12: 24%;
}




body{
    font-family: var(--cTFontFamily) !important;
    font-size: var(--cTFontSize);
    background-color: var(--cTBodyBgColor);
    color: var(--cTBodyTextColor);
    overflow-x: hidden;
}
.blur{
    overflow: hidden;
    background-color: var(--cTBodyBgColor);
    filter: blur(5px);
    transition: filter 0.3s ease-in-out;

}
a{
    color: var(--cTPrimaryColor);
    text-decoration: none;
}
a:hover{
    color: var(--cTPrimaryColor);
    text-decoration: underline;
}
header {
    position: sticky;
    top: 0px;
    left: 0;
    width: 100%;
    background-color: var(--cTHeaderBgColor);
    color: var(--cTBodyTextColor);
    padding: 0px;
	z-index:99;
} 

input,button,label,a,p,select,textarea{
    font-size: var(--cTDefaultFontSize) !important;
}

.main_container{
    min-height: 100vh;
}
.font-family{
    font-family: var(--cTFontFamily);
    font-size: var(--cTFontSize);
}
.primary-color{
    color: var(--cTPrimaryColor);
}
.secondary-color{
    color: var(--cTSecondaryColor);
}
.white-color{
    color: var(--cTWhiteColor) !important;
}

.primary-bg-color{
    background-color: var(--cTPrimaryColor) !important ;
    border-color: var(--cTPrimaryColor) !important ;
}
.secondary-bg-color{
    background-color: var(--cTSecondaryColor) !important;
    border-color: var(--cTSecondaryColor) !important;
}
.white-bg-color{
    background-color: var(--cTWhiteColor);
    border-color: var(--cTWhiteColor);
}
.border-bottom-primary{
    border-bottom: 3px solid var(--cTPrimaryColor);
}
.nav-link{
    font-weight: 300;
}
.nav-link.active{
    color: var(--cTPrimaryColor) !important;
    font-weight: 600;
}
.nav-link:hover{ 
    color: var(--cTPrimaryColor);
}

.input-sm{
    padding: 5px 10px;
    font-size: var(--cTSmFontSize) !important;
}
.input-md{
    padding: 8px 12px;
    font-size: var(--cTMdFontSize) !important;
}
.input-lg{
    padding: 10px 15px;
    font-size: var(--cTLgFontSize) !important;
}
input-xl{
    padding: 12px 18px;
    font-size: var(--cTXlFontSize) !important;
}

.button-sm{
    padding: 5px 10px;
    font-size: var(--cTSmFontSize) !important;
}
.button-md{
    padding: 8px 12px;
    font-size: var(--cTMdFontSize) !important;
}
.button-lg{
    padding: 10px 15px;
    font-size: var(--cTLgFontSize) !important;
}
.button-xl{
    padding: 12px 18px;
    font-size: var(--cTXlFontSize) !important;
}

.btn-floating{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background-color: var(--cTPrimaryColor);
    color: var(--cTWhiteColor);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fs-sm{
    font-size: var(--cTSmFontSize) !important;
}
.fs-md{
    font-size: var(--cTMdFontSize) !important;
}
.fs-lg{
    font-size: var(--cTLgFontSize) !important;
}
.fs-xl{
    font-size: var(--cTXlFontSize) !important;
}


.section-bg-color{
    background-color: var(--cTSectionBgColor);
}
.accordion-button:not(.collapsed){
    background-color: var(--cTSecondaryColor);
    color: var(--cTWhiteColor);
}

button.secondary-bg-color:hover{
    background-color: var(--cTPrimaryColor) !important;
    border-color: var(--cTPrimaryColor) !important;
}

.mobile-nav .offcanvas-header{
    background:var(--cTHeaderBgColor);
    padding: 10px;
    border-bottom: 3px solid var(--cTPrimaryColor);
}

.mobile-nav .offcanvas-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #f8f9fa; /* Optional: Background color */
    text-align: center;
    padding: 10px;
}

.mobile-navbar-nav {
    margin: 0;
    padding: 0;
}
.cell-today{
    background-color: var(--cTTodayCellBgColor) !important;
    color: var(--cTTodayCellTextColor) !important;
}
.cell-booked{
    background-color: #f44336 !important;
    color: var(--cTWhiteColor) !important;
}
.cell-booked:hover{
    cursor: pointer;
}
.cell-booked.pending{
    background-color: #ff9800 !important;
    color: var(--cTWhiteColor) !important;
}
.cell-booked.confirmed{
    background-color: #4caf50 !important;
    color: var(--cTWhiteColor) !important;
}
.cell-booked.cancelled{
    background-color: #f44336 !important;
    color: var(--cTWhiteColor) !important;
}
.cell-booked.completed{
    background-color: #2196f3 !important;
    color: var(--cTWhiteColor) !important;
}
.cell-booked.provisional{
    background-color: #ff9800 !important;
    color: var(--cTWhiteColor) !important;
}

.cell-booked[class*="start_"] {
    position: relative;
}
.cell-booked[class*="end_"] {
    position: relative;
}

/* LEFT white bar (start_x) */
.cell-booked.start_1::before { --start-space: var(--start_1); }
.cell-booked.start_2::before { --start-space: var(--start_2); }
.cell-booked.start_3::before { --start-space: var(--start_3); }
.cell-booked.start_4::before { --start-space: var(--start_4); }
.cell-booked.start_5::before { --start-space: var(--start_5); }
.cell-booked.start_6::before { --start-space: var(--start_6); }
.cell-booked.start_7::before { --start-space: var(--start_7); }
.cell-booked.start_8::before { --start-space: var(--start_8); }
.cell-booked.start_9::before { --start-space: var(--start_9); }
.cell-booked.start_10::before { --start-space: var(--start_10); }
.cell-booked.start_11::before { --start-space: var(--start_11); }
.cell-booked.start_12::before { --start-space: var(--start_12); }

.cell-booked[class*="start_"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: var(--start-space, 0);
    height: 100%;
    background: #fff;
    z-index: 1;
    pointer-events: none;
}

/* RIGHT white bar (end_x) */
.cell-booked.end_1::after { --end-space: var(--end_1); }
.cell-booked.end_2::after { --end-space: var(--end_2); }
.cell-booked.end_3::after { --end-space: var(--end_3); }
.cell-booked.end_4::after { --end-space: var(--end_4); }
.cell-booked.end_5::after { --end-space: var(--end_5); }
.cell-booked.end_6::after { --end-space: var(--end_6); }
.cell-booked.end_7::after { --end-space: var(--end_7); }
.cell-booked.end_8::after { --end-space: var(--end_8); }
.cell-booked.end_9::after { --end-space: var(--end_9); }
.cell-booked.end_10::after { --end-space: var(--end_10); }
.cell-booked.end_11::after { --end-space: var(--end_11); }
.cell-booked.end_12::after { --end-space: var(--end_12); }

.cell-booked[class*="end_"]::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: var(--end-space, 0);
    height: 100%;
    background: #fff;
    z-index: 1;
    pointer-events: none;
}

.cell-available{
    cursor: pointer;
}
.cell-available:hover{
    background-color: var(--cTSecondaryColor) !important;
    color: var(--cTWhiteColor) !important;
}
.mobile-navbar-nav .nav-item {
    padding: 4px 12px;
    list-style: none;
}
.mobile-navbar-nav .nav-item .nav-link {
    color: var(--cTBodyTextColor);
    text-align: left;
}

.notification_alert{
    position: fixed;
    bottom: 0;
    right: 10px;
    z-index: 9999;
    font-size: var(--cTDefaultFontSize);
    height: fit-content;
    width: fit-content;
}
.notification_alert.notification-top-left{
    top: 110px;
    left: 10px;
}
.notification_alert.notification-top-right{
    top: 110px;
    right: 10px;
}
.notification_alert.notification-bottom-left{
    bottom: 10px;
    left: 10px;
}
.notification_alert.notification-bottom-right{
    bottom: 10px;
    right: 10px;
}

/* Preloader Container */
.preloader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 160px;
    min-height: 160px;
    max-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cTBodyBgColor);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1050; /* Ensures it stays above everything */
}

/* Preloader Content */
.preloader-content {
    text-align: center;
}

/* Font Awesome Icon */
.preloader-logo {
    height: 40px;
}

/* Loading Text */
.preloader-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--cTSecondaryColor);
    margin-bottom: 8px;
}
.preloader-subtext {
    font-size: 14px;
    color: var(--cTSecondaryColor);
    padding: 10px;
}

/* Spinner (Bootstrap 5) */
.spinner-border {
    width: 40px;
    height: 40px;
    border-width: 4px;
    border-color: var(--cTPrimaryColor) transparent var(--cTPrimaryColor) transparent;
    border-right-color: transparent !important; /* Hides the right border */
}

.cursor-pointer{
    cursor: pointer;
}

.extra-icon {
    font-size: 2rem;
    color: var(--cTPrimaryColor);
}
.extra-item {
    text-align: center;
    padding: 20px;
}
.extras-section {
    padding: 40px 0;
}
.extras-title {
    text-align: center;
    margin-bottom: 30px;
    color: var(--cTPrimaryColor);
}

.diary-page {
    max-width: 600px;
    margin: 16px auto;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    border-radius: 1rem;
    overflow: hidden;
}
.diary-page.diary-page-past {
    background-image: repeating-linear-gradient(
        45deg,
        #bbb2 0px,           /* Line color, low opacity */
        #bbb2 2px,            /* Line thickness */
        transparent 2px,
        transparent 20px      /* Space between lines */
    );
    background-color: #efefef;
}
.diary-page.diary-page-today{
    background-image: repeating-linear-gradient(
        45deg,
        #bbb2 0px,           /* Line color, low opacity */
        #bbb2 2px,            /* Line thickness */
        transparent 2px,
        transparent 20px      /* Space between lines */
    );
}
.diary-header {
    padding: 1rem 1.5rem;
    border-bottom: 2px solid  var(--cTSecondaryColor);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
}

.diary-body {
    min-height: 300px;
    padding: 2rem 1.5rem;
    position: relative;
}
.diary-footer {
    border-top: 2px solid var(--cTSecondaryColor);
    text-align: center;
    padding: 1rem 1.5rem;
    color: #888;
    background: #f8f9fa;
}
.watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 3rem;
    color: #afadad85;
    user-select: none;
    pointer-events: none;
    letter-spacing: 2px;
    white-space: nowrap;
    z-index: 10;
    width: 60%;
    font-weight: bold;
    white-space: normal;    /* Allows text to wrap */
    word-break: break-word; /* Breaks long words if needed */
    text-align: center;
}
.watermark_2{
    transform: translate(-50%, -50%) rotate(0deg);
    font-size: 2rem;
}
.diary-booking-list {
    background: #faf8f4;
    border-radius: 18px;
    box-shadow: 0 3px 14px rgba(60,40,20,0.09);
    margin: 28px 0;
    padding: 2rem 1.7rem 1.5rem 2.7rem;
    position: relative;
    border: 1.5px solid #e6dccb;
    font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
    font-size: 1.11rem;
    background-image: repeating-linear-gradient(
        to bottom, 
        #e6dccb 0, 
        #e6dccb 1px, 
        transparent 2px, 
        transparent 34px
    );
}

.diary-booking-list:before {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: repeating-linear-gradient(
        to bottom,
        #c7b299 0, #c7b299 10px,
        transparent 10px, transparent 34px
    );
    opacity: 0.6;
    border-radius: 2px;
}

.diary-booking-list .list-group-item {
    background: transparent;
    border: none;
    color: #784421;
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px dotted #d1bfa3;
    border-radius: 0;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    position: relative;
    font-family: inherit;
    font-size: 1.06rem;
    letter-spacing: 0.01em;
}

.diary-booking-list .list-group-item:last-child {
    border-bottom: none;
}

.diary-booking-list .diary-booking-icon {
    font-size: 1.15rem;
    margin-right: 11px;
    color: #ffb300;
    flex-shrink: 0;
}

.diary-booking-list .booking-date {
    font-size: 0.97rem;
    font-style: italic;
    color: #b08d57;
    margin-left: 9px;
}

.ec-event-body p{
    font-size: var(--cTMdFontSize) !important;
}

.booking-unit-radio {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--cTWhiteColor);
    border: 2px solid var(--cTSecondaryColor);
    border-radius: 4px;
    width: 20px;
    height: 20px;
    position: relative;
    cursor: pointer;
    margin-top: 4px;
}

/* Checked state with checkmark */
.booking-unit-radio:checked {
    background-color: var(--cTPrimaryColor);
    border-color: var(--cTPrimaryColor);
    background-image: none; /* Remove default background image */
}

.booking-unit-radio:checked::after {
    content: "✓";
    color: var(--cTWhiteColor);
    font-size: 16px;
    position: absolute;
    top: -2px;
    left: 2px;
}

.timeline-line {
    height: 4px;
    background-color: #ffc107; /* Bootstrap warning color */
    border-radius: 2px;
}



/* Pulse Animation for Font Awesome Icon */
@keyframes pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.2); }
}


.footer{
    width: 100%;
    height: auto;
    margin-top: 20px;
    background-color: var(--ctFooterBgColor);
    border-top : 3px solid var(--cTPrimaryColor);
}

.footer .footer_menu{
    list-style: none;
    display: flex;
    justify-content: center;
    line-height: 40px;
}
.footer .footer_menu li{
    padding: 4px;
}
.footer .footer_menu li a{
    color:rgba(0, 0, 0, 0.55);
    text-decoration: none;
    font-size: var(--cTMdFontSize) !important;
    font-weight: 400;
}
.footer .footer_menu li a:hover{
    color:var(--cTPrimaryColor) !important;
}
.footer .footer_menu li a.active{
    color:var(--cTPrimaryColor) !important;
    font-weight: 600;
}
.footer .footer_social_icons{
    width: 100%;
    padding: 8px 0px;
}
.footer .footer_social_icons a{
    margin-right: 10px;
    margin-top: 8px;
    padding: 8px;
    font-size: 14pt;
}
.footer .footer_social_icons .icon_email{
    color: #ff9800;
}
.footer .footer_social_icons .icon_facebook{
    color: #3b5998;
}
.footer .footer_social_icons .icon_twitter{
    color: #1da1f2;
}
.footer .footer_social_icons .icon_instagram{
    color: #e1306c;
}
.footer .footer_social_icons .icon_linkedin{
    color: #0077b5;
}
.footer .footer_social_icons .icon_youtube{
    color: #ff0000;
}
.footer .footer_social_icons .icon_whatsapp{
    color: #25d366;
}
.footer .footer_social_icons .icon_telegram{
    color: #0088cc;
}
.footer .footer_social_icons .icon_phone{
    color: #4caf50;
}


.footer_menu li:not(:last-child) a::after {
    content: " | ";
}

@media (max-width: 768px) {
    .footer_menu li:not(:last-child) a::after {
        content: "";
    }
    .footer .footer_menu {
        display: block !important;
        text-align: center;
    }
}
@media (max-width: 576px) {
    .footer_menu li:not(:last-child) a::after {
        content: "";
    }
    .footer .footer_menu {
        display: block !important;
        text-align: center;
    }
}
@media (max-width: 400px) {
    .footer_menu li:not(:last-child) a::after {
        content: "";
    }
    .footer .footer_menu {
        display: block !important;
        text-align: center;
    }
}