/* Fix for large arrow icon issue */
.vertical-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1002;
    display: none;
}

/* Fix for Remix Icon (ri-*) classes */
[class^="ri-"], 
[class*=" ri-"] {
    font-size: inherit;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

/* Ensure all arrow icons have reasonable size */
.ri-arrow-right-line,
.ri-arrow-left-line,
.ri-arrow-up-line,
.ri-arrow-down-line,
.ri-arrow-right-s-line,
.ri-arrow-left-s-line,
.ri-arrow-up-s-line,
.ri-arrow-down-s-line {
    font-size: 1rem;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* Fix for custom SVG chevron/arrow icons */
svg[fill-rule="evenodd"],
svg path[d*="M12.707 5.293"],
svg path[d*="chevron"],
svg path[d*="arrow"] {
    max-width: 1rem !important;
    max-height: 1rem !important;
    width: 1rem !important;
    height: 1rem !important;
}

/* Fix for SVG containers that might be oversized */
.btn svg,
.pagination svg,
[class*="arrow"] svg,
[class*="chevron"] svg,
svg {
    max-width: 1rem !important;
    max-height: 1rem !important;
    width: 1rem !important;
    height: 1rem !important;
}

/* Global SVG size constraint for any oversized icons */
svg:not([class*="logo"]):not([class*="banner"]):not([class*="image"]) {
    max-width: 1.2rem !important;
    max-height: 1.2rem !important;
}

/* Force all potential arrow/navigation SVGs to be small */
*[role="button"] svg,
button svg,
a svg {
    max-width: 1rem !important;
    max-height: 1rem !important;
    width: 1rem !important;
    height: 1rem !important;
}

/* Fix for pagination arrow buttons specifically */
.pagination .page-link svg,
.page-link svg {
    max-width: 0.875rem !important;
    max-height: 0.875rem !important;
    width: 0.875rem !important;
    height: 0.875rem !important;
}