/* Appointments Page Specific Styles */

/* Appointments Hero Section */
.appointments-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.how-to-book-section {
    background-color: var(--color-white);
}

.how-to-book-intro {
    text-align: left;
}

.how-to-book-intro h2 {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.how-to-book-intro .lead {
    color: var(--color-muted);
    max-width: none;
    width: 100%;
}

.booking-card {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 1.5rem;
    box-shadow: var(--shadow-brand);
    overflow: hidden;
}

.booking-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    color: var(--color-white);
    font-size: 1.4rem;
}

.recommended-badge {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-weight: var(--font-weight-semibold);
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 0.95rem;
}

.booking-features li {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
}

.booking-features .bi {
    color: var(--color-secondary);
    font-size: 1.1rem;
}

.booking-cta {
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 12px 28px rgba(4, 66, 99, 0.25);
    border: 1px solid #0a5c83;
    background: linear-gradient(135deg, #0a5c83 0%, #044263 100%);
    color: var(--color-white);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.booking-cta:hover,
.booking-cta:focus {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(4, 66, 99, 0.3);
    background: #f6f9fc;
    border-color: #0a5c83;
    color: var(--color-primary);
}

.contact-options {
    margin-top: 1.5rem;
}

.contact-card {
    background: var(--color-white);
    border-radius: 1rem;
    border: 1px solid var(--color-light);
    box-shadow: var(--shadow-base);
}

.contact-card.phone-card {
    background: #f3f4f6;
    border-color: #e3e6ea;
}

.contact-icon {
    width: 52px;
    height: 52px;
    background: var(--color-light);
    border-radius: 14px;
    color: var(--color-primary);
    font-size: 1.35rem;
}

.phone-number {
    color: var(--color-primary);
    text-decoration: none;
}

.phone-number:hover {
    text-decoration: underline;
}

/* Status Indicator Backgrounds */
.status-available {
    background-color: rgba(40, 167, 69, 0.1);
}

.status-limited {
    background-color: rgba(255, 193, 7, 0.1);
}

.status-unavailable {
    background-color: rgba(220, 53, 69, 0.1);
}

.status-booking {
    background-color: rgba(13, 202, 240, 0.1);
}

.btn-portal {
    background: rgba(255,255,255,0.08);  
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    padding: 0.5rem 1.25rem;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-decoration: none;
}

.btn-portal:hover,
.btn-portal:focus {
  background: #fff;
  color: var(--brand-blue, #0d6efd); /* fallback to Bootstrap primary */
  box-shadow: 0 10px 22px rgba(13,110,253,0.12);
  text-decoration: none;
  outline: none;
}

/* Keep icon aligned nicely on very small widths */
.btn-portal .bi {
  font-size: 1.05em;
  opacity: 0.95;
}


/* Appointment Form Styles */
.appointments-form {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.appointment-time-slot {
    transition: var(--transition-base);
    border: 1px solid var(--color-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    cursor: pointer;
}

.appointment-time-slot:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
}

.appointment-time-slot.selected {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .appointments-hero {
        text-align: center;
        padding: var(--spacing-8) 0;
    }
    
    .status-available,
    .status-limited,
    .status-unavailable,
    .status-booking {
        margin-bottom: var(--spacing-2);
    }
}