@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');

/* replaces SF Arabic (single-weight, Apple-licensed) as the site's default RTL body font — IBM Plex Sans Arabic ships real 100-700 weights, so font-weight utilities actually render distinct styles instead of collapsing to regular/faux-bold */
body {
    font-family: "IBM Plex Sans Arabic", sans-serif;
}

.ibm-plex-sans-arabic-thin {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.ibm-plex-sans-arabic-extralight {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.ibm-plex-sans-arabic-light {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ibm-plex-sans-arabic-regular {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-sans-arabic-medium {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex-sans-arabic-semibold {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.ibm-plex-sans-arabic-bold {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.w-\[100px\] { width: 100px; }
.h-\[100px\] { height: 100px; }
.ps-\[52\%\] {
    padding-inline-start: 52%;
}
.pt-\[40\%\]{
    padding-top: 40%;
}
.w-\[60\%\]{width: 60%;}
.rounded-s-\[1rem\]{
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.gap-y-12{
    row-gap: 5rem;
}

.swiper-button-prev, .swiper-button-next, .swiper-button-prev, .swiper-button-next{
    margin-top: 0 !important;
}

.layer-green{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #046A38 0%, rgba(4, 106, 56, 0.2) 100%);
    z-index: 1;
}

/* circular ring: 4px border, --ring-percent of the circumference colored --ring-color, rest white. Punches a transparent hole in the middle via mask so it's a ring, not a filled disc. Set --ring-percent/--ring-color inline per instance, e.g. style="--ring-percent:25%" */
.progress-ring{
    --ring-percent: 20%;
    --ring-color: #6EB52C;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(var(--ring-color) 0% var(--ring-percent), #ffffff var(--ring-percent) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}

/* main.css's .tab-button is a filled pill (used by the article/podcast tabs elsewhere); scope an underline-style override just for .lang-tabs so it doesn't affect those */
.lang-tabs .tab-button{
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 2px solid #DAD5E1;
    color: #000;
}
.lang-tabs .tab-button.active{
    background: transparent;
    border-bottom: 2px solid #046A38;
    color: #046A38;
}

.road-tabs .active{
    background: white;
    border: 0 !important;
}

.road-tabs button:not(:last-of-type){
    border-inline-end: 1px solid #D3D3D3;
}


.pagination .active { 
    border-radius: 8px;
    border-color: #8FAD8F;
}

.pagination button:first-child, .pagination button:last-child { 
    border-radius: 8px; 
}

/* divider between the two stat blocks in .lang-card .body: a real flex sibling with align-self:stretch, so it always matches the row's actual rendered height and sits centered in the gap at any width or content length — no fixed height/offset to retune per breakpoint */
.lang-divider{
    align-self: stretch;
    width: 2px;
    background: #336633;
}

@media (max-width: 992px){
    .pt-\[40\%\]{
        padding-top: 53% !important;
    }
    .details{
        flex-direction: column;
    }
}

/* ===== Modern page loader =====
   Overrides main.css's version, which stacked 3 separate "still working" indicators
   (pulsing logo + spinning ring + bouncing dots) plus a shimmering 3-color progress bar —
   busy rather than modern. Replaced with one focal element (a slim ring orbiting a
   softly-breathing logo) and a clean single-tone progress bar tied to the same JS
   (#loader-progress-bar width / #page-loader .loaded are still driven by main.js). */
.page-loader{
    background: radial-gradient(circle at 50% 42%, #0a7a42 0%, #046A38 45%, #023319 100%);
}

.loader-mark{
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-ring{
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.14);
    border-top-color: #F0C800;
    animation: loader-spin 1.1s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}

.loader-logo{
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    animation: loader-breathe 2.2s ease-in-out infinite;
}

.loader-progress{
    width: 180px;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.loader-progress-bar{
    height: 100%;
    background: linear-gradient(90deg, #F0C800, #ffe488);
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s ease;
}

.loader-text{
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    animation: loader-fade-in 0.6s ease both;
}

@keyframes loader-spin{
    to { transform: rotate(360deg); }
}

@keyframes loader-breathe{
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes loader-fade-in{
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}