/**
 * Okuvision Global CSS Variables
 *
 * Global design tokens for all Okuvision plugins and components
 * These variables are used across all plugins for consistency
 *
 * NOTE: Pattern variables moved to okuvision-patterns.css (v1.1.0)
 *
 * @package Okuvision
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties (Global Variables)
   ========================================================================== */

:root {


    /* =====
       Typography
       ===== */
    
    --oku-font-weight-normal: 300;
    --oku-font-weight-medium: 500;

    /* =====
       Colors
       ===== */
    
    /* Primary Colors */
    --oku-color-orange: rgba(239, 123, 0, 1);
    --oku-color-orange-hover: rgba(213, 109, 0, 1);
    --oku-color-orange-75: rgba(239, 123, 0, 0.75);
    --oku-color-orange-50: rgba(239, 123, 0, 0.5);
    --oku-color-violet: rgba(70, 41, 148, 1);
    --oku-color-violet-hover: rgba(59, 34, 125, 1);
    --oku-color-black: rgba(0, 0, 0, 1);
    --oku-color-black-muted: rgba(0, 0, 0, 0.2);
    
    /* Neutral Colors */
    --oku-color-white: rgba(255, 255, 255, 1);
    --oku-color-white-50: rgba(255, 255, 255, 0.5);
    --oku-color-gray-light: rgba(240, 242, 242, 1);
    --oku-color-gray: rgba(128, 128, 128, 1);
    --oku-color-gray-dark: rgba(64, 64, 64, 1);
    --oku-color-ice-blue: rgba(205, 223, 237, 1);
    
    /* =====
       Spacing
       ===== */
    
    /* Base spacing unit (16px) */
    --oku-spacing-base: 1rem;
    
    /* Spacing scale */
    --oku-spacing-xs: calc(var(--oku-spacing-base) * 0.5);   /* 8px */
    --oku-spacing-sm: calc(var(--oku-spacing-base) * 0.75);  /* 12px */
    --oku-spacing-md: var(--oku-spacing-base);               /* 16px */
    --oku-spacing-lg: calc(var(--oku-spacing-base) * 1.5);   /* 24px */
    --oku-spacing-xl: calc(var(--oku-spacing-base) * 2.25);  /* 36px - Uncode Row/Column Padding */
    --oku-spacing-xxl: calc(var(--oku-spacing-base) * 3);    /* 48px */
    --oku-spacing-xxxl: calc(var(--oku-spacing-base) * 4);   /* 64px */
    
    /* =====
       Borders
       ===== */
    
    --oku-border-standard: 1px solid var(--oku-color-ice-blue);
    
    /* =====
       Border Radius
       ===== */
    
    --oku-border-radius-sm: 4px;
    --oku-border-radius-md: 8px;
    --oku-border-radius-lg: 12px;
    --oku-border-radius-xl: 16px;
    --oku-border-radius-circle: 50%; /* Für echte Kreise - immer rund */
    --oku-border-radius-pill: 50px; /* Für Pills - feste Rundung */
    
    /* =====
       Shadows
       ===== */
    
    --oku-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --oku-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    --oku-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    --oku-shadow-xl: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    
    /* =====
       Transitions
       ===== */
    
    --oku-transition-fast: 0.15s ease;
    --oku-transition-base: 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    --oku-transition-normal: 0.2s ease;
    --oku-transition-slow: 0.3s ease;
    
    /* =====
       Z-Index Scale
       ===== */
    
    --oku-z-index-base: 1;
    --oku-z-index-content: 10;
    --oku-z-index-above: 20;
    --oku-z-index-overlay: 100;
    --oku-z-index-dropdown: 1000;
    --oku-z-index-sticky: 1020;
    --oku-z-index-fixed: 1030;
    --oku-z-index-modal-backdrop: 1040;
    --oku-z-index-modal: 1050;
    --oku-z-index-popover: 1060;
    --oku-z-index-tooltip: 1070;

    /* =====
       Breakpoints (matching Uncode theme)
       ===== */
    
    --oku-breakpoint-xs: 569px;   /* Mobile XS max-width */
    --oku-breakpoint-sm: 570px;   /* Tablet min-width */
    --oku-breakpoint-md: 959px;   /* Mobile/Tablet max-width */
    --oku-breakpoint-lg: 960px;   /* Desktop min-width */
    --oku-breakpoint-xl: 1499px;  /* Large desktop max-width */
    --oku-breakpoint-xxl: 1500px; /* Extra large desktop min-width */
    
    /* =====
       Container Widths
       ===== */
    
    --oku-container-width: 1200px;      /* Standard content container */
    --oku-container-wide: 1920px;       /* Wide container (full-width elements) */
    --oku-container-extra-wide: 2200px; /* Extra wide container */
}

/* =====
   Buttons
   ===== */

/* Button Sizes */
:root {
    --oku-button-padding-sm: var(--oku-spacing-sm) var(--oku-spacing-lg);
    --oku-button-padding-md: var(--oku-spacing-md) var(--oku-spacing-xl);
    --oku-button-padding-lg: var(--oku-spacing-lg) var(--oku-spacing-xxl);
    
    --oku-button-font-size-xs: calc(var(--oku-spacing-base) * 0.75);    /* 12px */
    --oku-button-font-size-sm: calc(var(--oku-spacing-base) * 0.875);  /* 14px */
    --oku-button-font-size-md: var(--oku-spacing-base);                 /* 16px */
    --oku-button-font-size-lg: calc(var(--oku-spacing-base) * 1.125);   /* 18px */
    
    --oku-button-border-radius: calc(var(--oku-spacing-base) * 3.125);  /* 50px */
    --oku-button-border-width: 1px;
    --oku-button-font-weight: 500;
    --oku-button-gap: var(--oku-spacing-xs);  /* 8px */
}

/* ==========================================================================
   Okuvision Button System - Globale Button-Klassen
   ========================================================================== */

.oku-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--oku-button-gap);
    
    font-family: inherit;
    font-weight: var(--oku-button-font-weight);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    
    border: var(--oku-button-border-width) solid;
    border-radius: var(--oku-button-border-radius);
    transition: var(--oku-transition-normal);
    
    line-height: 1.2;
}

/* Button Sizes */
.oku-button-sm {
    padding: var(--oku-button-padding-sm);
    font-size: var(--oku-button-font-size-sm);
}

.oku-button-md {
    padding: var(--oku-button-padding-md);
    font-size: var(--oku-button-font-size-md);
}

.oku-button-lg {
    padding: var(--oku-button-padding-lg);
    font-size: var(--oku-button-font-size-lg);
}

/* Button Variants - Smart Color System */

/* Orange Buttons */
.oku-button-orange {
    background-color: transparent;
    border-color: var(--oku-color-orange);
    color: var(--oku-color-orange) !important;
}

.oku-button-orange:hover {
    background-color: var(--oku-color-orange);
    border-color: var(--oku-color-orange);
    color: var(--oku-color-white) !important;
}

/* Violet Buttons */
.oku-button-violet {
    background-color: transparent;
    border-color: var(--oku-color-violet);
    color: var(--oku-color-violet) !important;
}

.oku-button-violet:hover {
    background-color: var(--oku-color-violet);
    border-color: var(--oku-color-violet);
    color: var(--oku-color-white) !important;
}


/* Solid Variants (falls benötigt) */
.oku-button-orange-solid {
    background-color: var(--oku-color-orange);
    border-color: var(--oku-color-orange);
    color: var(--oku-color-white) !important;
}

.oku-button-orange-solid:hover {
    background-color: var(--oku-color-orange-hover);
    border-color: var(--oku-color-orange-hover);
    color: var(--oku-color-white) !important;
}

.oku-button-violet-solid {
    background-color: var(--oku-color-violet);
    border-color: var(--oku-color-violet);
    color: var(--oku-color-white) !important;
}

.oku-button-violet-solid:hover {
    background-color: var(--oku-color-violet-hover);
    border-color: var(--oku-color-violet-hover);
    color: var(--oku-color-white) !important;
}

/* White Buttons (for dark backgrounds) */
.oku-button-white {
    background-color: transparent;
    border-color: var(--oku-color-white);
    color: var(--oku-color-white) !important;
}

.oku-button-white:hover {
    background-color: var(--oku-color-white);
    border-color: var(--oku-color-white);
    color: var(--oku-color-black) !important;
}

.oku-button-white-solid {
    background-color: var(--oku-color-white);
    border-color: var(--oku-color-white);
    color: var(--oku-color-black) !important;
}

.oku-button-white-solid:hover {
    background-color: var(--oku-color-gray-light);
    border-color: var(--oku-color-gray-light);
    color: var(--oku-color-black) !important;
}

/* Icon inside buttons */
.oku-button i {
    font-size: 0.9em;
}

/* ==========================================================================
   Accessibility - Focus States for Buttons
   ========================================================================== */

.oku-button:focus {
    outline: 2px solid var(--oku-color-orange);
    outline-offset: 2px;
}

.oku-button:focus-visible {
    outline: 2px solid var(--oku-color-orange);
    outline-offset: 2px;
}


/* ==========================================================================
   Okuvision Filter System - Globale Filter-Elemente
   ========================================================================== */

/* Filter Container */
.oku-filters-fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

/* .oku-filters-legend - Screen reader only, styled by .screen-reader-text */

.oku-filters-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--oku-spacing-md);
}

.oku-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Filter Labels */
.oku-filter-group label,
.oku-filter-label {
    font-size: var(--oku-button-font-size-xs);
    color: var(--oku-color-black);
    line-height: 1.4;
}

/* Filter Selects und Inputs */
.oku-filter-select,
.oku-filter-input {
    padding: var(--oku-spacing-sm) var(--oku-spacing-md);
    margin: 0px;
    border: var(--oku-border-standard);
    border-radius: var(--oku-border-radius-sm);
    background-color: var(--oku-color-white);
    color: var(--oku-color-black);
    transition: var(--oku-transition-normal);
    min-height: 48px;
    width: 100%;
    box-sizing: border-box;
}

.oku-filter-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--oku-spacing-sm) center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
}

.oku-filter-select:focus,
.oku-filter-input:focus {
    outline: 2px solid var(--oku-color-orange);
    outline-offset: 2px;
    border-color: var(--oku-color-orange);
}

.oku-filter-select:hover,
.oku-filter-input:hover {
    border-color: var(--oku-color-orange);
}

/* Placeholder Styling */
.oku-filter-input::placeholder {
    color: var(--oku-color-black-muted);
    opacity: 1; /* Ensure consistent opacity across browsers */
}

.oku-filter-input::-webkit-input-placeholder {
    color: var(--oku-color-black-muted);
}

.oku-filter-input::-moz-placeholder {
    color: var(--oku-color-black-muted);
    opacity: 1;
}

.oku-filter-input:-ms-input-placeholder {
    color: var(--oku-color-black-muted);
}

/* Keyboard navigation support */
.oku-filter-select:focus-visible,
.oku-filter-input:focus-visible {
    outline: 2px solid var(--oku-color-orange);
    outline-offset: 2px;
}

/* Responsive Filter Design */
@media (max-width: 959px) {
    .oku-filters-row {
        grid-template-columns: 1fr !important;
        gap: var(--oku-spacing-sm) !important;
    }
    
    .oku-filter-group {
        gap: var(--oku-spacing-xs);
    }
}

@media (max-width: 569px) {
    .oku-filters-row {
        gap: var(--oku-spacing-xs) !important;
    }
}

/* ==========================================================================
   Okuvision Pills System - Global Styling for Tags/Categories
   ========================================================================== */

.oku-pill {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--oku-spacing-base) * 0.25) var(--oku-spacing-sm);
    background-color: transparent;
    border: 1px solid var(--oku-color-violet);
    color: var(--oku-color-violet);
    border-radius: var(--oku-border-radius-pill);
    font-size: var(--oku-button-font-size-xs);
    line-height: 1.4;
    white-space: nowrap;
}

/* Pills Container */
.oku-download-pills,
.oku-bezugsquelle-pills {
    display: flex;
    gap: var(--oku-spacing-sm);
    flex-wrap: wrap;
}

/* Responsive Pills */
@media (max-width: 569px) {
    .oku-pill {
        font-size: calc(var(--oku-button-font-size-xs) * 0.9);
        padding: calc(var(--oku-spacing-base) * 0.2) calc(var(--oku-spacing-sm) * 0.8);
    }
}

/* ==========================================================================
   Uncode Theme Integration - Apply Okuvision Colors to Theme Elements
   ========================================================================== */

.style-light .ui-br,
.style-dark .style-light .ui-br,
.style-light hr,
.style-dark .style-light hr,
.style-light pre,
.style-dark .style-light pre,
.style-light table,
.style-dark .style-light table,
.style-light table td,
.style-dark .style-light table td,
.style-light table th,
.style-dark .style-light table th,
.style-light input,
.style-dark .style-light input,
.style-light textarea,
.style-dark .style-light textarea,
.style-light select,
.style-dark .style-light select,
.style-light .seldiv,
.style-dark .style-light .seldiv,
.style-light .select2-choice,
.style-dark .style-light .select2-choice,
.style-light .select2-selection--single,
.style-dark .style-light .select2-selection--single,
.style-light fieldset,
.style-dark .style-light fieldset,
.style-light .seldiv:before,
.style-dark .style-light .seldiv:before,
.style-light .tab-container .nav-tabs,
.style-dark .style-light .tab-container .nav-tabs,
.style-light .nav-tabs > li.active > a,
.style-dark .style-light .nav-tabs > li.active > a,
.style-light .border-100 .tab-content::before,
.style-dark .style-light .border-100 .tab-content::before,
.style-light .tab-content.vertical,
.style-dark .style-light .tab-content.vertical,
.style-light .nav-tabs.tabs-vertical > li,
.style-dark .style-light .nav-tabs.tabs-vertical > li,
.style-light .panel,
.style-dark .style-light .panel,
.style-light .panel-group .panel-heading + .panel-collapse:before,
.style-dark .style-light .panel-group .panel-heading + .panel-collapse:before,
.style-light .divider:before,
.style-dark .style-light .divider:before,
.style-light .divider:after,
.style-dark .style-light .divider:after,
.style-light .plan,
.style-dark .style-light .plan,
.style-light .plan .plan-title,
.style-dark .style-light .plan .plan-title,
.style-light .plan .item-list > li,
.style-dark .style-light .plan .item-list > li,
.style-light .plan .plan-button,
.style-dark .style-light .plan .plan-button,
.style-light .uncode-single-media-wrapper.img-thumbnail:not(.single-advanced),
.style-dark .style-light .uncode-single-media-wrapper.img-thumbnail:not(.single-advanced),
.style-light .post-share,
.style-dark .style-light .post-share,
.style-light .post-tag-share-container,
.style-dark .style-light .post-tag-share-container,
.style-light .widget-container .widget-title,
.style-dark .style-light .widget-container .widget-title,
.style-light .widget-container.widget_calendar #wp-calendar caption,
.style-dark .style-light .widget-container.widget_calendar #wp-calendar caption,
.style-light .widget-container.widget_calendar .wp-calendar-nav,
.style-dark .style-light .widget-container.widget_calendar .wp-calendar-nav,
.style-light #comments .comment-list .comments-list:first-child,
.style-dark .style-light #comments .comment-list .comments-list:first-child,
.style-light #respond .comment-list .comments-list:first-child,
.style-dark .style-light #respond .comment-list .comments-list:first-child,
.style-light #comments .comments-list .comment-content,
.style-dark .style-light #comments .comments-list .comment-content,
.style-light #respond .comments-list .comment-content,
.style-dark .style-light #respond .comments-list .comment-content,
.style-light ul.dwls_search_results,
.style-dark .style-light ul.dwls_search_results,
.style-light ul.dwls_search_results li,
.style-dark .style-light ul.dwls_search_results li,
.style-light .ajax-filter-sidebar .ajax-filter-sidebar-header,
.style-dark .style-light .ajax-filter-sidebar .ajax-filter-sidebar-header,
.style-light .ajax-filter-sidebar .ajax-filter-sidebar-footer,
.style-dark .style-light .ajax-filter-sidebar .ajax-filter-sidebar-footer,
.style-light .swatch-type-label,
.style-dark .style-light .swatch-type-label,
.style-light .swatch--logo,
.style-dark .style-light .swatch--logo,
.style-light .widget-container .tagcloud a,
.style-dark .style-light .widget-container .tagcloud a {
  border-color: var(--oku-color-ice-blue) !important;
}


/* ==========================================================================
   Uncode Row Padding Overrides
   ========================================================================== */

@media (max-width: 569px) {
    .main-container .row-inner > div:not(.vc_helper){
        padding: 0px 0px 0px 0px !important;
    }
}



/* ==========================================================================
   Uncode Blog Post Grid Overrides - Match .oku-pill Style
   ========================================================================== */

/* Override Uncode category styling to match outlined violet pills */
.t-entry-category a,
.t-entry-category a.style-accent-bg,
.t-entry-category a.tmb-term-evidence,
.t-entry-category a.style-accent-bg.tmb-term-evidence,
.t-entry-category a.style-accent-bg.tmb-term-evidence.font-ui {
    background-color: transparent !important;
    background-image: none !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: calc(var(--oku-spacing-base) * 0.25) var(--oku-spacing-sm) !important;
    border: 1px solid var(--oku-color-violet) !important;
    color: var(--oku-color-violet) !important;
    border-radius: 50px !important; /* Fixed value for pill shape */
    font-size: var(--oku-button-font-size-xs) !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

/* Hover state */
.t-entry-category a:hover,
.t-entry-category a.style-accent-bg:hover,
.t-entry-category a.tmb-term-evidence:hover,
.t-entry-category a.style-accent-bg.tmb-term-evidence:hover,
.t-entry-category a.style-accent-bg.tmb-term-evidence.font-ui:hover {
    background-color: var(--oku-color-violet) !important;
    color: var(--oku-color-white) !important;
    border-color: var(--oku-color-violet) !important;
}

/* Category container spacing - match Hero Image categories */
.t-entry-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--oku-spacing-xs) !important;
    align-items: center !important;
}

.t-entry-category {
    display: inline-flex !important;
}

/* Responsive */
@media (max-width: 569px) {
    .t-entry-category a,
    .t-entry-category a.style-accent-bg,
    .t-entry-category a.tmb-term-evidence,
    .t-entry-category a.style-accent-bg.tmb-term-evidence,
    .t-entry-category a.style-accent-bg.tmb-term-evidence.font-ui {
        font-size: calc(var(--oku-button-font-size-xs) * 0.9) !important;
        padding: calc(var(--oku-spacing-base) * 0.2) calc(var(--oku-spacing-sm) * 0.8) !important;
    }
}

/* ==========================================================================
   Ajax Filter Sidebar Overrides - Match .oku-pill Style
   ========================================================================== */

/* Default filter state - outlined violet (gleiche Größe wie .oku-button-sm) */
.term-filter-link {
    background-color: transparent !important;
    background-image: none !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: var(--oku-button-padding-sm) !important; /* sm: var(--oku-spacing-sm) var(--oku-spacing-lg) */
    border: 1px solid var(--oku-color-violet) !important;
    color: var(--oku-color-violet) !important;
    border-radius: var(--oku-button-border-radius) !important; /* 50px */
    font-size: var(--oku-button-font-size-sm) !important; /* 14px */
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-weight: var(--oku-button-font-weight) !important; /* 500 */
    text-transform: none !important;
}

/* Inner swatch - remove all styling, inherit from parent */
.term-filter-link .swatch-type-label,
.term-filter-link .swatch,
.term-filter-link .swatch--single {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    text-transform: inherit !important;
    display: block !important; /* Wichtig für korrekte Zentrierung */
    width: auto !important;
    height: auto !important;
}

/* Active filter state - solid violet */
.term-filter-link--active {
    background-color: var(--oku-color-violet) !important;
    color: var(--oku-color-white) !important;
    border-color: var(--oku-color-violet) !important;
}

/* Hover state - outlined filters */
.term-filter-link:not(.term-filter-link--active):hover {
    background-color: var(--oku-color-violet) !important;
    color: var(--oku-color-white) !important;
    border-color: var(--oku-color-violet) !important;
}

/* Filter list spacing - Abstand passend zu Button-Größe, zentriert */
.term-filters-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--oku-spacing-sm) !important; /* Abstand passend zu sm-Button */
    align-items: center !important;
    justify-content: center !important; /* Zentriert die Buttons horizontal */
}

.term-filters-list li {
    margin: 0 !important;
}

/* Responsive - Mobile */
@media (max-width: 569px) {
    .term-filter-link {
        font-size: var(--oku-button-font-size-xs) !important; /* 12px auf Mobile */
        padding: calc(var(--oku-spacing-xs) * 1.5) var(--oku-spacing-md) !important; /* Etwas kompakter */
    }
}

/* Responsive - Mobile + Tablet */
@media (max-width: 959px) {
    /* Ajax Filter Sidebar - weißer Hintergrund auf Mobile & Tablet */
    .ajax-filter-sidebar-body {
        background-color: var(--oku-color-white) !important;
    }
    /* Ajax Filter Widget - Padding am äußeren Wrapper */
    .uncode_widget.widget-ajax-filters,
    .widget-ajax-filters {
        padding: var(--oku-spacing-md) !important;
    }
}

/* ==========================================================================
   Uncode List Style Overrides - Orange Line Bullets
   Only applies to lists inside .uncode_text_column (Text Block element)
   Excludes: .icons lists, .no-list, navigation, etc.
   ========================================================================== */

/* Remove default list style and add orange line bullets */
.uncode_text_column ul:not(.no-list):not(.icons):not(.navigation):not(.pagination):not(.term-filters-list):not(.uncode-woocommerce-sorting-dropdown):not(.nav-tabs) {
    list-style: none !important;
    padding-left: var(--oku-spacing-lg) !important;
}

/* Orange line bullet via ::before pseudo-element */
.uncode_text_column ul:not(.no-list):not(.icons):not(.navigation):not(.pagination):not(.term-filters-list):not(.uncode-woocommerce-sorting-dropdown):not(.nav-tabs) > li {
    position: relative;
}

.uncode_text_column ul:not(.no-list):not(.icons):not(.navigation):not(.pagination):not(.term-filters-list):not(.uncode-woocommerce-sorting-dropdown):not(.nav-tabs) > li::before {
    content: '';
    position: absolute;
    left: calc(var(--oku-spacing-lg) * -1);
    top: 0.7em;
    width: 16px;
    height: 4px;
    background-color: var(--oku-color-orange);
    border-radius: 2px;
}