/* Ainola Booking System - Frontend Styles */



.ainola-booking-container {

    font-family: 'Inter', sans-serif;

    margin: 0;

    padding: 0 0 30px 0;

    background-color: #F1EDED;

    color: #261E16;

    max-width: 1200px;

    margin: 0 auto;

}



.ainola-booking-wrapper {

    display: flex;

    flex-wrap: wrap;

    width: 100%;

}



/* Main Panel - Left and Right Panels */

.ainola-main-panel {

    display: flex;

    width: 100%;

    background-color: #F1EDED;

}



/* Left Panel: Services and Doctors */

.ainola-left-panel {

    flex: 1 1 40%;

    min-width: 300px;

    background-color: #F1EDED;

}



/* Right Panel: Calendar */

.ainola-calendar-section {

    flex: 1 1 60%;

    padding: 30px;

    min-width: 400px;

}



/* Service Selection Section */

.ainola-services-section {

    padding: 30px;

}





.ainola-services-section h2,

.ainola-doctors-section h2 {

    margin-bottom: 20px;

    font-size: 20px;

    text-align: center;

    color: #261E16;

}



/* Doctor Selection Section (within left panel) */

.ainola-doctors-section {

    padding: 30px;

    border-top: 2px solid #A9BCB4;

}



.services-list,

.doctors-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.service-item {

    padding: 12px 16px;

    background-color: #A9BCB4;

    color: #261E16;

    cursor: pointer;

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

    text-align: center;

    border-radius: 4px;

    font-weight: 500;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.service-name {

    flex: 1;

    text-align: left;

}



.service-price {

    font-weight: 600;

    font-size: 16px;

    color: #577770;

    margin-left: 10px;

}



.service-item:hover {

    background-color: #AA9A8A;

    color: white;

}



.service-item:hover .service-price {

    color: white;

}



.service-item.selected {

    background-color: #AA9A8A;

    color: white;

}



.service-item.selected .service-price {

    color: white;

}



.doctor-item:hover {

    background-color: #AA9A8A;

    color: white;

}



.doctor-item:hover .doctor-price {

    color: white;

}



.doctor-item.selected {

    background-color: #AA9A8A;

    color: white;

}



.doctor-item.selected .doctor-price {

    color: white;

}



.doctor-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px;

    background-color: #A9BCB4;

    color: #261E16;

    cursor: pointer;

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

    border-radius: 4px;

    font-weight: 500;

}



.doctor-photo {

    flex-shrink: 0;

    width: 60px;

    height: 60px;

}



.doctor-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    border: 2px solid #A9BCB4;

}



.doctor-photo .no-photo {

    width: 100%;

    height: 100%;

    background-color: #f0f0f0;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #999;

    font-size: 24px;

    font-weight: bold;

    border: 2px solid #A9BCB4;

}



.doctor-info {

    flex: 1;

    text-align: left;

}



.doctor-name {

    font-weight: 600;

    margin-bottom: 4px;

    font-size: 16px;

}



.doctor-specialization {

    font-size: 14px;

    opacity: 0.8;

    margin-bottom: 8px;

}



.doctor-languages {

    display: flex;

    gap: 5px;

    margin-top: 5px;

}



.language-flag {

    font-size: 18px;

    cursor: help;

}



.doctor-price {

    font-weight: 600;

    font-size: 16px;

    color: #577770;

    margin-left: 10px;

}



/* Calendar Section */

.ainola-calendar-section {

    flex: 1 1 60%;

    padding: 30px;

    min-width: 400px;

    max-width: 600px;

}



.calendar-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}



.calendar-header button {

    background: #A9BCB4;

    border: none;

    color: #261E16;

    padding: 8px 12px;

    cursor: pointer;

    border-radius: 4px;

    font-size: 16px;

    transition: background-color 0.2s ease;

}



.calendar-header button:hover {

    background-color: #AA9A8A;

    color: white;

}



.month-year {

    font-size: 24px;

    font-weight: 600;

    margin: 0;

    text-align: center;

    color: #261E16;

}



.calendar-grid {

    display: grid;

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

    gap: 6px;

    width: 100%;

}



.calendar-days {

    display: contents;

}



.day-name {

    text-align: center;

    padding: 10px;

    font-weight: 600;

    color: #577770;

    background-color: transparent;

}



.day {

    text-align: center;

    padding: 10px;

    background-color: #A9BCB4;

    color: #261E16;

    cursor: pointer;

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

    border-radius: 4px;

    min-height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    aspect-ratio: 1;

}



.day:hover {

    background-color: #AA9A8A;

    color: white;

}



.day.available {

    background-color: #577770;

    color: white;

    cursor: pointer;

}



.day.available:hover {

    background-color: #4a655e;

}



.day.available.selected {

    background-color: #AA9A8A;

    color: white;

}



.day.working {

    background-color: #A9BCB4;

    color: #261E16;

    cursor: not-allowed;

}



.day.disabled {

    background-color: #f0f0f0;

    color: #999;

    cursor: not-allowed;

}



.day.past {

    background-color: #E0E0E0;

    color: #999;

    cursor: not-allowed;

}



.day.empty {

    background-color: transparent;

    cursor: default;

}



/* Time Slots Panel */

.ainola-timeslots-panel {

    flex: 1 1 100%;

    padding: 30px;

    background-color: #F1EDED;

}



.ainola-timeslots-panel h3 {

    margin-bottom: 20px;

    font-size: 20px;

    text-align: center;

    color: #261E16;

}



.selected-date-info {

    text-align: center;

    margin-bottom: 20px;

    font-weight: 600;

    color: #577770;

}



.timeslots-list {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    gap: 12px;

    margin-bottom: 20px;

}



.timeslot-item {

    padding: 12px 16px;

    background-color: #A9BCB4;

    color: #261E16;

    cursor: pointer;

    transition: all 0.2s ease;

    text-align: center;

    border-radius: 8px;

    border: 2px solid transparent;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}



.timeslot-item:hover {

    background-color: #AA9A8A;

    color: white;

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(0,0,0,0.2);

}



.timeslot-item.available.selected {

    background-color: #AA9A8A;

    color: white;

    transform: translateY(-2px);

    box-shadow: 0 4px 8px rgba(0,0,0,0.2);

}



.timeslot-item.unavailable {

    background-color: #E0E0E0;

    color: #999;

    cursor: not-allowed;

}



.timeslot-item.reserved {

    background-color: #FFE4B5;

    color: #B8860B;

    cursor: not-allowed;

    border: 2px solid #DAA520;

}



.timeslot-item.reserving {

    background-color: #D4E6F1;

    color: #2980B9;

    cursor: wait;

}



.timeslot-item .time {

    font-weight: 600;

    margin-bottom: 4px;

}



.timeslot-item .doctor {

    font-size: 14px;

    opacity: 0.8;

}



.timeslot-item .status {

    font-size: 12px;

    font-weight: 600;

    margin-top: 4px;

    text-transform: uppercase;

    opacity: 1;

}



.timeslot-item.reserved .status {

    color: #B8860B;

    font-weight: 700;

}



.timeslot-item.unavailable .status {

    color: #999;

    font-weight: 700;

}



/* Reservation status and actions */

.timeslot-status {

    font-size: 12px;

    font-weight: 600;

    margin-top: 4px;

    text-transform: uppercase;

    opacity: 1;

    color: #B8860B;

}



.timeslot-actions {

    margin-top: 8px;

}



.timeslot-actions .btn {

    padding: 6px 12px;

    border: none;

    border-radius: 4px;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

    text-transform: uppercase;

}



.timeslot-actions .btn-reserve {

    background-color: #4CAF50;

    color: white;

}



.timeslot-actions .btn-reserve:hover {

    background-color: #45a049;

}



.timeslot-actions .btn-disabled {

    background-color: #E0E0E0;

    color: #999;

    cursor: not-allowed;

}



.timeslot-item.reserved-by-user {

    background-color: #D4E6F1;

    color: #2980B9;

    border: 2px solid #3498DB;

}



.timeslot-item.reserved-by-user .timeslot-status {

    color: #2980B9;

    font-weight: 700;

}



/* Reservation error message */

.reservation-error {

    color: #d32f2f;

    margin: 10px 0;

    padding: 10px;

    background: #ffebee;

    border: 1px solid #ffcdd2;

    border-radius: 4px;

    font-size: 14px;

}



.back-to-calendar,

.back-to-services,

.back-to-doctors {

    background: #A9BCB4;

    border: none;

    color: #261E16;

    padding: 10px 20px;

    cursor: pointer;

    border-radius: 4px;

    font-size: 14px;

    transition: background-color 0.2s ease;

    margin-top: 15px;

}



.back-to-calendar:hover,

.back-to-services:hover,

.back-to-doctors:hover {

    background-color: #AA9A8A;

    color: white;

}



/* Booking Form Panel */

.ainola-booking-form-panel {

    flex: 1 1 100%;

    padding: 30px;

    background-color: #F1EDED;

}



/* Payment Panel */

.ainola-payment-panel {

    flex: 1 1 100%;

    padding: 30px;

    background-color: #F1EDED;

}



/* Payment Methods */

.payment-methods {

    display: flex;

    gap: 15px;

    margin-bottom: 20px;

    flex-wrap: wrap;

}



.payment-method {

    flex: 1;

    min-width: 200px;

    border: 2px solid #E5E5E5;

    border-radius: 8px;

    padding: 15px;

    cursor: pointer;

    transition: all 0.3s ease;

    background-color: #FFFFFF;

}



.payment-method:hover {

    border-color: #D4AF37;

    background-color: #FDFCF8;

}



.payment-method.active {

    border-color: #D4AF37;

    background-color: #FDFCF8;

    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);

}



.payment-method input[type="radio"] {

    margin-right: 10px;

    transform: scale(1.2);

}



.payment-method label {

    cursor: pointer;

    font-weight: 500;

    color: #261E16;

    margin: 0;

}



/* Paytrail Payment Form */

.paytrail-payment-form {

    background-color: #F8F9FA;

    border-radius: 8px;

    padding: 20px;

    margin-top: 15px;

    display: block !important; /* Always show since it's the only payment method */

}



.paytrail-info {

    background-color: #E3F2FD;

    border-left: 4px solid #2196F3;

    padding: 15px;

    margin-top: 15px;

    border-radius: 4px;

}



.paytrail-info p {

    margin: 0;

    color: #1976D2;

    font-size: 14px;

    line-height: 1.4;

}



.payment-methods {

    margin-bottom: 20px;

}



.payment-method {

    display: flex;

    align-items: center;

    margin-bottom: 10px;

    padding: 10px;

    border: 2px solid #A9BCB4;

    border-radius: 4px;

    cursor: pointer;

    transition: border-color 0.2s ease;

}



.payment-method.active {

    border-color: #577770;

    background-color: #f8f9fa;

}



.payment-method input[type="radio"] {

    margin-right: 10px;

}





/* Terms Agreement Checkbox */

.terms-agreement {

    margin: 20px 0;

    padding: 20px;

    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

    border: 2px solid #A9BCB4;

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.terms-checkbox-label {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    cursor: pointer;

    font-size: 15px;

    line-height: 1.5;

    color: #261E16;

    text-align: left;

}



.terms-checkbox-label input[type="checkbox"] {

    margin: 0;

    margin-right: 0px;

    flex-shrink: 0;

    width: 20px;

    height: 20px;

    cursor: pointer;

    accent-color: #577770;

    border-radius: 3px;

    margin-right: 10px;

}



.terms-text {

    flex: 1;

    text-align: left;

    font-weight: 400;

}



.terms-text a {

    color: #577770;

    text-decoration: none;

    font-weight: 600;

    border-bottom: 2px solid #577770;

    transition: all 0.3s ease;

    padding: 2px 0;

}



.terms-text a:hover {

    color: #AA9A8A;

    border-bottom-color: #AA9A8A;

    background-color: rgba(170, 154, 138, 0.1);

    padding: 2px 4px;

    border-radius: 3px;

}



.ainola-booking-form-panel h3 {

    margin-bottom: 20px;

    font-size: 20px;

    text-align: center;

    color: #261E16;

}



.booking-summary {

    background-color: #A9BCB4;

    padding: 20px;

    border-radius: 4px;

    margin-bottom: 20px;

    color: #261E16;

}



.booking-summary h4 {

    margin-top: 0;

    margin-bottom: 10px;

}



.booking-summary p {

    margin: 5px 0;

}



.form-group {

    margin-bottom: 20px;

}



.form-group label {

    display: block;

    margin-bottom: 5px;

    font-weight: 600;

    color: #261E16;

}



.form-group input,

.form-group textarea {

    width: 100%;

    padding: 10px;

    border: 1px solid #A9BCB4;

    border-radius: 4px;

    font-size: 14px;

    font-family: inherit;

}



.form-group input:focus,

.form-group textarea:focus {

    outline: none;

    border-color: #AA9A8A;

    box-shadow: 0 0 0 2px rgba(170, 154, 138, 0.2);

}



.form-actions {

    display: flex;

    gap: 10px;

    justify-content: flex-end;

    margin-top: 20px;

}



.form-actions button {

    padding: 10px 20px;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    font-size: 14px;

    transition: background-color 0.2s ease;

}



.back-to-timeslots {

    background: #E0E0E0;

    color: #666;

}



.back-to-timeslots:hover {

    background-color: #D0D0D0;

}



.submit-booking {

    background: #A9BCB4;

    color: #261E16;

}



.submit-booking:hover {

    background-color: #AA9A8A;

    color: white;

}



.submit-booking:disabled {

    background-color: #E0E0E0;

    color: #999;

    cursor: not-allowed;

}



/* Success Panel */

.ainola-success-panel {

    flex: 1 1 100%;

    padding: 30px;

    background-color: #F1EDED;

    text-align: center;

}



.ainola-success-panel h3 {

    color: #261E16;

    margin-bottom: 20px;

}



.ainola-success-panel p {

    color: #577770;

    margin-bottom: 20px;

}



.new-booking {

    background: #A9BCB4;

    border: none;

    color: #261E16;

    padding: 10px 20px;

    cursor: pointer;

    border-radius: 4px;

    font-size: 14px;

    transition: background-color 0.2s ease;

}



.new-booking:hover {

    background-color: #AA9A8A;

    color: white;

}



/* Responsive Design */

@media (max-width: 1024px) {

    .ainola-booking-wrapper {

        flex-direction: column;

    }

    

    .ainola-main-panel {

        flex-direction: column;

    }

    

    .ainola-services-section,

    .ainola-calendar-section {

        flex: 1 1 auto;

        padding: 20px;

        margin: 0;

        min-width: auto;

    }

    

    .ainola-services-section {

        margin-bottom: 10px;

    }

    

    .ainola-timeslots-panel,

    .ainola-booking-form-panel,

    .ainola-success-panel {

        flex: 1 1 auto;

        padding: 20px;

        margin: 0;

    }

    

    .month-year {

        font-size: 20px;

    }

    

    .calendar-grid {

        gap: 4px;

    }

    

    .day-name,

    .day {

        padding: 10px;

        font-size: 14px;

    }

    

    .ainola-services-section h2,

    .ainola-timeslots-panel h3,

    .ainola-booking-form-panel h3 {

        font-size: 18px;

        margin-top: 0;

    }

    

    .service-item,

    .timeslot-item {

        font-size: 14px;

        padding: 10px;

    }

}



@media (max-width: 480px) {

    .day-name,

    .day {

        font-size: 12px;

        padding: 6px;

        min-height: 35px;

    }

    

    .month-year {

        font-size: 18px;

    }

    

    .service-item,

    .timeslot-item {

        font-size: 13px;

        padding: 8px;

    }

    

    .timeslots-list {

        grid-template-columns: 1fr;

    }

    

    .form-actions {

        flex-direction: column;

    }

    

    .form-actions button {

        width: 100%;

    }

}



/* Cancellation Page Styles */

.ainola-cancellation-container {

    font-family: 'Inter', sans-serif;

    margin: 0;

    padding: 30px;

    background-color: #F1EDED;

    color: #261E16;

    max-width: 800px;

    margin: 0 auto;

}



.ainola-cancellation-wrapper {

    background-color: white;

    padding: 30px;

    border-radius: 8px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



.ainola-cancellation-wrapper h2 {

    text-align: center;

    color: #261E16;

    margin-bottom: 30px;

    font-size: 24px;

}



.booking-details {

    background-color: #f8f9fa;

    padding: 20px;

    border-radius: 6px;

    margin-bottom: 20px;

    border-left: 4px solid #A9BCB4;

}



.booking-details h3 {

    margin-top: 0;

    margin-bottom: 15px;

    color: #261E16;

    font-size: 18px;

}



.booking-info p {

    margin: 8px 0;

    color: #261E16;

}



.cancellation-warning {

    background-color: #fff3cd;

    border: 1px solid #ffeaa7;

    border-radius: 6px;

    padding: 15px;

    margin-bottom: 20px;

}



.cancellation-warning p {

    margin: 5px 0;

    color: #856404;

}



.cancellation-expired-message {

    background-color: #f8d7da;

    border: 1px solid #f5c6cb;

    border-radius: 6px;

    padding: 20px;

    margin-bottom: 20px;

    text-align: center;

}



.cancellation-expired-message p {

    margin: 8px 0;

    color: #721c24;

    font-size: 16px;

}



.cancellation-expired-message p:first-child {

    font-size: 18px;

    font-weight: 600;

}



.cancellation-actions {

    display: flex;

    gap: 15px;

    justify-content: center;

    margin-bottom: 20px;

}



.cancel-button {

    background-color: #dc3545;

    color: white;

    border: none;

    padding: 12px 24px;

    border-radius: 6px;

    cursor: pointer;

    font-size: 16px;

    font-weight: 600;

    transition: background-color 0.2s ease;

}



.cancel-button:hover {

    background-color: #c82333;

}



.keep-button {

    background-color: #A9BCB4;

    color: #261E16;

    border: none;

    padding: 12px 24px;

    border-radius: 6px;

    cursor: pointer;

    font-size: 16px;

    font-weight: 600;

    transition: background-color 0.2s ease;

}



.keep-button:hover {

    background-color: #AA9A8A;

    color: white;

}



.cancellation-result {

    text-align: center;

    padding: 15px;

    border-radius: 6px;

    margin-top: 20px;

}



.cancellation-result.success {

    background-color: #d4edda;

    border: 1px solid #c3e6cb;

    color: #155724;

}



.cancellation-result.error {

    background-color: #f8d7da;

    border: 1px solid #f5c6cb;

    color: #721c24;

}



.error-message {

    background-color: #f8d7da;

    border: 1px solid #f5c6cb;

    border-radius: 6px;

    padding: 20px;

    text-align: center;

    color: #721c24;

    font-size: 16px;

}



@media (max-width: 768px) {

    .ainola-cancellation-container {

        padding: 15px;

    }

    

    .ainola-cancellation-wrapper {

        padding: 20px;

    }

    

    .cancellation-actions {

        flex-direction: column;

    }

    

    .cancel-button,

    .keep-button {

        width: 100%;

    }

}