```css
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM ACCORDION SYSTEM
   ------------------------------------------------------------
   File: /assets/css/components/accordion.css
   Full Path:
   /public_html/assets/css/components/accordion.css

   Version: 1.0

   Used For:
   - FAQ
   - Product Information
   - Export Information
   - Production Information
   - Future Expandable Content

   Depends On:
   - variables.css
   - reset.css
   - typography.css
   - utilities.css
   - global.css
   ============================================================ */


/* ============================================================
   01. ACCORDION
   ============================================================ */

.accordion {
    position: relative;

    display: flex;

    flex-direction: column;

    gap: var(--space-3);

    width: 100%;
}


/* ============================================================
   02. ACCORDION ITEM
   ============================================================ */

.accordion-item {
    position: relative;

    width: 100%;

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-lg);

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0 10px 32px rgba(11, 43, 32, 0.045);

    overflow: hidden;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition-premium);
}


/* ============================================================
   03. ACCORDION ITEM HOVER
   ============================================================ */

.accordion-item:hover {
    border-color:
        rgba(183, 138, 61, 0.22);

    box-shadow:
        0 16px 42px rgba(11, 43, 32, 0.065);

    transform:
        translateY(-2px);
}


/* ============================================================
   04. ACTIVE ACCORDION ITEM
   ============================================================ */

.accordion-item.is-open,
.accordion-item.active {
    border-color:
        rgba(183, 138, 61, 0.30);

    box-shadow:
        0 18px 50px rgba(11, 43, 32, 0.075);
}


/* ============================================================
   05. ACTIVE GOLD LINE
   ============================================================ */

.accordion-item::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    z-index: 4;

    width: 3px;

    background:
        var(--gradient-gold);

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    transition:
        transform var(--transition-premium);
}


/* ============================================================
   06. SHOW ACTIVE GOLD LINE
   ============================================================ */

.accordion-item.is-open::before,
.accordion-item.active::before {
    transform:
        scaleY(1);
}


/* ============================================================
   07. ACCORDION HEADER
   ============================================================ */

.accordion-header {
    position: relative;

    width: 100%;

    margin: 0;
}


/* ============================================================
   08. ACCORDION BUTTON
   ============================================================ */

.accordion-button {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-5);

    width: 100%;

    min-height: 76px;

    padding:
        var(--space-5)
        var(--space-6);

    border: 0;

    outline: none;

    color: var(--color-primary-deep);

    background: transparent;

    cursor: pointer;

    text-align: left;

    font-family: var(--font-ui);

    transition:
        color var(--transition),
        background-color var(--transition);
}


/* ============================================================
   09. ACCORDION BUTTON HOVER
   ============================================================ */

.accordion-button:hover {
    background:
        rgba(183, 138, 61, 0.035);
}


/* ============================================================
   10. ACCORDION BUTTON ACTIVE
   ============================================================ */

.accordion-item.is-open
.accordion-button,

.accordion-item.active
.accordion-button,

.accordion-button[aria-expanded="true"] {
    color: var(--color-primary-deep);

    background:
        linear-gradient(
            90deg,
            rgba(183, 138, 61, 0.055),
            rgba(183, 138, 61, 0.015)
        );
}


/* ============================================================
   11. ACCORDION QUESTION WRAP
   ============================================================ */

.accordion-question {
    display: flex;

    align-items: center;

    gap: var(--space-4);

    min-width: 0;

    flex: 1 1 auto;
}


/* ============================================================
   12. ACCORDION NUMBER
   ============================================================ */

.accordion-number {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-circle);

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    font-family: var(--font-heading);

    font-size: 0.62rem;

    font-weight: var(--font-semibold);

    line-height: 1;
}


/* ============================================================
   13. ACTIVE NUMBER
   ============================================================ */

.accordion-item.is-open
.accordion-number,

.accordion-item.active
.accordion-number,

.accordion-button[aria-expanded="true"]
.accordion-number {
    color: var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.30);

    background:
        var(--gradient-gold);

    box-shadow:
        0 8px 22px rgba(183, 138, 61, 0.16);
}


/* ============================================================
   14. ACCORDION ICON
   ============================================================ */

.accordion-question-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border:
        1px solid var(--border-gold);

    border-radius:
        12px;

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    font-size: 0.68rem;
}


/* ============================================================
   15. QUESTION TEXT
   ============================================================ */

.accordion-title {
    display: block;

    min-width: 0;

    margin: 0;

    color: inherit;

    font-family: var(--font-heading);

    font-size:
        clamp(0.95rem, 1.4vw, 1.15rem);

    font-weight: var(--font-semibold);

    line-height: 1.4;

    letter-spacing: -0.012em;
}


/* ============================================================
   16. QUESTION SUBTITLE
   ============================================================ */

.accordion-subtitle {
    display: block;

    margin-top: 4px;

    color: var(--text-muted);

    font-family: var(--font-ui);

    font-size: 0.52rem;

    font-weight: var(--font-medium);

    line-height: 1.5;
}


/* ============================================================
   17. ACCORDION TOGGLE
   ============================================================ */

.accordion-toggle {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-circle);

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        transform var(--transition-premium);
}


/* ============================================================
   18. TOGGLE HORIZONTAL LINE
   ============================================================ */

.accordion-toggle::before {
    content: "";

    position: absolute;

    width: 12px;
    height: 1.5px;

    border-radius:
        var(--radius-pill);

    background:
        currentColor;
}


/* ============================================================
   19. TOGGLE VERTICAL LINE
   ============================================================ */

.accordion-toggle::after {
    content: "";

    position: absolute;

    width: 1.5px;
    height: 12px;

    border-radius:
        var(--radius-pill);

    background:
        currentColor;

    transition:
        opacity var(--transition),
        transform var(--transition-premium);
}


/* ============================================================
   20. ACTIVE TOGGLE
   ============================================================ */

.accordion-item.is-open
.accordion-toggle,

.accordion-item.active
.accordion-toggle,

.accordion-button[aria-expanded="true"]
.accordion-toggle {
    color: var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.35);

    background:
        var(--gradient-gold);

    transform:
        rotate(180deg);
}


/* ============================================================
   21. HIDE ACTIVE VERTICAL LINE
   ============================================================ */

.accordion-item.is-open
.accordion-toggle::after,

.accordion-item.active
.accordion-toggle::after,

.accordion-button[aria-expanded="true"]
.accordion-toggle::after {
    opacity: 0;

    transform:
        scaleY(0);
}


/* ============================================================
   22. ACCORDION COLLAPSE
   ============================================================ */

.accordion-collapse {
    display: grid;

    grid-template-rows: 0fr;

    visibility: hidden;

    transition:
        grid-template-rows var(--transition-premium),
        visibility var(--transition);
}


/* ============================================================
   23. OPEN COLLAPSE
   ============================================================ */

.accordion-item.is-open
.accordion-collapse,

.accordion-item.active
.accordion-collapse,

.accordion-collapse.show {
    grid-template-rows: 1fr;

    visibility: visible;
}


/* ============================================================
   24. ACCORDION COLLAPSE INNER
   ============================================================ */

.accordion-collapse-inner {
    min-height: 0;

    overflow: hidden;
}


/* ============================================================
   25. ACCORDION BODY
   ============================================================ */

.accordion-body {
    position: relative;

    padding:
        0
        var(--space-6)
        var(--space-6);

    color: var(--text-body);

    font-size: 0.66rem;

    line-height: 1.8;
}


/* ============================================================
   26. BODY CONTENT OFFSET
   ============================================================ */

.accordion-question.has-number ~
.accordion-toggle {
    margin-left: auto;
}


/* ============================================================
   27. ACCORDION BODY DIVIDER
   ============================================================ */

.accordion-body::before {
    content: "";

    display: block;

    width: 100%;
    height: 1px;

    margin-bottom:
        var(--space-5);

    background:
        linear-gradient(
            90deg,
            rgba(183, 138, 61, 0.28),
            rgba(183, 138, 61, 0.04),
            transparent
        );
}


/* ============================================================
   28. BODY PARAGRAPH
   ============================================================ */

.accordion-body p {
    margin:
        0
        0
        var(--space-4);
}

.accordion-body p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   29. BODY STRONG
   ============================================================ */

.accordion-body strong {
    color: var(--color-primary-deep);

    font-weight: var(--font-semibold);
}


/* ============================================================
   30. BODY LINKS
   ============================================================ */

.accordion-body a {
    color: var(--color-secondary-dark);

    font-weight: var(--font-semibold);

    text-decoration: underline;

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;
}


/* ============================================================
   31. BODY LIST
   ============================================================ */

.accordion-body ul,
.accordion-body ol {
    margin:
        var(--space-4)
        0;

    padding-left:
        var(--space-5);
}

.accordion-body li {
    margin-bottom:
        var(--space-2);
}

.accordion-body li:last-child {
    margin-bottom: 0;
}


/* ============================================================
   32. ACCORDION FLUSH
   ============================================================ */

.accordion-flush {
    gap: 0;
}

.accordion-flush
.accordion-item {
    border-right: 0;
    border-left: 0;

    border-radius: 0;

    box-shadow: none;
}

.accordion-flush
.accordion-item + .accordion-item {
    border-top: 0;
}

.accordion-flush
.accordion-item:hover {
    transform: none;

    box-shadow: none;
}


/* ============================================================
   33. ACCORDION BORDERLESS
   ============================================================ */

.accordion-borderless
.accordion-item {
    border: 0;

    background: transparent;

    box-shadow: none;
}

.accordion-borderless
.accordion-item:hover {
    transform: none;

    box-shadow: none;
}


/* ============================================================
   34. ACCORDION COMPACT
   ============================================================ */

.accordion-compact
.accordion-button {
    min-height: 62px;

    padding:
        var(--space-4)
        var(--space-5);
}

.accordion-compact
.accordion-body {
    padding:
        0
        var(--space-5)
        var(--space-5);
}


/* ============================================================
   35. ACCORDION LARGE
   ============================================================ */

.accordion-lg {
    gap: var(--space-4);
}

.accordion-lg
.accordion-item {
    border-radius:
        var(--radius-xl);
}

.accordion-lg
.accordion-button {
    min-height: 88px;

    padding:
        var(--space-6)
        var(--space-7);
}

.accordion-lg
.accordion-body {
    padding:
        0
        var(--space-7)
        var(--space-7);
}


/* ============================================================
   36. GOLD ACCORDION
   ============================================================ */

.accordion-gold
.accordion-item {
    border-color:
        rgba(183, 138, 61, 0.18);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            rgba(250, 248, 242, 0.88)
        );
}


/* ============================================================
   37. GOLD ACTIVE ITEM
   ============================================================ */

.accordion-gold
.accordion-item.is-open,

.accordion-gold
.accordion-item.active {
    border-color:
        rgba(183, 138, 61, 0.38);

    box-shadow:
        0 20px 55px rgba(183, 138, 61, 0.10);
}


/* ============================================================
   38. DARK ACCORDION
   ============================================================ */

.accordion-dark
.accordion-item {
    border-color:
        rgba(255, 255, 255, 0.09);

    background:
        rgba(255, 255, 255, 0.045);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.10);

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);
}


/* ============================================================
   39. DARK ITEM HOVER
   ============================================================ */

.accordion-dark
.accordion-item:hover {
    border-color:
        rgba(212, 175, 104, 0.18);

    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.14);
}


/* ============================================================
   40. DARK BUTTON
   ============================================================ */

.accordion-dark
.accordion-button {
    color: #ffffff;
}


/* ============================================================
   41. DARK BUTTON HOVER
   ============================================================ */

.accordion-dark
.accordion-button:hover {
    background:
        rgba(255, 255, 255, 0.025);
}


/* ============================================================
   42. DARK ACTIVE BUTTON
   ============================================================ */

.accordion-dark
.accordion-item.is-open
.accordion-button,

.accordion-dark
.accordion-item.active
.accordion-button,

.accordion-dark
.accordion-button[aria-expanded="true"] {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(212, 175, 104, 0.08),
            rgba(255, 255, 255, 0.01)
        );
}


/* ============================================================
   43. DARK TITLE
   ============================================================ */

.accordion-dark
.accordion-title {
    color: #ffffff;
}


/* ============================================================
   44. DARK SUBTITLE
   ============================================================ */

.accordion-dark
.accordion-subtitle {
    color:
        rgba(255, 255, 255, 0.42);
}


/* ============================================================
   45. DARK BODY
   ============================================================ */

.accordion-dark
.accordion-body {
    color:
        rgba(255, 255, 255, 0.58);
}


/* ============================================================
   46. DARK BODY STRONG
   ============================================================ */

.accordion-dark
.accordion-body strong {
    color: #ffffff;
}


/* ============================================================
   47. DARK BODY LINK
   ============================================================ */

.accordion-dark
.accordion-body a {
    color: var(--color-secondary-light);
}


/* ============================================================
   48. DARK BODY DIVIDER
   ============================================================ */

.accordion-dark
.accordion-body::before {
    background:
        linear-gradient(
            90deg,
            rgba(212, 175, 104, 0.28),
            rgba(255, 255, 255, 0.04),
            transparent
        );
}


/* ============================================================
   49. DARK TOGGLE
   ============================================================ */

.accordion-dark
.accordion-toggle {
    color: var(--color-secondary-light);

    border-color:
        rgba(212, 175, 104, 0.18);

    background:
        rgba(212, 175, 104, 0.07);
}


/* ============================================================
   50. FAQ ACCORDION
   ============================================================ */

.faq-accordion {
    max-width: 920px;

    margin:
        0
        auto;
}


/* ============================================================
   51. FAQ TWO COLUMN WRAPPER
   ============================================================ */

.faq-accordion-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: start;

    gap:
        var(--space-4);
}


/* ============================================================
   52. FAQ COLUMN
   ============================================================ */

.faq-accordion-column {
    display: flex;

    flex-direction: column;

    gap: var(--space-3);
}


/* ============================================================
   53. FAQ CATEGORY
   ============================================================ */

.accordion-category {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    margin-bottom:
        var(--space-4);

    color: var(--color-secondary-dark);

    font-family: var(--font-ui);

    font-size: 0.52rem;

    font-weight: var(--font-bold);

    line-height: 1;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


/* ============================================================
   54. FAQ CATEGORY DOT
   ============================================================ */

.accordion-category::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius:
        var(--radius-circle);

    background:
        var(--color-secondary);

    box-shadow:
        0 0 0 5px rgba(183, 138, 61, 0.07);
}


/* ============================================================
   55. ACCORDION WITH IMAGE
   ============================================================ */

.accordion-content-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(180px, 0.38fr);

    gap: var(--space-5);

    align-items: center;
}


/* ============================================================
   56. ACCORDION IMAGE
   ============================================================ */

.accordion-image {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    border-radius:
        var(--radius-md);

    overflow: hidden;

    background: var(--bg-soft);
}


/* ============================================================
   57. ACCORDION IMAGE IMG
   ============================================================ */

.accordion-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* ============================================================
   58. ACCORDION BADGE
   ============================================================ */

.accordion-badge {
    display: inline-flex;

    align-items: center;

    min-height: 25px;

    padding:
        0
        10px;

    margin-left:
        var(--space-2);

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-pill);

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    font-family: var(--font-ui);

    font-size: 0.44rem;

    font-weight: var(--font-bold);

    line-height: 1;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


/* ============================================================
   59. ACCORDION ACTION
   ============================================================ */

.accordion-action {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--space-3);

    margin-top:
        var(--space-5);
}


/* ============================================================
   60. ACCORDION FOOTER
   ============================================================ */

.accordion-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-4);

    margin-top:
        var(--space-5);

    padding-top:
        var(--space-4);

    border-top:
        1px solid var(--border-light);
}


/* ============================================================
   61. ACCORDION FOOTER TEXT
   ============================================================ */

.accordion-footer-text {
    color: var(--text-muted);

    font-family: var(--font-ui);

    font-size: 0.52rem;

    line-height: 1.5;
}


/* ============================================================
   62. ACCORDION FOCUS
   ============================================================ */

.accordion-button:focus-visible {
    outline:
        2px solid var(--color-secondary);

    outline-offset:
        -3px;
}


/* ============================================================
   63. NO HOVER MOVEMENT
   ============================================================ */

.accordion-static
.accordion-item:hover {
    transform: none;
}


/* ============================================================
   64. TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .accordion-lg
    .accordion-button {
        padding:
            var(--space-5)
            var(--space-6);
    }

    .accordion-lg
    .accordion-body {
        padding:
            0
            var(--space-6)
            var(--space-6);
    }

    .faq-accordion-grid {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   65. MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .accordion {
        gap: var(--space-3);
    }

    .accordion-item {
        border-radius:
            var(--radius-md);
    }

    .accordion-button {
        min-height: 68px;

        gap: var(--space-4);

        padding:
            var(--space-4)
            var(--space-5);
    }

    .accordion-body {
        padding:
            0
            var(--space-5)
            var(--space-5);

        font-size: 0.64rem;
    }

    .accordion-title {
        font-size:
            clamp(0.9rem, 3vw, 1.05rem);
    }

    .accordion-toggle {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }

    .accordion-number {
        width: 31px;
        height: 31px;

        flex-basis: 31px;
    }

    .accordion-content-grid {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   66. SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {

    .accordion-button {
        min-height: 64px;

        padding:
            var(--space-4);
    }

    .accordion-question {
        gap: var(--space-3);
    }

    .accordion-body {
        padding:
            0
            var(--space-4)
            var(--space-4);
    }

    .accordion-body::before {
        margin-bottom:
            var(--space-4);
    }

    .accordion-title {
        font-size: 0.9rem;

        line-height: 1.35;
    }

    .accordion-subtitle {
        font-size: 0.49rem;
    }

    .accordion-number {
        width: 28px;
        height: 28px;

        flex-basis: 28px;

        font-size: 0.55rem;
    }

    .accordion-question-icon {
        width: 32px;
        height: 32px;

        flex-basis: 32px;

        border-radius: 10px;
    }

    .accordion-toggle {
        width: 32px;
        height: 32px;

        flex-basis: 32px;
    }

    .accordion-toggle::before {
        width: 10px;
    }

    .accordion-toggle::after {
        height: 10px;
    }

    .accordion-footer {
        align-items: flex-start;

        flex-direction: column;
    }

    .accordion-action {
        align-items: stretch;

        flex-direction: column;
    }

    .accordion-action
    .btn {
        width: 100%;
    }

}


/* ============================================================
   67. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 374.98px) {

    .accordion-button {
        gap: var(--space-3);

        padding:
            14px;
    }

    .accordion-number,
    .accordion-question-icon {
        display: none;
    }

    .accordion-body {
        padding:
            0
            14px
            14px;
    }

}


/* ============================================================
   68. TOUCH DEVICES
   ============================================================ */

@media (hover: none) {

    .accordion-item:hover {
        transform: none;
    }

}


/* ============================================================
   69. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .accordion-item,
    .accordion-button,
    .accordion-toggle,
    .accordion-toggle::after,
    .accordion-collapse,
    .accordion-item::before {
        transition: none;
    }

    .accordion-item:hover {
        transform: none;
    }

}


/* ============================================================
   END OF ULTRA PREMIUM ACCORDION SYSTEM
   ============================================================ */
```