/* MeetKJ Custom CSS - Complete Override */
body.meetkj-page {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Hero Section */
.meetkj-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    padding: 80px 0 !important;
}

.meetkj-hero h1 {
    color: white !important;
    font-size: 5.5rem !important;
    font-weight: bold !important;
}

.meetkj-hero p {
    color: white !important;
    font-size: 2.25rem !important;
}

.meetkj-hero-image {
    width: 300px !important;
    height: 300px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 5px solid white !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}

/* Topics Section */
.meetkj-topics {
    padding: 60px 0 !important;
    background: white !important;
}

.meetkj-topics h2 {
    font-size: 4.5rem !important;
}

.meetkj-topics h5 {
    font-size: 2.5rem !important;
}

.meetkj-topics .alert {
    font-size: 1.7rem !important;
}

.meetkj-feature-card {
    border: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    border-radius: 12px !important;
    background: white !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    transition: transform 0.3s ease !important;
}

.meetkj-feature-card:hover {
    transform: translateY(-5px) !important;
}

/* Details Section */
.meetkj-details {
    padding: 60px 0 !important;
    background: #f8f9fa !important;
}

.meetkj-details h2 {
    font-size: 4.5rem !important;
}
.meetkj-details h4 {
    font-size: 2.5rem !important;
}
.meetkj-details p {
    font-size: 1.8rem !important;
}

/* Pricing Section */
.meetkj-pricing {
    padding: 60px 0 !important;
    background: white !important;
}

.meetkj-pricing-card {
    border: 2px solid #e9ecef !important;
    border-radius: 15px !important;
    padding: 30px !important;
    text-align: center !important;
    margin-bottom: 30px !important;
    background: rgb(236, 226, 226) !important;
    min-height: 235px !important;
}

.meetkj-pricing-card.featured {
    border-color: #28a745 !important;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
    min-height: 235px !important;
}
.meetkj-pricing h2 {
    font-size: 4.5rem !important;
}
.meetkj-pricing-card.featured h3 {
    font-size: 3rem !important;
    color: #fff !important;
}
.meetkj-pricing-card p {
    font-size: 1.8rem !important;
}

/* Booking Section */
.meetkj-form-section {
    background: #f8f9fa !important;
    padding: 60px 0 !important;
    font-size: 1.5rem !important;
}

.meetkj-form-section h3 {
    margin-bottom: 0 !important;
    font-size: 2.5rem !important;
}

.meetkj-form-section label {
    font-size: 1.5rem !important;
}

.meetkj-form-section .form-control {
    font-size: 1.5rem !important;
}

.meetkj-form-section .form-select {
    font-size: 1.5rem !important;
}

.meetkj-form-section .form-select option {
    font-size: 1.5rem !important;
}

.meetkj-form-section .btn {
    font-size: 1.5rem !important;
}

.meetkj-card-shadow {
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
    border: none !important;
    border-radius: 15px !important;
}

.meetkj-form-control {
    border-radius: 8px !important;
    border: 2px solid #e9ecef !important;
    padding: 12px 15px !important;
}

.meetkj-time-slot {
    border: 2px solid #dee2e6 !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    margin: 5px !important;
    cursor: pointer !important;
    background: white !important;
    text-align: center !important;
    font-weight: 500 !important;
    position: relative !important;
    display: block !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
}

.meetkj-time-slot:hover:not(.booked) {
    border-color: #007bff !important;
    background: #e3f2fd !important;
}

.meetkj-time-slot.selected {
    border-color: #007bff !important;
    background: #007bff !important;
    color: white !important;
}

.meetkj-time-slot.booked {
    border-color: #dc3545 !important;
    background: #f8d7da !important;
    color: #721c24 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.meetkj-time-slot.booked::after {
    content: "Booked" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: rgba(220, 53, 69, 0.9) !important;
    color: white !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: bold !important;
}

.meetkj-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 25px !important;
    color: white !important;
    font-weight: 600 !important;
}

.meetkj-alert-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border: none !important;
    color: white !important;
    border-radius: 10px !important;
}

/* CTA Section */
.meetkj-cta {
    padding: 60px 0 !important;
    background: #007bff !important;
    color: white !important;
}

/* FontAwesome Fix */
body.meetkj-page .fa {
    font-family: FontAwesome !important;
    display: inline-block !important;
}

/* Bootstrap Grid Override */
body.meetkj-page .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

body.meetkj-page .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -15px !important;
}

body.meetkj-page .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 15px !important;
}

body.meetkj-page .col-md-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    padding: 0 15px !important;
}

body.meetkj-page .col-lg-8 {
    flex: 0 0 66.666667% !important;
    max-width: 66.666667% !important;
    padding: 0 15px !important;
}

body.meetkj-page .col-lg-10 {
    flex: 0 0 83.333333% !important;
    max-width: 83.333333% !important;
    padding: 0 15px !important;
}

body.meetkj-page .col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 15px !important;
}

body.meetkj-page .mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

body.meetkj-page .text-center {
    text-align: center !important;
}

body.meetkj-page .mb-4 {
    margin-bottom: 1.5rem !important;
}

body.meetkj-page .mb-5 {
    margin-bottom: 3rem !important;
}

body.meetkj-page .mt-4 {
    margin-top: 1.5rem !important;
}

body.meetkj-page .g-4 > * {
    padding: 1.5rem !important;
}

body.meetkj-page .g-2 > * {
    padding: 0.5rem !important;
}

body.meetkj-page .g-3 > * {
    padding: 1rem !important;
}