/**
 * Reader Profiles Extension Styles
 */

/* General container for reader profile */
.reader-profile-container {
    max-width: 300px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Profile section styles */
.reader-profile-header {
    margin-bottom: 30px;
}

.reader-profile-details {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    padding: 20px;
    border: 2px solid purple;
    border-radius: 10px;
    background-color: rgba(106, 0, 128, 0.05);
    background-image: URL('https://mysticturtle.app/wp-content/uploads/2025/04/reader-header-1.png');
}

.profile-image-container {
    flex: 0 0 120px;
}

.profile-image-container img {
    width: 100%;
    border-radius: 50%;
    border: 3px solid purple;
}

.profile-content {
    flex: 1;
    min-width: 300px;
}

.profile-section {
    margin-bottom: 15px;
}

.profile-section h3 {
    color: purple;
    margin-bottom: 5px;
}

/* Timezone selector */
.timezone-selector {
    text-align: center;
    margin-bottom: 20px;
}

#client_timezone {
    width: 375px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Schedule table styles */
.availability-scrollable {
    border: 2px solid purple;
    padding: 10px;
    max-height: 500px;
    overflow-y: auto;
    border-radius: 10px;
    margin-bottom: 30px;
}

.scheduler-table {
    width: 100%;
    border-collapse: collapse;
}

.scheduler-table th {
    background-color: rgba(106, 0, 128, 0.1);
    padding: 10px;
    text-align: left;
}

.scheduler-table td {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.scheduler-table tr:hover {
    background-color: rgba(106, 0, 128, 0.05);
}

/* Book now button */
.book-now-button {
    background-color: purple;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
}

.book-now-button:hover {
    background-color: #5a0072;
    color: white;
}

/* Referrals section */
.reader-referrals-container {
    margin-bottom: 30px;
}

.referrer-section {
    margin-bottom: 20px;
    padding: 15px;
    border: 2px solid purple;
    border-radius: 10px;
    background-color: rgba(106, 0, 128, 0.05);
}

.referrer-section.milestone {
    border: 2px solid #4caf50;
    background-color: rgba(76, 175, 80, 0.1);
}

.referrer-section h3 {
    color: purple;
    margin-bottom: 10px;
}

.referrer-section.milestone h3 {
    color: #4caf50;
}

.referral-count {
    float: right;
    font-size: 16px;
    background-color: purple;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
}

.referral-count.milestone {
    background-color: #4caf50;
}

.milestone-message {
    background-color: #4caf50;
    color: white;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: bold;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .reader-profile-details {
        flex-direction: column;
    }
    
    .profile-image-container {
        margin: 0 auto;
        text-align: center;
    }
    
    .mob {
        display: none;
    }
    
    #client_timezone {
        width: 100%;
    }
}