/* =======================================
   FITNESS CLUB APPOINTMENT BOOKING PAGE
   ======================================= */

/* ===== MAIN CONTENT AREA STYLING ===== */
.site-main.content-area {
    background: linear-gradient(135deg, #0f0f0f 0%, #202020 50%, #0f0f0f 100%) !important;
    min-height: 100vh;
    padding: 0 !important;
    position: relative;
    overflow-x: hidden;
}

/* إضافة تأثير خلفية متحركة */
.site-main.content-area::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 30% 20%, rgba(93, 214, 44, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(51, 116, 24, 0.07) 0%, transparent 50%),
        radial-gradient(circle at 90% 30%, rgba(93, 214, 44, 0.03) 0%, transparent 40%);
    animation: booking-atmosphere 25s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
}

/* ===== ELEMENTOR SECTION STYLING ===== */
.elementor-section.elementor-element-dc6bf0f {
    background: rgba(15, 15, 15, 0.9) !important;
    padding: 60px 0 !important;
    position: relative;
    z-index: 2;
}

/* ===== MAIN FORM CONTAINER ===== */
.elementor-element-dc6bf0f .elementor-widget-container {
    max-width: 1000px;
    margin: 0 auto;
    background: #202020;
    border-radius: 15px;
    padding: 40px;
    border: 1px solid rgba(93, 214, 44, 0.3);
    position: relative;
}

/* إزالة التأثيرات الزائدة */
.elementor-element-dc6bf0f .elementor-widget-container::before {
    display: none;
}

/* إضافة عنوان للصفحة */
.elementor-element-dc6bf0f .elementor-widget-container::after {
    content: 'Book Your Training Session';
    display: block;
    text-align: center;
    color: #5DD62C;
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

/* ===== FORM STYLING ===== */
.cpp_form {
    position: relative;
    z-index: 2;
    background: transparent;
}

/* ===== FORM BUILDER CONTAINER ===== */
#fbuilder_1 {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* ===== FIELD CONTAINER STYLING ===== */
.fields {
    margin-bottom: 25px;
    position: relative;
}

/* ===== LABELS STYLING ===== */
.fields label {
    color: #f8f8f8 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* تمييز الحقول المطلوبة */
.fields label .r {
    color: #5DD62C !important;
    font-size: 18px;
    margin-left: 5px;
}

/* ===== INPUT FIELDS STYLING ===== */
.dfield input.field {
    width: 100% !important;
    padding: 12px 16px !important;
    background: #0f0f0f !important;
    border: 1px solid rgba(93, 214, 44, 0.4) !important;
    border-radius: 8px !important;
    color: #f8f8f8 !important;
    font-size: 16px !important;
    transition: border-color 0.3s ease;
}

.dfield input.field:focus {
    outline: none !important;
    border-color: #5DD62C !important;
}

.dfield input.field:hover {
    border-color: #5DD62C !important;
}

/* ===== APPOINTMENT SECTION STYLING ===== */
.dfield.fapp {
    background: #0f0f0f;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid rgba(93, 214, 44, 0.3);
}

/* ===== SERVICE SELECTOR ===== */
.fieldCalendarService {
    margin-bottom: 20px;
}

.ahbfield_service {
    width: 100% !important;
    padding: 12px 16px !important;
    background: #5DD62C !important;
    border: none !important;
    border-radius: 8px !important;
    color: #0f0f0f !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer;
}

/* ===== CALENDAR STYLING ===== */
.ui-datepicker-inline.ui-datepicker {
    background: #0f0f0f !important;
    border: 1px solid rgba(93, 214, 44, 0.4) !important;
    border-radius: 10px !important;
    padding: 15px !important;
    width: 100% !important;
    margin-bottom: 20px;
}

/* Calendar Header */
.ui-datepicker-header {
    background: #5DD62C !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-bottom: 10px;
}

.ui-datepicker-title {
    color: #0f0f0f !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

/* Navigation Buttons */
.ui-datepicker-prev,
.ui-datepicker-next {
    background: rgba(248, 248, 248, 0.1) !important;
    border: 1px solid rgba(248, 248, 248, 0.2) !important;
    border-radius: 6px !important;
    width: 30px !important;
    height: 30px !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background: rgba(93, 214, 44, 0.3) !important;
}

/* Calendar Table */
.ui-datepicker-calendar {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 3px;
}

.ui-datepicker-calendar th {
    background: rgba(93, 214, 44, 0.2) !important;
    color: #f8f8f8 !important;
    font-weight: 600 !important;
    padding: 8px 4px !important;
    border-radius: 4px;
    font-size: 12px;
}

.ui-datepicker-calendar td {
    padding: 2px !important;
}

.ui-datepicker-calendar td a {
    background: #202020 !important;
    color: #f8f8f8 !important;
    border: 1px solid rgba(93, 214, 44, 0.3) !important;
    border-radius: 6px !important;
    padding: 8px !important;
    text-align: center !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
    display: block;
    min-height: 16px;
}

.ui-datepicker-calendar td a:hover {
    background: #5DD62C !important;
    color: #0f0f0f !important;
    border-color: #5DD62C !important;
}

/* Today's Date */
.ui-datepicker-today a {
    background: #5DD62C !important;
    color: #0f0f0f !important;
    border-color: #5DD62C !important;
    font-weight: 600 !important;
}

/* Selected Date */
.ui-datepicker-current-day a {
    background: #337418 !important;
    color: #f8f8f8 !important;
}

/* Disabled Dates */
.ui-datepicker-unselectable .ui-state-disabled {
    background: rgba(32, 32, 32, 0.5) !important;
    color: rgba(248, 248, 248, 0.4) !important;
    border-color: rgba(93, 214, 44, 0.1) !important;
}

/* ===== TIME SLOTS STYLING ===== */
.slotsCalendar {
    margin-top: 20px;
    padding: 15px;
    background: #0f0f0f;
    border-radius: 8px;
    border: 1px solid rgba(93, 214, 44, 0.3);
}

.slotsCalendar .slots span {
    color: #5DD62C !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    display: block;
    margin-bottom: 10px;
}

.availableslot {
    display: inline-block;
    margin: 4px;
}

.availableslot a {
    background: #202020 !important;
    color: #f8f8f8 !important;
    border: 1px solid rgba(93, 214, 44, 0.4) !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
    display: block;
    min-width: 80px;
    text-align: center;
}

.availableslot a:hover {
    background: #5DD62C !important;
    color: #0f0f0f !important;
    border-color: #5DD62C !important;
}

/* ===== SUBMIT BUTTON STYLING ===== */
.pbSubmit {
    width: 100% !important;
    padding: 14px 30px !important;
    background: #5DD62C !important;
    color: #0f0f0f !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 25px;
}

.pbSubmit:hover {
    background: #337418 !important;
}

.pbSubmit:active {
    background: #5DD62C !important;
}

/* ===== FORM FIELD ICONS ===== */
.fields::before {
    content: '';
    position: absolute;
    left: -35px;
    top: 35px;
    width: 25px;
    height: 25px;
    background: linear-gradient(135deg, #5DD62C, #337418);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 2;
}

/* أيقونات مختلفة لكل حقل */
#field_1-0::before { content: '📅'; background: none; font-size: 20px; }
#field_1-1::before { content: '👤'; background: none; font-size: 16px; }
#field_1-2::before { content: '📧'; background: none; font-size: 16px; }
#field_1-3::before { content: '🏠'; background: none; font-size: 16px; }
#field_1-4::before { content: '📞'; background: none; font-size: 16px; }
#field_1-5::before { content: '⚤'; background: none; font-size: 16px; }
#field_1-6::before { content: '💬'; background: none; font-size: 16px; }

/* ===== FORM SECTIONS DIVIDER ===== */
#field_1-0 {
    border-bottom: 2px solid rgba(93, 214, 44, 0.2);
    padding-bottom: 30px;
    margin-bottom: 40px;
    position: relative;
}

#field_1-0::after {
    content: 'Personal Information';
    position: absolute;
    bottom: -45px;
    left: 0;
    color: #5DD62C;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===== LOADING ANIMATIONS ===== */
.fields {
    opacity: 0;
    transform: translateY(20px);
    animation: field-load 0.6s ease-out forwards;
}

#field_1-0 { animation-delay: 0.1s; }
#field_1-1 { animation-delay: 0.2s; }
#field_1-2 { animation-delay: 0.3s; }
#field_1-3 { animation-delay: 0.4s; }
#field_1-4 { animation-delay: 0.5s; }
#field_1-5 { animation-delay: 0.6s; }
#field_1-6 { animation-delay: 0.7s; }

/* ===== ANIMATIONS ===== */
@keyframes booking-atmosphere {
    0% { transform: translateX(0) translateY(0) rotate(0deg); }
    100% { transform: translateX(30px) translateY(-20px) rotate(2deg); }
}

@keyframes field-load {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* تأثير pulse للحقول المطلوبة */
.required {
    animation: required-pulse 3s ease-in-out infinite;
}

@keyframes required-pulse {
    0%, 100% { border-color: rgba(93, 214, 44, 0.3); }
    50% { border-color: rgba(93, 214, 44, 0.6); }
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
    .elementor-element-dc6bf0f .elementor-widget-container {
        max-width: 90%;
        padding: 40px 30px;
    }
    
    .elementor-element-dc6bf0f .elementor-widget-container::after {
        font-size: 28px;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .elementor-element-dc6bf0f .elementor-widget-container {
        margin: 20px;
        padding: 30px 20px;
        border-radius: 20px;
    }
    
    .elementor-element-dc6bf0f .elementor-widget-container::after {
        font-size: 24px;
        letter-spacing: 2px;
    }
    
    .fields::before {
        left: -25px;
        width: 20px;
        height: 20px;
        font-size: 14px;
    }
    
    .ui-datepicker-inline.ui-datepicker {
        padding: 15px !important;
    }
    
    .ui-datepicker-calendar td a {
        padding: 8px !important;
        font-size: 14px;
    }
    
    .availableslot a {
        padding: 10px 15px !important;
        font-size: 14px;
        min-width: 80px;
    }
    
    .pbSubmit {
        font-size: 16px !important;
        padding: 15px 30px !important;
    }
}

@media (max-width: 480px) {
   .elementor-element-dc6bf0f .elementor-widget-container {
        margin: 10px;
        padding: 25px 15px;
        border-radius: 15px;
    }
    
   .elementor-element-dc6bf0f .elementor-widget-container::after {
        font-size: 20px;
        letter-spacing: 1px;
    }
    
    .fields label {
        font-size: 14px !important;
    }
    
    .dfield input.field {
        padding: 12px 15px !important;
        font-size: 14px !important;
    }
    
    .ui-datepicker-calendar th {
        padding: 8px 3px !important;
        font-size: 10px;
    }
    
    .ui-datepicker-calendar td a {
        padding: 6px !important;
        font-size: 12px;
    }
    
    .availableslot {
        margin: 3px;
    }
    
    .availableslot a {
        padding: 8px 12px !important;
        font-size: 12px;
        min-width: 70px;
    }
}

/* ===== ACCESSIBILITY & PERFORMANCE ===== */
.fields,
.dfield input.field,
.availableslot a,
.pbSubmit {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .fields,
    .dfield input.field,
    .availableslot a,
    .pbSubmit,
    .site-main.content-area::before {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== ADDITIONAL ENHANCEMENTS ===== */

/* إضافة تأثير نجاح عند اكتمال الحقول */
.dfield input.field:valid:not(:placeholder-shown) {
    border-color: #5DD62C !important;
    background: rgba(93, 214, 44, 0.1) !important;
}

.dfield input.field:valid:not(:placeholder-shown)::after {
    content: '✓';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #5DD62C;
    font-weight: bold;
}

/* تحسين التباين للقراءة */
.fields label,
.dfield input.field,
.ui-datepicker-title,
.slotsCalendar .slots span {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* إضافة تأثير focus للـ accessibility */
.dfield input.field:focus,
.availableslot a:focus,
.pbSubmit:focus {
    outline: 3px solid rgba(93, 214, 44, 0.5) !important;
    outline-offset: 3px;
}

/* تأثير loading للزر عند الإرسال */
.pbSubmit.loading {
    background: rgba(93, 214, 44, 0.5) !important;
    cursor: not-allowed;
    transform: none !important;
}

.pbSubmit.loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top: 2px solid #0f0f0f;
    border-radius: 50%;
    display: inline-block;
    margin-left: 10px;
    animation: button-spin 1s linear infinite;
}

@keyframes button-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}