/* Fixed right-side info rail — Rashid & Tibiadrome live widgets.
   Floats over the empty right margin next to the centered .container,
   identical pattern to tools-rail on the left. Hidden below 1100px so
   it never overlaps the main content. */

.info-rail {
  position: fixed;
  top: 90px;
  right: 24px;
  width: 210px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9000;
}

/* ── Individual widget card ── */
.info-widget {
  background: rgba(22, 17, 33, 0.88);
  border: 1px solid rgba(123, 44, 191, 0.28);
  border-radius: 12px;
  padding: 12px 16px 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.2s ease;
}

.info-widget:hover {
  border-color: rgba(199, 125, 255, 0.45);
}

/* Widget section header (e.g. "RASHID", "TIBIADROME") */
.info-widget-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #9b72cf;
  margin-bottom: 10px;
}

/* Row with icon + main text */
.info-widget-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-widget-icon {
  width: 37px;
  height: 37px;
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Larger variant — used for Rashid */
.info-widget-icon--lg {
  width: 61px;
  height: 61px;
  margin-top: -6px;
}

/* Main value text (city name, countdown) */
.info-widget-value {
  font-size: 17px;
  font-weight: 700;
  color: #e4e4e4;
  line-height: 1.2;
}

/* Clickable mapper link — city name & world quest title */
.info-widget-link {
  text-decoration: none;
  color: #e4e4e4;
  transition: color 0.15s ease;
}

.info-widget-link:hover {
  color: #c77dff;
}

/* Sub-label (rotation number, days left, etc.) */
.info-widget-sub {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #9b72cf;
  padding-left: 47px; /* aligns under text (37px icon + 10px gap) */
}

@media (max-width: 1100px) {
  .info-rail { display: none; }
}

/* ── World Event widget variants ── */

/* Active event: warm accent (amber glow) */
.info-widget--event-active {
  border-color: rgba(255, 180, 50, 0.35);
}

.info-widget--event-active .info-widget-label {
  color: #ffb432;
}

.info-widget--event-active .info-widget-sub--event {
  color: #ffb432;
}

/* Upcoming event: keep default purple muted style */
.info-widget--event-upcoming .info-widget-label {
  color: #9b72cf;
}

.info-widget--event-upcoming .info-widget-sub--event {
  color: #9b72cf;
}

/* Event name font size */
.info-widget-value--event {
  font-size: 16px;
  line-height: 1.3;
}

/* Individual Event Box Enclosures (Official Tibia Colors) */
.info-event-box {
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 8px;
  box-sizing: border-box;
}

.info-event-box-red {
  background: rgba(122, 27, 52, 0.45);
  border: 1px solid rgba(160, 40, 70, 0.75);
}

.info-event-box-blue {
  background: rgba(36, 101, 123, 0.45);
  border: 1px solid rgba(52, 140, 170, 0.75);
}

.info-event-box + .info-event-box {
  margin-top: 8px;
}

.info-event-item-red {
  background: rgba(139, 30, 45, 0.25);
  border: 1px solid rgba(184, 46, 66, 0.65);
}

.info-event-item-blue {
  background: rgba(0, 115, 153, 0.25);
  border: 1px solid rgba(0, 163, 204, 0.65);
}

.info-event-item + .info-event-item {
  margin-top: 8px;
}

.info-event-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.info-event-status {
  font-size: 11px;
  font-weight: 700;
  margin-top: 3px;
  letter-spacing: 0.3px;
}

.info-event-status-active {
  color: #ffb432;
  font-weight: 800;
}

.info-event-status-upcoming {
  color: #b3a0d0;
}