/* Media Deck 2026 — Music-Solutions
   Scoped styles (won't leak outside .msmdk)
*/

.msmdk{
  --mdk-bg: rgba(255,255,255,.72);
  --mdk-bg2: rgba(255,255,255,.45);
  --mdk-border: rgba(133,106,87,.22);
  --mdk-text: #0b1a12;
  --mdk-muted: rgba(11,26,18,.62);
  --mdk-accent: #D07A1D;
  --mdk-accent2: #FFED85;
  --mdk-shadow: 0 18px 50px rgba(0,0,0,.12);
  --mdk-radius: 20px;
  --mdk-gap: 14px;
  --mdk-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;

  font-family: var(--mdk-font);
  color: var(--mdk-text);
  border: 1px solid var(--mdk-border);
  border-radius: var(--mdk-radius);
  box-shadow: var(--mdk-shadow);
  background: radial-gradient(1200px 500px at 10% 0%, rgba(133,106,87,.18), transparent 55%),
              radial-gradient(900px 450px at 100% 20%, rgba(255,237,133,.14), transparent 50%),
              linear-gradient(180deg, var(--mdk-bg), var(--mdk-bg2));
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
}

@media (prefers-color-scheme: dark){
  .msmdk{
    --mdk-bg: rgba(12,18,15,.72);
    --mdk-bg2: rgba(12,18,15,.45);
    --mdk-border: rgba(255,237,133,.18);
    --mdk-text: #eef7f2;
    --mdk-muted: rgba(238,247,242,.62);
    --mdk-shadow: 0 18px 50px rgba(0,0,0,.35);
  }
}

.msmdk *{ box-sizing: border-box; }

/*
  IMPORTANT:
  The legacy site CSS applies aggressive rules to all <svg> elements (positioning, opacity, etc.).
  To avoid any bleed/bugs across browsers (notably iOS Safari), the Media Deck UI uses
  CSS-masked <span> icons instead of inline SVGs.
*/

/* Icon system (no inline <svg>) */
.msmdk-icon{
  width: 22px;
  height: 22px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: var(--msmdk-mask) no-repeat center / contain;
  mask: var(--msmdk-mask) no-repeat center / contain;
  opacity: .9;
}

.msmdk-icon.video{
  --msmdk-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%204.5h7a2%202%200%200%201%202%202v11a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2v-11a2%202%200%200%201%202-2Z'/%3E%3Cpath%20d='M17%2010%2020%208v8l-3-2v-4Z'/%3E%3C/svg%3E");
}

.msmdk-icon.audio{
  --msmdk-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%203a3%203%200%200%201%203%203v8.2a4.8%204.8%200%201%201-2-3.95V6a1%201%200%200%200-2%200v9.7a2.8%202.8%200%201%200%202%202.67V6a3%203%200%200%201%203-3Z'/%3E%3C/svg%3E");
}
/*
  Site legacy CSS sets *all* SVGs to position:absolute (svg{position:absolute;top:0;left:0}).
  Media Deck uses inline SVG icons, so we neutralize that rule inside the deck.
*/
/* Extra safety: if any inline SVG slips in, neutralize the legacy rules inside the deck */
.msmdk svg{
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 1em !important;
  height: 1em !important;
  opacity: 1 !important;
  transform: none !important;
  z-index: auto !important;
}


.msmdk-header{
  padding: 18px 18px 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.msmdk-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 760;
  letter-spacing: .2px;
  font-size: 18px;
  margin: 0;
}

.msmdk-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--mdk-accent);
  box-shadow: 0 0 0 6px rgba(133,106,87,.12);
}

.msmdk-badge{
  font-size: 12px;
  color: var(--mdk-muted);
  border: 1px solid var(--mdk-border);
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  white-space: nowrap;
}

.msmdk-main{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--mdk-gap);
  padding: 0 18px 18px;
}

@media (max-width: 880px){
  .msmdk-main{ grid-template-columns: 1fr; }
}

.msmdk-stage{
  border: 1px solid var(--mdk-border);
  border-radius: calc(var(--mdk-radius) - 6px);
  background: rgba(255,255,255,.22);
  overflow: hidden;
}

@media (prefers-color-scheme: dark){
  .msmdk-stage{ background: rgba(0,0,0,.18); }
}

.msmdk-stageInner{ padding: 14px; display: grid; gap: 12px; }

.msmdk-videoWrap{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--mdk-border);
  background: rgba(0,0,0,.10);
}

.msmdk-videoWrap[hidden]{ display: none; }

.msmdk-video{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/9;
  background: rgba(0,0,0,.22);
}

.msmdk-metaRow{
  display:flex;
  gap:12px;
  align-items:center;
}

.msmdk-thumb{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  border: 1px solid var(--mdk-border);
  overflow: hidden;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.18);
}

@media (prefers-color-scheme: dark){
  .msmdk-thumb{ background: rgba(0,0,0,.18); }
}

.msmdk-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }

.msmdk-now{ font-weight: 760; font-size: 14px; margin: 0; }
.msmdk-sub{ margin: 2px 0 0; color: var(--mdk-muted); font-size: 12px; }

.msmdk-controls{ display: grid; gap: 10px; }

.msmdk-row{ display:flex; align-items:center; gap:10px; flex-wrap: wrap; }

.msmdk-btn{
  appearance: none;
  border: 1px solid var(--mdk-border);
  background: rgba(255,255,255,.55);
  color: var(--mdk-text) !important;
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  user-select: none;
}

@media (prefers-color-scheme: dark){
  .msmdk-btn{ background: rgba(0,0,0,.32); }
}

/* iOS / legacy CSS sometimes forces low opacity or light text on buttons */
.msmdk .msmdk-btn,
.msmdk .msmdk-btn *{
  color: var(--mdk-text) !important;
  opacity: 1 !important;
}

.msmdk-btn:hover{ transform: translateY(-1px); border-color: rgba(133,106,87,.45); }
.msmdk-btn:active{ transform: translateY(0px); }

.msmdk-btn.primary{
  border-color: rgba(133,106,87,.55);
  background: linear-gradient(180deg, rgba(133,106,87,.22), rgba(133,106,87,.12));
  color: var(--mdk-text) !important;
  font-weight: 750;
}

/* Slightly bolder play glyph on mobile */
.msmdk #msmdk-playLabel{ font-weight: 900; }

.msmdk-btn[disabled]{ opacity: .55; cursor: not-allowed; transform: none; }

.msmdk-seek{ display:flex; align-items:center; gap:10px; width:100%; }
.msmdk-time{ font-variant-numeric: tabular-nums; font-size: 12px; color: var(--mdk-muted); min-width: 92px; text-align: right; }

.msmdk-range{ width: 100%; accent-color: var(--mdk-accent); }

.msmdk-side{
  border: 1px solid var(--mdk-border);
  border-radius: calc(var(--mdk-radius) - 6px);
  overflow: hidden;
  background: rgba(255,255,255,.18);
}

@media (prefers-color-scheme: dark){
  .msmdk-side{ background: rgba(0,0,0,.16); }
}

.msmdk-toolbar{
  padding: 12px;
  display:flex;
  gap:10px;
  align-items:center;
  border-bottom: 1px solid var(--mdk-border);
}

.msmdk-search{
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--mdk-border);
  padding: 10px 12px;
  background: rgba(255,255,255,.25);
  color: var(--mdk-text);
  outline: none;
}

@media (prefers-color-scheme: dark){
  .msmdk-search{ background: rgba(0,0,0,.22); }
}

.msmdk-list{ max-height: 420px; overflow: auto; padding: 6px; }

.msmdk-item{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px;
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.msmdk-item:hover{
  background: rgba(43,211,138,.10);
  border-color: rgba(43,211,138,.25);
  transform: translateY(-1px);
}

.msmdk-item.active{
  background: rgba(43,211,138,.16);
  border-color: rgba(43,211,138,.40);
}

.msmdk-itemTitle{
  margin:0;
  font-weight: 740;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msmdk-itemSub{
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--mdk-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msmdk-itemText{ min-width: 0; }

.msmdk-footerHint{
  padding: 10px 12px 12px;
  color: var(--mdk-muted);
  font-size: 12px;
  border-top: 1px solid var(--mdk-border);
}

/* Nicer focus (keyboard + accessibility) */
.msmdk:focus{ outline: none; }
.msmdk:focus-visible{ box-shadow: 0 0 0 3px rgba(43,211,138,.35), var(--mdk-shadow); }