/* ================================
   ML REFERRAL – MATCH INVITE FRIEND
   ================================ */

/* PAGE BACKGROUND (same depth) */
#mlReferralAppRoot {
    background: #ffd0c9 !important; /* deeper blush */
    padding: 24px;
}


/* REMOVE DARK FRAME BUT KEEP DEPTH */
#mlReferralAppRoot .mlref__container {
    background: transparent !important;
}

/* TITLE */
#mlReferralAppRoot .mlref__title {
    color: #b02f4a !important;
    font-weight: 700;
    margin-bottom: 16px;
}

/* NAV BAR – SAME TONE AS FILE */
#mlReferralAppRoot .mlref__navigation {
    background: #f8ded9 !important;
    border-radius: 14px;
    padding: 8px;
    margin-bottom: 20px;
}

#mlReferralAppRoot .mlref__navigation li {
    border-radius: 12px;
}

/* ACTIVE TAB – STRONGER RED */
#mlReferralAppRoot .mlref__navigation li.active {
    background: #c74b63 !important;
}

#mlReferralAppRoot .mlref__navigation-text {
    color: #8b2f3e !important;
    font-weight: 600;
}

#mlReferralAppRoot .mlref__navigation li.active .mlref__navigation-text {
    color: #ffffff !important;
}

/* MAIN CONTENT CARD (KEY FIX) */
#mlReferralAppRoot .mlref-invitation__container {
    background: #fdebe8 !important;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 20px rgba(176, 47, 74, 0.25);
}

/* REFERRAL LINK LABEL */
#mlReferralAppRoot .mlref-invitation__link-text {
    color: #8b2f3e;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

/* INPUT BAR */
#mlReferralAppRoot .mlref-invitation__aff-link {
    background: #ffffff;
    border-radius: 30px;
    border: 1px solid #e1a9a0;
    padding: 6px 12px;
}

#mlReferralAppRoot .mlref-invitation__link {
    border: none !important;
    background: transparent !important;
    color: #7a2c3a;
}

/* COPY ICON */
#mlReferralAppRoot .mlref-invitation__btn-copy {
    color: #b02f4a !important;
    font-size: 18px;
}

/* QR CARD */
#mlReferralAppRoot .mlref-invitation__qr {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
}

/* SAVE QR BUTTON – SAME AS FILE */
#mlReferralAppRoot .mlref-invitation__btn-save-qr {
    margin-top: 16px;
    width: 100%;
    background: #c74b63;
    color: #ffffff !important;
    border-radius: 30px;
    padding: 10px 0;
    font-weight: 600;
}

/* SHARE SECTION */
#mlReferralAppRoot .mlref-invitation__share {
    margin-top: 26px;
    text-align: center;
}

/* SHARE TITLE */
#mlReferralAppRoot .mlref-invitation__social-title {
    color: #b02f4a !important;
    font-weight: 700;
    margin-bottom: 12px;
}

/* SOCIAL ICONS */
#mlReferralAppRoot .mlref-invitation__social-item {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f1b7ae;
}

#mlReferralAppRoot .mlref-invitation__social-item:hover {
    background-color: #c74b63;
}

/* ===============================
ML Referral Navigation – Invite Friend Theme
=============================== */

#mlReferralAppRoot .mlref__navigation {
    background: #ffcbc5;
    border-radius: 16px;
    padding: 8px;
    gap: 6px;
}

/* Nav item base */
#mlReferralAppRoot .mlref__navigation > li {
    border-radius: 14px;
    transition: all 0.25s ease;
}

/* Default (inactive) */
#mlReferralAppRoot .mlref__navigation > li a {
    color: #6d2b34;
    opacity: 0.75;
}

/* Active tab – EXACT Invite Friend button gradient */
#mlReferralAppRoot .mlref__navigation > li.active {
    background: linear-gradient(45deg, #a8324c, #c45a6a);
    box-shadow: 0 6px 14px rgba(168, 50, 76, 0.35);
}

#mlReferralAppRoot .mlref__navigation > li.active a {
    color: #ffffff;
    opacity: 1;
}

/* Hover (non-active) */
#mlReferralAppRoot .mlref__navigation > li:not(.active):hover {
    background: rgba(168, 50, 76, 0.12);
}

/* Text */
#mlReferralAppRoot .mlref__navigation-text {
    font-weight: 700;
    font-size: 13px;
    margin-top: 4px;
}

/* Icons */
#mlReferralAppRoot .mlref__navigation-icon {
    filter: brightness(0.9);
}

#mlReferralAppRoot.mlref__navigation > li.active .mlref__navigation-icon {
    filter: brightness(1.2);
}

/* ===============================
Invite Friend – PRIMARY CTA PILL (EXACT)
Source: Latestadjustment_jc55inviteafriend.txt
=============================== */

/* Active navigation pill */
#mlReferralAppRoot .mlref__navigation > li.active {
    background: linear-gradient(
        90deg,
        #9f2f3f 0%,
        #c44f5f 100%
    ) !important;
    box-shadow: 0 6px 14px rgba(159, 47, 63, 0.45);
}

/* Save QR Image button */
#mlReferralAppRoot .mlref-invitation__btn-save-qr {
    background: linear-gradient(
        90deg,
        #9f2f3f 0%,
        #c44f5f 100%
    ) !important;
    box-shadow: 0 6px 14px rgba(159, 47, 63, 0.45);
}

/* Capsule shape */
#mlReferralAppRoot .mlref__navigation > li.active,
#mlReferralAppRoot .mlref-invitation__btn-save-qr {
    border-radius: 999px;
}

#mlReferralAppRoot .mlref-chiprate__rollover {
    background: #826059;
    box-shadow: 1px 1px 10px 0px #ab7267;
    color: #fff;
}

#mlReferralAppRoot .mlref-chiprate__table table tr:nth-child(odd) td.mlref-chiprate__product-row {
    background: #efbcb4;
    color: #000;
}

#mlReferralAppRoot .mlref-chiprate__table table tr th,
#mlReferralAppRoot .mlref-chipreport__table table tr th,
#mlReferralAppRoot .mlref-redeem__table table tr th,
#mlReferralAppRoot .mlref-history__table table tr th,
#mlReferralAppRoot .mlref-chiprate__table table tr td,
#mlReferralAppRoot .mlref-chipreport__table table tr td,
#mlReferralAppRoot .mlref-redeem__table table tr td,
#mlReferralAppRoot .mlref-history__table table tr td {
    color: #a15c63;
}

#mlReferralAppRoot .mlref-chipreport__header:before {
    background: #ab7368;
}

#mlReferralAppRoot .mlref-chipreport__table,
#mlReferralAppRoot .mlref-redeem__table,
#mlReferralAppRoot .mlref-history__table {
    thead th {
        background: #efbcb4;
    }
}

#mlReferralAppRoot .mlref-redeem__text {
    color: #a15c63;
}

#mlReferralAppRoot .mlref-chipreport__table .navigation-btn__btn-search {
    background: #af6b62;
}