/* ============================================================
   Telerik UI Overrides (_telerik-overrides.css)
   Global overrides for Telerik component internals.
   Scoped CSS cannot reach these without ::deep, so they live
   here namespaced by .mh-* CSS classes set via the
   component's Class parameter.
   ============================================================ */


/* ---- BillingTabStrip (.billing-tabs-telerik) ----------------
   Applied via <TelerikTabStrip Class="billing-tabs-telerik">
   ------------------------------------------------------------ */
.billing-tabs-telerik.k-tabstrip {
    background-color: transparent;
    border: none;
    box-shadow: none;
    flex: 1;
}

.billing-tabs-telerik .k-tabstrip-items-wrapper {
    border-bottom: none;
    background-color: transparent;
}

.billing-tabs-telerik .k-tabstrip-items {
    background-color: transparent;
    border-bottom: none;
    flex-wrap: wrap;
}

.billing-tabs-telerik .k-tabstrip-item {
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background-color: transparent;
}

.billing-tabs-telerik .k-tabstrip-item .k-link {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 10px 18px;
    background-color: transparent;
    border: none;
}

.billing-tabs-telerik .k-tabstrip-item:hover,
.billing-tabs-telerik .k-tabstrip-item.k-hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.billing-tabs-telerik .k-tabstrip-item:hover .k-link,
.billing-tabs-telerik .k-tabstrip-item.k-hover .k-link {
    color: #fff;
}

.billing-tabs-telerik .k-tabstrip-item.k-active,
.billing-tabs-telerik .k-tabstrip-item.k-selected {
    border-bottom-color: var(--mh-primary, #B1272F);
    background-color: rgba(255, 255, 255, 0.08);
}

.billing-tabs-telerik .k-tabstrip-item.k-active .k-link,
.billing-tabs-telerik .k-tabstrip-item.k-selected .k-link {
    color: #fff;
    background-color: transparent;
}

.billing-tabs-telerik .k-tabstrip-content,
.billing-tabs-telerik .k-tabstrip-panels {
    display: none !important;
}

/* Email Us flat button inside billing tab strip */
.billing-tab-email-btn {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.875rem;
}

.billing-tab-add-loan-btn {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.875rem;
}

.billing-tab-email-btn:hover {
    color: #fff !important;
    text-decoration: underline;
    background-color: transparent !important;
}

.billing-tab-add-loan-btn:hover {
    color: #fff !important;
    text-decoration: underline;
    background-color: transparent !important;
}

/* ---- Menu (.mh-menu) ----------------------------------------
   Applied via <TelerikMenu Class="mh-menu">
   ------------------------------------------------------------ */
.mh-menu.k-menu {
    background-color: transparent;
    border: none;
    flex-grow: 0;
    display: flex;
    align-items: center;
}

.mh-menu.k-menu-horizontal {
    flex-wrap: nowrap;
}

.mh-menu .k-menu-item {
    color: var(--mh-menu-text, #fff);
    display: flex;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
}

.mh-menu .k-menu-link {
    color: var(--mh-menu-text, #fff);
    display: flex;
    align-items: center;
    padding: 0.5rem;
    padding-inline: 0.4rem;
    font-weight: var(--kendo-font-weight-bold, 700);
    gap: 0.5rem;
}

.mh-menu .k-menu-link .k-icon {
    order: 2;
    margin-left: auto;
}

.mh-menu .k-menu-link:hover,
.mh-menu .k-menu-link.k-hover {
    background-color: var(--mh-menu-hover, rgba(255, 255, 255, 0.15));
}

.mh-menu .k-menu-link-text {
    color: var(--mh-menu-text, #fff);
    white-space: nowrap;
}


/* ---- Account History Grid (.mh-account-history-grid) ----------
   Applied via <TelerikGrid Class="mh-account-history-grid">
   ------------------------------------------------------------ */
.mh-account-history-grid .unpaid-row {
    background-color: #ffcccc;
}