/*
 * DJO_MediaPlayer — DJO Brand Skin
 *
 * Unskinned: base CSS only (neutral skeleton)
 * Modern Blue: default DJO theme
 * Soft Light: lighter editorial card treatment
 * Glass: frosted treatment for dark/image backgrounds
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Outfit:wght@500;600;700&display=swap');

.djo.djo-media-player,
.djo.djo-media-player[data-theme='modern-blue'] {
  --mp-card-bg: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
  --mp-border: #dbe4ef;
  --mp-text: #16304f;
  --mp-text-muted: #607087;
  --mp-eyebrow: #3b5998;
  --mp-button-bg: linear-gradient(135deg, #284f80 0%, #173a63 100%);
  --mp-button-bg-hover: linear-gradient(135deg, #355d90 0%, #214872 100%);
  --mp-button-text: #ffffff;
  --mp-shadow: 0 16px 36px rgba(28, 55, 91, 0.16);
  --mp-focus: rgba(59, 89, 152, 0.34);
  --mp-radius: 20px;
  --mp-font: 'DM Sans', system-ui, sans-serif;
  --mp-heading-font: 'Outfit', 'DM Sans', system-ui, sans-serif;
}

.djo.djo-media-player[data-theme='soft-light'] {
  --mp-card-bg: #fbfcfe;
  --mp-border: #e5eaf1;
  --mp-text: #2f4057;
  --mp-text-muted: #8491a3;
  --mp-eyebrow: #6b84ab;
  --mp-button-bg: #4a6fa5;
  --mp-button-bg-hover: #3d5f8e;
  --mp-button-text: #ffffff;
  --mp-shadow: 0 0 0 1px rgba(205, 214, 227, 0.85), 0 14px 28px rgba(40, 48, 68, 0.07);
  --mp-focus: rgba(74, 111, 165, 0.28);
  --mp-radius: 22px;
}

.djo.djo-media-player[data-theme='glass'] {
  --mp-card-bg: rgba(255, 255, 255, 0.08);
  --mp-border: rgba(255, 255, 255, 0.18);
  --mp-text: #ffffff;
  --mp-text-muted: rgba(255, 255, 255, 0.72);
  --mp-eyebrow: rgba(255, 255, 255, 0.88);
  --mp-button-bg: rgba(255, 255, 255, 0.14);
  --mp-button-bg-hover: rgba(255, 255, 255, 0.22);
  --mp-button-text: #ffffff;
  --mp-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
  --mp-focus: rgba(255, 255, 255, 0.32);
}

.djo.djo-media-player[data-theme='glass'] .djo-media-player__inline {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.djo.djo-media-player .djo-media-player__title {
  letter-spacing: -0.02em;
}

.djo.djo-media-player .djo-media-player__native {
  accent-color: #3b5998;
}

.djo.djo-media-player[data-theme='glass'] .djo-media-player__native {
  accent-color: #ffffff;
}