/*
Theme Name: Hello Elementor Child
Theme URI: https://aiwritetools.com/
Description: A child theme for Hello Elementor.
Author: Rahul Jaiswal
Author URI: https://aiwritetools.com/
Template: hello-elementor
Version: 1.0.0
*/

/* Add your custom CSS here. All the Tailwind-related custom styles for details/summary
   can be added here, or remain in the individual template files if preferred for
   more granular control. For simplicity, I've kept them in individual templates
   for now, but they can be global here. */

/* Styles for FAQ accordion (can be moved from template files here if desired globally) */
details {
    background-color: #ffffff; /* bg-white */
    padding: 1rem; /* p-4 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    border: 1px solid #e5e7eb; /* border border-gray-200 */
    cursor: pointer;
    transition: background-color 0.3s ease;
}
details[open] {
    background-color: #eff6ff; /* bg-blue-50 */
}
summary {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-800 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    outline: none; /* Remove outline on focus */
}
summary::-webkit-details-marker {
    display: none; /* Hide default marker */
}
summary::after {
    content: '\25B6'; /* Right-pointing triangle */
    font-size: 1.2em;
    color: #6B7280; /* Gray-500 */
    transition: transform 0.2s;
}
details[open] summary::after {
    content: '\25BC'; /* Down-pointing triangle */
    transform: rotate(90deg); /* Rotate for open state */
}
details p {
    margin-top: 0.75rem; /* mt-3 */
    color: #374151; /* text-gray-700 */
    line-height: 1.625; /* leading-relaxed */
}

/* Spinner animation for loading state (global) */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #a78bfa; /* purple-400 */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Global Message Box Styling (from your original HTML) */
#message-box {
    /* These properties will be applied by JS dynamically */
    /* fixed bottom-4 right-4 p-4 rounded-lg shadow-xl text-white opacity-0 transition-opacity duration-300 ease-in-out z-50 hidden */
}