/* Style panelu logowania i zarządzania terminami - zgodne z paletą kolorów strony głównej */

.booking-body {
    font-family: 'Ubuntu', sans-serif;
    background-color: var(--light);
    color: var(--darkest);
    margin: 0;
}

.booking-login-box {
    max-width: 400px;
    margin: 80px auto;
    text-align: center;
    background: var(--primary);
    padding: 30px;
    border-radius: 8px;
}

.booking-error {
    color: #a94442;
    background-color: #f7d7d5;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.booking-login-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 20px;
}

.booking-login-form label,
.booking-add-form label {
    display: block;
    margin: 12px 0;
}

.booking-panel {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
}

.booking-add-form {
    background: var(--primary);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    text-align: center;
}

.booking-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--lighter);
}

.booking-table th,
.booking-table td {
    border: 1px solid var(--dark);
    padding: 10px;
    text-align: center;
}

.status-free {
    color: #2e7d32;
    font-weight: bold;
}

.status-booked {
    color: var(--darkest);
    font-weight: bold;
}

.status-pending {
    color: #e07b00;
    font-weight: bold;
}

/* Widżet rezerwacji na stronie terapeuty */

.booking-widget {
    max-width: 600px;
    margin: 20px auto;
    text-align: center;
}

.booking-empty {
    text-align: center;
    padding: 20px 25px;
    font-size: 1.1em;
}

.booking-slot-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 400px;
}

.booking-slot-list li {
    background: var(--primary);
    margin: 8px 0;
    padding: 12px 16px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.booking-slot-list li span {
    text-align: left;
}

.booking-slot-list button {
    background: var(--dark);
    outline-style: solid;
    outline-width: 1px;
    outline-color: var(--darkest);
    border: none;
    padding: 8px 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    color: var(--darkest);
    flex-shrink: 0;
}

.booking-slot-list button:hover {
    background: var(--darker);
}

.booking-form-box {
    background: var(--primary);
    padding: 20px;
    border-radius: 8px;
    margin-top: 15px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.booking-form-box label {
    display: block;
    margin: 10px 0;
}

.booking-type-info {
    margin: 10px 0;
    font-size: 1em;
    text-align: left;
}

.booking-form-box input[type="text"],
.booking-form-box input[type="email"],
.booking-form-box input[type="tel"] {
    width: 90%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid var(--dark);
}

.booking-message {
    margin-top: 15px;
    padding: 12px;
    border-radius: 4px;
}

.booking-message.success {
    background: var(--secondary);
    color: #1b5e20;
}

.booking-message.error {
    background: #f7d7d5;
    color: #a94442;
}

/* Strona wyboru rodzaju konsultacji i wyszukiwania terapeutów */

.booking-type-choice {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 20px auto 40px;
    max-width: 900px;
}

.booking-type-button {
    width: auto;
    min-width: 220px;
    cursor: pointer;
    font-family: 'Ubuntu', sans-serif;
    font-size: 1em;
    border: none;
}

.booking-type-button-active {
    background: var(--darker);
    color: var(--lighter);
}

.booking-therapist-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.booking-therapist-card {
    background: var(--primary);
    border-radius: 8px;
    padding: 20px;
    width: 220px;
    text-align: center;
}

.booking-therapist-card a {
    text-decoration: none;
    color: var(--darkest);
}

.booking-therapist-thumb {
    width: 100%;
    max-width: 160px;
    border-radius: 50%;
    margin: 0 auto 10px;
}

.booking-therapist-info {
    font-size: 0.9em;
    padding: 0;
    margin-top: 10px;
}