/* CF7 Event Time Slot Styles - Enhanced with !important to override theme styles */

/* Force display rules to override any theme hiding */
.cf7-event-timeslot-container,
.cf7-event-timeslot-container *,
.event-timeslot-option,
.event-timeslot-label,
.event-title,
.event-date,
.event-time,
.event-price {
    visibility: visible !important;
    opacity: 1 !important;
}

.cf7-event-timeslot-container {
    display: grid !important;
}

.event-timeslot-label {
    display: flex !important;
}

.event-date,
.event-time {
    display: flex !important;
}

.event-title,
.event-price {
    display: block !important;
}

.cf7-event-timeslot-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 24px !important;
    margin: -10px 0 30px !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    clear: both !important;
}

.event-timeslot-option {
    position: relative !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.event-timeslot-radio {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.event-timeslot-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 28px 24px !important;
    background: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    min-height: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    width: 100% !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    list-style: none !important;
}

.event-timeslot-label:hover {
    border-color: #2C5F34 !important;
    box-shadow: 0 8px 16px rgba(44, 95, 52, 0.12) !important;
    transform: translateY(-4px) !important;
}

.event-timeslot-radio:checked+.event-timeslot-label {
    background: linear-gradient(135deg, #2C5F34 0%, #1f4527 100%) !important;
    border-color: #1f4527 !important;
    box-shadow: 0 12px 24px rgba(44, 95, 52, 0.3) !important;
    transform: translateY(-4px) !important;
}

/* Event Title */
.event-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
    transition: color 0.3s ease !important;
    width: 100% !important;
    padding-right: 35px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.event-timeslot-radio:checked+.event-timeslot-label .event-title {
    color: #ffffff !important;
}

/* Event Date */
.event-date {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    transition: color 0.3s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.event-date::before {
    content: '' !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" style="fill: %232C5F34;"><path d="M224 64C206.3 64 192 78.3 192 96L192 128L160 128C124.7 128 96 156.7 96 192L96 240L544 240L544 192C544 156.7 515.3 128 480 128L448 128L448 96C448 78.3 433.7 64 416 64C398.3 64 384 78.3 384 96L384 128L256 128L256 96C256 78.3 241.7 64 224 64zM96 288L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 288L96 288z"/></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.event-timeslot-radio:checked+.event-timeslot-label .event-date {
    color: rgba(255, 255, 255, 0.95) !important;
}

.event-timeslot-radio:checked+.event-timeslot-label .event-date::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" style="fill: %23ffffff;"><path d="M224 64C206.3 64 192 78.3 192 96L192 128L160 128C124.7 128 96 156.7 96 192L96 240L544 240L544 192C544 156.7 515.3 128 480 128L448 128L448 96C448 78.3 433.7 64 416 64C398.3 64 384 78.3 384 96L384 128L256 128L256 96C256 78.3 241.7 64 224 64zM96 288L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 288L96 288z"/></svg>') !important;
}

/* Event Time */
.event-time {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #2C5F34 !important;
    display: flex !important;
    align-items: center !important;
    transition: color 0.3s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 0 !important;
}

.event-time::before {
    content: '' !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" style="fill: %232C5F34;"><path d="M320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64zM296 184L296 320C296 328 300 335.5 306.7 340L402.7 404C413.7 411.4 428.6 408.4 436 397.3C443.4 386.2 440.4 371.4 429.3 364L344 307.2L344 184C344 170.7 333.3 160 320 160C306.7 160 296 170.7 296 184z"/></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    position: relative;
    top: 4px;
}

.event-timeslot-radio:checked+.event-timeslot-label .event-time {
    color: #ffffff !important;
}

.event-timeslot-radio:checked+.event-timeslot-label .event-time::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" style="fill: %23ffffff;"><path d="M320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64zM296 184L296 320C296 328 300 335.5 306.7 340L402.7 404C413.7 411.4 428.6 408.4 436 397.3C443.4 386.2 440.4 371.4 429.3 364L344 307.2L344 184C344 170.7 333.3 160 320 160C306.7 160 296 170.7 296 184z"/></svg>') !important;
}

/* Event Price */
.event-price {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #059669 !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 2px solid #f3f4f6 !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.event-timeslot-radio:checked+.event-timeslot-label .event-price {
    color: #ffffff !important;
    border-top-color: rgba(255, 255, 255, 0.3) !important;
}

/* Checkmark */
.event-checkmark {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 32px !important;
    height: 32px !important;
    background: #10b981 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transform: scale(0) rotate(-45deg) !important;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3) !important;
    z-index: 10 !important;
}

.event-timeslot-radio:checked+.event-timeslot-label .event-checkmark {
    opacity: 1 !important;
    transform: scale(1) rotate(0deg) !important;
}

.event-checkmark svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

/* No Events Message */
.no-events-message {
    padding: 40px;
    text-align: center;
    background: #fef3c7;
    border: 2px solid #fbbf24;
    border-radius: 12px;
    color: #92400e;
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0;
}

/* Contact Form 7 Integration */
.wpcf7 .cf7-event-timeslot-container {
    margin: 0 0 20px;
}

.wpcf7 .wpcf7-form-control-wrap {
    display: block;
}

/* Validation Styling */
.wpcf7-not-valid-tip {
    color: #ef4444;
    font-size: 14px;
    font-weight: 600;
    margin-top: 12px;
    display: block;
    padding: 10px 16px;
    background: #fee2e2;
    border-radius: 8px;
    border-left: 4px solid #ef4444;
}

span.wpcf7-not-valid-tip {
    display: block;
    margin-top: 15px;
}

/* Response Messages */
.wpcf7-response-output {
    margin: 20px 0;
    padding: 16px 20px;
    border-radius: 8px;
    font-weight: 600;
}

.wpcf7-mail-sent-ok {
    background: #d1fae5;
    border: 2px solid #10b981;
    color: #065f46;
}

.wpcf7-validation-errors {
    background: #fee2e2;
    border: 2px solid #ef4444;
    color: #991b1b;
}

/* ========================================
   RESPONSIVE DESIGN
   Mobile: Stack vertically (1 column)
   Tablet: 2 columns side by side
   Desktop: 3 columns side by side
   ======================================== */

/* Mobile Devices - Single Column Stack (Top to Bottom) */
@media (max-width: 767px) {
    .cf7-event-timeslot-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .event-timeslot-option {
        width: 100% !important;
        display: block !important;
    }

    .event-timeslot-label {
/*         min-height: 180px !important; */
        padding: 24px 20px !important;
        width: 100% !important;
        display: flex !important;
    }

    .event-title {
        font-size: 17px !important;
    }

    .event-date,
    .event-time {
        font-size: 14px !important;
    }

    .event-price {
        font-size: 22px !important;
    }

    /* Ensure submit button is full width on mobile */
    .wpcf7-form .wpcf7-submit {
        width: 100% !important;
    }
}

/* Tablet Devices - 2 Columns Side by Side */
@media (min-width: 768px) and (max-width: 1024px) {
    .cf7-event-timeslot-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* Desktop Devices - 3 Columns Side by Side */
@media (min-width: 1025px) {
    .cf7-event-timeslot-container {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }
}

/* Focus States for Accessibility */
.event-timeslot-radio:focus+.event-timeslot-label {
    outline: 3px solid #2C5F34;
    outline-offset: 2px;
}

/* Loading State */
.event-timeslot-label.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Animations - Removed page load animation for better UX */

/* Form Field Styling */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"] {
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: #ffffff;
    font-family: inherit;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus {
    outline: none;
    border-color: #2C5F34;
    box-shadow: 0 0 0 4px rgba(44, 95, 52, 0.1);
}

.wpcf7-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    color: #1f2937;
    font-size: 15px;
}

.wpcf7-form p {
    margin-bottom: 24px;
}

/* Submit Button Styling */
.wpcf7-form .wpcf7-submit {
    background: linear-gradient(135deg, #2C5F34 0%, #1f4527 100%);
    color: #ffffff;
    border: none;
    padding: 16px 48px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(44, 95, 52, 0.25);
    margin-top: 24px;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wpcf7-form .wpcf7-submit:hover {
    background: linear-gradient(135deg, #1f4527 0%, #163318 100%);
    box-shadow: 0 8px 20px rgba(44, 95, 52, 0.35);
    transform: translateY(-2px);
}

.wpcf7-form .wpcf7-submit:active {
    transform: translateY(0);
}

.wpcf7-form .wpcf7-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Spinner */
.wpcf7-spinner {
    margin-left: 12px;
    vertical-align: middle;
}

/* Price Badge Variations */
.event-price:has-text("Free") {
    color: #10b981;
}

/* Additional Polish */
.event-timeslot-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(44, 95, 52, 0.05) 0%, rgba(31, 69, 39, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.event-timeslot-label:hover::before {
    opacity: 1;
}

.event-timeslot-radio:checked+.event-timeslot-label::before {
    opacity: 0;
}