/**
* ========================================
* شعار الريال السعودي الجديد
* Saudi Riyal New Symbol - CSS
* ========================================
*
* الطريقة الأولى: CDN (الأسهل)
* أضف هذا في من layout/_master.blade.php:
*
*
* الطريقة الثانية: تحميل الخط محلياً
* حمّل الخط من: https://github.com/emran-alhaddad/Saudi-Riyal-Font
* وضعه في: public/fonts/saudi-riyal/
*/
/* ========================================
الطريقة المحلية - @font-face
======================================== */
@font-face {
font-family: "saudi_riyal";
src: url("/back/fonts/saudi-riyal/saudi_riyal.woff2") format("woff2"),
url("/back/fonts/saudi-riyal/saudi_riyal.woff") format("woff"),
url("/back/fonts/saudi-riyal/saudi_riyal.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "saudi_riyal_bold";
src: url("/fonts/saudi-riyal/saudi_riyal_bold.woff2") format("woff2"),
url("/fonts/saudi-riyal/saudi_riyal_bold.woff") format("woff"),
url("/fonts/saudi-riyal/saudi_riyal_bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap;
}
/* ========================================
CSS Classes للشعار
======================================== */
/* الشعار العادي */
.sar::before,
.riyal::before,
.icon-sar::before {
content: "\e900";
font-family: "saudi_riyal", sans-serif !important;
font-size: inherit;
color: inherit;
font-weight: normal;
margin-left: 4px;
vertical-align: middle;
}
/* الشعار Bold */
.sar-bold::before,
.riyal-bold::before,
.icon-sar-bold::before {
content: "\e900";
font-family: "saudi_riyal_bold", sans-serif !important;
font-size: inherit;
color: inherit;
font-weight: bold;
margin-left: 4px;
vertical-align: middle;
}
/* شعار بعد الرقم (للعربية RTL) */
.sar-after::after,
.riyal-after::after {
content: "\e900";
font-family: "saudi_riyal", sans-serif !important;
font-size: inherit;
color: inherit;
margin-right: 4px;
vertical-align: middle;
}
/* ========================================
Component: Currency Display
======================================== */
.currency {
display: inline-flex;
align-items: center;
gap: 4px;
direction: ltr;
}
.currency-symbol {
font-family: "saudi_riyal", sans-serif !important;
font-size: 0.9em;
line-height: 1;
}
.currency-symbol::before {
content: "\e900";
}
.currency-symbol.bold {
font-family: "saudi_riyal_bold", sans-serif !important;
}
.currency-value {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* ========================================
Utility Classes
======================================== */
/* أحجام مختلفة */
.sar-xs::before { font-size: 0.75em; }
.sar-sm::before { font-size: 0.875em; }
.sar-lg::before { font-size: 1.25em; }
.sar-xl::before { font-size: 1.5em; }
.sar-2xl::before { font-size: 2em; }
/* ألوان */
.sar-primary::before { color: #1F4788; }
.sar-success::before { color: #28a745; }
.sar-danger::before { color: #dc3545; }
.sar-warning::before { color: #ffc107; }
.sar-orange::before { color: #FF6B35; }
.sar-muted::before { color: #6c757d; }
/* ========================================
Price Tag Component
======================================== */
.price-tag {
display: inline-flex;
align-items: baseline;
gap: 2px;
font-weight: 600;
}
.price-tag .amount {
font-variant-numeric: tabular-nums;
}
.price-tag .symbol {
font-family: "saudi_riyal", sans-serif !important;
font-size: 0.85em;
}
.price-tag .symbol::before {
content: "\e900";
}
/* Price Tag Sizes */
.price-tag.sm {
font-size: 0.875rem;
}
.price-tag.lg {
font-size: 1.25rem;
}
.price-tag.xl {
font-size: 1.5rem;
}
.price-tag.xxl {
font-size: 2rem;
}
/* ========================================
Blade Component Helper
======================================== */
/*
* استخدم في Blade:
*
*
* أو
*
*
* 150.00
*
* أو ببساطة
* 150.00
*/
/* ========================================
RTL Support
======================================== */
[dir="rtl"] .currency,
.rtl .currency {
flex-direction: row-reverse;
}
[dir="rtl"] .price-tag,
.rtl .price-tag {
flex-direction: row-reverse;
}
/* ========================================
Print Styles
======================================== */
@media print {
.sar::before,
.riyal::before,
.currency-symbol::before,
.price-tag .symbol::before {
content: "\e900";
font-family: "saudi_riyal", sans-serif !important;
}
}