/* ==========================================================================
   BLEND — Components
   Every value in this file was read from the live site (post-40.css,
   post-482.css, elementor-kit-5, #wp-custom-css and computed styles).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Original site-wide override (#wp-custom-css)
   -------------------------------------------------------------------------- */
p,h1,h2,h3,h4,h5,h6,div,label,select,option,form,textarea{
  font-family:"DINNextLTArabic-Regular", Sans-serif;
}

/* ==========================================================================
   1. HEADER
   ========================================================================== */
.site-header{
  display:flex;
  flex-direction:row;
  gap:var(--con-gap);
  width:100%;
  padding:10px 70px;
  min-width:0;
}
.site-header__col{
  flex:1 1 0%;
  display:flex;
  flex-direction:column;          /* Elementor container default */
  justify-content:center;         /* --justify-content:center = vertical */
  gap:var(--con-gap);
  padding:var(--con-padding);
  min-width:0;
}
.site-header__nav-col{ flex:0 0 70%; width:70%; }
.site-header__nav-col > nav{ width:100%; }

.site-header__logo{ text-align:start; width:100%; }
.site-header__logo img{ width:55%; display:inline-block; vertical-align:middle; }

/* --- Primary navigation (Elementor icon-list, inline) --- */
.nav-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  margin-inline:-25px;          /* calc(-50px/2) */
}
.nav-list__item{
  position:relative;
  margin-inline:25px;           /* calc(50px/2) */
  display:flex;
  align-items:center;
}
.nav-list__item:not(:last-child)::after{
  content:"";
  position:absolute;
  inset-inline-end:-25px;
  top:0;
  height:100%;
  border-inline-start:1px solid var(--divider);
}
.nav-list__link{
  font-size:18px;
  font-weight:400;
  color:#FFFFFF;
  transition:color .3s;
  white-space:nowrap;
}

/* --- Language switcher (cpel-switcher) --- */
.lang-switch{ display:flex; align-items:center; justify-content:center; }
.lang-switch__link{
  color:#FFFFFF;
  font-weight:600;
  padding-inline-end:10px;
  transition:color .3s;
}
.lang-switch__link:hover,
.lang-switch__link:focus{ color:var(--brand-accent); }

/* --- Mobile header --- */
.site-header--mobile{ padding:10px 70px; }
@media (min-width:768px){
  .site-header--mobile .site-header__logo-col{ flex:0 0 25%; width:25%; }
}
.site-header--mobile .site-header__logo img{ width:55%; }
.site-header__burger{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  background:none;
  border:0;
  padding:0;
  color:var(--brand-primary);
  cursor:pointer;
}
.site-header__burger svg{ width:35px; height:35px; fill:currentColor; }

@media (max-width:767px){
  .site-header,
  .site-header--mobile{ padding:0; }
  .site-header__col{ padding:0; }
  .site-header--mobile .site-header__logo-col{ flex:0 0 45%; width:45%; }
  .site-header--mobile .site-header__burger-col{ flex:0 0 44%; width:44%; }
  .site-header--mobile .site-header__logo{ text-align:start; }
  .site-header--mobile .site-header__logo img{ width:60%; }
  .nav-list{ margin-inline:-7px; }        /* calc(-14px/2) */
  .nav-list__item{ margin-inline:7px; }
  .nav-list__item:not(:last-child)::after{ inset-inline-end:-7px; }
  .nav-list__link{ font-size:17px; }
}

/* ==========================================================================
   2. OFF-CANVAS MOBILE MENU  (Bootstrap offcanvas, restyled to the original)
   ========================================================================== */
.offcanvas.blend-drawer{
  width:70%;
  height:100vh;
  background-color:#FFFFFF;
  border:0;
}
.offcanvas-backdrop.show{ opacity:1; background-color:var(--overlay-dark); }

.blend-drawer__body{
  display:flex;
  flex-direction:column;
  gap:var(--con-gap);
  padding:20px;
}
.blend-drawer__close{
  display:flex;
  justify-content:flex-start;
  background:none;
  border:0;
  padding:0;
  color:var(--brand-secondary);
  cursor:pointer;
}
.blend-drawer__close svg{ width:30px; height:30px; fill:currentColor; }

.blend-drawer .nav-list{
  flex-direction:column;
  align-items:flex-start;
  margin-inline:0;
}
.blend-drawer .nav-list__item{
  margin-inline:0;
  padding-block-end:25px;      /* calc(50px/2) */
}
.blend-drawer .nav-list__item:not(:first-child){ margin-block-start:25px; }
.blend-drawer .nav-list__item::after{ display:none; }   /* border-width:0 in original */
.blend-drawer .nav-list__link{ color:var(--brand-secondary); font-size:18px; }
.blend-drawer .lang-switch{ justify-content:flex-start; }
.blend-drawer .lang-switch__link{ color:var(--brand-secondary); }

@media (max-width:767px){
  .blend-drawer .nav-list__item{ padding-block-end:10px; }
  .blend-drawer .nav-list__item:not(:first-child){ margin-block-start:10px; }
  .blend-drawer .nav-list__link{ font-size:17px; }
}

/* ==========================================================================
   3. HERO
   ========================================================================== */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100vh;
  padding:10px 0 100px;
  gap:var(--con-gap);
  overflow:hidden;
  background:url("https://blendksa.com/wp-content/uploads/2024/12/Screenshot-579.png") 50% 50%;
  background-size:cover;
}
.hero__video{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.hero__video iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:100vw;
  height:56.25vw;             /* 16:9 */
  min-height:100vh;
  min-width:177.77vh;
  transform:translate(-50%,-50%);
  border:0;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-color:#000000;
  opacity:.2;
  z-index:1;
}
.hero > .site-header,
.hero > .hero__title{ position:relative; z-index:2; }

.hero__title{
  text-align:center;
  font-size:40px;
  font-weight:600;
  color:#FFFFFF;
  width:100%;
}

@media (max-width:767px){
  .hero{ min-height:94vh; padding:10px 10px 100px; }
}

/* ==========================================================================
   4. INTRO (split heading + brand pattern)
   ========================================================================== */
.intro{
  min-height:100vh;
  padding:250px 10px;
  gap:0;
}
.intro > .con__inner{ gap:0; }
.intro__text{
  flex:0 0 50%;
  width:50%;
  display:flex;
  flex-direction:column;
  padding:40px 10px 10px;
}
.intro__title{
  text-align:start;
  font-size:30px;
  font-weight:600;
  color:var(--brand-secondary);
}
.intro__pattern{
  flex:0 0 50%;
  width:50%;
  padding:150px 10px 10px;
  background-image:url("https://blendksa.com/wp-content/uploads/2024/12/Pattern-min.png");
  background-position:top left;
  background-repeat:no-repeat;
  background-size:40% auto;
}
@media (max-width:767px){
  .intro{ padding:10px; }
  .intro__text{ flex:1 1 100%; width:100%; justify-content:center; }
  .intro__title{ font-size:25px; }
}

/* ==========================================================================
   5. CEO MESSAGE
   ========================================================================== */
.ceo{
  display:flex;
  flex-direction:row;
  gap:0;
  min-height:100vh;
  margin-top:20px;
  padding:100px 0 0;
  background-color:var(--brand-secondary);
}
.ceo__text{
  flex:1 1 0%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--con-gap);
  padding:var(--con-padding);
  margin-inline-start:35px;
  min-width:0;
}
.ceo__title{
  text-align:start;
  font-size:25px;
  font-weight:600;
  color:var(--brand-primary);
}
.ceo__body{
  width:70%;
  max-width:70%;
  text-align:justify;
  font-family:"DINNextLTArabic-Regular", Sans-serif;
  font-size:17px;
  font-weight:400;
  color:var(--brand-text);
}
.ceo__sign{
  width:70%;
  max-width:70%;
  text-align:end;
}
.ceo__sign > span{
  display:block;
  margin:-40px 0 0 0;
  font-size:17px;
  font-weight:600;
  color:#FFFFFF;
}
.ceo__media{
  flex:0 0 40%;
  width:40%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:0;
}
.ceo__media img{ width:100%; display:block; }

@media (max-width:767px){
  .ceo{ flex-direction:column; padding:0; }
  .ceo__text{ margin-inline-start:0; }
  .ceo__body,.ceo__sign{ width:100%; max-width:100%; }
  .ceo__media{ flex:1 1 100%; width:100%; }
}

/* ==========================================================================
   6. SECTION HEADINGS
   ========================================================================== */
.section-heading{
  text-align:center;
  font-size:35px;
  font-weight:600;
}
.section-heading--dark{ color:var(--brand-secondary); }
.section-heading--light{ color:#FFFFFF; }

/* ==========================================================================
   7. SERVICES
   ========================================================================== */
.services{
  min-height:100vh;
  padding:50px 0 0;
}
.services__heading > h2{ margin:0 0 -20px 0; }

.service-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--con-gap);
  max-width:95%;
  min-height:400px;
  padding:75px 40px;
  margin:30px;
  border-radius:20px;
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
  overflow:hidden;
  transition:background .3s, border .3s, box-shadow .3s, transform .4s;
}
.service-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("https://blendksa.com/wp-content/uploads/2024/12/Pattern-min.png");
  background-position:0% 0%;
  background-size:18% auto;
  background-repeat:no-repeat;
  pointer-events:none;
}
.service-card > *{ position:relative; z-index:1; }
.service-card__title{
  text-align:start;
  font-size:30px;
  font-weight:600;
  color:var(--brand-primary);
}
.service-card__text{
  width:50%;
  max-width:100%;
  font-family:"Almarai", Sans-serif;
  font-size:17.5px;
  font-weight:400;
  line-height:1.65;
  color:#FFFFFF;
}

/* --- Services carousel chrome (Premium Addons look-alike) --- */
.services-carousel{ position:relative; width:100%; }
.services-carousel .swiper{ width:100%; }
.services-carousel__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2em;
  height:2em;
  font-size:30px;
  color:var(--brand-primary);
  background-color:transparent;
  border:0;
  border-radius:100px;
  cursor:pointer;
  transition:.3s ease-in-out;
}
.services-carousel__arrow svg{ width:30px; height:30px; fill:currentColor; }
.services-carousel__arrow--prev{ left:0; }
.services-carousel__arrow--next{ right:0; }
.services-carousel__arrow:focus{ outline:0; box-shadow:none; }

.services-progress{
  position:relative;
  width:90%;
  height:10px;
  margin:10px 50px 0;
  background-color:var(--progress-track);
  overflow:hidden;
}
.services-progress__fill{
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:100%;
  background-color:var(--brand-secondary);
  transform:scaleX(0);
  transform-origin:inline-start;
  transition-duration:700ms;
}
[dir="rtl"] .services-progress__fill{ transform-origin:right center; }
[dir="ltr"] .services-progress__fill{ transform-origin:left center; }

@media (max-width:767px){
  .services__heading > h2{ margin:0 0 10px 0; }
  .service-card__text{ width:100%; }
}
@media (max-width:600px){
  .services-progress{ width:70%; margin:10px 30px 0; }
  .service-card{ margin:40px; }
}

/* ==========================================================================
   8. WORKS
   ========================================================================== */
.works{
  min-height:100vh;
  margin:40px 0;
  padding:150px 10px;
  background-color:var(--brand-secondary);
}
.works-carousel{ position:relative; width:100%; }
.works-swiper{
  height:350px;
  width:94%;
  margin:0 auto;
  overflow:hidden;
}
.works-swiper .swiper-slide{
  height:350px;
  border:1px solid var(--slide-border);
  border-radius:40px;
  overflow:hidden;
}
.work-slide__image{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
}
.works-swiper__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:35px;
  color:var(--brand-primary);
  background:none;
  border:0;
  cursor:pointer;
}
.works-swiper__arrow svg{ width:35px; height:35px; fill:currentColor; }
.works-swiper__arrow--prev{ inset-inline-start:0; }
.works-swiper__arrow--next{ inset-inline-end:0; }

/* Play badge — reproduces Elementor + #wp-custom-css exactly */
.embed-play{
  position:absolute;
  inset-block-start:50%;
  inset-inline-start:50%;
  top:89%;
  left:87%;
  transform:translate(calc(-50% * var(--direction-multiplier,1)),-50%);
  line-height:0;
  pointer-events:none;
}
.embed-play svg{
  width:60px;
  height:50px;
  fill:var(--brand-primary);
  opacity:.8;
  transition:.5s;
  filter:drop-shadow(1px 0 6px rgba(0,0,0,.3));
}

/* mobile grid */
.works-grid{ display:flex; flex-direction:column; gap:var(--con-gap); padding:1px; }
.works-grid__row{
  display:flex;
  flex-direction:row;
  gap:var(--con-gap);
  padding:10px 40px;
}
.works-grid__cell{ flex:1 1 0%; min-width:0; display:flex; }
.work-card{
  width:100%;
  border:1px solid var(--video-border);
  border-radius:40px;
  overflow:hidden;
}
.work-card__image{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1;
  background-size:cover;
  background-position:50% 50%;
}
@media (max-width:767px){
  .works-swiper{ height:300px; width:93%; margin:0 auto; }
  .works-swiper .swiper-slide{ height:300px; }
  .works-grid__row{ padding:2px; }
}

/* ==========================================================================
   9. PARTNERS
   ========================================================================== */
.partners{
  min-height:100vh;
  justify-content:center;
  padding:40px 10px;
}
.partner-marquee{ width:100%; overflow:hidden; }
.partner-marquee .swiper-wrapper{
  -webkit-transition-timing-function:linear !important;
  transition-timing-function:linear !important;
}
.partner-marquee .swiper-slide{ display:flex; align-items:center; }
.partner-marquee img{
  width:100%;
  height:auto;
  display:block;
  filter:grayscale(100%);
  transition:filter .5s ease-in-out;
}
.partner-marquee img:hover{ filter:grayscale(0%); }

/* ==========================================================================
   10. FOOTER / CONTACT
   ========================================================================== */
.site-footer{
  min-height:100vh;
  justify-content:space-between;
  flex:1 1 auto;
  margin-top:40px;
  padding:75px 10px 0;
  background-color:var(--brand-secondary);
}
.footer-row{
  display:flex;
  flex-direction:row;
  gap:var(--con-gap);
  padding:var(--con-padding);
  width:100%;
  background-color:var(--brand-secondary);
}
.footer-info{
  flex:1 1 0%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--con-gap);
  padding:var(--con-padding);
}
.contact-info{ display:flex; flex-direction:column; }
.contact-info__item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:20px;
  font-weight:600;
  line-height:1.4em;
  color:#FFFFFF;
}
.contact-info__item:not(:last-child){ padding-block-end:4px; }
.contact-info__item:not(:first-child){ margin-block-start:4px; }
.contact-info__icon{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin-block-start:6px;
  fill:var(--brand-primary);
  transition:fill .3s;
}
.map-embed{ width:100%; }
.map-embed iframe{ width:400px; max-width:100%; height:300px; border:0; }

.footer-links{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
}
.footer-links__item{
  position:relative;
  margin-inline-end:27px;            /* 2 x calc(27px/2) */
}
.footer-links__item:last-child{ margin-inline-end:0; }
.footer-links__item:not(:last-child)::after{
  content:"";
  position:absolute;
  inset-inline-end:-13.5px;
  top:0;
  height:100%;
  border-inline-start:1px solid var(--divider);
}
.footer-links__link{
  font-size:17px;
  font-weight:400;
  color:#FFFFFF;
  transition:color .3s;
}

.social-icons{
  display:flex;
  flex-direction:row;
  gap:0;
  justify-content:flex-start;   /* original: text-align:right in RTL = start */
}
.social-icons__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;               /* --icon-size */
  line-height:20px;
  padding:.35em;                /* --icon-padding */
  background-color:transparent;
  border-radius:50%;
}
.social-icons__link svg{ width:20px; height:20px; fill:var(--social-icon); transition:fill .3s; }

.footer-form-col{
  flex:0 0 57%;
  width:57%;
  display:flex;
  flex-direction:column;
  gap:var(--con-gap);
  padding:var(--con-padding);
  background-image:url("https://blendksa.com/wp-content/uploads/2024/12/Pattern-min.png");
  background-position:top left;
  background-repeat:no-repeat;
  background-size:20% auto;
}
.footer-form-col__title{
  text-align:start;
  font-size:25px;
  font-weight:600;
  color:#FFFFFF;
}

.copyright{
  display:flex;
  flex-direction:row;
  justify-content:center;
  width:100%;
  padding:15px 10px 0;
  border-top:2px solid var(--brand-text);
  background-color:var(--brand-secondary);
}
.copyright p{
  text-align:center;
  font-family:"Almarai", Sans-serif;
  font-weight:600;
  color:var(--brand-text);
  margin:0 0 28px;              /* theme default p spacing, kept 1:1 */
}

@media (max-width:767px){
  .footer-row{ flex-direction:column; }
  .footer-form-col{ flex:1 1 100%; width:100%; background-size:70px auto; }
  .map-embed iframe{ width:100%; }
}

/* ==========================================================================
   11. CONTACT FORM (global widget 1813)
   ========================================================================== */
.contact-form{
  width:80%;
  max-width:80%;
}
.contact-form__fields{
  display:flex;
  flex-wrap:wrap;
  margin-inline:-15px;          /* calc(-30px/2) */
  margin-bottom:-30px;
}
.contact-form__group{
  padding-inline:15px;
  margin-bottom:30px;
  min-width:0;
}
.contact-form__group--half{ flex:0 0 50%; max-width:50%; }
.contact-form__group--full{ flex:0 0 100%; max-width:100%; }
.contact-form__group label{
  display:block;
  font-family:"Almarai", Sans-serif;
  font-size:0;
  font-weight:400;
  padding-bottom:0;
}
.contact-form__field{
  width:100%;
  background-color:transparent;
  color:var(--brand-text);
  border:0;
  border-bottom:2px solid var(--brand-primary);
  border-radius:0;
  padding:8px 0;
  font-family:"DINNextLTArabic-Regular", Sans-serif;
  font-size:16px;
  outline:none;
}
.contact-form__field::placeholder{ color:var(--brand-text); opacity:1; }
textarea.contact-form__field{ resize:vertical; min-height:64px; }
.contact-form__submit{
  padding:14px 40px;
  font-weight:600;
  font-family:"DINNextLTArabic-Regular", Sans-serif;
  color:#ffffff;
  background-color:var(--brand-primary);
  border:0;
  border-radius:0;
  cursor:pointer;
  transition:background-color .3s,color .3s;
}
.contact-form__submit:hover{ color:#ffffff; }

@media (max-width:767px){
  .contact-form{ width:100%; max-width:100%; }
  .contact-form__group--half{ flex:0 0 100%; max-width:100%; }
}

/* ==========================================================================
   12. INNER PAGES (Training / Recruitment)
   ========================================================================== */
.page-header{
  display:flex;
  flex-direction:column;
  gap:var(--con-gap);
  width:100%;
  padding:20px 0 30px;
  background-color:var(--brand-secondary);
}
.page-title-bar{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--con-gap);
  width:100%;
  min-height:125px;
  padding:var(--con-padding);
}
.page-title{
  text-align:center;
  font-size:35px;
  font-weight:600;
  color:var(--brand-primary);
}
.form-section{
  display:flex;
  flex-direction:column;
  gap:var(--con-gap);
  width:100%;
  padding:75px 10px;
}
.form-section > .con__inner{ max-width:800px; }

/* --- Application forms (Training / Recruitment) --- */
.application-form__fields{
  display:flex;
  flex-wrap:wrap;
  margin-inline:-10px;          /* calc(-20px/2) */
  margin-bottom:-20px;
}
.application-form__group{
  display:flex;
  flex-direction:column;
  padding-inline:10px;
  margin-bottom:20px;
  min-width:0;
  flex:0 0 100%;
  max-width:100%;
}
.application-form__group.is-hidden{ display:none; }
.application-form__group--33{ flex:0 0 33.3333%; max-width:33.3333%; }
.application-form__group--50{ flex:0 0 50%;      max-width:50%; }
.application-form__group > label{
  display:block;
  font-size:14px;
  line-height:20px;
  padding-bottom:10px;
  color:var(--brand-secondary);
}
.application-form__group > label .req{ color:#d0021b; }
.application-form__field{
  width:100%;
  height:40px;
  background-color:var(--field-bg);
  border:1px solid var(--field-border);
  border-radius:7px;
  color:var(--brand-secondary);
  padding:12px 16px;
  font-family:"DINNextLTArabic-Regular", Sans-serif;
  font-size:15px;
  line-height:16px;
  outline:none;
}
.application-form__field::placeholder{ color:#9aa1a8; }
.application-form__field[type="file"]{
  height:28px;
  padding:0;
  line-height:normal;
}
select.application-form__field{ appearance:none; background-image:none; }
.select-wrap{ position:relative; }
.select-wrap::before{
  content:"";
  position:absolute;
  inset-inline-start:12px;
  top:50%;
  width:0;height:0;
  margin-top:-2px;
  border-inline:5px solid transparent;
  border-top:6px solid var(--field-border);
  pointer-events:none;
  z-index:1;
}
.checkbox-grid{ display:flex; flex-wrap:wrap; }
.checkbox-grid label{
  display:block;
  height:26px;
  line-height:26px;
  padding-inline-end:10px;
  font-size:15px;
  color:var(--brand-secondary);
}
.checkbox-grid input{ margin-inline-end:6px; vertical-align:middle; }
.application-form__submit{
  width:100%;
  height:40px;
  padding:0 24px;
  font-size:15px;
  font-weight:600;
  font-family:"DINNextLTArabic-Regular", Sans-serif;
  color:#ffffff;
  background-color:var(--brand-primary);
  border:0;
  cursor:pointer;
  transition:background-color .3s;
}
.application-form__submit:hover{ background-color:var(--brand-accent); }

@media (max-width:767px){
  .page-title-bar{ min-height:50px; padding:10px 10px 30px; }
  .form-section{ padding:75px 25px; }
  .application-form__group--33,
  .application-form__group--50{ flex:0 0 100%; max-width:100%; }
}

/* ==========================================================================
   13. UTILITIES / FLOATING UI
   ========================================================================== */
.preloader-screen{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--page-bg);
  transition:opacity .4s ease,visibility .4s ease;
}
.preloader-screen.is-hidden{ opacity:0; visibility:hidden; }
.preloader{ position:relative; width:120px; height:120px; }
.preloader .ring{
  position:absolute;
  inset:0;
  border:4px solid transparent;
  border-top-color:var(--brand-primary);
  border-right-color:var(--brand-accent);
  border-radius:50%;
  animation:blend-spin 1.2s linear infinite;
}
.preloader .logo{
  position:absolute;
  inset:22px;
  background:url("https://blendksa.com/wp-content/uploads/2024/12/logo-7.png") center/contain no-repeat;
}
@keyframes blend-spin{ to{ transform:rotate(360deg); } }

.read-progress{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  height:4px;
  z-index:99999;
  background:transparent;
}
.read-progress__bar{ height:100%; width:0; background:var(--brand-primary); }

.scroll-top{
  position:fixed;
  bottom:30px;
  inset-inline-start:30px;
  z-index:99998;
  width:31.5px;
  height:31.5px;
  display:none;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:2px;
  background-color:var(--scrolltop-bg);
  color:#fff;
  cursor:pointer;
  padding:0;
}
.scroll-top.is-visible{ display:flex; }
.scroll-top svg{ width:14px; height:14px; fill:currentColor; }

.wa-fab{
  position:fixed;
  bottom:15px;
  right:15px;
  z-index:99999999;
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
}
.wa-fab svg{ width:50px; height:50px; }

/* ==========================================================================
   14. VIDEO LIGHTBOX (Bootstrap modal shell)
   ========================================================================== */
.video-lightbox .modal-content{ background:transparent; border:0; }
.video-lightbox .modal-dialog{ max-width:min(1200px,92vw); }
.video-lightbox .ratio iframe{ border:0; }
.video-lightbox .btn-close{
  filter:invert(1) grayscale(100%) brightness(200%);
  position:absolute;
  top:-40px;
  inset-inline-end:0;
  opacity:1;
}
.video-lightbox__title{
  color:#fff;
  font-size:18px;
  font-weight:600;
  margin-bottom:10px;
  text-align:center;
}