main {
    --light-bg: #F5F6FF;
    --light-bg-2: #F1F4FF;
    --text-color: #000D50;
    --mdc-extended-fab-label-text-font: 'Poppins', sans-serif;
    --mdc-extended-fab-label-text-weight: 600;
    --mdc-extended-fab-label-text-tracking: normal;
    --mdc-extended-fab-label-text-size: clamp(12px, calc(0.9em + .5vw), 18px);
    gap: 20px;

    section {display: grid; gap: 1rem;}
}
h1[role="heading"]{font-size: min(calc(1em + 1.5vw), 24px);}
h2[role="heading"]{font-size: min(calc(1em + 1.5vw), 24px); & small{color: #888888; font-size: 75%;}}
h3[role="heading"]{font-size: min(calc(1em + 1vw), 24px);}


.card{ --bs-card-border-color: #D6D6D6; --bs-card-border-radius: 8px; --bs-card-bg: #fff; --bs-card-cap-bg: #fff; --bs-card-border-radius: 8px; --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - (var(--bs-border-width))); }

.top_card .card:not(.demo_card){
    --bs-card-border-radius: 8px; --bs-card-bg: #fff; color: #000D50;
    & .card-body{border-radius: 0 0 7px 7px;}
}
.broker_cover{max-width: 80px; & img{max-width: 100%;}}


.applyBtn{
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-color: var(--color-primary-contrast);
    --bs-btn-hover-border-color: var(--color-primary-active);
    --bs-btn-hover-bg: var(--color-primary-active);
    --bs-btn-hover-color: var(--color-primary-contrast);
    /* --bs-btn-border-radius: 0; */
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: 1em;
    min-width: 150px;
}

.label{color: #888; font-weight: 400; font-size: clamp(12px, 1em , 14px);}
.badges{gap: 10px 15px; .product_badge{border: 1px solid #E2E2E2; border-radius: 4px; padding: 5px 1rem;}}
product-badge{}
[data-role=equity]{background-color: #abd1d257;}
[data-role=commodity]{background-color: #e4deed;}
[data-role=currency]{background-color: #edecde;}
[data-role=futures]{background-color: #b0d0b7;}
[data-role=options]{background-color: #b0b7d0;}

.planTabs{background-color: #eeefff;}
.planTab{
    --bs-btn-font-weight: 600;
    --bs-btn-hover-bg: transparent;
    --bs-btn-focus-bg: transparent;
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-primary);
    --bs-btn-focus-color: var(--color-primary);
    --bs-btn-active-color: var(--color-primary-contrast);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-border-color: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
}
.broker_plans .group { padding-left: .5rem;}
.charges_group{gap: 25px 15px; .charges_item{flex: 1 1 130px; padding-right: 1rem;}}

/* DEPRECATED CSS: .link_item{ border: 1px solid #E2E2E2; border-radius: 4px; background: #DEE9F480; color: #006092; font-size: 14px; line-height: 14px; font-weight: 600; padding: 5px 15px; margin-right: 10px; text-decoration: none; display: inline-block; margin-bottom: 5px; &:is(:active){background-color: #006092; color: #fff; border-color: #006092; transition: all 0.3s ease; outline: none;} &:is(:hover, :focus-within, :focus){border-color: #006092; outline: none;}} */

.addition_features .card, .other_card{height: 100%; --bs-card-cap-padding-y: 1rem; --bs-card-bg: #dce0fa; --bs-card-cap-bg: #dce0fa; --bs-card-border-color: #dce0fa; .card-header{border-color: #dce0fa;} .card-body{padding-top: 0;}}

.other_card .card-header{ font-size: clamp(16px, calc(1em + 1vw), 18px);}
ol{padding-left: 1.6rem;}

.feature-list {gap: 10px 20px; padding-block: 10px; .item{flex: 0 0 140px; align-items: flex-start; i {font-size: 1.4em;}}}

.chargeDetailItems{gap: 10px;}
.charges_item, .chargeDetailItems {flex: 0 0 150px;}
.aboutBroker{white-space: break-spaces;}

mat-accordion{
    --mat-expansion-header-description-color: var(--color-base);
    --mat-expansion-header-text-color: var(--text-base-color);
    --mat-expansion-header-text-weight: 600;
    --mat-expansion-header-text-size: clamp(14px, 0.9em + 0.5vw, 16px)
}

.floatingBtn {
    background-color: #673ab7;
    border-radius: 50vw;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    width: 100%;
    max-width: 250px;
    text-align: center;
    outline: none;
    text-decoration: none;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);
    transition: transform 0.3s ease;
    &:hover{color: #fff; transform: translateY(-5px);}
}

@media screen and (min-width: 576px) {
    .charges_group .charges_item, .charges_item, .chargeDetailItems{flex: 0 0 200px;}
    .broker_plans .group { padding-bottom: 1.5rem; }
}

@media screen and (min-width: 992px) {
    main section{grid-template-columns: 1fr 264px; grid-template-rows: auto; }
    aside { grid-row: 1 / 12; grid-column: 2 / 3;}
    .feature-list .item{flex: 0 0 200px;}
}
.product-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 1rem;
    background-color: #fff;
    border: 2px solid #E2E2E2;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #000D50;
}

.product-badge svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;

}

.product-badge:hover {
    border-color: var(--primary-light);
    background-color: #f0f4ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.1);
    color: var(--primary-color);
}

.product-badge:active {
    transform: translateY(0);
}

.product-badge[data-product="equity"] svg {
    color: #3b82f6;
}

.product-badge[data-product="commodity"] svg {
    color: #f59e0b;
}

.product-badge[data-product="currency"] svg {
    color: #8b5cf6;
}

.product-badge[data-product="futures"] svg {
    color: #10b981;
}

.product-badge[data-product="options"] svg {
    color: #b83dff;
}
/* DEPRECATED CSS: .features-wrap { */
/* DEPRECATED CSS:     padding: 24px; */
/* DEPRECATED CSS:   } */
  @media (min-width: 640px) {
/* DEPRECATED CSS:     .features-wrap { */
/* DEPRECATED CSS:       padding: 32px; */
/* DEPRECATED CSS:     } */
  }

/* DEPRECATED CSS:   .features-grid { */
/* DEPRECATED CSS:     display: grid; */
/* DEPRECATED CSS:     grid-template-columns: 1fr; */
/* DEPRECATED CSS:     gap: 16px; */
/* DEPRECATED CSS:   } */
  @media (min-width: 640px) {
/* DEPRECATED CSS:     .features-grid { */
/* DEPRECATED CSS:       grid-template-columns: repeat(2, 1fr); */
/* DEPRECATED CSS:     } */
  }
  @media (min-width: 1024px) {
/* DEPRECATED CSS:     .features-grid { */
/* DEPRECATED CSS:       grid-template-columns: repeat(3, 1fr); */
/* DEPRECATED CSS:     } */
  }

  .feature-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: #f2f4ff; /* secondary/30 */
    transition: background-color 200ms ease;
  }
  .feature-card:hover {
    background: #e8ebfd; /* secondary/50 */
  }

  .icon-circle {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .icon-available {
    background: rgba(34, 197, 94, 0.2); /* green-500/20 */
  }
  .icon-unavailable {
    background: rgba(220, 38, 38, 0.2); /* destructive/20 */
  }

  .icon-check,
  .icon-x {
    width: 16px;
    height: 16px;
  }
  .icon-check {
    color: #16a34a; /* green-600 */
  }
  .icon-x {
    color: #dc2626; /* destructive */
  }

  .feature-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827; /* foreground */
  }
  .feature-text.unavailable {
    color: #6b7280; /* muted-foreground */
    text-decoration: line-through;
  }