/* =========================================================
   ONLINE APPOINTMENT PAGE
   Theme:
   Primary  : #0c489d
   Light BG  : #e9f2ff
   Accent    : #df2026
   Success   : #159a76
========================================================= */


/* =========================================================
   ROOT
========================================================= */

.tch-appointment-page {
    --tch-primary: #0c489d;
    --tch-primary-dark: #083b82;
    --tch-primary-light: #e9f2ff;

    --tch-success: #159a76;
    --tch-success-light: #edf9f5;

    --tch-danger: #df2026;
    --tch-danger-light: #fff2f2;

    --tch-text: #20252b;
    --tch-text-dark: #17202a;
    --tch-text-medium: #5f6873;
    --tch-text-light: #8a929c;

    --tch-border: #dfe4e9;
    --tch-border-dark: #cbd2d9;

    --tch-bg: #ffffff;
    --tch-bg-soft: #f7f9fc;
    --tch-bg-muted: #f1f4f7;

    width: 100%;
    padding: 38px 0 75px;

    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
========================================================= */

.tch-appointment-steps {
    position: relative;

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

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

    min-height: 70px;

    margin: 0 0 52px !important;
    padding: 0 !important;
}


/* Individual 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;
}


/* Step 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 #cfd5dc;

    color: #7d8791;

    font-size: 13px;
    font-weight: 700;

    line-height: 1;

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


/* Active circle */

.tch-step.active .tch-step-number {
    background: var(--tch-primary);

    border-color: var(--tch-primary);

    color: #ffffff;

    box-shadow: 0 4px 10px rgba(12, 72, 157, 0.18);
}


/* Connecting line */

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

    z-index: 1;

    top: 17px !important;

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

    width: auto !important;

    height: 8px !important;

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

    background: #e4e7eb;

    border: 0;

    border-radius: 20px;

    box-sizing: border-box;
}


/* Active progress line */

.tch-step.active .tch-step-line {
    background: var(--tch-primary);
}


/* Step text */

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

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

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

    white-space: nowrap;

    color: #9aa2ab;

    font-size: 13px;

    line-height: 1.2;

    font-weight: 500;
}


/* Active step text */

.tch-step.active > span {
    color: var(--tch-primary);

    font-weight: 600;
}


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

.tch-appointment-title {
    position: relative;

    margin: 0 0 24px;

    padding: 0;

    color: var(--tch-primary);

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

    font-weight: 700;

    letter-spacing: -0.3px;
}


/* =========================================================
   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: 22px;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   FORM 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: var(--tch-text-dark);

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

    font-weight: 600;
}


/* Required star */

.tch-appointment-field label .required,
.tch-appointment-field .required {
    color: var(--tch-danger);

    font-weight: 700;
}


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

.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;

    background: #ffffff !important;

    border: 1px solid var(--tch-border-dark) !important;

    border-radius: 7px !important;

    color: var(--tch-text) !important;

    font-family: inherit;

    font-size: 14px !important;
    font-weight: 400;

    line-height: normal;

    outline: none;

    float: none !important;

    box-shadow: none;

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

    appearance: auto;
    -webkit-appearance: auto;

    box-sizing: border-box !important;
}


/* Select */

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


/* Date */

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


/* Placeholder / empty state */

.tch-appointment-field select:invalid,
.tch-appointment-field input[type="date"]:invalid {
    color: #7d8791 !important;
}


/* Focus */

.tch-appointment-field select:focus,
.tch-appointment-field input[type="date"]:focus {
    border-color: var(--tch-primary) !important;

    background: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(12, 72, 157, 0.09) !important;
}


/* Hover */

.tch-appointment-field select:hover,
.tch-appointment-field input[type="date"]:hover {
    border-color: #aeb8c3 !important;
}


/* Date icon */

.tch-appointment-field input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;

    opacity: 0.65;

    transition: opacity 0.2s ease;
}


.tch-appointment-field input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}


/* Date third field */

.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: 400px minmax(0, 1fr) !important;

    column-gap: 32px;

    width: 100%;

    margin-top: 46px;

    padding: 0;

    align-items: start;
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

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

    padding: 0;

    color: var(--tch-text-dark);

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

    font-weight: 700;

    letter-spacing: -0.2px;
}


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

.tch-doctor-card {
    position: relative;

    width: 100%;

    min-height: 300px;

    margin: 0;
    padding: 20px;

    background: var(--tch-bg-soft);

    border: 1px solid var(--tch-border);

    border-radius: 10px;

    overflow: hidden;

    box-sizing: border-box;
}


/* Small blue top accent */

.tch-doctor-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background: var(--tch-primary);

    border-radius: 10px 10px 0 0;
}


/* =========================================================
   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: 64px !important;
    height: 64px !important;

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

    flex: 0 0 64px;

    display: flex;

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

    overflow: hidden;

    border-radius: 50%;

    background: var(--tch-primary-light);

    border: 3px solid #ffffff;

    box-shadow:
        0 2px 8px rgba(24, 48, 80, 0.10);

    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: var(--tch-primary-light);

    color: var(--tch-primary);

    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: var(--tch-text-dark);

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

    font-weight: 700;
}


/* Position */

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

    padding: 0;

    color: var(--tch-text-medium);

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

    font-weight: 500;
}


/* Department */

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

    margin: 0;
    padding: 0;

    color: var(--tch-text-light);

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


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

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

    margin: 18px 0;

    background: var(--tch-border);
}


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

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

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

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

    width: 100%;

    margin: 0;
    padding: 0;
}


/* Availability item */

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

    align-items: center;

    width: 100%;

    min-height: 38px;

    margin: 0;
    padding: 6px 9px;

    background: #ffffff;

    border: 1px solid var(--tch-border);

    border-radius: 6px;

    color: var(--tch-text-medium);

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

    box-sizing: border-box;

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


.tch-availability-row:hover {
    background: var(--tch-primary-light);

    border-color: #c4d8f3;
}


/* Day */

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

    margin: 0;
    padding: 0;

    color: var(--tch-primary);

    font-size: 11px;

    font-weight: 700;
}


/* Time */

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

    color: var(--tch-text-medium);

    font-size: 11px;

    font-weight: 600;
}


/* =========================================================
   NO DOCTOR
========================================================= */

.tch-no-doctor {
    width: 100%;

    min-height: 220px;

    display: flex;

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

    padding: 20px;

    background: var(--tch-bg-soft);

    border: 1px solid var(--tch-border);

    border-radius: 10px;

    color: var(--tch-text-light);

    font-size: 14px;

    text-align: center;
}


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

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

    min-width: 0;
}


/* Slot box */

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

    min-height: 205px;

    margin: 0;
    padding: 22px;

    background: #ffffff;

    border: 1px solid var(--tch-border);

    border-radius: 10px;

    box-shadow:
        0 3px 12px rgba(22, 40, 65, 0.04);

    box-sizing: border-box;
}


/* =========================================================
   TOKEN INFORMATION
========================================================= */

.tch-token-info {
    display: flex;

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

    width: 100%;

    margin: 0 0 18px;

    padding: 0;
}


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

    align-items: center;

    gap: 9px;
}


.tch-token-info strong {
    color: var(--tch-text-dark);

    font-size: 14px;

    font-weight: 600;
}


/* Token count */

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

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

    min-width: 28px;
    height: 25px;

    padding: 0 8px;

    background: var(--tch-success-light);

    border: 1px solid #c8eadf;

    border-radius: 5px;

    color: var(--tch-success);

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   SLOT HEADING
========================================================= */

.tch-slot-heading {
    margin: 0 0 11px;

    color: var(--tch-text-medium);

    font-size: 13px;

    font-weight: 600;
}


/* =========================================================
   SLOT GRID
========================================================= */

.tch-slots {
    display: grid !important;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 9px;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   SLOT BUTTON
========================================================= */

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

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

    width: 100%;
    min-width: 0;

    height: 38px;

    margin: 0;
    padding: 0 6px;

    background: #ffffff;

    border: 1px solid var(--tch-border-dark);

    border-radius: 6px;

    color: var(--tch-text-medium);

    font-family: inherit;

    font-size: 12px;

    font-weight: 500;

    cursor: pointer;

    outline: none;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


/* Available hover */

.tch-slots .appointment-slot.available:not(:disabled):hover {
    background: var(--tch-primary-light);

    border-color: var(--tch-primary);

    color: var(--tch-primary);

    transform: translateY(-1px);

    box-shadow:
        0 3px 8px rgba(12, 72, 157, 0.10);
}


/* Selected */

.tch-slots .appointment-slot.selected,
.tch-slots .appointment-slot.active {
    background: var(--tch-primary) !important;

    border-color: var(--tch-primary) !important;

    color: #ffffff !important;

    font-weight: 600;

    box-shadow:
        0 4px 10px rgba(12, 72, 157, 0.18);
}


/* Disabled */

.tch-slots .appointment-slot:disabled {
    background: #f2f4f6;

    border-color: #e0e4e8;

    color: #a3aab2;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* Unavailable */

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

    border-color: #e0e4e8 !important;

    color: #a3aab2 !important;

    cursor: not-allowed;

    text-decoration: line-through;
}


/* =========================================================
   SELECTED SLOT MESSAGE
========================================================= */

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

    min-height: 39px;

    display: flex;

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

    margin-top: 16px;

    padding: 9px 12px;

    background: var(--tch-bg-soft);

    border: 1px solid var(--tch-border);

    border-radius: 6px;

    color: var(--tch-text-light);

    font-size: 12px;

    line-height: 1.4;

    text-align: center;
}


.tch-selected-slot.has-selection {
    background: var(--tch-success-light);

    border-color: #b9e3d5;

    color: #08795e;

    font-weight: 600;
}


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

.tch-slot-status {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 18px;

    width: 100%;

    margin: 14px 0 0;

    padding: 0;
}


/* Status label */

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

    align-items: center;

    gap: 6px;

    margin: 0;
    padding: 0;

    color: var(--tch-text-light);

    font-size: 12px;

    line-height: 1.4;

    font-weight: 400;

    cursor: default;
}


/* Status dot */

.status-dot {
    display: inline-block;

    width: 14px;
    height: 14px;

    min-width: 14px;

    margin: 0;
    padding: 0;

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid #bfc6ce;
}


/* Available */

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

    border-color: #9ea8b3;
}


/* Selected */

.status-dot.selected {
    background: var(--tch-primary);

    border-color: var(--tch-primary);
}


/* Not available */

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

    border-color: #d8dde2;
}


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

.tch-appointment-actions {
    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 9px;

    width: 100%;

    margin: 17px 0 0;

    padding: 0;
}


/* Common */

.tch-btn {
    display: inline-flex;

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

    min-width: 112px;

    height: 42px;

    margin: 0;
    padding: 0 20px;

    border-radius: 6px;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    outline: none;

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


/* Reset */

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

    border: 1px solid var(--tch-border-dark);

    color: var(--tch-text-medium);
}


.tch-btn-reset:hover {
    background: var(--tch-bg-soft);

    border-color: #aeb7c1;

    color: var(--tch-text-dark);
}


/* Next */

.tch-btn-next {
    background: var(--tch-primary);

    border: 1px solid var(--tch-primary);

    color: #ffffff;

    box-shadow:
        0 3px 8px rgba(12, 72, 157, 0.12);
}


.tch-btn-next:hover {
    background: var(--tch-primary-dark);

    border-color: var(--tch-primary-dark);

    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 5px 12px rgba(12, 72, 157, 0.18);
}


/* Disabled Next */

.tch-btn-next:disabled {
    background: #c7ccd2;

    border-color: #c7ccd2;

    color: #ffffff;

    cursor: not-allowed;

    box-shadow: none;

    transform: none;
}


/* =========================================================
   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 var(--tch-border-dark) !important;

    border-radius: 7px !important;

    color: var(--tch-text) !important;

    font-family: inherit;

    font-size: 14px !important;

    line-height: 50px !important;

    text-align: left !important;

    clear: both !important;

    box-sizing: border-box !important;

    position: relative !important;

    box-shadow: none !important;

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


/* Nice select hover */

.tch-appointment-page
.tch-appointment-field
.nice-select:hover {
    border-color: #aeb8c3 !important;
}


/* Nice select arrow */

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

    margin-top: -4px !important;

    border-color: #7d8791 !important;
}


/* Nice select open */

.tch-appointment-page
.tch-appointment-field
.nice-select.open,
.tch-appointment-page
.tch-appointment-field
.nice-select:focus {
    border-color: var(--tch-primary) !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(12, 72, 157, 0.09) !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: 5px !important;

    padding: 5px 0 !important;

    background: #ffffff;

    border: 1px solid var(--tch-border);

    border-radius: 7px;

    box-shadow:
        0 8px 25px rgba(20, 40, 65, 0.12);

    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: 40px;

    padding: 0 15px !important;

    color: var(--tch-text-medium) !important;

    font-size: 13px;

    line-height: 40px !important;

    box-sizing: border-box;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


/* Nice select option hover */

.tch-appointment-page
.tch-appointment-field
.nice-select
.option:hover {
    background: var(--tch-primary-light);

    color: var(--tch-primary) !important;
}


/* Selected option */

.tch-appointment-page
.tch-appointment-field
.nice-select
.option.selected {
    background: #f4f7fb;

    color: var(--tch-primary) !important;

    font-weight: 600;
}


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

@media (max-width: 1100px) {

    .tch-appointment-page .container {
        padding-left: 25px;
        padding-right: 25px;
    }


    .tch-appointment-bottom-grid {
        grid-template-columns: 360px minmax(0, 1fr) !important;

        column-gap: 25px;
    }


    .tch-slots {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

}


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

@media (max-width: 991px) {

    .tch-appointment-page {
        padding: 32px 0 60px;
    }


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

        padding-left: 20px;
        padding-right: 20px;
    }


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

        row-gap: 32px;
    }


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


    .tch-slots {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

}


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

@media (max-width: 767px) {

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


    .tch-appointment-page .container {
        padding-left: 15px;
        padding-right: 15px;
    }


    /* Progress */

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

        margin-bottom: 42px !important;
    }


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

        min-width: 38px !important;

        flex-basis: 38px !important;
    }


    .tch-step-line {
        top: 15px !important;

        left: 36px !important;

        height: 7px !important;
    }


    .tch-step > span {
        top: 43px !important;

        left: 40px !important;

        font-size: 11px;
    }


    /* Title */

    .tch-appointment-title {
        margin-bottom: 20px;

        font-size: 26px;
    }


    /* 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;
    }


    /* Section headings */

    .tch-availability-section h2,
    .tch-slot-section h2 {
        font-size: 21px;
    }


    /* Doctor */

    .tch-doctor-card {
        padding: 18px;
    }


    /* Slots */

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


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

        gap: 8px;
    }


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

        font-size: 12px;
    }

}


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

@media (max-width: 480px) {

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


    .tch-appointment-page .container {
        padding-left: 12px;
        padding-right: 12px;
    }


    /* Progress */

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

        margin-bottom: 38px !important;
    }


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

        min-width: 36px !important;
    }


    .tch-step-line {
        top: 14px !important;

        left: 34px !important;

        height: 7px !important;
    }


    .tch-step > span {
        top: 41px !important;

        left: 37px !important;

        font-size: 10px;
    }


    /* Title */

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

        letter-spacing: 0;
    }


    /* Labels */

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


    /* Inputs */

    .tch-appointment-field select,
    .tch-appointment-field input[type="date"],
    .tch-appointment-page
    .tch-appointment-field
    .nice-select {
        height: 50px !important;

        font-size: 13px !important;
    }


    /* Doctor */

    .tch-doctor-card {
        padding: 16px;
    }


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


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

        min-width: 56px !important;
    }


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


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


    .tch-doctor-info span {
        font-size: 11px;
    }


    /* Availability */

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

        gap: 8px;
    }


    /* Slot box */

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


    /* Slots */

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

        gap: 8px;
    }


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

        font-size: 12px;
    }


    /* Status */

    .tch-slot-status {
        gap: 10px 14px;
    }


    .tch-slot-status label {
        font-size: 11px;
    }


    /* Actions */

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

        gap: 8px;

        margin-top: 14px;
    }


    .tch-btn {
        flex: 1;

        min-width: 0;

        height: 42px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

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

        left: 34px !important;
    }


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

        min-width: 34px !important;
    }


    .tch-step-line {
        left: 32px !important;

        top: 13px !important;
    }


    .tch-slots .appointment-slot {
        font-size: 11px;
    }

}