:root {
    --red: #D62014;
    --blue: #0C509F;
    --blue-light: #E4F1FF;
    --green: #028844;
    --font-color: #262626;
    --white: #ffffff;
    --orange: #f57f17;
    --grey-bg: #f4f4f4;
    --border: #BFBFBF;
    --text: #000000;
    --muted: #555;
    --green-dark: #145f39;
    --green-light: #005E2E;
    --green-bg: #E9F2EA;
    --body-font-size: 1rem;
    --section-heading-font-size: 1.75rem;
    --sub-section-heading-font-size: 1.25rem;
    --cta-button-font-size: 1.25rem;
    --faq-content-font-size:1.125rem;
    --trading-btn-text:#404040;
    --search-input-text:#737373;
    --search-bg-input: #F8F8F8;
    --search-btn:#737373;
    --font-weight-300:300;
    --font-weight-400:400;
    --font-weight-500:500;
    --font-weight-600:600;
    --font-weight-700:700;
    --font-weight-800:800;
    --bg-color:#F5F5F5;
    --device-sub-content-font-size: 1.125rem;
    --device-amount-font-size: 1.5rem;
    --device-border: #D8D8D8;
    --text-body-color:#404040;
    --order-confirm-title-font-size: 1.5rem;
    --order-confirm-thank-title-font-size: 2.25rem;
    --trade-val-font-size: 2.5rem;
    --next-step-font-size: 1.563rem;
    --argos-title-font-size: 2rem;
    --argos-desc-font-size: 1.188rem;
    --argos-btn-bg: #038744;

}

/* Logo */
.argos-logo {

}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
}

p {
    color: var(--text);
}

a:hover {
    color: var(--search-input-text);
}

.policy li {
    color: var(--text);
}

.policy li a{
    color: var(--text);
    text-decoration: underline;
}

/* ── Desktop nav ── */
.desktop-nav {
    height: 75px;
}

/* Trading wrapper stretches full nav height */
.trading-wrapper {
    height: 75px;
    position: relative;
}
/* Hover bridge */
.trading-wrapper::after {
    content: '';
    position: absolute;
    top: 100%; left: 0;
    width: 100%; height: 4px;
    background: transparent;
    z-index: 1049;
}

/* Trading button */
.trading-btn {
    height: 100%;
    background: none;
    border: none;
    font-size: var(--body-font-size);
    font-weight: var(--font-weight-400);
    color: var(--trading-btn-text);
    white-space: nowrap;
    position: relative;
}
.trading-btn:focus-visible { outline: 2px solid var(--red); }

/* Red underline — centre outward */
.underline-bar {
    position: absolute;
    bottom: 12px;
    left: 18px;
    right: 18px;
    height: 3px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s ease;

    /*transform: scaleX(1);*/
}
.trading-wrapper:hover .underline-bar { transform: scaleX(1); }

/* Chevron rotates on hover */
.chevron-icon {
    font-size: 1rem !important;
    color: #555;
    transition: transform .25s ease;
}
.trading-wrapper:hover .chevron-icon { transform: rotate(180deg); }

/* Desktop dropdown */
.desktop-dropdown {
    position: absolute;
    top: 100%; left: 0;
    min-width: 220px;
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    border-top: none !important;
}
.trading-wrapper:hover .desktop-dropdown {
    opacity: 1;
    pointer-events: auto;
}
.desktop-dropdown .dd-link {
    transition: background .15s, color .15s, padding-left .15s;
    position: relative;
    overflow: hidden;
    font-weight: var(--font-weight-400);
    font-size: var(--body-font-size);
}
.desktop-dropdown .dd-link:hover {
    /*color: var(--red) !important;*/
    /*padding-left: 1.75rem !important;*/
    background: var(--search-bg-input);
}
.desktop-dropdown .dd-link:hover .material-icons {
    /*color: var(--red); */
}
/* Left red accent bar */
.desktop-dropdown .dd-link::before {
    /*content: '';*/
    /*position: absolute;*/
    /*left: 0; top: 0; bottom: 0;*/
    /*width: 3px;*/
    /*background: var(--red);*/
    /*transform: scaleY(0);*/
    /*transform-origin: center;*/
    /*transition: transform .15s ease;*/
}
.desktop-dropdown .dd-link:hover::before {
    /*transform: scaleY(1);*/
}

/* Search pill — desktop */
.search-pill {
    background: var(--search-bg-input);
    border-radius: 28px;
    overflow: hidden;
    height: 40px;
    border: 1px solid transparent;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.search-pill:focus-within {
    background: var(--search-bg-input);
    border-color: var(--search-input-text);
    /*box-shadow: 0 0 0 2px rgba(0,0,0,.06);*/
}
.search-pill .search-icon {
    font-size: var(--body-font-size);
    color: var(--search-btn);
    padding-left: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.search-pill input {
    background: transparent;
    border: none;
    outline: none;
    font-size: var(--body-font-size);
    color: var(--search-input-text);
    padding-left: 15px;
    font-weight: var(--font-weight-400);
}
.search-pill input::placeholder { color: var(--search-input-text); }

.search-pill input:focus-within {
    background: var(--search-bg-input);
    border-color: var(--search-input-text);
}
.search-pill .btn-search {
    background: var(--search-btn);
    color: var(--white);
    border: none;
    border-radius: 0 28px 28px 0;
    font-size: var(--body-font-size);
    font-weight: var(--font-weight-600);
    height: 40px;
    padding: 0 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.search-pill .btn-search:hover {
    background: var(--trading-btn-text);
    color: var(--white);
}

.mobile-trading-btn {
    font-size:var(--sub-section-heading-font-size);
    color:var(--font-color);
    font-weight: var(--font-weight-600);
}

/* Mobile search pill */
.mobile-search-pill {
    background: var(--search-bg-input);
    border-radius: 28px;
    overflow: hidden;
    height: 50px;
}
.mobile-search-pill:focus-within {
    background: var(--search-bg-input);
    border-color: var(--search-input-text);
    /*box-shadow: 0 0 0 2px rgba(0,0,0,.06);*/
}
.mobile-search-pill input {
    background: transparent;
    border: none;
    outline: none;
    font-size: var(--body-font-size);
    color: var(--search-input-text);
    font-weight: var(--font-weight-400);
}
.mobile-search-pill input::placeholder { color: var(--search-input-text); }
.mobile-search-pill input:focus-within {
    background: var(--search-bg-input);
    border-color: var(--search-input-text);
}
.mobile-search-pill .btn-search {
    background: var(--search-btn);
    color: var(--white);
    border: none;
    border-radius: 0 28px 28px 0;
    width: 52px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--body-font-size);
    font-weight: var(--font-weight-700);
}
.mobile-search-pill .btn-search:hover {
    background: var(--search-btn);
    color: var(--white);
}

/* Clear button inside search */
.btn-clear {
    background: none;
    border: none;
    color: var(--search-bg-input);
    line-height: 1;
}
.btn-clear:hover { color: var(--search-input-text); }

/* Nav action links (Account / Help) */
.nav-action {
    font-size: var(--body-font-size);
    color: var(--font-color);
    text-decoration: none;
    line-height: 1.2;
    font-weight:var(--font-weight-400);
}
.nav-action .material-icons { font-size: var(--body-font-size); display: block; text-align: center; }
.nav-action:hover { color: var(--red); }

/* Hamburger active = red */
.btn-hamburger { background: none; border: none; color: var(--font-color); }

.btn-hamburger .btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
    background: none; border: none; color: var(--red);
}
.btn-hamburger .material-icons {color: var(--font-color); }
.btn-hamburger.active .material-icons { color: var(--red); }

/* Mobile dropdown links */
.mobile-dd-link { font-size: var(--body-font-size); color: var(--font-color); text-decoration: none; font-weight: var(--font-weight-400) }
.mobile-dd-link:hover { background: #fafafa; color: var(--red); }
.mobile-dd-link:hover .material-icons { color: var(--red); }
.mobile-dd-link .material-icons { font-size: var(--sub-section-heading-font-size); color: var(--search-input-text); }

/* ── Autocomplete dropdown ── */
#desktopSearchWrapper,
#mobileSearchWrapper { position: relative; }

.autocomplete-items {
    position: absolute;
    top: 100%;          /* sits flush below the search pill */
    left: 0;
    right: 0;
    background: var(--white);
    border-top: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.13);
    z-index: 2000;      /* above everything */
    border-radius: 0 0 8px 8px;
    max-height: 320px;
    overflow-y: auto;
}
.autocomplete-items .ac-label {
    padding: 10px 18px 6px;
    font-size: .75rem;
    color: var(--search-input-text);
    font-weight: var(--font-weight-500);
    letter-spacing: .3px;
    text-transform: uppercase;
}
.autocomplete-items .suggestion-item {
    padding: 11px 18px;
    font-size: .9rem;
    color: var(--font-color);
    cursor: pointer;
    border-top: 1px solid var(--border);
    transition: background .1s, color .1s;
}
.autocomplete-items .suggestion-item:hover {
    background: var(--search-bg-input);
}
.autocomplete-items .suggestion-item.autocomplete-active {
    background: var(--search-bg-input);
    font-weight: 600;
}

/** End Nav CSS **/

/** Start Footer CSS **/

footer span {
    color: var(--font-color);
    font-size: var(--body-font-size);
    font-weight: var(--font-weight-500);
}


.footer-links-bar a {
    color: var(--font-color);
    text-decoration: none;
    font-size: var(--body-font-size);
    white-space: nowrap;
    transition: color .15s;
    font-weight: var(--font-weight-500);
}
.footer-links-bar a:hover { color: var(--red); text-decoration: underline; }

/* Legal text */
.legal-text {
    font-size: 0.7rem;
    color: var(--font-color);
    line-height: 1;
    font-weight: var(--font-weight-500);
}
.copyright {
    font-size: 0.75rem;
    line-height:0.563;
    font-weight: var(--font-weight-700);
    color: var(--font-color);
}

/* Mobile: links stacked */
@media (max-width: 767px) {
    .footer-links-bar a {
        font-weight: var(--font-weight-400);
        padding: 6px 0 !important;
        display: block;
        border: none !important;
    }

    .legal-text {
        font-size: 0.875rem;
        line-height: 1.313;
        font-weight: var(--font-weight-400);
    }

    .copyright {
        font-size: 0.875rem;
        line-height: 1.313;
    }
}