/* Radio Marina header shortcut icons — Météo · Vidéos · Live.
   A slim strip at the very top of the header, pinned to the visual LEFT in
   LTR order (Météo · Vidéos · Live), stacked icon-over-label like the brief.
   RTL page + light/dark theme aware. */

.rmp-hicons-bar {
  width: 100%;
  border-block-end: 1px solid rgba(0, 0, 0, 0.06);
}
body[data-theme="dark"] .rmp-hicons-bar {
  border-block-end-color: rgba(255, 255, 255, 0.08);
}

/* direction:ltr makes flex-start the visual LEFT even on this RTL page,
   and lays the icons out Météo → Vidéos → Live. Self-contained container so
   the theme's own container styles can't spread the icons apart. */
.rmp-hicons-inner {
  width: min(1290px, 100% - 40px);
  margin-inline: auto;
  display: flex;
  direction: ltr;
  justify-content: flex-start;
  padding-block: 8px;
  box-sizing: border-box;
}

.rmp-hicons {
  display: inline-flex;   /* hug content, stay grouped on the left */
  direction: ltr;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 22px;
  flex-wrap: nowrap;
}

.rmp-hicon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}

.rmp-hicon-badge {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(9, 9, 241, 0.18);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.rmp-hicon:hover .rmp-hicon-badge {
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgba(9, 9, 241, 0.28);
}
.rmp-hicon-badge svg { width: 22px; height: 22px; fill: #fff; }

.rmp-hicon-label { display: flex; flex-direction: column; align-items: center; }
.rmp-hicon-ar { font-size: 11px; font-weight: 700; color: #2a2f3a; }
.rmp-hicon-fr {
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: #98a0ad; margin-top: 1px;
}
body[data-theme="dark"] .rmp-hicon-ar { color: #e8ebf2; }
body[data-theme="dark"] .rmp-hicon-fr { color: #98a0ad; }

/* live pulse dot on the badge corner */
.rmp-hicon-live {
  position: absolute;
  top: -3px; right: -3px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ec1c1c;
  border: 2px solid #fff;
  animation: rmp-hlive 1.4s ease-in-out infinite;
}
@keyframes rmp-hlive {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236, 28, 28, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(236, 28, 28, 0); }
}

@media (max-width: 600px) {
  .rmp-hicons { gap: 18px; }
  .rmp-hicon-badge { width: 36px; height: 36px; border-radius: 11px; }
  .rmp-hicon-badge svg { width: 20px; height: 20px; }
  .rmp-hicon-ar { font-size: 10.5px; }
  .rmp-hicon-fr { display: none; }   /* Arabic only on small phones */
}