/**
 * Ticket Creation Popup Styles - With !important rules for WooCommerce compatibility
 */

/* Help Button */
.tracking-help-actions {
    text-align: center !important;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
}

/* Style for the original help button (optional if you want consistency) */
#open-ticket-popup.help-button,
/* Style for the new help button on order details */
#open-ticket-popup-order.help-button {
    background-color: transparent !important;
    color: #8B0000 !important;
    border: 1px solid #8B0000 !important;
    padding: 12px 22px !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    font-family: 'EB Garamond', Georgia, serif !important; /* Ensure fonts are loaded */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    letter-spacing: 0.02em !important;
    font-weight: normal !important;
    box-shadow: none !important;
    text-transform: none !important;
    display: inline-flex !important; /* Use flex for icon alignment */
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; /* Space between icon and text */
    text-decoration: none !important;
    line-height: 1.5 !important;
}

#open-ticket-popup.help-button:hover,
#open-ticket-popup-order.help-button:hover {
    background-color: rgba(139, 0, 0, 0.05) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* Ensure FontAwesome is loaded for icons (check theme/plugin settings) */
#open-ticket-popup.help-button i.fas,
#open-ticket-popup-order.help-button i.fas {
   /* Styles for icon if needed */
   line-height: 1 !important;
}


/* Popup Overlay */
#ticket-creation-popup.ticket-popup-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
    /* --- INCREASED Z-INDEX --- */
    z-index: 99999999 !important; /* Significantly increased z-index */
    /* --- END Z-INDEX --- */
    overflow-y: auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    border: none !important;
}

#ticket-creation-popup.ticket-popup-overlay.active {
    /* This is the rule that makes it visible */
    display: flex !important;
}

/* --- Added more specific rule for testing override --- */
body #ticket-creation-popup.ticket-popup-overlay.active {
    display: flex !important;
    z-index: 99999999 !important; /* Ensure z-index is high here too */
}
/* --- End Added Rule --- */


/* Popup Container */
#ticket-creation-popup .ticket-popup-container {
    background-color: #fff !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    width: 100% !important;
    max-width: 550px !important; /* Adjust max-width as needed */
    position: relative !important;
    overflow: hidden !important;
    margin: auto !important;
    animation: popupFadeIn 0.3s ease-out !important;
    padding: 0 !important;
    border: none !important;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Popup Header */
#ticket-creation-popup .ticket-popup-header {
    padding: 18px 25px !important;
    background-color: #8B0000 !important;
    color: white !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
}

#ticket-creation-popup .ticket-popup-header h3 {
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    font-family: 'EB Garamond', Georgia, serif !important; /* Ensure fonts are loaded */
    letter-spacing: 0.03em !important;
    color: white !important;
    text-transform: none !important;
    line-height: 1.3 !important;
    text-align: left !important;
    padding: 0 !important;
    display: flex; /* Align icon and text */
    align-items: center;
    gap: 10px; /* Space between icon and text */
}

#ticket-creation-popup .ticket-popup-close {
    background: transparent !important;
    color: white !important;
    border: none !important;
    font-size: 28px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s !important;
    font-weight: normal !important;
    width: auto !important;
    height: auto !important;
    min-width: unset !important;
    border-radius: 0 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

#ticket-creation-popup .ticket-popup-close:hover {
    opacity: 1 !important;
    background: transparent !important;
    color: white !important;
}

/* Popup Content */
#ticket-creation-popup .ticket-popup-content {
    padding: 30px !important;
    background-color: #fff !important;
    color: #333 !important;
    border: none !important;
    margin: 0 !important;
}

/* Steps */
#ticket-creation-popup .ticket-step {
    display: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#ticket-creation-popup .ticket-step.active {
    display: block !important;
}

#ticket-creation-popup .ticket-instruction {
    font-size: 17px !important;
    margin-bottom: 25px !important;
    color: #3a3a3a !important;
    text-align: center !important;
    font-family: 'EB Garamond', Georgia, serif !important; /* Ensure fonts are loaded */
    font-weight: normal !important;
    line-height: 1.5 !important;
}

/* Category Options */
#ticket-creation-popup .ticket-category-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important; /* Increased gap */
    max-width: 500px !important; /* Adjusted width */
    margin: 0 auto !important;
}

#ticket-creation-popup .ticket-category-option {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important; /* Slightly rounder */
    padding: 0 !important; /* Padding handled by inner divs */
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    font-family: 'EB Garamond', Georgia, serif !important; /* Ensure fonts are loaded */
    color: #3a3a3a !important;
    font-weight: normal !important;
    display: flex;
    align-items: stretch !important; /* Make icon and content same height */
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

#ticket-creation-popup .ticket-category-option:hover {
    border-color: #8B0000 !important;
    box-shadow: 0 2px 8px rgba(139, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
}

#ticket-creation-popup .category-icon {
    background-color: #f8f8f8 !important;
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important; /* Icon size */
    color: #8B0000 !important;
    border-right: 1px solid #e0e0e0 !important;
    min-width: 65px !important; /* Ensure icon area has width */
    transition: all 0.25s ease !important;
}

#ticket-creation-popup .ticket-category-option:hover .category-icon {
    background-color: #8B0000 !important;
    color: #ffffff !important;
}

#ticket-creation-popup .category-content {
    padding: 16px 20px !important;
    flex-grow: 1 !important; /* Allow content to take remaining space */
}

#ticket-creation-popup .category-title {
    display: block !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    color: #3a3a3a !important;
}

#ticket-creation-popup .category-description {
    display: block !important;
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.4 !important;
}


/* Forms */
#ticket-creation-popup .ticket-form {
    margin-top: 10px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

#ticket-creation-popup .ticket-form-intro {
    margin-bottom: 25px !important;
    color: #3a3a3a !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-family: 'EB Garamond', Georgia, serif !important; /* Ensure fonts are loaded */
    font-weight: normal !important;
    text-align: left !important;
}

#ticket-creation-popup .ticket-form-field {
    margin-bottom: 22px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

#ticket-creation-popup .ticket-form-field label {
    display: flex !important; /* Use flex for icon alignment */
    align-items: center;
    gap: 8px; /* Space between icon and text */
    margin-bottom: 8px !important;
    font-weight: 500 !important;
    color: #333 !important;
    font-family: 'EB Garamond', Georgia, serif !important; /* Ensure fonts are loaded */
    font-size: 16px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    padding: 0 !important;
}

#ticket-creation-popup .ticket-form-field label i.fas {
    color: #8B0000; /* Color for icons in labels */
    font-size: 1em; /* Match label font size */
    line-height: 1;
}

#ticket-creation-popup .ticket-form-field input[type="text"],
#ticket-creation-popup .ticket-form-field input[type="email"],
#ticket-creation-popup .ticket-form-field textarea,
#ticket-creation-popup .ticket-form-field select {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #d4d4d4 !important;
    border-radius: 3px !important;
    font-family: 'EB Garamond', Georgia, serif !important; /* Ensure fonts are loaded */
    font-size: 16px !important;
    color: #333 !important;
    background-color: #fcfcfc !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-shadow: none !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* Select specific styling */
#ticket-creation-popup .ticket-form-field select {
    appearance: none; /* Remove default arrow */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%22%20stroke%3D%22%238B0000%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
    padding-right: 30px !important; /* Space for arrow */
}

#ticket-creation-popup .ticket-form-field input:focus,
#ticket-creation-popup .ticket-form-field textarea:focus,
#ticket-creation-popup .ticket-form-field select:focus {
    border-color: #8B0000 !important;
    box-shadow: 0 0 0 2px rgba(139, 0, 0, 0.1) !important;
    outline: none !important;
    background-color: #fff !important;
}

#ticket-creation-popup .ticket-form-field textarea {
    resize: vertical !important;
    min-height: 120px !important;
    line-height: 1.5 !important;
}

#ticket-creation-popup .ticket-form-field .required {
    color: #8B0000 !important;
    margin-left: 3px !important;
}

/* Form Actions */
#ticket-creation-popup .ticket-form-actions {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 35px !important; /* Increased margin */
    gap: 15px !important;
}

#ticket-creation-popup .ticket-back-button {
    background-color: #f1f1f1 !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    padding: 10px 22px !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    transition: all 0.2s !important;
    font-family: 'EB Garamond', Georgia, serif !important; /* Ensure fonts are loaded */
    font-weight: normal !important;
    text-transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    width: auto !important;
    min-width: unset !important;
    height: auto !important;
    text-decoration: none !important;
    display: inline-flex !important; /* Align icon */
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
/* Optional icon for back button */
/* #ticket-creation-popup .ticket-back-button:before {
    content: "\f060" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 14px !important;
} */

#ticket-creation-popup .ticket-back-button:hover {
    background-color: #e5e5e5 !important;
}

#ticket-creation-popup .ticket-submit-button {
    background-color: #8B0000 !important;
    color: white !important;
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    transition: all 0.2s !important;
    font-family: 'EB Garamond', Georgia, serif !important; /* Ensure fonts are loaded */
    letter-spacing: 0.02em !important;
    font-weight: normal !important;
    text-transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    width: auto !important;
    min-width: unset !important;
    height: auto !important;
    text-decoration: none !important;
     display: inline-flex !important; /* Align icon */
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* Optional icon for submit button */
/* #ticket-creation-popup .ticket-submit-button:after {
    content: "\f1d8" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 14px !important;
} */


#ticket-creation-popup .ticket-submit-button:hover {
    background-color: #6B0000 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Refund Offer Buttons Specific Styles */
#ticket-creation-popup .refund-offer-actions {
    justify-content: center !important; /* Center the Yes/No buttons */
    gap: 20px !important;
}
#ticket-creation-popup .yes-button {
    background-color: #4CAF50 !important; /* Green for Yes */
}
#ticket-creation-popup .yes-button:hover {
    background-color: #45a049 !important;
}
#ticket-creation-popup .no-button {
     background-color: #f1f1f1 !important; /* Grey for No */
     color: #333 !important;
     border: 1px solid #ddd !important;
}
#ticket-creation-popup .no-button:hover {
     background-color: #e5e5e5 !important;
}


/* Success/Error/Info Message Shared Styles */
#ticket-creation-popup .ticket-success-message,
#ticket-creation-popup .ticket-error-message,
#ticket-creation-popup .ticket-info-message {
    text-align: center !important;
    padding: 20px 10px 10px !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
}

#ticket-creation-popup .ticket-success-icon,
#ticket-creation-popup .ticket-error-icon,
#ticket-creation-popup .ticket-info-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 70px !important; /* Slightly larger icon circle */
    height: 70px !important;
    line-height: 70px !important;
    border-radius: 50% !important;
    margin: 0 auto 25px !important; /* Increased margin */
    font-size: 32px !important; /* Icon size */
    color: white !important;
    text-align: center !important;
}

#ticket-creation-popup .ticket-success-icon {
    background-color: #4CAF50 !important; /* Green */
}

#ticket-creation-popup .ticket-error-icon {
    background-color: #8B0000 !important; /* Red */
}
#ticket-creation-popup .ticket-info-icon {
    background-color: #2196F3 !important; /* Blue for info */
}


#ticket-creation-popup .ticket-success-message h4,
#ticket-creation-popup .ticket-error-message h4,
#ticket-creation-popup .ticket-info-message h4 {
    margin-top: 5px !important;
    margin-bottom: 15px !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    color: #333 !important;
    font-family: 'EB Garamond', Georgia, serif !important; /* Ensure fonts are loaded */
    line-height: 1.3 !important;
    text-align: center !important;
    padding: 0 !important;
    text-transform: none !important;
}

#ticket-creation-popup .ticket-success-message p,
#ticket-creation-popup .ticket-error-message p,
#ticket-creation-popup .ticket-info-message p {
    color: #555 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
    font-family: 'EB Garamond', Georgia, serif !important; /* Ensure fonts are loaded */
    font-weight: normal !important;
    text-align: center !important;
    padding: 0 !important;
}

#ticket-creation-popup .ticket-reference {
    font-weight: 600 !important;
    color: #555 !important;
    margin: 20px 0 !important;
    font-size: 17px !important;
    background-color: #f9f9f9 !important;
    padding: 10px !important;
    border-radius: 3px !important;
    display: inline-block !important;
    font-family: 'EB Garamond', Georgia, serif !important; /* Ensure fonts are loaded */
    line-height: 1.4 !important;
    border: 1px solid #eee !important;
}

#ticket-creation-popup .ticket-close-button {
    background-color: #8B0000 !important;
    color: white !important;
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    margin-top: 15px !important;
    transition: all 0.2s !important;
    font-family: 'EB Garamond', Georgia, serif !important; /* Ensure fonts are loaded */
    letter-spacing: 0.02em !important;
    font-weight: normal !important;
    box-shadow: none !important;
    text-transform: none !important;
    line-height: 1.5 !important;
    width: auto !important;
    min-width: unset !important;
    height: auto !important;
    text-decoration: none !important;
}

#ticket-creation-popup .ticket-close-button:hover {
    background-color: #6B0000 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Error Message Specifics */
#ticket-creation-popup .ticket-error-details {
    margin-bottom: 20px !important;
    color: #444 !important;
    line-height: 1.6 !important;
    font-family: 'EB Garamond', Georgia, serif !important; /* Ensure fonts are loaded */
    font-size: 16px !important;
    font-weight: normal !important;
}

/* Loading Spinner */
#ticket-creation-popup .ticket-form-loading {
    position: relative !important;
    opacity: 0.7; /* Dim the form */
}

#ticket-creation-popup .ticket-form-loading:after {
    /* Removed overlay :after, using direct opacity */
    content: none !important;
}

#ticket-creation-popup .ticket-form-loading:before {
    content: "" !important;
    position: absolute !important;
    /* Center the spinner */
    top: calc(50% - 15px) !important; /* Adjust based on spinner size */
    left: calc(50% - 15px) !important;
    /* Removed margin */
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(139, 0, 0, 0.2) !important; /* Lighter border */
    border-top-color: #8B0000 !important; /* Spinner color */
    animation: spinTicket 0.6s linear infinite !important;
    z-index: 10 !important; /* Ensure spinner is above dimmed form */
    box-sizing: border-box !important;
}

@keyframes spinTicket {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments */
@media screen and (max-width: 600px) {
     #ticket-creation-popup .ticket-popup-container {
        max-width: 100% !important;
        width: calc(100% - 30px) !important; /* Add some horizontal padding */
        height: auto !important;
        max-height: calc(100vh - 40px) !important;
        margin: 20px 15px !important;
        overflow-y: auto !important;
    }

    #ticket-creation-popup .ticket-popup-header h3 {
        font-size: 18px !important; /* Smaller header text */
    }
    #ticket-creation-popup .ticket-popup-content {
        padding: 20px !important; /* Less padding on mobile */
    }

    #ticket-creation-popup .ticket-form-actions {
        flex-direction: column-reverse !important; /* Stack buttons */
        gap: 12px !important;
    }

    #ticket-creation-popup .ticket-back-button,
    #ticket-creation-popup .ticket-submit-button,
    #ticket-creation-popup .ticket-close-button {
        width: 100% !important; /* Full width buttons */
        padding: 12px 15px !important; /* Adjust padding */
    }

     /* Category options on mobile */
     #ticket-creation-popup .ticket-category-option {
        flex-direction: row !important; /* Keep row layout if desired */
    }

    #ticket-creation-popup .category-icon {
        padding: 15px !important;
        font-size: 20px !important;
        min-width: 50px !important;
    }

    #ticket-creation-popup .category-content {
        padding: 12px 15px !important;
    }

    #ticket-creation-popup .category-title {
        font-size: 16px !important;
    }
     #ticket-creation-popup .category-description {
        font-size: 13px !important;
    }
}