/**
 * Frontend Stylesheet for Kabook Auto Schema & Accordion
 * * Controls the visual appearance of the accordion, including layout, colors,
 * typography, and animations. Supports dynamic CSS variables injected by PHP.
 *
 * @package Kabook Auto Rank Math Snippet
 * @version 1.3.0
 */

/* -----------------------------------------------------------------------------
 * 1. Global Variables & Defaults
 * ----------------------------------------------------------------------------- */
:root {
    --karms-anim-speed: 300ms;
}

/* -----------------------------------------------------------------------------
 * 2. Container Styles
 * ----------------------------------------------------------------------------- */
#rank-math-faq .rank-math-list-item {
    border: var(--karms-border-width) var(--karms-border-style) var(--karms-border-color);
    border-radius: var(--karms-border-radius) !important;
    margin-bottom: 20px;
    overflow: hidden; /* Ensures content doesn't overflow rounded corners */
}

/* -----------------------------------------------------------------------------
 * 3. Question Block Styles
 * ----------------------------------------------------------------------------- */
#rank-math-faq .rank-math-question {
    display: block;
    font-size: var(--karms-question-font-size);
    font-weight: 700;
    line-height: 1.4;
    text-align: var(--karms-question-text-align);
    color: var(--karms-question-color);
    background-color: var(--karms-question-bg-color);
    margin: 0 !important;
    padding: 15px 54px 15px 15px !important; /* Default LTR padding (Icon on right) */
    position: relative;
    cursor: pointer;
    user-select: none;
}

/* Toggle Icon (+/-) Positioning */
#rank-math-faq .rank-math-question::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 0;
    width: 54px;
    text-align: center;
    font-size: 20px;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

/* Active State Icon */
#rank-math-faq .rank-math-question.rm-faq-question-active::after {
    content: "-";
}

/* Accessibility Button Reset */
#rank-math-faq .rm-faq-question-btn {
    all: unset !important;
    width: 100%;
    display: block;
}

/* -----------------------------------------------------------------------------
 * 4. RTL Support (Right-to-Left)
 * ----------------------------------------------------------------------------- */
body.rtl #rank-math-faq .rank-math-question,
[dir="rtl"] #rank-math-faq .rank-math-question {
    padding: 15px 15px 15px 54px !important; /* Swap padding for icon on left */
}

body.rtl #rank-math-faq .rank-math-question::after,
[dir="rtl"] #rank-math-faq .rank-math-question::after {
    right: auto;
    left: 0;
}

/* -----------------------------------------------------------------------------
 * 5. Answer Block Styles
 * ----------------------------------------------------------------------------- */
#rank-math-faq .rank-math-answer {
    display: none;
    font-size: var(--karms-answer-font-size);
    line-height: 1.6 !important;
    text-align: var(--karms-answer-text-align);
    color: var(--karms-answer-color);
    background-color: var(--karms-answer-bg-color);
    padding: 15px;
    border-top: var(--karms-border-width) var(--karms-border-style) var(--karms-border-color);
}

/* -----------------------------------------------------------------------------
 * 6. Animations
 * ----------------------------------------------------------------------------- */

/* Fade Animation Class */
.karms-animate-fade {
    animation: karmsFadeIn var(--karms-anim-speed, 300ms) ease-out forwards;
}

/* Zoom Animation Class */
.karms-animate-zoom {
    animation: karmsZoomIn var(--karms-anim-speed, 300ms) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Keyframes: Fade In */
@keyframes karmsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Keyframes: Zoom In (with bounce effect) */
@keyframes karmsZoomIn {
    from { 
        opacity: 0; 
        transform: scale(0.85); 
    } 
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}