/* =========================================================
   ONLINE APPOINTMENT PAGE
   ========================================================= */

.tch-appointment-page {
    width: 100%;
    padding: 35px 0 70px;
    background: #ffffff;
    box-sizing: border-box;
}

.tch-appointment-page *,
.tch-appointment-page *::before,
.tch-appointment-page *::after {
    box-sizing: border-box;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.tch-appointment-page .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================================
   PROGRESS STEPS - FULL WIDTH
========================================================= */

.tch-appointment-steps {
    display: flex !important;
    align-items: flex-start;

    width: 100% !important;
    max-width: none !important;

    margin: 0 0 55px !important;
    padding: 0 !important;

    min-height: 70px;

    box-sizing: border-box;
}


/* Each step */

.tch-step {
    position: relative;

    flex: 1 1 0 !important;

    width: auto !important;
    min-width: 0;

    height: 55px;

    display: flex;
    align-items: flex-start;

    margin: 0;
    padding: 0;
}


/* Circle */

.tch-step-number {
    position: relative;
    z-index: 3;

    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;

    flex: 0 0 42px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid #d5d5d5;

    color: #999999;

    font-size: 14px;
    font-weight: 600;

    line-height: 1;
}


/* Active circle */

.tch-step.active .tch-step-number {
    background: #08b596;
    border-color: #08b596;

    color: #ffffff;
}


/* Connecting line */

.tch-step-line {
    position: absolute !important;

    z-index: 1;

    top: 14px !important;

    left: 40px !important;
    right: 0 !important;

    width: auto !important;

    height: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #dddddd;

    border: 0;

    box-sizing: border-box;
}


/* Active progress */

.tch-step.active .tch-step-line {
    background: linear-gradient(
        to right,
        #08b596 0%,
        #08b596 50%,
        #dddddd 50%,
        #dddddd 100%
    );
}


/* Step text */

.tch-step > span {
    position: absolute !important;

    top: 45px !important;
    left: 45px !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap;

    color: #aaaaaa;

    font-size: 14px;

    line-height: 1.2;

    font-weight: 400;
}


/* =========================================================
   FULL WIDTH OVERRIDE INSIDE APPOINTMENT CONTAINER
========================================================= */

.tch-appointment-page .tch-appointment-steps {
    width: 100% !important;
    max-width: 100% !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .tch-appointment-steps {
        width: 100% !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .tch-appointment-steps {
        width: 100% !important;

        margin-bottom: 45px !important;
    }

    .tch-step-number {
        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
    }

    .tch-step-line {
        top: 13px !important;
        left: 36px !important;

        height: 8px !important;
    }

    .tch-step > span {
        top: 42px !important;
        left: 40px !important;

        font-size: 12px;
    }

}

/* =========================================================
   TITLE
   ========================================================= */

.tch-appointment-title {
    margin: 0 0 14px;

    color: #174b8d;

    font-size: 30px;
    line-height: 1.25;

    font-weight: 700;

    letter-spacing: 0;
}


/* =========================================================
   TOP FORM
   ========================================================= */

.tch-appointment-form {
    width: 100%;
    margin: 0;
    padding: 0;
}

.tch-appointment-top-grid {
    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    column-gap: 30px;
    row-gap: 20px;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* Field */

.tch-appointment-field {
    display: block !important;

    width: 100% !important;

    min-width: 0;

    margin: 0;
    padding: 0;

    float: none !important;
    clear: none !important;
}


/* Label */

.tch-appointment-field label {
    display: block !important;

    width: 100%;

    margin: 0 0 8px;
    padding: 0;

    color: #111111;

    font-size: 15px;
    line-height: 1.4;

    font-weight: 600;
}

.tch-appointment-field label .required,
.tch-appointment-field .required {
    color: #e53935;
}


/* =========================================================
   SELECT + DATE INPUT
   ========================================================= */

.tch-appointment-field select,
.tch-appointment-field input[type="date"] {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 52px !important;

    margin: 0 !important;
    padding: 0 15px !important;

    border: 1px solid #d5d5d5 !important;
    border-radius: 5px !important;

    background: #ffffff !important;

    color: #555555 !important;

    font-family: inherit;

    font-size: 15px !important;
    line-height: 52px;

    outline: none;

    float: none !important;

    box-shadow: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

    appearance: auto;
    -webkit-appearance: auto;

    box-sizing: border-box !important;
}


/* Select */

.tch-appointment-field select {
    cursor: pointer;

    line-height: normal;
}


/* Date */

.tch-appointment-field input[type="date"] {
    cursor: pointer;
}


/* Focus */

.tch-appointment-field select:focus,
.tch-appointment-field input[type="date"]:focus {
    border-color: #174b8d !important;

    box-shadow:
        0 0 0 2px rgba(23, 75, 141, 0.08) !important;
}


/* Date third field only */

.tch-appointment-top-grid
.tch-appointment-field:nth-child(3) {
    grid-column: 1 / 2 !important;
}


/* =========================================================
   BOTTOM CONTENT
   ========================================================= */

.tch-appointment-bottom-grid {
    display: grid !important;

    grid-template-columns: 1fr 1.8fr !important;

    column-gap: 30px;

    width: 100%;

    margin-top: 45px;
    padding: 0;

    align-items: start;
}


/* Headings */

.tch-availability-section h2,
.tch-slot-section h2 {
    margin: 0 0 10px;

    padding: 0;

    color: #222222;

    font-size: 24px;
    line-height: 1.3;

    font-weight: 600;
}


/* =========================================================
   DOCTOR CARD
   ========================================================= */

.tch-doctor-card {
    position: relative;

    width: 100%;

    min-height: 300px;

    margin: 0;
    padding: 20px 16px;

    background: #f0f0f2;

    border-radius: 5px;

    overflow: hidden;

    box-sizing: border-box;
}


/* Doctor header */

.tch-doctor-header {
    display: flex !important;

    align-items: center !important;

    width: 100%;

    gap: 15px;

    margin: 0;
    padding: 0;
}


/* Doctor image */

.tch-doctor-image {
    width: 62px !important;
    height: 62px !important;

    min-width: 62px !important;
    max-width: 62px !important;

    flex: 0 0 62px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background: #e3e3e6;

    margin: 0;
    padding: 0;
}


/* Doctor image */

.tch-doctor-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover;

    margin: 0;
    padding: 0;

    border: 0;
}


/* Placeholder */

.tch-doctor-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #e5e5e8;

    color: #174b8d;

    font-size: 20px;
    font-weight: 700;
}


/* Doctor information */

.tch-doctor-info {
    flex: 1;

    min-width: 0;

    margin: 0;
    padding: 0;
}


/* Doctor name */

.tch-doctor-info h3 {
    margin: 0 0 4px;
    padding: 0;

    color: #555555;

    font-size: 24px;
    line-height: 1.25;

    font-weight: 700;
}


/* Position */

.tch-doctor-info p {
    margin: 0 0 4px;
    padding: 0;

    color: #555555;

    font-size: 14px;
    line-height: 1.4;
}


/* Department */

.tch-doctor-info span {
    display: block;

    margin: 0;
    padding: 0;

    color: #555555;

    font-size: 13px;
    line-height: 1.4;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.tch-doctor-divider {
    width: 100%;
    height: 1px;

    margin: 15px 0;

    background: #cccccc;
}


/* =========================================================
   AVAILABILITY
   ========================================================= */

.tch-availability-list {
    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    column-gap: 12px;
    row-gap: 10px;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* Availability item */

.tch-availability-row {
    display: flex !important;

    align-items: center;

    width: 100%;

    min-height: 36px;

    margin: 0;
    padding: 5px 8px;

    background: #f7f7f8;

    border: 1px solid #c9c9cc;

    border-radius: 5px;

    color: #444444;

    font-size: 12px;
    line-height: 1.2;

    box-sizing: border-box;
}


/* Day */

.tch-availability-row strong {
    width: 45px;
    min-width: 45px;

    margin: 0;
    padding: 0;

    color: #333333;

    font-size: 12px;

    font-weight: 700;
}


/* Time */

.tch-availability-row span {
    margin: 0;
    padding: 0;

    color: #444444;

    font-size: 12px;

    font-weight: 600;
}


/* No doctor */

.tch-no-doctor {
    width: 100%;
    min-height: 220px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #777777;

    font-size: 14px;
}


/* =========================================================
   BOOK YOUR SLOT
   ========================================================= */

.tch-slot-section {
    width: 100%;

    min-width: 0;
}


/* Slot box */

.tch-slot-box {
    width: 100%;

    min-height: 155px;

    margin: 0;
    padding: 24px;

    background: #ffffff;

    border: 1px solid #d0d0d0;

    border-radius: 10px;

    box-sizing: border-box;
}


/* Slots */

.tch-slots {
    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    gap: 8px;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* Slot button */

.tch-slots button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 72px;
    height: 34px;

    margin: 0;
    padding: 0 8px;

    background: #eeeeef;

    border: 1px solid #c9c9c9;

    border-radius: 4px;

    color: #222222;

    font-family: inherit;

    font-size: 13px;
    line-height: 1;

    cursor: pointer;

    outline: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


/* Hover */

.tch-slots button:hover {
    background: #174b8d;

    border-color: #174b8d;

    color: #ffffff;
}


/* Selected */

.tch-slots button.active,
.tch-slots button.selected {
    background: #174b8d;

    border-color: #174b8d;

    color: #ffffff;
}


/* Disabled */

.tch-slots button:disabled {
    background: #eeeeee;

    border-color: #dddddd;

    color: #aaaaaa;

    cursor: not-allowed;
}


/* =========================================================
   SLOT STATUS
   ========================================================= */

.tch-slot-status {
    display: flex;

    align-items: center;

    gap: 18px;

    width: 100%;

    margin: 12px 0 0;
    padding: 0;
}


/* Status label */

.tch-slot-status label {
    display: flex;

    align-items: center;

    gap: 6px;

    margin: 0;
    padding: 0;

    color: #555555;

    font-size: 13px;
    line-height: 1.4;

    font-weight: 400;

    cursor: default;
}


/* Status dot */

.status-dot {
    display: inline-block;

    width: 16px;
    height: 16px;

    min-width: 16px;

    margin: 0;
    padding: 0;

    border-radius: 50%;

    background: #eeeeee;

    border: 1px solid #dddddd;
}


/* Available */

.status-dot.available {
    background: #ffffff;

    border-color: #aaaaaa;
}


/* Not available */

.status-dot.unavailable {
    background: #eeeeee;

    border-color: #dddddd;
}


/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.tch-appointment-actions {
    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 5px;

    width: 100%;

    margin: 8px 0 0;
    padding: 0;
}


/* Common button */

.tch-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 120px;
    height: 40px;

    margin: 0;
    padding: 0 20px;

    border-radius: 5px;

    font-family: inherit;

    font-size: 14px;
    line-height: 1;

    cursor: pointer;

    outline: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


/* Reset */

.tch-btn-reset {
    background: #ffffff;

    border: 1px solid #cccccc;

    color: #555555;
}

.tch-btn-reset:hover {
    background: #f5f5f5;

    border-color: #aaaaaa;
}


/* Next */

.tch-btn-next {
    background: #bdbdbd;

    border: 1px solid #bdbdbd;

    color: #ffffff;
}

.tch-btn-next:hover {
    background: #174b8d;

    border-color: #174b8d;
}


/* =========================================================
   NICE SELECT OVERRIDE
   If the theme converts SELECT to .nice-select
   ========================================================= */

.tch-appointment-page
.tch-appointment-field
.nice-select {
    display: block !important;

    float: none !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 52px !important;

    margin: 0 !important;

    padding: 0 45px 0 15px !important;

    background: #ffffff !important;

    border: 1px solid #d5d5d5 !important;

    border-radius: 5px !important;

    color: #555555 !important;

    font-family: inherit;

    font-size: 15px !important;

    line-height: 50px !important;

    text-align: left !important;

    clear: both !important;

    box-sizing: border-box !important;

    position: relative !important;

    box-shadow: none !important;
}


/* Nice select arrow */

.tch-appointment-page
.tch-appointment-field
.nice-select::after {
    right: 18px !important;

    margin-top: -4px !important;

    color: #555555 !important;
}


/* Nice select list */

.tch-appointment-page
.tch-appointment-field
.nice-select
.list {
    width: 100% !important;

    max-width: 100% !important;

    left: 0 !important;
    right: auto !important;

    margin-top: 4px !important;

    padding: 0 !important;

    z-index: 99999 !important;

    box-sizing: border-box !important;
}


/* Nice select option */

.tch-appointment-page
.tch-appointment-field
.nice-select
.option {
    width: 100% !important;

    min-height: 42px;

    padding: 0 15px !important;

    color: #222222 !important;

    font-size: 14px;

    line-height: 42px !important;

    box-sizing: border-box;
}


/* Nice select hover */

.tch-appointment-page
.tch-appointment-field
.nice-select
.option:hover {
    background: #f3f6fa;
}


/* Nice select selected */

.tch-appointment-page
.tch-appointment-field
.nice-select
.option.selected {
    font-weight: 600;
}


/* Nice select focus */

.tch-appointment-page
.tch-appointment-field
.nice-select:focus,
.tch-appointment-page
.tch-appointment-field
.nice-select.open {
    border-color: #174b8d !important;

    outline: none !important;
}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 991px) {

    .tch-appointment-page {
        padding: 30px 20px 60px;
    }


    .tch-appointment-page .container {
        max-width: 100%;
    }


    .tch-appointment-bottom-grid {
        grid-template-columns: 1fr !important;

        row-gap: 35px;
    }


    .tch-slot-section {
        width: 100%;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .tch-appointment-page {
        padding: 25px 15px 50px;
    }


    /* Top form */

    .tch-appointment-top-grid {
        grid-template-columns: 1fr !important;

        row-gap: 18px;
    }


    .tch-appointment-top-grid
    .tch-appointment-field:nth-child(3) {
        grid-column: auto !important;
    }


    /* Bottom */

    .tch-appointment-bottom-grid {
        grid-template-columns: 1fr !important;

        margin-top: 35px;
    }


    /* Title */

    .tch-appointment-title {
        font-size: 26px;
    }


    /* Progress */

    .tch-appointment-steps {
        min-height: 65px;

        margin-bottom: 35px;
    }


    .tch-step-number {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }


    .tch-step-line {
        top: 13px;
        left: 36px;

        height: 8px;
    }


    .tch-step > span {
        top: 42px;
        left: 40px;

        font-size: 12px;
    }


    /* Doctor */

    .tch-doctor-info h3 {
        font-size: 21px;
    }


    /* Availability */

    .tch-availability-list {
        grid-template-columns: 1fr !important;
    }


    /* Slots */

    .tch-slot-box {
        padding: 18px;
    }


    .tch-slots {
        gap: 7px;
    }


    .tch-slots button {
        min-width: 70px;
    }

}


/* =========================================================
   RESPONSIVE - SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .tch-appointment-page {
        padding: 20px 12px 40px;
    }


    /* Hide progress text on very small screens */

    .tch-step > span {
        font-size: 10px;
    }


    /* Title */

    .tch-appointment-title {
        font-size: 23px;
    }


    /* Labels */

    .tch-appointment-field label {
        font-size: 14px;
    }


    /* Doctor */

    .tch-doctor-header {
        gap: 10px;
    }


    .tch-doctor-image {
        width: 55px !important;
        height: 55px !important;

        min-width: 55px !important;
    }


    .tch-doctor-info h3 {
        font-size: 19px;
    }


    .tch-doctor-info p {
        font-size: 13px;
    }


    /* Slot box */

    .tch-slot-box {
        padding: 14px;
    }


    .tch-slots button {
        min-width: 67px;
        height: 33px;

        font-size: 12px;
    }


    /* Status */

    .tch-slot-status {
        gap: 12px;
    }


    /* Buttons */

    .tch-appointment-actions {
        justify-content: stretch;

        gap: 8px;
    }


    .tch-btn {
        flex: 1;

        min-width: 0;
    }

}

/* =========================================================
   ONLINE BOOKING SLOTS
========================================================= */

.tch-token-info {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin-bottom: 18px;

    padding: 0;
}

.tch-token-info div {
    display: flex;

    align-items: center;

    gap: 10px;
}

.tch-token-info strong {
    color: #333333;

    font-size: 14px;

    font-weight: 600;
}

#available-token-count {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 30px;
    height: 26px;

    padding: 0 8px;

    background: #08b596;

    border-radius: 4px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;
}


/* Slot heading */

.tch-slot-heading {
    margin-bottom: 12px;

    color: #555555;

    font-size: 14px;

    font-weight: 600;
}


/* Slot container */

.tch-slots {
    display: grid !important;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    width: 100%;
}


/* Slot button */

.tch-slots .appointment-slot {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;

    height: 42px;

    margin: 0;
    padding: 0 8px;

    background: #f1f1f2;

    border: 1px solid #cccccc;

    border-radius: 5px;

    color: #333333;

    font-family: inherit;

    font-size: 13px;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.2s ease;
}


/* Available hover */

.tch-slots .appointment-slot.available:hover {
    background: #174b8d;

    border-color: #174b8d;

    color: #ffffff;
}


/* Selected */

.tch-slots .appointment-slot.selected {
    background: #08b596 !important;

    border-color: #08b596 !important;

    color: #ffffff !important;

    font-weight: 700;
}


/* Not available */

.tch-slots .appointment-slot.unavailable {
    background: #eeeeee !important;

    border-color: #dddddd !important;

    color: #aaaaaa !important;

    cursor: not-allowed;

    text-decoration: line-through;
}


/* Selected message */

.tch-selected-slot {
    width: 100%;

    margin-top: 18px;
    padding: 10px 12px;

    background: #f7f7f7;

    border: 1px solid #e0e0e0;

    border-radius: 5px;

    color: #777777;

    font-size: 13px;

    text-align: center;
}

.tch-selected-slot.has-selection {
    background: #eefaf7;

    border-color: #08b596;

    color: #087e69;

    font-weight: 600;
}


/* Status selected */

.status-dot.selected {
    background: #08b596;

    border-color: #08b596;
}


/* =========================================================
   SLOT RESPONSIVE
========================================================= */

@media (max-width: 767px) {

    .tch-slots {
        grid-template-columns: repeat(3, 1fr) !important;
    }

}


@media (max-width: 480px) {

    .tch-slots {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .tch-slots .appointment-slot {
        height: 40px;

        font-size: 12px;
    }

}