/**
 * Frontend Counter Stylesheet for Kabook Auto Schema & Accordion
 * * Manages the automatic numbering of accordion items using CSS counters.
 * Handles both LTR and RTL layouts correctly.
 *
 * @package Kabook Auto Rank Math Snippet
 * @version 1.3.0
 */

/* -----------------------------------------------------------------------------
 * 1. Initialize Counter Scope
 * ----------------------------------------------------------------------------- */
#rank-math-faq {
    counter-reset: karms-counter;
}

#rank-math-faq .rank-math-list-item {
    counter-increment: karms-counter;
}

/* -----------------------------------------------------------------------------
 * 2. Number Styling & Positioning
 * ----------------------------------------------------------------------------- */
#rank-math-faq .rm-faq-question-btn::before {
    content: counter(karms-counter) ".";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    opacity: 0.8;
    color: inherit;
    width: 30px; /* Width reserved for the number */
    text-align: center;
}

/* -----------------------------------------------------------------------------
 * 3. LTR Positioning (Default)
 * ----------------------------------------------------------------------------- */
#rank-math-faq .rm-faq-question-btn::before {
    left: 10px;
    right: auto;
}

/* Adjust padding to prevent text overlap with the number */
#rank-math-faq .rank-math-question {
    padding-left: 45px !important; /* Space for number on the left */
}

/* -----------------------------------------------------------------------------
 * 4. RTL Positioning (Right-to-Left Support)
 * ----------------------------------------------------------------------------- */
body.rtl #rank-math-faq .rm-faq-question-btn::before,
[dir="rtl"] #rank-math-faq .rm-faq-question-btn::before {
    left: auto;
    right: 10px;
}

/* Adjust padding for RTL layouts */
body.rtl #rank-math-faq .rank-math-question {
    padding-left: 54px !important; /* Space for the toggle icon on the left */
    padding-right: 45px !important; /* Space for the number on the right */
}