/* --- TAMARA WIDGET MAIN OVERRIDES --- */
/* Strictly scoped to tamara-widget to avoid breaking other elements */
tamara-widget,
tamara-widget * {
    font-family: 'Tajawal', sans-serif !important;
}

tamara-widget {
    background: transparent !important;
    box-shadow: none !important;
}

/* ==========================================
   1. LIGHT MODE: APP THEME INTEGRATION
   ========================================== */

/* Main Text & Numbers */
tamara-widget .tamara-summary-widget__inline__text,
tamara-widget .tamara-widget__number-of-installments-node,
tamara-widget .tamara-summary-widget__amount,
tamara-widget::part(text),
tamara-widget::part(summary-text),
tamara-widget::part(installment-text),
tamara-widget::part(tamara-summary-text) {
    color: #4a4a4a !important;
    /* text-light from tailwind.config */
    font-weight: 700 !important;
}

/* Force hover state to prevent Tamara JS from changing color */
tamara-widget:hover .tamara-summary-widget__inline__text,
tamara-widget:hover .tamara-widget__number-of-installments-node,
tamara-widget:hover .tamara-summary-widget__amount {
    color: #4a4a4a !important;
}

/* Tamara Links (Learn More) */
tamara-widget .tamara-inline-learn-more-link,
tamara-widget::part(link),
tamara-widget::part(tamara-link) {
    color: #a85032 !important;
    /* primary from tailwind.config */
    text-decoration: underline !important;
    cursor: pointer !important;
}

tamara-widget .tamara-inline-learn-more-link:hover,
tamara-widget:hover::part(link),
tamara-widget:hover::part(tamara-link) {
    color: #8a4229 !important;
    /* primary-hover */
}

/* SVG Icon / Currency Fills */
tamara-widget svg path {
    fill: #4a4a4a !important;
    /* text-light */
}


/* ==========================================
   2. DARK MODE OVERRIDES
   ========================================== */

/* Main Text & Numbers - Dark Mode */
html.dark tamara-widget .tamara-summary-widget__inline__text,
html.dark tamara-widget .tamara-widget__number-of-installments-node,
html.dark tamara-widget .tamara-summary-widget__amount,
html.dark tamara-widget::part(text),
html.dark tamara-widget::part(summary-text),
html.dark tamara-widget::part(installment-text),
html.dark tamara-widget::part(tamara-summary-text) {
    color: #e2e8f0 !important;
    /* text-dark from tailwind.config */
}

/* Force hover state to prevent invisible text in Dark Mode */
html.dark tamara-widget:hover .tamara-summary-widget__inline__text,
html.dark tamara-widget:hover .tamara-widget__number-of-installments-node,
html.dark tamara-widget:hover .tamara-summary-widget__amount {
    color: #e2e8f0 !important;
}

/* Tamara Links (Learn More) - Dark Mode */
html.dark tamara-widget .tamara-inline-learn-more-link,
html.dark tamara-widget::part(link),
html.dark tamara-widget::part(tamara-link) {
    color: #a85032 !important;
    /* primary */
}

html.dark tamara-widget .tamara-inline-learn-more-link:hover,
html.dark tamara-widget:hover::part(link),
html.dark tamara-widget:hover::part(tamara-link) {
    color: #8a4229 !important;
    /* primary-hover */
}

/* SVG Icon / Currency Fills - Dark Mode */
html.dark tamara-widget svg path {
    fill: #e2e8f0 !important;
    /* text-dark */
}

/* Safely invert the Tamara Logo image in Dark Mode */
html.dark tamara-widget img.tamara-badge,
html.dark tamara-widget img[src*="tamara"] {
    filter: brightness(0) invert(0.9) sepia(0.1) hue-rotate(180deg) saturate(0) !important;
    opacity: 0.9 !important;
}


/* ==========================================
   3. NATIVE CSS VARIABLES FALLBACK
   Instructs Tamara's engine directly just in case
   ========================================== */
tamara-widget {
    --tamara-font-family: 'Tajawal', sans-serif !important;
}

html.dark tamara-widget {
    --tamara-text-color: #e2e8f0 !important;
    --tamara-summary-text-color: #e2e8f0 !important;
    --tamara-summary-amount-color: #e2e8f0 !important;
    --tamara-installment-number-color: #e2e8f0 !important;
    --tamara-link-color: #a85032 !important;
    --tamara-link-hover-color: #8a4229 !important;
}