/* "untied" HelpScout Custom Branding CSS */
/* Brand Colors: #0C90B2 blue, #234B5C dark blue, #84C8D9 light blue, #F3F9FB off-white, #FF015A bright pink, #D10049 hyperlink pink */

/* ========================================
   GLOBAL FONT FAMILY
   ======================================== */

/* Apply Arial/Helvetica to text elements only, not icons */
body,
html,
h1, h2, h3, h4, h5, h6,
p, span:not([class^="icon-"]):not([class*=" icon-"]),
div:not([class^="icon-"]):not([class*=" icon-"]),
a:not([class^="icon-"]):not([class*=" icon-"]),
button:not([class^="icon-"]):not([class*=" icon-"]),
input, textarea, select,
.navbar, .navbar-inner, .nav,
#docsSearch, #contentArea, #sidebar,
.category-list, .collection {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Icon colors only - NO font-family rules */
.icon-search {
    color: #84C8D9 !important;
}

.icon-article-doc {
    color: #0C90B2 !important;
}

/* ========================================
   HEADER & NAVIGATION - Darker Blue
   ======================================== */

/* Main header background - DARKER solid blue (no gradient) */
.navbar .navbar-inner {
    background: #234B5C !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(35, 75, 92, 0.3) !important;
}

/* Brand/Logo area */
.navbar .brand {
    color: #ffffff !important;
    padding-bottom: 0px !important;
}

.navbar .brand:hover,
.navbar .brand:focus {
    color: #84C8D9 !important;
}

/* Navigation links - BOLD and WHITE */
.navbar .nav li a,
.navbar .icon-private-w,
.navbar .nav > li > a,
.navbar-inner .nav > li > a,
.navbar .brand,
.nav li a[href="/"],
.nav li a[href*="help.untied.io"] {
    color: #ffffff !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    width: auto !important;
}

.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus,
.navbar-inner .nav > li > a:hover {
    color: #84C8D9 !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Remove background from active nav items */
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
    color: #ffffff !important;
    background: transparent !important;
}

/* Only show background on active hover */
.navbar .nav .active a:hover {
    color: #84C8D9 !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Ensure nav list items display HORIZONTALLY */
.navbar .nav > li,
.navbar .nav li {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    float: none !important;
}

/* Hide mobile contact button on desktop */
#contactMobile {
    display: none !important;
}

/* Show mobile contact button only on mobile, hide desktop one */
@media (max-width: 768px) {
    #contact {
        display: none !important;
    }
    
    #contactMobile {
        display: inline-block !important;
    }
}

/* Ensure brand/logo link is visible */
.navbar .brand {
    display: block !important;
    visibility: visible !important;
}

/* Mobile nav button */
.btn-navbar {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.btn-navbar:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

.btn-navbar .icon-bar {
    background-color: #ffffff !important;
}

/* ========================================
   SEARCH SECTION
   ======================================== */

/* Search section background */
#docsSearch {
    background: linear-gradient(180deg, #F3F9FB 0%, #ffffff 100%) !important;
    padding: 40px 20px 50px 20px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 12px rgba(12, 144, 178, 0.1) !important;
}

/* Hide search banner on pages with favourite articles (category/collection pages) */
.most-pop-articles ~ #docsSearch,
body:has(.most-pop-articles) #docsSearch,
.collection-show #docsSearch,
.category-show #docsSearch {
    display: none !important;
}

/* Search heading */
#docsSearch h1 {
    color: #234B5C !important;
    font-weight: 600 !important;
}

/* Search bar */
#searchBar {
    position: relative !important;
}

#searchBar input.search-query {
    border: 2px solid #84C8D9 !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    background: #ffffff !important;
    color: #234B5C !important;
}

#searchBar input.search-query:focus {
    border-color: #0C90B2 !important;
    box-shadow: 0 0 0 3px rgba(12, 144, 178, 0.1) !important;
    outline: none !important;
}

#searchBar input.search-query::placeholder {
    color: #84C8D9 !important;
}

/* Search button */
#docsSearch button,
#searchBar button {
    background: #0C90B2 !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: 500 !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

#docsSearch button:hover,
#searchBar button:hover {
    background: #234B5C !important;
    transform: translateY(-1px) !important;
}

/* Search dropdown */
#serp-dd {
    border: 2px solid #84C8D9 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    background: #ffffff !important;
}

#serp-dd .result a {
    color: #234B5C !important;
    transition: all 0.2s ease !important;
}

#serp-dd .result a:hover,
#serp-dd .result > li.active {
    background: #F3F9FB !important;
    color: #0C90B2 !important;
}

/* ========================================
   CONTENT AREA
   ======================================== */

/* Body background */
body {
    background: #ffffff !important;
}

/* Main content wrapper */
#contentArea {
    background: #ffffff !important;
}

/* Category page header description */
#categoryHead .descrip,
#categoryHead p.descrip,
hgroup .descrip,
hgroup p.descrip {
    color: #234B5C !important;
}

/* Popular/Favourite articles section */
.most-pop-articles h2 {
    color: #234B5C !important;
    font-weight: 600 !important;
    border-bottom: 3px solid #0C90B2 !important;
    padding-bottom: 10px !important;
}

.most-pop-articles .popArticles {
    list-style: none !important;
    padding-left: 0 !important;
}

.most-pop-articles .popArticles li {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
}

.most-pop-articles .popArticles a {
    color: #0C90B2 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: flex-start !important;
    text-decoration: none !important;
    width: 100% !important;
}

.most-pop-articles .popArticles a:hover {
    color: #D10049 !important;
    background: #F3F9FB !important;
    padding-left: 10px !important;
}

.most-pop-articles .popArticles a:hover span {
    color: #D10049 !important;
}

.most-pop-articles .popArticles a i {
    color: #84C8D9 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    margin-top: 4px !important;
}

.most-pop-articles .popArticles a span {
    flex: 1 !important;
    line-height: 1.5 !important;
}

/* Category list */
.category-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-top: 20px !important;
}

/* Add "Browse by Category" heading before category list */
.category-list::before {
    content: "Browse by Category" !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #234B5C !important;
    margin-bottom: 30px !important;
}

.category-list .category {
    border: 3px solid #234B5C !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    background: #ffffff !important;
    flex: 1 1 calc(33.333% - 20px) !important;
    min-width: 250px !important;
    max-width: 350px !important;
    padding: 20px !important;
    text-align: center !important;
}

.category-list .category:hover {
    border-color: #0C90B2 !important;
    background: #F3F9FB !important;
    box-shadow: 0 6px 16px rgba(35, 75, 92, 0.3) !important;
    transform: translateY(-3px) !important;
}

.category-list .category h3 {
    color: #234B5C !important;
    font-weight: 600 !important;
}

/* Description text (not article count) */
.category-list .category p:not(.article-count) {
    color: #234B5C !important;
}

.category-list .category .article-count {
    color: #0C90B2 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

.category-list .category:hover .article-count {
    color: #D10049 !important;
}

/* ========================================
   LINKS & BUTTONS
   ======================================== */

/* General links */
.collection a,
.contentWrapper a {
    color: #0C90B2 !important;
    transition: color 0.2s ease !important;
}

.collection a:hover,
.contentWrapper a:hover {
    color: #D10049 !important;
}

/* Article list items in main content area */
.collection .article-list li a,
.collection ul li a,
.contentWrapper .article-list li a,
.contentWrapper ul li a {
    font-size: 18px !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    padding: 4px 0 !important;
    color: #234B5C !important;
    font-weight: 600 !important;
}

.collection .article-list li a:hover,
.collection ul li a:hover,
.contentWrapper .article-list li a:hover,
.contentWrapper ul li a:hover {
    color: #0C90B2 !important;
}

/* Document/article icons in main content area */
.collection .article-list li a .icon-article-doc,
.collection ul li a .icon-article-doc,
.contentWrapper .article-list li a .icon-article-doc,
.contentWrapper ul li a .icon-article-doc {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #234B5C !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

.collection .article-list li a:hover .icon-article-doc,
.collection ul li a:hover .icon-article-doc,
.contentWrapper .article-list li a:hover .icon-article-doc,
.contentWrapper ul li a:hover .icon-article-doc {
    color: #0C90B2 !important;
}

/* Article links */
#fullArticle a,
#fullArticle strong a,
#fullArticle a strong {
    color: #0C90B2 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

#fullArticle a:hover {
    color: #D10049 !important;
}

/* Article text */
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
    color: #234B5C !important;
}

/* ========================================
   FOOTER
   ======================================== */

footer {
    background: #F3F9FB !important;
    border-top: 3px solid #0C90B2 !important;
    padding: 30px 20px !important;
    margin-top: 60px !important;
}

footer p {
    color: #234B5C !important;
}

footer a {
    color: #0C90B2 !important;
    font-weight: 500 !important;
}

footer a:hover {
    color: #D10049 !important;
}

/* ========================================
   SEPARATOR
   ======================================== */

hr.sep {
    border-color: #84C8D9 !important;
    margin: 40px 0 !important;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (min-width: 769px) {
    .nav-collapse.collapse {
        position: static !important;
    }

    #mainNav .container-fluid {
        position: relative !important;
    }

    .navbar .nav {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        bottom: 0 !important;
        margin-right: 0 !important;
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    #docsSearch {
        padding: 30px 15px !important;
    }

    #docsSearch h1 {
        font-size: 24px !important;
    }

    .navbar .nav li a {
        padding: 12px 20px !important;
    }
    
    /* Make category cards stack nicely on mobile */
    .category-list {
        padding: 0 15px !important;
    }
    
    .category-list .category {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* No translate spans */
.notranslate {
    color: inherit !important;
}

/* Contact buttons */
.contactUs {
    background: rgba(255, 1, 90, 0.1) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.contactUs:hover {
    background: #FF015A !important;
    color: #ffffff !important;
}

/* ========================================
   ARTICLE PAGE STYLING
   ======================================== */

/* Article title */
#fullArticle .title {
    color: #234B5C !important;
    font-weight: 700 !important;
    border-bottom: 3px solid #0C90B2 !important;
    padding-bottom: 15px !important;
    margin-bottom: 30px !important;
}

/* Article headings */
#fullArticle h2 {
    color: #234B5C !important;
    font-weight: 600 !important;
    margin-top: 30px !important;
    border-left: 4px solid #0C90B2 !important;
    padding-left: 15px !important;
}

#fullArticle h3,
#fullArticle h4 {
    color: #234B5C !important;
    font-weight: 600 !important;
}

/* Print button */
.printArticle {
    color: #0C90B2 !important;
    transition: all 0.2s ease !important;
}

.printArticle:hover {
    color: #D10049 !important;
}

/* Article ratings */
.articleRatings {
    background: #F3F9FB !important;
    border: 2px solid #84C8D9 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 30px 0 !important;
}

.articleRatings-question {
    color: #234B5C !important;
    font-weight: 600 !important;
}

.rateAction {
    background: #ffffff !important;
    border: 2px solid #84C8D9 !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.rateAction:hover {
    border-color: #0C90B2 !important;
    background: #F3F9FB !important;
}

.rateAction--positive:hover {
    border-color: #0C90B2 !important;
    background: rgba(12, 144, 178, 0.1) !important;
}

.rateAction--negative:hover {
    border-color: #D10049 !important;
    background: rgba(209, 0, 73, 0.1) !important;
}

/* Article footer */
.articleFoot {
    background: #F3F9FB !important;
    border-top: 2px solid #84C8D9 !important;
    padding: 20px !important;
    margin-top: 40px !important;
    border-radius: 8px !important;
}

.articleFoot .help {
    color: #234B5C !important;
    font-weight: 500 !important;
}

.articleFoot .help a,
.articleFoot a {
    color: #0C90B2 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
    background: transparent !important;
}

.articleFoot .help a:hover,
.articleFoot a:hover {
    color: #D10049 !important;
    background: transparent !important;
    text-decoration: underline !important;
}

.articleFoot .lu {
    color: #0C90B2 !important;
    font-size: 14px !important;
}

/* ========================================
   SIDEBAR STYLING
   ======================================== */

/* Sidebar */
#sidebar {
    background: #F3F9FB !important;
    padding: 20px !important;
    border-radius: 8px !important;
    border: 2px solid #84C8D9 !important;
}

/* Sidebar headings */
#sidebar h3 {
    color: #234B5C !important;
    font-weight: 700 !important;
    border-bottom: 3px solid #0C90B2 !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
}

/* Hide the default "CATEGORIES" heading in sidebar */
#sidebar h3:first-of-type {
    display: none !important;
}

/* Sidebar search */
#sidebar #searchBar.sm {
    margin-bottom: 30px !important;
    position: relative !important;
    display: block !important;
    padding-bottom: 30px !important;
    border-bottom: 4px solid #0C90B2 !important;
}

#sidebar #searchBar.sm input {
    border: 2px solid #234B5C !important;
    background: #ffffff !important;
    color: #234B5C !important;
    border-radius: 6px !important;
    padding: 10px 45px 10px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 44px !important;
}

#sidebar #searchBar.sm input:focus {
    border-color: #0C90B2 !important;
    box-shadow: 0 0 0 3px rgba(12, 144, 178, 0.1) !important;
    outline: none !important;
}

#sidebar #searchBar.sm button {
    background: transparent !important;
    border: none !important;
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 8px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    height: 40px !important;
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: -15px !important;
}

#sidebar #searchBar.sm button:hover .icon-search {
    color: #0C90B2 !important;
}

#sidebar #searchBar.sm button .icon-search {
    font-size: 18px !important;
    color: #84C8D9 !important;
}

/* Add "Browse by Category" label after search in sidebar */
#sidebar .nav-list::before {
    content: "Browse by Category" !important;
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #234B5C !important;
    margin-bottom: 15px !important;
}

/* Sidebar navigation list */
#sidebar .nav-list li {
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#sidebar .nav-list li a {
    color: #234B5C !important;
    font-weight: 500 !important;
    padding: 12px 15px !important;
    transition: all 0.15s ease !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #E0E0E0 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

#sidebar .nav-list li:last-child a {
    border-bottom: none !important;
}

#sidebar .nav-list li a:hover {
    background: #ffffff !important;
    color: #0C90B2 !important;
    padding-left: 20px !important;
}

#sidebar .nav-list li.active a {
    background: #0C90B2 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

#sidebar .nav-list li a .icon-arrow {
    color: #84C8D9 !important;
}

#sidebar .nav-list li:hover a .icon-arrow,
#sidebar .nav-list li.active a .icon-arrow {
    color: currentColor !important;
}

/* Document/article icons */
#sidebar .nav-list li a .icon-article-doc,
.collection .nav-list li a .icon-article-doc,
.icon-article-doc {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #84C8D9 !important;
    margin-right: 8px !important;
}

#sidebar .nav-list li.active a .icon-article-doc,
#sidebar .nav-list li a:hover .icon-article-doc {
    color: currentColor !important;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Focus states for keyboard navigation */
a:focus,
button:focus,
input:focus {
    outline: none !important;
}

/* Screen reader only content */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ========================================
   BEACON WIDGET CUSTOMIZATION
   ======================================== */

/* Beacon button */
.BeaconFabButtonFrame {
    background: #234B5C !important;
}

.BeaconFabButtonFrame:hover {
    background: #0C90B2 !important;
}

/* Beacon container */
.BeaconContainer {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Beacon header */
.BeaconHeader,
.c-BeaconHeader {
    background: #234B5C !important;
}

/* Beacon modal header */
.c-Modal__header {
    background: #234B5C !important;
}

/* Send message button */
.c-Button--primary,
button[type="submit"].c-Button {
    background: #0C90B2 !important;
    border-color: #0C90B2 !important;
}

.c-Button--primary:hover,
button[type="submit"].c-Button:hover {
    background: #234B5C !important;
    border-color: #234B5C !important;
}

/* Beacon input focus states */
.c-Input:focus,
.c-Textarea:focus {
    border-color: #0C90B2 !important;
    box-shadow: 0 0 0 3px rgba(12, 144, 178, 0.1) !important;
}

/* Beacon links */
.BeaconContainer a {
    color: #0C90B2 !important;
}

.BeaconContainer a:hover {
    color: #D10049 !important;
}

/* ========================================
   PAGINATION STYLING
   ======================================== */

/* Pagination container */
.pagination,
.pagination ul {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 40px 0 !important;
    padding: 20px 0 !important;
}

/* Pagination items */
.pagination li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Pagination links and spans */
.pagination a,
.pagination span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 8px 12px !important;
    border: 2px solid #84C8D9 !important;
    border-radius: 6px !important;
    color: #234B5C !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    background: #ffffff !important;
}

/* Pagination link hover */
.pagination a:hover {
    background: #F3F9FB !important;
    color: #0C90B2 !important;
    border-color: #0C90B2 !important;
    border-width: 3px !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 3px 10px rgba(12, 144, 178, 0.25) !important;
}

/* Active/current page */
.pagination .active span,
.pagination .active a {
    background: #234B5C !important;
    color: #ffffff !important;
    border-color: #234B5C !important;
    font-weight: 700 !important;
}

/* Disabled pagination items */
.pagination .disabled span,
.pagination .disabled a {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: #F3F9FB !important;
    color: #84C8D9 !important;
    border-color: #E0E0E0 !important;
}

.pagination .disabled a:hover {
    transform: none !important;
    box-shadow: none !important;
    background: #F3F9FB !important;
    color: #84C8D9 !important;
}

/* Next/Previous arrows */
.pagination .prev a,
.pagination .next a {
    font-weight: 700 !important;
    padding: 8px 16px !important;
}

/* Remove separators between pagination items */
.pagination li::after {
    display: none !important;
}

/* ========================================
   SORT DROPDOWN STYLING
   ======================================== */

/* Sort by dropdown */
select#sortBy,
select[name="sort"],
form select#sortBy,
form select[name="sort"],
.sort select#sortBy,
.sort select[name="sort"],
.sort form select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: #F3F9FB !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23234B5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 16px !important;
    border: 2px solid #84C8D9 !important;
    border-radius: 6px !important;
    color: #234B5C !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 8px 32px 8px 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: 200px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    -webkit-text-fill-color: #234B5C !important;
    text-indent: 0 !important;
    text-align: left !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Remove any pseudo-elements that might cover the text */
select#sortBy::before,
select#sortBy::after,
select[name="sort"]::before,
select[name="sort"]::after {
    display: none !important;
    content: none !important;
}

/* More specific targeting for sort dropdown to override HelpScout defaults */
.collection select,
.contentWrapper select,
hgroup select,
#categoryHead select,
.sort select,
select {
    color: #234B5C !important;
    background: #F3F9FB !important;
    -webkit-text-fill-color: #234B5C !important;
    text-indent: 0 !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

/* Sort dropdown options (limited styling in native selects) */
select#sortBy option,
select[name="sort"] option {
    padding: 10px !important;
    color: #234B5C !important;
    background: #ffffff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* Hide the default/first option in sort dropdown */
select#sortBy option:first-child,
select[name="sort"] option:first-child {
    display: none !important;
}