/**
 * Uncode Accordion Extensions
 * Custom styling for extended accordion options
 * Uses Okuvision global CSS variables for consistent design
 *
 */

/* 
   GLOBAL ACCORDION RESETS
   */

/* Remove unwanted borders from Uncode theme */
.w-border .panel {
    border-top: none;
}

.panel-group .panel:last-child {
    border-bottom: none;
}

.panel-group .panel-heading + .panel-collapse:before {
    border-bottom: none;
}

.uncode-accordion:not(.default-typography) .panel-title > a > span {
    font-size: 16px;
}

/* 
   PANEL SPACING & LAYOUT
   */

/* Spacing between accordion panels */
.uncode-accordion[class*="cvc-"] .panel:not(:last-child),
.wpb_accordion[class*="cvc-"] .panel:not(:last-child) {
    margin-bottom: var(--oku-spacing-xs);
}

/* Panel heading padding */
.panel:not(.has-padding) .panel-title > a {
    padding: var(--oku-spacing-md);
}

/* Panel body padding */
.panel-body {
    padding-left: var(--oku-spacing-md);
    padding-right: var(--oku-spacing-md);
    padding-top: var(--oku-spacing-md);
    padding-bottom: var(--oku-spacing-md);
}

/* Content padding (no top padding) */
/* .single-block-padding {
    padding: 0 var(--oku-spacing-md) var(--oku-spacing-md) var(--oku-spacing-md);
} */

/* 
   BACKGROUND COLORS
   */

/* White Background */
.uncode-accordion.cvc-background-white .panel,
.wpb_accordion.cvc-background-white .panel,
.uncode-accordion.cvc-background-white .panel-body,
.wpb_accordion.cvc-background-white .panel-body {
    background-color: var(--oku-color-white);
}

/* Light Gray Background */
.uncode-accordion.cvc-background-light-gray .panel,
.wpb_accordion.cvc-background-light-gray .panel,
.uncode-accordion.cvc-background-light-gray .panel-body,
.wpb_accordion.cvc-background-light-gray .panel-body {
    background-color: var(--oku-color-gray-light);
}

/* Reset panel-heading background (we style the panel itself) */
.uncode-accordion[class*="cvc-color-scheme"] .panel-heading,
.wpb_accordion[class*="cvc-color-scheme"] .panel-heading {
    background-color: transparent !important;
}

/* 
   ACCORDION ICONS
   */

/* Base icon styling */
.uncode-accordion[class*="cvc-color-scheme"] .panel-title > a > span:after,
.wpb_accordion[class*="cvc-color-scheme"] .panel-title > a > span:after {
    /* Positioning */
    position: absolute;
    top: 50%;
    right: var(--oku-spacing-md);
    transform: translateY(-50%);
    
    /* Circular design */
    width: var(--oku-spacing-xl);
    height: var(--oku-spacing-xl);
    border-radius: var(--oku-border-radius-circle);
    
    /* Flexbox centering */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Typography */
    font-family: "uncodeicon";
    font-size: var(--oku-spacing-sm);
    font-weight: normal;
    line-height: 1;
    
    /* Transitions */
    transition: transform var(--oku-transition-normal), background-color var(--oku-transition-normal);
    transform-origin: center;
}

/* 
   COLOR SCHEME - ORANGE
   */

/* Orange icons */
.uncode-accordion.cvc-color-scheme-orange .panel-title > a > span:after,
.wpb_accordion.cvc-color-scheme-orange .panel-title > a > span:after {
    background-color: var(--oku-color-orange);
    color: var(--oku-color-black) !important;
}

/* Orange hover state */
.uncode-accordion.cvc-color-scheme-orange .panel-heading:hover .panel-title > a > span:after,
.wpb_accordion.cvc-color-scheme-orange .panel-heading:hover .panel-title > a > span:after {
    background-color: var(--oku-color-orange-hover);
}

/* Orange expanded state */
.uncode-accordion.cvc-color-scheme-orange .panel-heading[aria-expanded="true"] .panel-title > a > span:after,
.wpb_accordion.cvc-color-scheme-orange .panel-heading[aria-expanded="true"] .panel-title > a > span:after,
.uncode-accordion.cvc-color-scheme-orange .panel-title.active > a span:after,
.wpb_accordion.cvc-color-scheme-orange .panel-title.active > a span:after {
    transform: translateY(-50%) rotate(45deg);
    background-color: var(--oku-color-orange-hover);
}

/* Orange title hover */
.style-light .uncode-accordion.cvc-color-scheme-orange .panel-title > a:hover,
.style-light .wpb_accordion.cvc-color-scheme-orange .panel-title > a:hover,
.style-light .uncode-accordion.cvc-color-scheme-orange .panel-title > a:focus,
.style-light .wpb_accordion.cvc-color-scheme-orange .panel-title > a:focus {
    color: var(--oku-color-orange) !important;
}

/* 
   COLOR SCHEME - VIOLET
   */

/* Violet icons */
.uncode-accordion.cvc-color-scheme-violet .panel-title > a > span:after,
.wpb_accordion.cvc-color-scheme-violet .panel-title > a > span:after {
    background-color: var(--oku-color-violet);
    color: var(--oku-color-white) !important;
}

/* Violet hover state */
.uncode-accordion.cvc-color-scheme-violet .panel-heading:hover .panel-title > a > span:after,
.wpb_accordion.cvc-color-scheme-violet .panel-heading:hover .panel-title > a > span:after {
    background-color: var(--oku-color-violet-hover);
}

/* Violet expanded state */
.uncode-accordion.cvc-color-scheme-violet .panel-heading[aria-expanded="true"] .panel-title > a > span:after,
.wpb_accordion.cvc-color-scheme-violet .panel-heading[aria-expanded="true"] .panel-title > a > span:after,
.uncode-accordion.cvc-color-scheme-violet .panel-title.active > a span:after,
.wpb_accordion.cvc-color-scheme-violet .panel-title.active > a span:after {
    transform: translateY(-50%) rotate(45deg);
    background-color: var(--oku-color-violet-hover);
}

/* Violet title hover */
.style-light .uncode-accordion.cvc-color-scheme-violet .panel-title > a:hover,
.style-light .wpb_accordion.cvc-color-scheme-violet .panel-title > a:hover,
.style-light .uncode-accordion.cvc-color-scheme-violet .panel-title > a:focus,
.style-light .wpb_accordion.cvc-color-scheme-violet .panel-title > a:focus {
    color: var(--oku-color-violet) !important;
}

/* 
   RESPONSIVE DESIGN
   */

@media (max-width: var(--oku-breakpoint-md)) {
    /* Smaller padding on mobile */
    .uncode-accordion[class*="cvc-"] .panel-heading,
    .wpb_accordion[class*="cvc-"] .panel-heading {
        padding: var(--oku-spacing-sm) var(--oku-spacing-md);
    }
    
    .uncode-accordion[class*="cvc-"] .panel-body,
    .wpb_accordion[class*="cvc-"] .panel-body {
        padding: var(--oku-spacing-md);
    }
    
    /* Smaller icons on mobile */
    .uncode-accordion[class*="cvc-"] .panel-title > a > span:after,
    .wpb_accordion[class*="cvc-"] .panel-title > a > span:after {
        width: var(--oku-spacing-lg);
        height: var(--oku-spacing-lg);
        right: var(--oku-spacing-sm);
        font-size: calc(var(--oku-spacing-sm) * 0.8);
    }
}