/*
 * Layout styles ported from xs.com (css/app.css + css/main.css) for the account types
 * page and the contract specs filters/buttons.
 */

/* xs.com colour variables (css/app.css); XSTrades keeps its own --primary-color / --secondary-color */
:root {
    --primary-color-dark: #1f6e54;
    --primary-color-light: #c1e6da;
    --primary-color-lighter: #d5eee6;
    --secondary-color-darker: #0a2e64;
    --secondary-color-dark: #213c83;
    --secondary-color-light: #ccd6e5;
    --secondary-color-lighter: #e5eaf2;
    --neutral-color-darker: #191a1a;
    --neutral-color-dark: #6682a0;
    --neutral-color: #d8d9da;
    --neutral-color-light: #d8d9da;
    --neutral-color-lighter: #f9f9f9;
    --light-color-grey: #f1f1f1;
    --error-color-dark: #b42318;
    --error-color: #d92d20;
    --error-color-light: #fecdca;
    --error-color-lighter: #fee4e2;
    --success-color-dark: #05603a;
    --success-color: #039855;
    --success-color-light: #a6f4c5;
    --success-color-lighter: #ecfdf3;
    --jp-font-color: black;
    --search-width: 580px;
    --text-grey: #81858b;
    --light-blue: #e6ebf2;
    --light__grey: #707070;
    --White-White-400: #a4a7ae;
    --White-White-50: #fafafa;
    --White-White-200: #e9eaeb;
    --Brand-Blue-Brand_Blue-200: #8a99be;
    --warning-dark:#DD9000;
}

.search-wrapper .search-icon {top: 50%;
    line-height: 1;}
.search-icon {top: 60%;
    left: 25px;
    transform: translateY(-50%);
    color: #888;
    font-size: 1rem;
    pointer-events: none;}
[dir="rtl"] .search-icon {left: auto;
    right: 25px;}
.account-types h2 {font-size: 2rem;
    margin-bottom: 0 !important;}
.account-types .account-card {width: 100%;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    padding-top: 0px;}
.account-types .account-icon {position: relative;
    width: 100%;
    margin: 0 auto 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;}
.account-types .icon {width: 100%;}
.account-types .account-details h2 {font-size: 1.2rem;
    color: #002f6c;
    text-align: left;
    margin-bottom: 8px;}
.account-types .subheading {color: #b1b1b1;
    font-size: 16px;
    margin-bottom: 16px;}
.account-types .description {font-size: 16px;}
.account-types .account-details p {font-size: 0.9rem;
    margin-bottom: 10px;
    line-height: 1.4;
    color: #333;}
.account-types .account-details strong {color: #002f6c;}
.account-types .details-button {width: fit-content;
    display: block;
    padding: 10px 40px;
    background-color: #30af85;
    color: #fff;
    font-size: 16px;
    text-align: center;
    border: none;
    border-radius: 35px;
    cursor: pointer;
    margin-top: 20px;
    transition:
        background-color 0.3s,
        transform 0.3s ease;
    position: relative;
    overflow: hidden;}
.account-types .details-button:hover {background-color: #28976f;}
.account-types .details-button::after {content: "→";
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    font-size: 20px;
    color: #fff;
    transition: all 0.3s ease;}
.account-types .details-button:hover::after {right: 10px;
    opacity: 1;}
.account-types .details-button span {display: inline-block;
    transition: transform 0.3s ease;}
.account-types .details-button:hover span {transform: translateX(-5px);}
.account-types .account-title {font-size: 25px;
    font-weight: 600;
    line-height: 1;}
.account-types .sub-title {font-size: 16px;
    font-weight: 400;}
.account-types .account-tabs {display: flex;
    justify-content: space-around;
    width: 70%;
    margin: 0 auto;}
.account-types .account-tabs .tab img {width: 80px;
    height: 80px;
    margin-top: 10px;}
.account-types .tab {text-align: center;}
.account-types .tab:hover {cursor: pointer;}
.account-types .tab p {font-size: 0.9rem;
    color: #333;}
.account-types .tab .icon.active img {border: 2px solid #30af85;
    
    border-radius: 10px;}
.account-types .tab.active p {color: #002f6c;
    font-weight: bold;}
.account-types .account-content {display: none;}
.account-types .account-content.active {display: block;}
.account-types .account-content p {font-size: 16px;}
.account-types .tab-menu {display: flex;
    flex: 0 0 auto;
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    position: relative;
    width: max-content;
    gap: 220px;}
.account-types .tab-menu::before {content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    
    width: 100%;
    
    height: 2px;
    background-color: #ccc;}
.account-types .tab-item {padding: 10px 20px;
    padding-top: 0;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    position: relative;
    transition: color 0.3s;}
.account-types .tab-item .item {font-size: 20px;
    color: #888;}
.account-types .tab-item a.active {color: #30af85;
    font-weight: bold;}
.account-types .tab-item a.active::before {content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #30af85;
    transition: width 0.3s ease;}
.account-types .dynamic-icon {width: 330px !important;
    height: 330px !important;
    border-radius: 20px;}
@media (max-width: 992px) {
  .account-types .tab-item .item {font-size: 16px;
        color: #888;}
}
@media (max-width: 992px) {
  .account-types .dynamic-icon {width: 85% !important;
        height: auto !important;
        margin-top: 20px;}
}
@media (max-width: 992px) {
  .account-types .account-tabs {margin-top: 0px;
        margin-bottom: 15px;
        width: 100%;}
}
@media (max-width: 992px) {
  .account-types .account-tabs .tab img {width: 60px;
        height: 60px;
        margin-top: 0;}
}
@media (max-width: 992px) {
  .account-types .details-button {width: 100%;
        font-size: 13px;}
}
@media (max-width: 992px) {
  .account-types .details-button::after {font-size: 18px;}
}
@media (max-width: 992px) {
  .account-types .account-title {font-size: 25px;}
}
@media (max-width: 992px) {
  .account-types h2 {font-size: 22px;}
}
@media (max-width: 992px) {
  .account-types .tab-menu {gap: 10px !important;
        width: 100%;}
}
@media (min-width: 992px) and (max-width: 1199px) {
  .account-types .tab-menu {gap: 50px !important;
        width: 100%;}
}
@media (min-width: 767px) and (max-width: 992px) {
  .account-types .tab-menu {gap: 50px !important;
        width: 100%;}
}
.single-account-card {border: 1px solid #e0e0e0 !important;
    border-radius: 40px !important;}
.account-platform {font-size: 17px !important;
    color: white;
    background-color: #30af85;
    padding: 5px;
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;}
.account-instrument {font-size: 17px !important;
    color: var(--secondary-color);
    background-color: #e6ebf2;
    padding: 5px;
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;}
.account-instrument-container {line-height: 2.5;}

.account-filter-btn {height: 55px !important;
    min-width: 70px !important;
    width: auto;
    background-color: #f9f9f9 !important;
    border-radius: 8px !important;
    padding: 8px !important;
    border: 2px solid transparent !important;
    color: var(--secondary-color);
    transition: border-color 0.3s ease;}
.account-filter-btn.selected {border-color: var(--primary-color) !important;}
.contract-specs-border {border: 2px solid #f9f9f9;
    border-radius: 8px;
    margin-left: 10px;
    margin-right: 10px;}
.search-wrapper {width: 97% !important;
    border-radius: 8px !important;
    border-width: 0px !important;
    padding: 0px;}
.button-primary {font-size: 16px !important;
    border: 1px solid var(--secondary-color);
    background-color: var(--secondary-color);
    color: var(--neutral-color-lighter);
    cursor: pointer;
    border-radius: 8px;
    padding-top: 10px;
    padding-bottom: 12px;
    padding-left: 16px;
    --primary-image-color: var(--neutral-color-lighter);}
.button-primary path,
button-primary svg {fill: var(--primary-image-color) !important;}
.button-primary:hover {border: 1px solid var(--secondary-color-darker);
    background-color: var(--secondary-color-darker);
    color: var(--neutral-color-lighter) !important;}
.button-primary-ghost {font-size: 16px !important;
    border: 1px solid var(--secondary-color);
    background-color: transparent;
    color: var(--secondary-color);
    cursor: pointer;
    border-radius: 8px;
    padding-top: 10px;
    padding-bottom: 12px;
    padding-left: 16px;
    --ghost-image-color: var(--secondary-color) !important;}
.button-primary-ghost:hover {background-color: var(--secondary-color);
    color: white !important;
    --ghost-image-color: white !important;}
.button-primary-ghost path {fill: var(--ghost-image-color) !important;}
.base-button {padding-right: 16px !important;}
.base-button-ar {padding-right: 22px !important;}
.button-image-container-right {width: 24px !important;}
.button-image-container-right svg {margin-left: 8px;
    width: 15px !important;}
[dir="rtl"] .button-image-container-right svg {margin-right: 12px;
    transform: rotateY(180deg) !important;}
.button-image-container-right {display: flex;
    align-items: center;}
@media (max-width: 768px) {
  .button-primary__swap {min-width: 0px !important;
        width: 50px !important;}
}
html .base-button {min-width: 135px !important;}
@media (max-width: 990px) {
  html[lang="en"] .base-button {min-width: 135px !important;}
}
@media (max-width: 990px) {
  html[lang="fr"] .base-button {min-width: 183px !important;}
}
@media (max-width: 990px) {
  html[lang="es"] .base-button {min-width: 176px !important;}
}
@media (max-width: 990px) {
  html[lang="br"] .base-button {min-width: 165px !important;}
}
@media (max-width: 990px) {
  html[lang="ar"] .base-button-ar {min-width: 130px !important;}
}
@media (max-width: 990px) {
  html[lang="vi"] .base-button {min-width: 165px !important;}
}
@media (max-width: 990px) {
  html[lang="th"] .base-button {min-width: 135px !important;}
}
#custom-search {background-color: #f9f9f9 !important;
    border-width: 0px !important;
    border-radius: 8px !important;}
.fa-search:before {color: #81858b !important;}

/* Contract specs grid: remaining xs.com rules (css/main.css) */
@media (min-width: 992px) {
  .grid-buttons {width: auto;}
}
@media (max-width: 993px) {
  #grid_mobile td {color: var(--secondary-color) !important;
        text-align: left !important;}
}
.acc-specs-grid {border: 0px solid white;
    box-shadow: none !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;}
#grid_mobile {height: 100% !important;}

/* xs.com renders the contract specs block in Noto Sans; scoped here so the rest of the site keeps Poppins */
@font-face {
    font-family: "Noto Sans";
    src: url("/fonts/noto-sans/NotoSans-Regular.woff2") format("woff2"),
         url("/fonts/noto-sans/NotoSans-Regular.ttf") format("truetype");
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans";
    src: url("/fonts/noto-sans/NotoSans-Regular-latin-ext.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF;
}
.contract-specs-border,
.contract-specs-border * {font-family: "Noto Sans", sans-serif !important;}
.contract-specs-border .fa-search,
.contract-specs-border .fas {font-family: "Font Awesome 6 Free" !important;}