/*
 * Bootstrap  v5.3.8 (https://getbootstrap.com/)
 * Copyright 2011-2025 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

.navbar {
    background: linear-gradient(33deg, rgba(255, 255, 255, 0) 25%, rgb(240, 171, 12) 76%), url(../../images/bgplayerlg.svg) !important;
    background-size: cover;
}
#block-ifrikyatheme-branding .brand-logo-image {
  height: 4.5rem;
}
[dir="rtl"] .navbar {
  
  background: linear-gradient(-33deg, rgb(255, 255, 255) 25%, rgb(240, 171, 12) 76%) !important;
}

.navbar .navbar-brand,
.navbar .navbar-nav .nav-link {
  color: #fff !important;
}

.navbar .navbar-brand:hover,
.navbar .navbar-nav .nav-link:hover {
  color: rgb(216.75, 216.75, 216.75) !important;
}

.yellow-gradient {
  background: linear-gradient(33deg, rgba(255, 255, 255, 0) 25%, rgb(240, 171, 12) 76%), url(../../images/bgplayerlg.svg) !important;
/*   
  background: linear-gradient(33deg, rgb(255, 255, 255) 25%, rgb(240, 171, 12) 76%); */
}

[dir="rtl"] .yellow-gradient {
  
  background: linear-gradient(-33deg, rgb(255, 255, 255) 25%, rgb(240, 171, 12) 76%);
}

.navbar > .container,
.navbar .container,
.navbar .bg-white {
  background-color: transparent !important;
  background: none !important;
}

.navbar .navbar-nav .nav-item a.nav-link {
  color: var(--bs-gray-900) !important;
}

.brand-logo-image {
  height: 4.5rem;
}

.navbar .navbar-nav .nav-item a.nav-link:hover, .navbar .navbar-nav .nav-item a.nav-link:focus, .navbar .navbar-nav .nav-item a.nav-link:active {
  color: #581212 !important;
}

.navbar .navbar-nav .nav-item a.nav-link.is-active:after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  height: 1px;
  bottom: 0;
  background-color: #fff;
}

.btn-primary {
  background-color: #02090e !important;
  border-color: #02090e !important;
  color: #fff !important;
  border-radius: .375rem !important;
}

.btn-primary:hover {
  background-color: #2980b9 !important;
  border-color: #1f618d !important;
  color: #fff !important;
}

.btn-primary.btn-sm {
  border-radius: .25rem !important;
}

.btn-primary.btn-lg {
  border-radius: .5rem !important;
}

a {
  color: #3498db !important;
}

a:hover {
  color: #2980b9 !important;
  text-decoration: none !important;
}

.btn-link {
  color: #3498db !important;
}

.btn-link:hover {
  color: #2980b9 !important;
}

footer {
  background-color: #000 !important;
  color: #ecf0f1 !important;
}

footer a {
  color: rgb(240, 171, 12) !important;
}

footer a:hover {
  color: rgb(240, 171, 12) !important;
}

footer .block,
footer .menu,
footer .region-footer {
  color: #ecf0f1 !important;
}

footer .block a,
footer .menu a,
footer .region-footer a {
  color: rgb(240, 171, 12) !important;
}

footer .block a:hover,
footer .menu a:hover,
footer .region-footer a:hover {
  color: rgb(240, 171, 12) !important;
}

.btn {
  border-radius: .375rem !important;
}

.btn.btn-sm {
  border-radius: .25rem !important;
}

.btn.btn-lg {
  border-radius: .5rem !important;
}

input[type=submit].btn-primary,
input[type=button].btn-primary,
button.btn-primary {
  background-color: #02090e !important;
  border-color: #02090e !important;
  color: #fff !important;
}

input[type=submit].btn-primary:hover,
input[type=button].btn-primary:hover,
button.btn-primary:hover {
  background-color: #2980b9 !important;
  border-color: #1f618d !important;
  color: #fff !important;
}

/* Temp fix for:
 * Issue #3233533: Core .placeholder class conflicts with new Bootstrap .placeholder class
 * https://www.drupal.org/project/drupal/issues/3233533
 * 
 * Issue #3246827: Fix em.placeholder style from Bootstrap 5 base styling with the Drupal core placeholder
 * https://www.drupal.org/i/3246827
 */

em.placeholder {
  cursor: unset !important;
  vertical-align: unset !important;
  opacity: unset !important;
  background-color: unset !important;
}

.form-group {
  margin-bottom: 1rem;
}

.form-required::after {
  content: "";
  vertical-align: super;
  display: inline-block;
  background-image: url(../../images/required.svg);
  background-repeat: no-repeat;
  background-size: calc(calc(1.5em + .75rem + calc(var(--bs-border-width) * 2)) * .1666666667) calc(calc(1.5em + .75rem + calc(var(--bs-border-width) * 2)) * .1666666667);
  width: calc(calc(1.5em + .75rem + calc(var(--bs-border-width) * 2)) * .1666666667);
  height: calc(calc(1.5em + .75rem + calc(var(--bs-border-width) * 2)) * .1666666667);
  margin: 0 .3em;
}

.ajax-progress {
  background-color: transparent !important;
  border: 0 !important;
}

.ajax-progress-throbber .throbber {
  background-color: transparent !important;
  border: 0 !important;
}

.ajax-progress-throbber .message {
  background-color: transparent !important;
  border: 0 !important;
}

.ajax-progress-fullscreen {
  background-color: transparent !important;
}

.hidden-anonymous,
.visible-admin,
.visible-logged-in {
  display: none !important;
}

body.user-logged-in .visible-admin,
body.user-logged-in .visible-logged-in,
body.user-logged-in .hidden-anonymous {
  display: inline-block !important;
}

body.user-logged-in .btn .visible-admin,
body.user-logged-in .btn .visible-logged-in,
body.user-logged-in .btn .hidden-anonymous {
  display: inline-block !important;
}
main .mb3{
  background-image: url(../images/4.jpg);
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  text-transform: capitalize;
}

a {
  text-underline-offset: .25em;
}

.card{
  border: none !important;
}
.card .drimage img {
  border-radius: 10px !important;
}

h3.card-title a{
  text-decoration: none !important;
  color: #0a0a0a !important;
}
h3.card-title a:hover{
  color: rgb(214, 165, 60) !important;
}
h3.card-title
{font-size: medium;}




/* ============================================
   STICKY AUDIO PLAYER - PROFESSIONAL DESIGN
   White background, black text, yellow accents
   Logo on left, player starts right after
   ============================================ */

/* Main sticky player container */
.sticky-audio-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: #ffffff;
  color: #000000;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  border-top: 3px solid #FFC107; /* Yellow accent border */
  margin: 0 !important;
  /* animation: slideUp 0.5s ease-out; */
}

/* Block content wrapper */
.sticky-audio-player .block__content {
  max-width: 1400px;
  margin: 0 auto;
  /* padding: 15px 25px; */
  display: flex;
  align-items: center;
  gap: 15px; /* Reduced gap between logo and player */
  flex-wrap: nowrap;
  /* flex-direction: row-reverse;  */
  /* Logo left, player right */
}

/* ============================================
   LOGO SECTION (Left Side)
   ============================================ */

/* Logo field container */
.sticky-audio-player .field--name-field-logo-chaine {
  flex: 0 0 auto;
  order: 2;
  margin: 0;
}

/* Logo image */
.sticky-audio-player .field--name-field-logo-chaine img {

  height: 65px;
  object-fit: contain;
  border-radius: 10px;
  
  max-width: fit-content;
  padding: 5px;
  background: #ffffff;

  display: block;
}

/* Hide logo caption */
.sticky-audio-player .blazy__caption {
  display: none;
}

/* Remove any extra margins from blazy wrapper */
.sticky-audio-player .blazy {
  margin: 0 !important;
}

.sticky-audio-player .media--blazy {
  margin: 0 !important;
}

/* ============================================
   AUDIO PLAYER SECTION (Right Side)
   ============================================ */

/* Audio stream field container */
.sticky-audio-player .field--name-field-audio-stream {
  flex: 1;
  order: 1;
  min-width: 0;
  margin: 0;
}

/* Remove all spacing from audiofield wrapper */
.sticky-audio-player .audiofield {
  margin: 0 !important;
  padding: 0 !important;
}

.sticky-audio-player .audiofield-player {
  margin: 0 !important;
  padding: 0 !important;
}

.sticky-audio-player .mediaelementaudio_frame {
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide default field labels */
.sticky-audio-player .field__label {
  display: none !important;
}

/* Hide default block title */
.sticky-audio-player > .block__title {
  display: none;
}

/* Remove extra margins from fields */
.sticky-audio-player .field {
  margin: 0 !important;
  min-width: max-content !important;
}

.sticky-audio-player .field__item {
  margin: 0 !important;
}


/* Professional Radio Grade Audio Player - Full Width */
/* Professional Radio Grade Audio Player - Yellow & Black Theme */

/* Main Container - Full Width Black */
/* Pro.Radio Inspired Player - Yellow & Black Professional */
.media-remote-hls-audio-only video {
  width: 100%;
  max-width: 600px;
  height: 54px !important;
}
/* Sticky audio player - global styles */
.sticky-audio-player .audiofield-player label{
  display: none;
}
.sticky-audio-player,
.sticky-player-region {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040; /* Above Bootstrap navbar (1030) */
  background: #2c3e50;
  color: #fff;
  box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.3);
  margin: 0 !important;
}

/* Inner container */
.sticky-audio-player .block__content,
.sticky-player-region .block__content {
  max-width: 1400px;
  margin: 0 auto;
  /* padding: 12px 20px; */
}

/* Remove default block margins */
.sticky-audio-player {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Add bottom padding to body to prevent content overlap */
body {
  padding-bottom: 90px !important;
}

/* Add bottom padding to main content wrapper */
#main-wrapper,
.main-container {
  padding-bottom: 20px;
}

/* Ensure player stays on top of everything except modals */
.sticky-audio-player {
  z-index: 3 !important;
}

/* Style the MediaElement player container */
.sticky-audio-player .mejs__container {
  width: 100% !important;
  max-width: 100%;
  background: transparent;
}

.sticky-audio-player .mejs__controls {
  background: rgba(255, 255, 255, 0.1);
}

/* Player title/label styling */
.sticky-audio-player .field--name-name,
.sticky-audio-player .block__title {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

/* Hide block title if you don't want it */
.sticky-audio-player .block__title {
  display: none; /* Remove this line if you want to show block title */
}

/* Responsive adjustments */
@media (max-width: 992px) {
  body {
    padding-bottom: 100px !important;
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: 110px !important;
  }
  
  .sticky-audio-player .block__content {
    padding: 10px 15px;
  }
}

@media (max-width: 576px) {
  body {
    padding-bottom: 120px !important;
  }
  
  .sticky-audio-player .field--name-name {
    font-size: 12px;
  }
  
.navbar .bg-white .navbar-collapse {
    background-color: #ecf0f1;
    padding: 10px;
    border-radius: 25px;
}
.nav .level-1 .navbar-nav{
  padding: 10px;
}
#block-ifrikyatheme-branding .brand-logo-image {
  height: 3.5rem;
}
[dir="rtl"] .navbar {
  
  background: linear-gradient(-33deg, rgb(255, 255, 255) 25%, rgb(240, 171, 12) 76%) !important;
}

}

/* Ensure it works with admin toolbar */
body.toolbar-fixed .sticky-audio-player {
  bottom: 0; /* Keep at bottom even with admin toolbar */
}

/* Print styles - hide sticky player when printing */
@media print {
  .sticky-audio-player,
  .sticky-player-region {
    display: none !important;
  }
  
  body {
    padding-bottom: 0 !important;
  }
}



/* lang switcher */
/* Language Switcher Styling */
.language-switcher-language-url .links.nav {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.language-switcher-language-url .nav-item {
  position: relative;
}

.language-switcher-language-url .nav-item span {
  display: block;
}

.language-switcher-language-url .language-link {
  display: inline-block;
  padding: 0.5rem 0.5rem;
  text-decoration: none;
  color: #202020;
  font-weight: 500;
  font-size: 0.75rem;
  transition: all 0.3s ease;
  background: transparent;
  position: relative;
}

.language-switcher-language-url .language-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, #2e2e2e, #000000);
  transition: transform 0.3s ease;
}

.language-switcher-language-url .language-link:hover {
  color: #000000 !important;
  background: rgba(59, 130, 246, 0.05);
}

.language-switcher-language-url .language-link:hover::before {
  transform: translateX(-50%) scaleX(1);
}

.language-switcher-language-url .language-link.is-active {
    color: #fff !important;
    background: linear-gradient(135deg, #000000, #000000);
}
.language-switcher-language-url .language-link.is-active::before {
  display: none;
}
.language-switcher-language-url{
  float: inline-end;
}
/* Mobile responsive */
@media (max-width: 768px) {
  .language-switcher-language-url .links.nav {
    gap: 0.25rem;
  }
  
  .language-switcher-language-url .language-link {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
  }
}



/* ============================================
   STICKY AUDIO PLAYER - PROFESSIONAL DESIGN
   White background, black text, yellow accents
   ============================================ */

/* Main sticky player container */
.sticky-audio-player {
  background-image: url('../../images/bgplayerlg.svg') !important;
      background-size: 16% 323% !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background: #ffffff;
  color: #000000;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  border-top: 3px solid #FFC107; 
  margin: 0 !important;
  animation: slideUp 0.5s ease-out;
} 

/* Player wrapper - main container */
.sticky-audio-player .player-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 15px 25px;
  display: flex;
  align-items: center;
  gap: 25px;
}

/* ============================================
   LOGO & INFO SECTION
   ============================================ */

.sticky-audio-player .player-header {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 0 0 auto;
}

.sticky-audio-player .player-logo-container {
  flex-shrink: 0;
}

.sticky-audio-player .player-logo {
  width: 65px;
  height: 65px;
  object-fit: contain;
  border-radius: 10px;
  border: 2px solid #FFC107; /* Yellow border */
  padding: 5px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
}

.sticky-audio-player .player-info {
  flex: 0 0 auto;
  min-width: 220px;
}

.sticky-audio-player .player-title {
  margin: 0 0 4px 0;
  font-size: 17px;
  font-weight: 700;
  color: #000000;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

.sticky-audio-player .player-subtitle {
  margin: 0;
  font-size: 13px;
  color: #666666;
  line-height: 1.3;
  font-weight: 500;
}

/* Player content area */
.sticky-audio-player .player-content {
  flex: 1;
  min-width: 0;
}

/* Hide default block title */
.sticky-audio-player > .block__title {
  display: none;
}

/* ============================================
   MEDIAELEMENT PLAYER CUSTOMIZATION
   Professional white theme with yellow accents
   ============================================ */

/* Main player container */
.sticky-audio-player .mejs__container {
  width: 100% !important;
  background: #f8f9fa !important;
  border-radius: 25px;
  overflow: hidden !important;
}

/* Controls bar */
.sticky-audio-player .mejs__controls {
  background: #ffffff !important;
  height: 42px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
}

/* ============================================
   CUSTOM PLAY/PAUSE ICONS - FIXED
   ============================================ */

/* Remove ALL default MediaElement icon styles */
.sticky-audio-player .mejs__overlay-button,
.sticky-audio-player .mejs__button > button {
  background-image: none !important;
  background: none !important;
}

/* Remove default :before pseudo-elements */
.sticky-audio-player .mejs__button button:before,
.sticky-audio-player .mejs__overlay-button:before {
  content: none !important;
  display: none !important;
}

/* Play Button Background (keep your yellow circle) */
.sticky-audio-player .mejs__button.mejs__playpause-button button {
  background: #FFC107 !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  margin: 4px 8px 4px 0 !important;
  position: relative !important;
}

/* Custom Play Icon using CSS Mask */
.sticky-audio-player .mejs__button.mejs__playpause-button.mejs__play button:after {
  content: '' !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  background-color: #000000;
  -webkit-mask-image: url('../../images/icons/play.svg');
  mask-image: url('../../images/icons/play.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Custom Pause Icon using CSS Mask */
.sticky-audio-player .mejs__button.mejs__playpause-button.mejs__pause button:after {
  content: '' !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  background-color: #000000;
  -webkit-mask-image: url('../../images/icons/pause.svg');
  mask-image: url('../../images/icons/pause.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ============================================
   CUSTOM VOLUME ICONS - FIXED
   ============================================ */

/* Remove default volume icon */
.sticky-audio-player .mejs__button.mejs__volume-button button:before,
.sticky-audio-player .mejs__button.mejs__volume-button button:after {
  display: none !important;
}

/* Volume button styling */
.sticky-audio-player .mejs__button.mejs__volume-button button {
  position: relative !important;
  width: 26px !important;
  height: 26px !important;
}

/* Volume Icon - NOT Muted (Default State) */
.sticky-audio-player .mejs__button.mejs__volume-button:not(.mejs__mute) button:after,
.sticky-audio-player .mejs__volume-button button:after {
  content: '';
  display: block !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  background-color: #000000;
  -webkit-mask-image: url('../../images/icons/volume-i.svg');
  mask-image: url('../../images/icons/volume-i.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Mute Icon - When Muted */
.sticky-audio-player .mejs__button.mejs__volume-button.mejs__mute button:after {
  content: '';
  display: block !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  background-color: #0f0f0f !important;
  -webkit-mask-image: url('../../images/icons/volume-m.svg');
  mask-image: url('../../images/icons/volume-m.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Hover effect */
.sticky-audio-player .mejs__button.mejs__volume-button:not(.mejs__mute) button:hover:after {
  background-color: #FFC107 !important;
}
.sticky-audio-player .mejs__button, .mejs__time, .mejs__time-rail{
  margin:0 5px;
}
/* Time display */
.sticky-audio-player .mejs__time {
  color: #000000 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 10px !important;
  height: 45px !important;
  line-height: 45px !important;
  display: none;
}

.sticky-audio-player .mejs__currenttime,
.sticky-audio-player .mejs__duration {
  display: none;
  color: #333333 !important;
}

.sticky-audio-player .mejs__time-separator {
  display: none;
  color: #999999 !important;
}

/* Time rail (progress bar container) */
.sticky-audio-player .mejs__time-rail {
  display: none;
  padding-top: 18px !important;
  height: 45px !important;
  margin: 0 10px !important;
}

/* Progress bar background */
.sticky-audio-player .mejs__time-total {
  display: none;
  background: #e0e0e0 !important;
  height: 6px !important;
  border-radius: 3px !important;
  margin: 0 !important;
}

/* Loaded progress */
.sticky-audio-player .mejs__time-loaded {
  background: #d4d4d4 !important;
  display: none;
}

/* Current time progress */
.sticky-audio-player .mejs__time-current {
  background: #FFC107 !important; /* Yellow progress */
  border-radius: 3px !important;
  display: none;
}

/* Progress handle/thumb */
.sticky-audio-player .mejs__time-handle {
  display: none !important; /* Hide default handle */
}

.sticky-audio-player .mejs__time-handle-content {
  background: #FFC107 !important;
  border: 2px solid #ffffff !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  top: -4px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Show handle on hover */
.sticky-audio-player .mejs__time-rail:hover .mejs__time-handle {
  display: block !important;
}

/* Volume button */
.sticky-audio-player .mejs__button.mejs__volume-button button {
  color: #000000 !important;
}

.sticky-audio-player .mejs__button.mejs__volume-button button:hover {
  color: #FFC107 !important;
}

/* Volume slider */
.sticky-audio-player .mejs__horizontal-volume-slider {
  /* background: #e0e0e0 !important; */
  border-radius: 3px !important;
}

.sticky-audio-player .mejs__horizontal-volume-total {
  background: #e0e0e0 !important;
  height: 10px !important;
  border-radius: 3px !important;
}

.sticky-audio-player .mejs__horizontal-volume-current {
  background: #FFC107 !important; /* Yellow volume indicator */
  height: 10px !important;
  border-radius: 3px !important;
}

/* Volume handle */
.sticky-audio-player .mejs__horizontal-volume-handle {
  background: #FFC107 !important;
  border: 2px solid #ffffff !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  top: -4px !important;
}

/* All buttons general styling */
.sticky-audio-player .mejs__button button {
  color: #000000 !important;
  transition: all 0.3s ease;
}

.sticky-audio-player .mejs__button button:hover {
  color: #FFC107 !important;
  transform: scale(1.1);
}

/* Fullscreen, settings, and other buttons */
.sticky-audio-player .mejs__button.mejs__fullscreen-button button,
.sticky-audio-player .mejs__button.mejs__settings-button button {
  color: #666666 !important;
}

.sticky-audio-player .mejs__button.mejs__fullscreen-button button:hover,
.sticky-audio-player .mejs__button.mejs__settings-button button:hover {
  color: #FFC107 !important;
}

/* Loading spinner */
.sticky-audio-player .mejs__overlay-loading {
  background: transparent !important;
}

.sticky-audio-player .mejs__overlay-loading span {
  border-color: #FFC107 transparent transparent transparent !important;
}

/* ============================================
   BODY PADDING ADJUSTMENT
   ============================================ */

body {
  padding-bottom: 110px !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1200px) {
  .sticky-audio-player .player-wrapper {
    gap: 20px;
    padding: 15px 20px;
  }
}

@media (max-width: 992px) {
  .sticky-audio-player .player-wrapper {
    gap: 15px;
  }
  
  .sticky-audio-player .player-info {
    min-width: 180px;
  }
  
  .sticky-audio-player .player-title {
    font-size: 15px;
  }
  
  .sticky-audio-player .player-subtitle {
    font-size: 12px;
  }
  
  body {
    padding-bottom: 120px !important;
  }
}

@media (max-width: 768px) {
  .sticky-audio-player .player-wrapper {
    flex-wrap: wrap;
    padding: 12px 15px;
    gap: 12px;
  }
  
  .sticky-audio-player .player-header {
    flex: 1 1 100%;
    justify-content: center;
    margin-bottom: 5px;
  }
  
  .sticky-audio-player .player-content {
    flex: 1 1 100%;
  }
  
  .sticky-audio-player .player-logo {
    width: 55px;
    height: 55px;
  }
  
  /* Simplify controls on mobile */
  .sticky-audio-player .mejs__controls {
    height: 50px !important;
  }
  
  .sticky-audio-player .mejs__time-rail {
    padding-top: 20px !important;
  }
  
  body {
    padding-bottom: 150px !important;
  }
}

@media (max-width: 576px) {
  .sticky-audio-player .player-logo {
    width: 50px;
    height: 50px;
  }
  
  .sticky-audio-player .player-title {
    font-size: 14px;
  }
  
  .sticky-audio-player .player-subtitle {
    font-size: 11px;
  }
  
  .sticky-audio-player .player-info {
    min-width: auto;
  }
  
  /* Hide time display on very small screens */
  .sticky-audio-player .mejs__time {
    display: none !important;
  }
  
  body {
    padding-bottom: 160px !important;
  }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Pulse animation for live indicator (optional) */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Optional: Add a "LIVE" indicator */
.sticky-audio-player .player-subtitle:before {
  content: "● ";
  color: #FFC107;
  font-size: 14px;
  animation: pulse 2s ease-in-out infinite;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .sticky-audio-player {
    display: none !important;
  }
  
  body {
    padding-bottom: 0 !important;
  }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Focus states for keyboard navigation */
.sticky-audio-player .mejs__button button:focus {
  /* outline: 2px solid #FFC107; */
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .sticky-audio-player {
    border-top-width: 4px;
  }
  
  .sticky-audio-player .mejs__time-current,
  .sticky-audio-player .mejs__horizontal-volume-current {
    background: #000000 !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .sticky-audio-player {
    animation: none;
  }
  
  .sticky-audio-player .mejs__button button {
    transition: none;
  }
  
  .sticky-audio-player .player-subtitle:before {
    animation: none;
  }
}

/* ============================================
   BEF TABS - CLEAN BORDERLESS DESIGN
   Minimal, modern tabs with yellow accent
   ============================================ */

/* Main container */
.bef-links-use-ajax.bef-links {
  margin: 30px 0;
  padding: 0;
}

/* Remove default list styling */
.bef-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 0;
}

.bef-links li {
  margin: 0;
  padding: 0;
  display: inline-block;
}

/* Tab links styling - Clean & Borderless */
.bef-links .bef-link {
  display: inline-block;
  padding: 12px 24px;
  color: #0a0a0a !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  background: transparent;
  border: none;
  border-radius: 35px;
  transition: all 0.3s ease;
  position: relative;
  letter-spacing: 0.3px;
}

/* Hover state */
.bef-links .bef-link:hover {
  color: #000000;
  background: #efefef;
  transform: translateY(-2px);
}

/* Active/Selected state */
.bef-links .bef-link.bef-link--selected,
.bef-links .bef-link:active {
  color: #000000;
  background: #FFC107;
  font-weight: 700;
}

/* Focus state for accessibility */
.bef-links .bef-link:focus {
  outline: 2px solid #FFC107;
  outline-offset: 2px;
  z-index: 1;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 992px) {
  .bef-links .bef-link {
    padding: 10px 20px;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .bef-links ul {
    gap: 6px;
  }
  
  .bef-links .bef-link {
    padding: 10px 16px;
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .bef-links ul {
    gap: 8px;
  }
  
  .bef-links .bef-link {
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* ============================================
   LOADING STATE (for AJAX)
   ============================================ */

.bef-links.ajax-progress {
  opacity: 0.6;
  pointer-events: none;
}

.bef-links .bef-link.is-loading {
  position: relative;
  color: transparent;
}

.bef-links .bef-link.is-loading:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid #FFC107;
  border-radius: 50%;
  border-right-color: transparent;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.card-body .audiofield-player label{
  display: none;
}
.card-body .mejs__audio {
  width: 100%!important;
}

/* ============================================
   ALTERNATIVE: MINIMAL UNDERLINE STYLE
   ============================================ */

/* Uncomment this section for ultra-minimal underline style */
/*
.bef-links .bef-link {
  background: transparent;
  border-radius: 0;
  padding: 12px 20px 10px;
  border-bottom: 2px solid transparent;
}

.bef-links .bef-link:hover {
  background: transparent;
  border-bottom-color: #d4d4d4;
  transform: none;
}

.bef-links .bef-link.bef-link--selected {
  background: transparent;
  border-bottom-color: #FFC107;
}
*/
#block-ifrikyatheme-kwdhtml21 .block__content{
 flex-direction:row;  
}

#block-ifrikyatheme-kwdhtml21 .mejs__controls{
  position: relative !important;
}

/* test sliding fréquence  */
.slider-container {
    /* background: white; */
    border-radius: 55px;
    padding: 10px 0;
    overflow: hidden;
    position: relative;
    border-radius: 0.25rem;
    height: 100%;
    display: none;
    align-items: center;
}

.slider {
    display: flex;
    width: fit-content;
    animation: slide 20s linear infinite;
}

.slider-text {
    font-size: 16px;
    font-weight: 600;
    color: #292929;
    white-space: nowrap;
    padding: 0 15px;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}



/* Hide on mobile by default */

/**
 * @file
 * Sticky audio player styles - responsive for all devices
 */

/* Main sticky player container */
/* .sticky-audio-player {
  background-image: url('../../images/bgplayerlg.svg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1040 !important;
  background-color: #ffffff;
  color: #000000;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  border-top: 3px solid #FFC107;
  margin: 0 !important;
  padding: 10px 15px;
  animation: slideUp 0.5s ease-out;
  overflow: hidden;
} */

/* Slide up animation */
@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Container adjustments */
.sticky-audio-player .container {
  max-width: 100% !important;
  padding: 0 15px !important;
  margin: 0 auto !important;
}

/* Flex container */
.sticky-audio-player .d-flex {
  align-items: center !important;
  gap: 15px !important;
}

/* Logo styling */
.sticky-audio-player .field--name-field-logo-chaine img {
  max-width: 80px !important;
  max-height: 80px !important;
  object-fit: contain;
}

/* Audio player */
.sticky-audio-player .audiofield {
  min-width: 300px;
}

.sticky-audio-player #radio-player {
  height: 45px !important;
}

/* Slider container */
.sticky-audio-player .slider-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  height: 30px;
  display: flex;
  align-items: center;
}

.sticky-audio-player .slider {
  display: flex;
  white-space: nowrap;
  animation: scroll 20s linear infinite;
}

.sticky-audio-player .slider-text {
  padding-right: 50px;
  font-size: 16px;
  font-weight: 500;
  color: #000000;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Ensure player stays above everything */
.sticky-audio-player {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* Desktop styles (Large screens 1200px and up) */
@media (min-width: 1200px) {
  .sticky-audio-player {
    padding: 5px 20px;
  }
  
  .sticky-audio-player .container {
    max-width: 1140px !important;
  }
  
  .sticky-audio-player .field--name-field-logo-chaine img {
    max-width: 100px !important;
    max-height: 100px !important;
  }
  
  .sticky-audio-player .audiofield {
    min-width: 350px;
  }
  
  .sticky-audio-player #radio-player {
    height: 50px !important;
  }
  
  .sticky-audio-player .slider-text {
    font-size: 18px;
  }
  
  .sticky-audio-player {
            background-size: auto 235% !important;
  }
}

/* Desktop styles (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .sticky-audio-player {
    padding: 12px 15px;
  }
  
  .sticky-audio-player .container {
    max-width: 960px !important;
  }
  
  .sticky-audio-player .field--name-field-logo-chaine img {
    max-width: 80px !important;
    max-height: 80px !important;
  }
  
  .sticky-audio-player .audiofield {
    min-width: 300px;
  }
  
  .sticky-audio-player .slider-text {
    font-size: 16px;
  }
  
  .sticky-audio-player {
    background-size: auto 350% !important;
  }
}

/* Tablet Horizontal (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .sticky-audio-player {
    padding: 10px 12px;
  }
  
  .sticky-audio-player .container {
    max-width: 720px !important;
    padding: 0 10px !important;
  }
  
  .sticky-audio-player .d-flex {
    gap: 10px !important;
  }
  
  .sticky-audio-player .field--name-field-logo-chaine img {
    max-width: 70px !important;
    max-height: 70px !important;
  }
  
  .sticky-audio-player .audiofield {
    min-width: 250px;
  }
  
  .sticky-audio-player #radio-player {
    height: 42px !important;
  }
  
  .sticky-audio-player .slider-text {
    font-size: 14px;
  }
  
  .sticky-audio-player {
    background-size: auto 307% !important;
  }
}

/* Tablet Vertical and Mobile (below 768px) - HIDE SLIDER */
@media (max-width: 767px) {
  .sticky-audio-player {
    padding: 8px 10px !important;
  }
  
  .sticky-audio-player .container {
    padding: 0 8px !important;
  }
  
  .sticky-audio-player .d-flex {
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  
  .sticky-audio-player .field--name-field-logo-chaine img {
    max-width: 60px !important;
    max-height: 60px !important;
  }
  
  .sticky-audio-player .audiofield {
    min-width: 0 !important;
    flex: 1 !important;
  }
  
  .sticky-audio-player #radio-player {
    height: 40px !important;
    font-size: 13px !important;
  }
  
  /* HIDE SLIDER ON TABLET VERTICAL AND MOBILE */
  .sticky-audio-player .slider-container {
    display: none !important;
  }
  
  .sticky-audio-player {
    background-size: auto 450% !important;
  }
}

/* Mobile Small (below 576px) */
@media (max-width: 575px) {
  .sticky-audio-player {
    padding: 6px 8px !important;
  }
  
  .sticky-audio-player .container {
    padding: 0 5px !important;
  }
  
  .sticky-audio-player .d-flex {
    gap: 6px !important;
  }
  
  .sticky-audio-player .field--name-field-logo-chaine img {
    max-width: 50px !important;
    max-height: 50px !important;
  }
  
  .sticky-audio-player #radio-player {
    height: 38px !important;
    font-size: 12px !important;
  }
  
  /* Slider still hidden */
  .sticky-audio-player .slider-container {
    display: none !important;
  }
  
  .sticky-audio-player {
    background-size: cover !important;
  }
}

/* Extra Small Mobile (below 400px) */
@media (max-width: 399px) {
  .sticky-audio-player {
    padding: 5px 6px !important;
  }
  
  .sticky-audio-player .field--name-field-logo-chaine img {
    max-width: 45px !important;
    max-height: 45px !important;
  }
  
  .sticky-audio-player #radio-player {
    height: 35px !important;
  }
}

/* Landscape mobile orientation */
@media (max-height: 500px) and (orientation: landscape) {
  .sticky-audio-player {
    padding: 5px 10px !important;
  }
  
  .sticky-audio-player .field--name-field-logo-chaine img {
    max-width: 45px !important;
    max-height: 45px !important;
  }
  
  .sticky-audio-player #radio-player {
    height: 35px !important;
  }
  
  .sticky-audio-player .slider-container {
    display: none !important;
  }
}

/* Prevent body content from hiding behind player */
body {
  padding-bottom: 100px !important;
}

@media (min-width: 1200px) {
  body {
    padding-bottom: 120px !important;
  }
}

@media (max-width: 767px) {
  body {
    padding-bottom: 80px !important;
  }
}

@media (max-width: 575px) {
  body {
    padding-bottom: 70px !important;
  }
}

/* Ensure main content has margin */
main,
.main-content,
#main-content,
.region-content {
  margin-bottom: 100px !important;
}

@media (max-width: 767px) {
  main,
  .main-content,
  #main-content,
  .region-content {
    margin-bottom: 80px !important;
  }
}

/* iOS Safari safe area adjustments */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .sticky-audio-player {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
  
  body {
    padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .sticky-audio-player {
    animation: none !important;
  }
  
  .sticky-audio-player .slider {
    animation: none !important;
  }
}

/* Print styles - hide player when printing */
@media print {
  .sticky-audio-player {
    display: none !important;
  }
  
  body {
    padding-bottom: 0 !important;
  }
}



.carousel-control-prev-icon {
  
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 35 35' fill='none'%3e%3cpath d='M17.5 0C7.83502 0 0 7.83502 0 17.5C0 27.165 7.83502 35 17.5 35C27.165 35 35 27.165 35 17.5C35 7.83502 27.165 0 17.5 0ZM25.1562 16.4062C25.7603 16.4062 26.25 16.8959 26.25 17.5C26.25 18.1041 25.7603 18.5938 25.1562 18.5938H12.4843L17.1796 23.2891C17.6068 23.7162 17.6068 24.4088 17.1796 24.8359C16.7525 25.263 16.06 25.263 15.6329 24.8359L9.07035 18.2734C8.64322 17.8463 8.64322 17.1537 9.07035 16.7266L15.6329 10.1641C16.06 9.73697 16.7525 9.73697 17.1796 10.1641C17.6068 10.5912 17.6068 11.2838 17.1796 11.7109L12.4843 16.4062H25.1562Z' fill='black'/%3e%3c/svg%3e") !important;
}

[dir="rtl"] .carousel-control-prev-icon {
  
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 35 35' fill='none'%3e%3cpath d='M17.5 0C27.165 0 35 7.83502 35 17.5C35 27.165 27.165 35 17.5 35C7.83502 35 0 27.165 0 17.5C0 7.83502 7.83502 0 17.5 0ZM9.84375 16.4062C9.23969 16.4062 8.75 16.8959 8.75 17.5C8.75 18.1041 9.23969 18.5938 9.84375 18.5938H22.5157L17.8204 23.2891C17.3932 23.7162 17.3932 24.4088 17.8204 24.8359C18.2475 25.263 18.94 25.263 19.3671 24.8359L25.9296 18.2734C26.3568 17.8463 26.3568 17.1537 25.9296 16.7266L19.3671 10.1641C18.94 9.73697 18.2475 9.73697 17.8204 10.1641C17.3932 10.5912 17.3932 11.2838 17.8204 11.7109L22.5157 16.4062H9.84375Z' fill='black'/%3e%3c/svg%3e") !important;
}

.carousel-control-next-icon {
  
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 35 35' fill='none'%3e%3cpath d='M17.5 0C27.165 0 35 7.83502 35 17.5C35 27.165 27.165 35 17.5 35C7.83502 35 0 27.165 0 17.5C0 7.83502 7.83502 0 17.5 0ZM9.84375 16.4062C9.23969 16.4062 8.75 16.8959 8.75 17.5C8.75 18.1041 9.23969 18.5938 9.84375 18.5938H22.5157L17.8204 23.2891C17.3932 23.7162 17.3932 24.4088 17.8204 24.8359C18.2475 25.263 18.94 25.263 19.3671 24.8359L25.9296 18.2734C26.3568 17.8463 26.3568 17.1537 25.9296 16.7266L19.3671 10.1641C18.94 9.73697 18.2475 9.73697 17.8204 10.1641C17.3932 10.5912 17.3932 11.2838 17.8204 11.7109L22.5157 16.4062H9.84375Z' fill='black'/%3e%3c/svg%3e") !important;
}

[dir="rtl"] .carousel-control-next-icon {
  
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 35 35' fill='none'%3e%3cpath d='M17.5 0C7.83502 0 0 7.83502 0 17.5C0 27.165 7.83502 35 17.5 35C27.165 35 35 27.165 35 17.5C35 7.83502 27.165 0 17.5 0ZM25.1562 16.4062C25.7603 16.4062 26.25 16.8959 26.25 17.5C26.25 18.1041 25.7603 18.5938 25.1562 18.5938H12.4843L17.1796 23.2891C17.6068 23.7162 17.6068 24.4088 17.1796 24.8359C16.7525 25.263 16.06 25.263 15.6329 24.8359L9.07035 18.2734C8.64322 17.8463 8.64322 17.1537 9.07035 16.7266L15.6329 10.1641C16.06 9.73697 16.7525 9.73697 17.1796 10.1641C17.6068 10.5912 17.6068 11.2838 17.1796 11.7109L12.4843 16.4062H25.1562Z' fill='black'/%3e%3c/svg%3e") !important;
}

#views-bootstrap-programmes-block-1 .p-4{
  padding: 1.5rem 0 !important;
}
#views-bootstrap-programmes-block-1 h3{
  font-size: 1.5rem;
}

.carousel h3{
  font-size: 1.3rem !important;
}

/* simple player mejs */

.mejs__button.mejs__playpause-button button {
    background: #FFC107 !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    margin: 4px 8px 4px 0 !important;
    position: relative !important;
}
.mejs__container{
  background:white !important;
}

.mejs__button.mejs__playpause-button.mejs__play button:after {
    content: '' !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    background-color: #000000;
    -webkit-mask-image: url(../../images/icons/play.svg);
    mask-image: url(../../images/icons/play.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.mejs__controls:not([style*="display: none"]){
  background:none !important;
}
.mejs__time-total {
    background: hsl(0deg 1.84% 12.22% / 70%);
    margin: 5px 0 0;
    width: 100%;
}
.mejs__time {
    box-sizing: content-box;
    color: #5e5e5e;
    font-size: 11px;
    font-weight: 700;
    height: 24px;
    overflow: hidden;
    padding: 16px 6px 0;
    text-align: center;
    width: auto;
}
.mejs__button.mejs__volume-button.mejs__mute button:after {
    content: '';
    display: block !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-color: #0f0f0f !important;
    -webkit-mask-image: url(../../images/icons/volume-m.svg);
    mask-image: url(../../images/icons/volume-m.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.mejs__horizontal-volume-current {
    background: #ffc107;
    height: 100%;
    top: 0;
    width: 100%;
}

.mejs__button.mejs__playpause-button.mejs__pause button:after {
    content: '' !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    background-color: #000000;
    -webkit-mask-image: url(../../images/icons/pause.svg);
    mask-image: url(../../images/icons/pause.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }
  .mejs__time-buffering, .mejs__time-current, .mejs__time-float, .mejs__time-float-corner, .mejs__time-float-current, .mejs__time-hovered, .mejs__time-loaded, .mejs__time-marker, .mejs__time-total {
    border-radius: 8px;
    cursor: pointer;
    display: block;
    height: 10px;
    position: absolute;
}

.mejs__time-total {
    background: hsl(0deg 0% 54.33% / 70%);
    margin: 5px 0 0;
    width: 100%;
}
.mejs__horizontal-volume-current, .mejs__horizontal-volume-total {
    border-radius: 5px;
    font-size: 1px;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
}

.mejs__horizontal-volume-total {
    background: rgb(173 173 173);
    height: 8px;
    top: 16px;
    width: 50px;
}
.mejs__time-current, .mejs__time-handle-content {
    background: #ffc107;
}
.card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
    border-bottom: 2px dashed #efefef;
  }

  .mejs__time-float{
    display: none;
  }
      h2, .h2 {
        font-size: 2.1rem;
        margin: 2rem 0 1rem;
    }

.block-field-blocknodeemissionbody{

margin:2rem 1.2rem;

}
h1.page-title{
  font-size: 3rem;
  margin: 2rem 0;
}