/**
 * Saudi Riyal Symbol Styles
 * 
 * This CSS provides styling for the new Saudi Riyal symbol (ر.س)
 * throughout the application. Supports RTL and LTR layouts.
 * 
 * Usage:
 *   - Include this CSS in your layout
 *   - Use <x-currency.riyal-symbol /> or showAmount() helper
 */

/* ========================= Riyal Symbol Base Styles ========================= */

.riyal-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    /* RTL-aware spacing */
    margin-inline-end: 0.15em;
}

.riyal-symbol svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Size variants */
.riyal-symbol--xs { width: 0.75em; height: 0.75em; }
.riyal-symbol--sm { width: 0.875em; height: 0.875em; }
.riyal-symbol--md { width: 1em; height: 1em; }
.riyal-symbol--lg { width: 1.25em; height: 1.25em; }
.riyal-symbol--xl { width: 1.5em; height: 1.5em; }

/* Fallback text styling */
.riyal-symbol-fallback {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    margin-inline-end: 0.15em;
}

/* ========================= Currency Amount Container ========================= */

.currency-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 0.15em;
    white-space: nowrap;
    /* Force LTR for numbers, respecting surrounding RTL context */
    direction: ltr;
    unicode-bidi: embed;
}

/* RTL context adjustment - symbol appears after number */
[dir="rtl"] .currency-amount {
    direction: ltr;
    unicode-bidi: embed;
}

.currency-amount__value {
    font-variant-numeric: tabular-nums;
}

.currency-amount__text {
    font-size: 0.85em;
    opacity: 0.9;
    margin-inline-start: 0.25em;
}

/* ========================= Context-specific Styles ========================= */

/* Widget/Dashboard amounts - larger symbol */
.widget-amount .riyal-symbol {
    width: 1.1em;
    height: 1.1em;
}

/* Table cell amounts - aligned */
td .currency-amount,
th .currency-amount {
    justify-content: flex-end;
}

/* Pricing card amounts - prominent symbol */
.pricing-card__number .riyal-symbol {
    width: 0.8em;
    height: 0.8em;
    margin-inline-end: 0.1em;
}

/* Invoice/Receipt amounts */
.invoice-amount .riyal-symbol {
    width: 1em;
    height: 1em;
}

/* ========================= Dark Mode Support ========================= */

[data-theme="dark"] .riyal-symbol svg,
.dark-mode .riyal-symbol svg {
    fill: currentColor;
}

/* ========================= Print Styles ========================= */

@media print {
    .riyal-symbol svg {
        fill: #000 !important;
    }
    
    .currency-amount {
        color: #000 !important;
    }
}

/* ========================= Responsive Adjustments ========================= */

@media (max-width: 576px) {
    .currency-amount__text {
        font-size: 0.75em;
    }
}

/* ========================= Animation (Optional) ========================= */

.riyal-symbol--animated svg {
    animation: riyal-pulse 2s ease-in-out infinite;
}

@keyframes riyal-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}