@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

@import url("https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/index.css");

/* أيقونة الريال */
.icon.sar{

  color:#000;
  font-size:30px;
  font-weight:700;
}

/* ضبط الرمز */
.icon-saudi_riyal_new{
  font-size:30px;
  line-height:1;
}

.banner-entry {

    height: 110px;

}
.grid-flow-row {
    grid-auto-flow: row;
    grid-template-columns: repeat(2,minmax(0,1fr));
}

@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;700&display=swap');*:not(i) {
    font-family: 'El Messiri', sans-serif;
}


header.store-header *{

  color: var(--3);
}
body.dark-theme header.store-header * {
    color: var(--3);
}

.ssm-kpi {
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}


section.s-block.s-block--fixed-banner.wide-placeholder:first-of-type {
    margin-top: 19px;
}
/* ألبنر العريض بكل الشاشة */
section:nth-of-type(1000).s-block.s-block--fixed-banner.wide-placeholder .container {
    padding: 0;
    margin: 0;
    max-width: 100%;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    position: relative; /* تحديد الوضع لاستخدام الأنيميشن */
}

section.s-block.s-block--fixed-banner.wide-placeholder .container:hover {
    transform: translateY(-8px);
    animation: bounce 0.5s ease infinite; /* تطبيق أنيميشن عند التحويل */

}

@keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

section.s-block.s-block--fixed-banner.wide-placeholder .container {
    transition: transform 0.3s, box-shadow 0.3s;
}
@media (max-width: 991px) {
    section.s-block.s-block--fixed-banner.wide-placeholder .container {
        padding: 0;
    }
}
 

.product-entry button.s-button-element {
    background: linear-gradient(223deg, var(--4), var(--4));
    background: linear-gradient(227deg, var(--4), var(--4));
    border: 0;
    position: absolute;
    width: 75%;
    margin: auto;
    left: 0;
    right: 0;
    color: var(--3);
}

.product-entry {
    border-radius: 30px;
    border: 3px solid var(--1);
    -webkit-box-shadow: 0 0px 0px 0 rgb(0 0 0 / 20%), 0 0px 15px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 20%), 0 0px 15px 0 rgb(0 0 0 / 10%);
    position: relative;
}


.product-entry .donating-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.product-entry .donating-wrap .center-between.mb-5 {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.product-entry .product-entry__image {
    border-radius: 30px 30px 0px 0px;
}

body.dark-theme .s-slider-block__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: linear-gradient(227deg, var(--4), var(--4));
    color: var(--3);
    border-radius: 10px;
    padding: 0px 10px;
}

.s-slider-block__title {
    height: 50px;
}

.s-slider-block__title h2 {
    padding: 0 !important;
}

body.dark-theme .s-slider-nav-arrow svg {
    fill: var(--3);
}

.s-slider-nav-arrow {
    border: 0;
    background: #20201f;
}

body.dark-theme .s-slider-block__display-all {
    color: var(--3);
}

body.dark-theme .s-block--features__item .feature-icon * {
    color: var(--3) !important;
}

footer.store-footer * {
  color: var(--4-4-4);
    text-align: center;
    justify-content: center;
}


body.dark-theme footer.store-footer * {
    color: var(--3);
    text-align: center;
    justify-content: center;
}


.s-quantity-input-input {
    color: #f00;
}

header.store-header span.s-cart-summary-count {
            background: var(--1);
    color: #ffffff;
}

button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center {
    color: #fff ;
}

section#similar-slider {
    padding-bottom: 10px;
}

.swiper.s-slider-container.swiper-initialized.swiper-ios div.swiper-wrapper {
    padding-bottom: 30px;
}

@media(max-width: 992px) {
    salla-social-share {
        display: inline-flex !important
    }
}

.s-slider-block__title h2, .main-content h1, .s-block__title h2 {
    text-transform: uppercase;
    background-image: linear-gradient(-225deg,#000000 0,#e3e3d8 29%,var(--2) 67%,var(--3) 100%);
    background-size: 200% auto;
    color: var(--3);
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 4s linear infinite textclip;
    display: inline-block;
    font-weight: 600;
    border-bottom: 3px;
    font-size: 23px;
    line-height: 1.5;
}

@keyframes textclip {
    100% {
        background-position: 200% center;
    }
}

.s-product-card-entry:hover .s-product-card-content-title a {
    color: var(--color-primary);
}

.s-product-card-content-title a {
    line-height: 2rem;
}

@media (max-width: 1024px) {
    .s-product-card-content-title a {
        font-size: 1rem;
    }

    [dir=rtl] salla-slider[type]:not(.hydrated)>div, [dir=rtl] salla-slider[type]:not(.hydrated) .swiper>div>div, [dir=rtl] .carousel-slider .swiper {
        padding-left: 0;
    }

    div#mainnav[style="height: 106px;"] {
        height: 73px !important;
    }
}

.s-product-card-entry:hover img {
    scale: 1.05;
}

.s-product-card-entry {
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 1px 5px var(--1);!important;
}

.s-button-primary-outline:hover {
    color: #000000!important;
}

.s-product-card-content-title a {
    font-size: 1.2rem;
}

.s-button-primary-outline {
    color: #000000;
}

.s-button-icon .s-button-text {
    color: #000;
}





.s-block__title h2, .s-slider-block__title h2 {
    font-size: 1.75rem;
}

.s-product-card-content-subtitle {
    display: none;
}

.s-products-slider-card {
    padding-top: 5px!important;
    padding-bottom: 5px!important;
    border-radius: 10px;
    padding: 20px;
    position: relative; /* تحديد الوضع لاستخدام الأنيميشن */
}
.s-products-slider-card:hover{
    animation: bounce 0.5s ease infinite; /* تطبيق أنيميشن عند التحويل */

}
@keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

.s-product-card-promotion-title, .promotion-title {
    background-color: var(--4);
    font-weight: 400;
}

.s-product-card-vertical .s-product-card-image {
    overflow: hidden;
}

.s-product-card-entry img {
    transition: 0.3s;
}

.s-block--features__item:hover h4 {
    color: var(--1)!important;
    transition: all .1s ease;
}

.s-block--features__item .feature-icon {
    transition: 0.3s;
}

.s-block--features__item:hover .feature-icon {
    scale: 1.1;
}

body.dark-theme .s-block--features__item .feature-icon i {
    color: var(--3)!important;
    transition: 0.3s;
}

.s-block--features__item:hover .feature-icon i {
    color: var(--2)!important;
}

body.dark-theme .s-block--features__item .feature-icon {
    background-color: transparent ;
    border: 1px solid var(--4);
}



body.dark-theme .store-footer h3 {
    font-size: 1.3rem;
    color: var(--3);
}

.border, .store-footer .social-link {
    border-color: var(--2);
}

.store-footer__inner .text-gray-400 {
    color: var(--3)!important;
}

@media (min-width: 1024px) {
    .store-footer__inner .container > div {
        grid-column: span 2/span 2;
    }
}

.border, .store-footer .social-link {
    border-color: var(--1)!important;
}

.footer-is-light .store-footer .text-gray-400 {
    color: #000;
    font-weight: bold;
}

.store-footer .unicode {
    display: none;
}

.store-footer__inner .container > div:nth-child(3) > div:nth-child(1) a {
    width: fit-content;
    margin: 0 !important;
    display: inline-block;
}

.store-footer__inner .hidden {
    display: block;
}

.store-footer__inner .lg\:hidden {
    display: none!important;
}

body.dark-theme .top-navbar, body.dark-theme .main-nav-container {
    width: 100%;
    background: var(--4);
}

.s-search-inline {
    min-width: 220px;
    max-width: 700px;
    margin: auto;
}

.top-navbar .s-search-input {
    color: #9a837d!important;
    border: 1px solid var(--3) !important;
    
}

.topnav-is-dark .top-navbar {
    Background-color: var(--4);
}

.header-btn__icon{
 border-color: var(--3)!important;
    color: var(--3) !important;
}

body.dark-theme .header-btn__icon {
    border-color: var(--3)!important;
    color: var(--3) !important;
}



@media only screen and (min-width: 1024px) {
    .main-menu li>a:hover {
        color: #ac938e!important;
    }

    .main-menu li>a {
        color: #060606!important;
    }
}



body.dark-theme .store-header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.3)!important;
}

.s-product-card-image-contain {
    object-fit: cover;
}

.max-w-sm {
    border-bottom: 1px solid;
    padding-bottom: 1rem;
    border-image: linear-gradient(244deg, var(--3), var(--1)) 1;
}



body.dark-theme .btn--collapse,body.dark-theme .shadow-default,body.dark-theme ,body.dark-theme .bg-gray-50,body.dark-theme .app-inner.flex.flex-col.min-h-full,body.dark-theme .s-block,body.dark-theme .s-modal-body {
    background: var(--3) !important;
    background-color: var(--4) !important;
}

body.dark-theme .shadow-default,body.dark-theme .text-gray-900,body.dark-theme section.bg-white.p-5.rounded-md.mb-5,body.dark-theme article#more-content,body.dark-theme .font-bold,body.dark-theme .s-modal-title,body.dark-theme .s-modal-close,body.dark-theme h2.mb-4.mr-2.text-lg.font-bold.leading-\[1\.2\],body.dark-theme .testimonials-slider .testimonial,body.dark-theme .s-block--features__item p,body.dark-theme .s-block--features__item h4,body.dark-theme .s-product-card-entry,body.dark-theme .s-product-card-content-title a {
    color: var(--3) !important;
}

body.dark-theme .s-login-modal-main-btn:hover,body.dark-theme section.cart-item.bg-white.p-5.xs\:p-7.rounded-md.mb-5.relative,body.dark-theme .s-comments-product, body.dark-theme .s-modal-close,body.dark-theme span.fix-align,body.dark-theme .text-primary,body.dark-theme .s-login-modal-main-btn,body.dark-theme .s-block--features__item,body.dark-theme .testimonials-slider .testimonial,body.dark-theme .s-product-card-entry,body.dark-theme .mm-spn.mm-spn--light,body.dark-theme .s-block--testimonials .s-slider-block__title-nav button {
    background-color: var(--4-4);
    color: var(--3) !important;
}

body.dark-theme .s-button-primary-outline {
    fill: var(--1);
   background: linear-gradient(to top,#878787,#f6f7f7);
    color: transparent;
}

body.dark-theme .s-button-text {
    color: var(--3);
}

salla-slider.photos-slider .swiper-slide {
    position: relative;
    margin-left: 0rem;
    margin-right: 0rem;
    height: auto;
    width: 100%;
    overflow: hidden;
    border-radius: 0.375rem;
}

section:nth-of-type(1).s-block.s-block--photos-slider {
    margin-top: 0rem;
}

.s-slider-has-notitle .s-slider-block__title {
    margin-bottom: -30px;
}

.swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-rtl.swiper-ios.swiper-backface-hidden {
    padding-left: 0;
}

body.dark-theme .s-login-modal-main-btn {
    border-color: var(--4);
}

body.dark-theme .form-label,body.dark-theme .s-button-light,body.dark-theme .s-button-icon,body.dark-theme .s-button-icon .s-button-text {
    color: var(--3);
}

body.dark-theme section.bg-white.p-5.rounded-md.mb-5 {
    background-color: var(--4-4);
}

body.dark-theme section.bg-white.p-5.rounded-md.mb-5 {
    background-color: var(--4-4);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track-piece {
    background-color: rgba(0,0,0,0.2);
    -webkit-border-radius: 0px;
}

::-webkit-scrollbar-thumb:vertical {
    height: 200px;
    background-color: var(--1);
    -webkit-border-radius: 0px;
}

::-webkit-scrollbar-thumb:vertical:hover {
    background-color: var(--3);
}

::-webkit-scrollbar-thumb:horizontal {
    width: 200px;
    background-color: rgba(125,125,125,0.7);
    -webkit-border-radius: 0px;
}

.mode-toggler.header-btn.cursor-pointer {
    width: 25px;
    height: 25px;
    order: 1;
    position: relative;
    margin: 0 15px;
}

button.header-btn {
    order: 2;
}

salla-cart-summary.ml-4.rtl\:ml-\[unset\].rtl\:mr-4.hydrated {
    order: 3;
}

body.dark-theme .mode-toggler.header-btn.cursor-pointer {
    content: url("data:image/svg+xml,%3Csvg class='mode light-mode' xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'%3E%3C/circle%3E%3Cline x1='12' y1='1' x2='12' y2='3'%3E%3C/line%3E%3Cline x1='12' y1='21' x2='12' y2='23'%3E%3C/line%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'%3E%3C/line%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'%3E%3C/line%3E%3Cline x1='1' y1='12' x2='3' y2='12'%3E%3C/line%3E%3Cline x1='21' y1='12' x2='23' y2='12'%3E%3C/line%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'%3E%3C/line%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'%3E%3C/line%3E%3C/svg%3E%0A");
    display: block;
    filter: invert(1);
}

body.dark-theme .s-products-slider-card.swiper-slide {
    
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    
    border: 1px solid var(--4);
}

.topnav-is-dark .top-navbar {
    Background-color: var(--4);
    
}

body.dark-theme .link--primary {
    color: var(--3);
}

body.dark-theme .bg-white,body.dark-theme .s-button-light-outline {
    background-color: var(--4-4);
}


body.dark-theme .s-product-card-vertical .s-product-card-wishlist-btn button {
    background-color: var(--1) !important;
}


@media only screen and (max-width: 700px) {
    .navbar-brand {
        width: 20vw;
    }
}

#salla-modal > div.s-modal-wrapper > div > div.s-modal-header > div > span {
    visibility: hidden;
    
}



body.dark-theme .btn-top, .btn-top {
    margin: 15px auto 0px auto !important;
    color: var(--3) !important;
    font-weight: 600;
    font-size: 1rem;
    width: 100%;
}

.btn-top {
    color: #892626 !important;
}



body.dark-theme .s-slider-nav-arrow svg {
    fill: var(--1);
    fill: var(--3);
}

.s-block.s-block--banners > .grid {
    grid-template-columns: 1fr 1fr ;
}

.s-block.s-block--banners > .grid .banner-entry {
    padding-top: 0%;
    height: 334px;
}

.two-row .banner-entry:first-child {
    grid-column: auto;
    grid-row: auto;
}

.s-block.s-block--banners:nth-of-type(19) {
    margin-bottom: 1rem;
}

@media (max-width: 991px) {
    .s-block.s-block--banners > .grid {
        grid-template-columns: 1fr 1fr;
    }

    .s-block.s-block--banners > .grid .banner-entry {
        height: 134px;
    }
}

body.index div.app-inner.flex.flex-col.min-h-full > section.s-block--banners:nth-child(n) div div:hover {
    transform: translateY(-8px);
    box-shadow: 0 -10px 10px 10px rgb(0 0 0 / 1%) !important;
}

body.index div.app-inner.flex.flex-col.min-h-full > section.s-block--banners:nth-child(n) div {
    transition: transform 0.3s, box-shadow 0.3s;
}

.banner-entry {
    background-color: transparent;
}

body.dark-theme .s-slider-block__title-left {
    box-shadow: 0 5px 15px 0 rgb(0 0 0 / 22%);
    color: #ffffff;
    border-color: #3131301a;
    background: var(--4-4);
    padding: 7px;
    border-radius: 15px;
}

body.dark-theme .s-user-menu-dropdown, body.dark-theme .s-slider-nav-arrow {
    border: 0;
    background: var(--4-4-4);
}

body.dark-theme label.hidden.sm\:block.rtl\:ml-3.ltr\:mr-3.whitespace-nowrap,body.dark-theme i.sicon-keyboard_arrow_left.arrow.mx-2 {
    color: var(--3);
}

body.dark-theme .form-input {
    color: var(--3);
    background: var(--4-4);
    border-color: var(--4-4-4);
}

body.dark-theme .s-login-modal-currentEmail {
    color: var(--3);
}


:root {
  --color-primary: #d19968;
    --color-primary-dark: #d19968;
    --color-primary-light: #d19968;
    --color-primary-reverse: #edf5ff;
    --1: #d19968;
    --2: #e1b38a;
    --3: #d19968;
    --4: #3b3b39;
    --4-4-4: #20201f;
    --4-4: #3131309c;
 
}



 

body.dark-theme .s-user-menu-trigger {
    background: transparent;
}

body.dark-theme .s-product-card-price {
    color: var(--3);
}






body.dark-theme .s-table thead,body.dark-theme .s-table tbody tr,.lg\:shadow-default {
    background: var(--4-4); color: var(--3);
}

body.dark-theme span.w-40.inline-block.font-normal,
body.dark-theme section.border-t.mt-10.pt-8 p,
body.dark-theme .w-full.flex.justify-between.text-sm.py-2\.5 b,
body.dark-theme .flex.justify-between.text-sm.py-2\.5,
body.dark-theme body,
body.dark-theme section.border-t.mt-10.pt-8,
body.dark-theme .text-gray-600,
body.dark-theme dd.font-medium,
body.dark-theme .py-5.center-between,
body.dark-theme a.block.leading-5.mb-1\.5.md\:text-base.font-semibold.transition-colors.text-gray-500.hover\:text-primary,
body.dark-theme .flex.rtl\:space-x-reverse.space-x-5.mb-4,
body.dark-theme .rtl\:ml-2.ltr\:mr-2.font-normal.text-gray-400,
body.dark-theme td.single-order-header-item.w-full.md\:w-auto.px-3.md\:px-6.py-2.md\:py-4.md\:h-20.whitespace-nowrap.text-sm,
body.dark-theme section.bg-white.p-5.rounded-md,
body.dark-theme span.s-user-menu-dropdown-item-title,
body.dark-theme .flex.items-center.space-x-2.rtl\:space-x-reverse
{color: var(--3);}



.bg-inherit{
  background-color: #fff;
}
body.dark-theme .bg-inherit{
    background-color:var(--4-4);
    
}

}
.store-footer h3{
  color: var(--4-4-4);
}

.s-slider-block__title-right{
  
    background-size: cover;
    background-color: transparent !important;
    background-position: center;
    background-repeat: no-repeat;
    
}


.footer-is-light .store-footer .store-footer__inner{
  background: #7ad15c;
}
/*
.store-footer::before {
    content: "";
    background: url(https://i.ibb.co/ZYdz3gg/feafqaf.png);
    background-position: top;
    width: 100vw;
    height: -webkit-fill-available;
    background-size: cover;
    position: absolute;
    left: 0;
    z-index: -1;
    bottom: 0;
}
*/
.footer-is-light .store-footer .store-footer__inner{
background: #7ad15c00;
}





.footer-is-light .store-footer{
   
    background-color: #fbf9f900;
}
.sicon-shopping-bag:before{
  content: "\e906"
}

body.dark-theme .s-slider-block__title-right{
  
    background-size: cover;
    background-color: transparent !important;
    background-position: center;
    background-repeat: no-repeat;
  
}

footer.store-footer * {
    color: #e5ab7c;
 
}
.s-product-card-content-footer .s-button-element::before {
  content:"تواصل الان " !important;
  display: block !important;
  width: 100% !important;
}
.s-product-card-content-footer .s-button-element {
  display: flex !important;
  flex-direction: column;
  max-height: 40px !important;
  line-height: 35px !important;
  overflow: hidden !important;
}






.ssm-kpi {
  direction: rtl;
  padding: 30px 0;
}

.ssm-kpi__inner {
  width: min(1100px, 92%);
  margin: auto;
  padding: 20px;
  border-radius: 18px;
  background: #f8f9fb;
}

.ssm-kpi__title {
  margin: 0 0 8px;
  font-size: 22px;
}

.ssm-kpi__subtitle {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}

.ssm-kpi__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.ssm-kpi__card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  border: 1px solid #eee;
  text-align: center;
}

.ssm-kpi__value {
  font-weight: bold;
  font-size: 26px;
  margin-bottom: 6px;
}

.ssm-kpi__label {
  font-size: 13px;
  opacity: 0.85;
}

.ssm-kpi__wide {
  grid-column: span 2;
}

/* تابلت */
@media (max-width: 900px) {
  .ssm-kpi__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ssm-kpi__wide {
    grid-column: span 2;
  }
}

/* جوال */
@media (max-width: 520px) {
  .ssm-kpi__grid {
    grid-template-columns: 1fr;
  }
  .ssm-kpi__value {
    font-size: 22px;
  }
}

#ssm-kpi-fixed {
  z-index: 5;
}

.ssm-kpi {
  width: min(1100px, 92%);
  margin: auto;
  text-align: center;
}

.ssm-title {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 20px;
}

.ssm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.ssm-card {
  background: #fff;
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}

.ssm-card .num {
  font-size: 28px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .ssm-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}



#ssm-kpi-root { 
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.ssm-kpi { text-align: center; margin: 60px 0; }
.ssm-title { font-size: 26px; font-weight: 700; margin-bottom: 24px; }
.ssm-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.ssm-card { background:#fff; padding:20px; border-radius:14px; box-shadow:0 4px 18px rgba(0,0,0,.06); }
.ssm-card .num { font-size:28px; font-weight:700; }
.ssm-card .label { margin-top:6px; color:#666; }

@media (max-width: 768px) {
  .ssm-grid { grid-template-columns: repeat(2,1fr); }
}




/* ===== Section ===== */
.ssm-kpi{
  margin-top:40px;
  margin-bottom:40px;
}

/* ===== Header ===== */
.ssm-kpi__head{
  text-align:center;
  margin-bottom:22px;
}

.ssm-kpi__title{
  font-size:26px;
  font-weight:700;
}

.ssm-kpi__subtitle{
  font-size:14px;
  opacity:.7;
}

/* ===== Grid ===== */
.ssm-kpi__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

@media(max-width:900px){
  .ssm-kpi__grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:500px){
  .ssm-kpi__grid{
    grid-template-columns:1fr;
  }
}

/* ===== Card ===== */
.ssm-kpi__card{
  background:#fff;
  border-radius:14px;
  padding:20px;
  text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:.2s;
}

.dark-theme .ssm-kpi__card{
  background:#1c1c1c;
}

/* Hover */
.ssm-kpi__card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,.08);
}

/* ===== Icon ===== */
.ssm-kpi__card .icon{
  font-size:30px;
  margin-bottom:6px;
  opacity:.9;
}


.ssm-kpi__card small{
  font-size:13px;
  opacity:.7;
}

/* ===== Label ===== */
.ssm-kpi__card .label{
  font-size:14px;
  margin-top:6px;
  opacity:.8;
}
.ssm-kpi__card .value{
  font-weight:700;
}

.icon{
  color:#16a34a;
}

.icon{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 10px;
  color:#111;
}

.icon svg{
  width:34px;
  height:34px;
  stroke:#1f2937;
}

.ssm-kpi,
.ssm-kpi *{
  font-family: 'Tajawal', sans-serif !important;
}