/* ========================================
   CLASSIC BOOKER CSS

   This file contains all styles for the Classic step-by-step booking widget.
   It is loaded ONLY when booker_style = 'classic'

   This CSS is independent of any template - works on BarberShop 3, 5,
   Corporation, or any future template.
   ======================================== */

/* ========================================
   CLASSIC BOOKER CALENDAR - Step 2
   ======================================== */
.calendar {
    width: 100% !important;
    height: 400px !important;
}

#make_appointment_step2 {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Day names styling */
.top_days {
    height: 24px !important;
    padding-top: 3px;
    font-size: 12px;
    border-left-width: 0 !important;
}

/* Box styling for calendar cells - border only, background from date classes */
.box1-black {
    border: 1px solid #000;
}

/* Hours table for time slots */
.hours_table {
    margin-bottom: 0;
}
.hours_table td {
    width: 25%;
}
.hours .hp90 {
    height: 100%;
}
.h15px {
    height: 30px !important;
}

/* Time slot selection styling */
.ChooseApt_MouseOver {
    background-color: darkred;
    cursor: pointer;
}
.ChooseApt_NotAvailable {
    background-color: #D6D6D6 !important;
    color: black;
}
.ChooseApt_BOOKED {
    background-color: #C29B79;
}
.ChooseApt_MouseOut {
    background-color: #dff0d8 !important;
}
.choose_apt {
    background: #86EC38;
    border-bottom: 0 !important;
}

/* Calendar cells - Days and Dates */
.DaysTD {
    /* background and text from main_bc_color2 main_color2_text classes on element */
    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    cursor: pointer;
}

.DateTD {
    /* background and text from main_bc_color3 main_color3_text classes on element */
    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
}

/* Date states */
.dateExpired {
    vertical-align: top;
    background-color: white;
    height: 100%;
    box-sizing: border-box;
}

.dateNotSelected {
    vertical-align: top;
    background-color: #93DB70;
    cursor: pointer;
}

.dateSelected {
    vertical-align: top;
    background-color: #93AB70;
    cursor: pointer;
}

.dateNoApptsAvailableStaffID {
    vertical-align: top;
    background-color: #D0D0D0;
    cursor: pointer;
}

/* Steps indicator bar */
.steps {
    padding-left: 0;
    margin-bottom: 0;
    background: #D6D6D6;
}
.steps li {
    display: inline-block;
    width: 20%;
    border-right: 1px solid black;
    font-size: 11px;
    margin-left: -4px;
}
.steps li:nth-child(5) {
    border-width: 0;
}

/* Calendar month navigation header
   T3-prefixed selectors ensure styles apply inside Template 3 overlay panel */
#t3-view-booking .hp06,
.hp06 {
    display: flex;
    align-items: center;
}
#t3-view-booking .hp06 > div,
.hp06 > div {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#t3-view-booking .hp06 a,
.hp06 a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
#t3-view-booking .hp06 a:hover,
.hp06 a:hover {
    text-decoration: underline;
}

/* ========================================
   UTILITY CLASSES FOR CLASSIC BOOKER
   ======================================== */
/* Float and display utilities */
.f_left { float: left; }
.f_right { float: right; }
.float_left { float: left; }
.float_right { float: right; }
.d_InlineBlock { display: inline-block; }
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Width percentages */
.wp100 { width: 100%; }
.wp98 { width: 98%; }
.wp96 { width: 96%; }
.wp50 { width: 50%; }
.wp25 { width: 25%; }
.wp01 { width: 1%; }

/* Height percentages */
.hp100 { height: 100%; }
.hp95 { height: 95%; }
.hp90 { height: 90%; }
.hp81 { height: 81%; }
.hp17 { height: 17%; }

/* Pixel widths (legacy) */
.w140px { width: 140px; }
.w130px { width: 130px; }
.w120px { width: 120px; }
.w110px { width: 110px; }
.w100px { width: 100px; }
.w90px { width: 90px; }
.w80px { width: 80px; }
.w70px { width: 70px; }
.w60px { width: 60px; }
.w55px { width: 55px; }
.w50px { width: 50px; }
.w45px { width: 45px; }
.w40px { width: 40px; }
.w35px { width: 35px; }
.w30px { width: 30px; }
.w25px { width: 25px; }
.w20px { width: 20px; }

/* Padding */
.pt3 { padding-top: 3px; }
.pl1 { padding-left: 1px; }
.pr1 { padding-right: 1px; }
.mp { cursor: pointer; }

/* Service button container - Step 3 services list */
.item_btns {
    padding: 6px 8px;
    height: 100%;
    border: 1px solid;
    border-radius: 6px;
    line-height: 1.2;
}

/* Time slot button container wrapper */
.btn-container {
    width: 100%;
}

/* Text alignment */
.center { text-align: center; }
.left { text-align: left; }
.t_align_left { text-align: left; }
.t_align_center { text-align: center; }
.t_align_right { text-align: right; }

/* Small text */
.small { font-size: 12px; }

/* No overflow */
.no-overflow { overflow: hidden; }

/* Background colors - fallback when main_bc_color classes not loaded */
.bcgray { background-color: #f5f5f5; }
.bg-success {
    background-color: #dff0d8 !important;
    background-image: none !important;
    font-weight: bold;
}

/* Menu/link styling */
.menu_text {
    cursor: pointer;
    text-decoration: none;
}
.strikethrough {
    text-decoration: line-through;
}

/* Table borders */
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
    border-right: 1px solid #ddd;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 786px) {
    a.list-group-item {
        color: #555;
        height: 38px;
        padding-top: 11px;
        text-align: center;
    }
    .dateselect {
        margin-top: 108px;
    }
}