/*
 Theme Name:   Blogarise Child
 Theme URI:    https://aiwritetools.com/
 Description:  Blogarise Child Theme
 Author:       Rahul Jaiswal
 Author URI: https://aiwritetools.com/
 Template:     blogarise
 Version:      1.0.0
 Text Domain:  blogarise-child
*/

/* 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 */
}