:root {
    --text-color: #fff;
    --background-color: none;
    --line-color: white;
    --line-color-dim: #959595;
    --line-color-dark: #2e2e2e;
    --table-padding: 30px;
    --cell-border: none;
}

#music-details-wrapper {
    width: auto !important;
    padding: var(--table-padding);
    background-color: var(--background-color);
    border-top: 1px solid var(--line-color-dark);
    border-bottom: 1px solid var(--line-color-dim);
}

.table {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 1500px;
    background-color: var(--background-color);
    color: var(--text-color);
}

.table td,
.table th {
    text-align: left !important;
    vertical-align: top;

}

.table-bordered td,
.table-bordered th {
    border: var(--cell-border);
}

table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    overflow: hidden;
    display: table;
    padding: 50px;
    margin: auto;
}

table.ck-table-resized.table-bordered {
    border: none !important;
    border-collapse: collapse;
}

.track-details {
    vertical-align: top;
}

colgroup col {
    width: auto;
}

.cover-art img,
.waveform-img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.cover-art img {
    aspect-ratio: 1/1;
}

.waveform-img img {
    aspect-ratio: 6/1;
}

.headings,
.header-row,
.title {
    height: 40px !important;
}

.headings {
    font-weight: bold;
}

.title {
    font-size: 25px;
    margin: 0;
    padding: 18px !important;
}

.spacer-row {
    height: 20px;
}

.track-info-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    border: none !important;
}

.track-info-table td {
    padding: 4px 0;

    vertical-align: top;
    text-align: left !important;
    border: none !important;
}

.field-heading {
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
    width: 30%;
}

.field-value {
    text-align: left;
    width: 70%;
}

.field-heading,
.field-value {
    padding-left: 0 !important;
}

.more-details-link .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.more-details-link.open .arrow {
    transform: rotate(90deg);
}

#waf-wrapper0 .waf-music-loader {
    background-color: transparent !important;
}

a.more-details-link {
    display: flex;
    gap: 35px;
    padding-left: 380px;
    margin: 12px 0;
}


.details-box {
  overflow: auto;      /* allow scroll instead of overflowing out */
  max-height: 90vh;    /* cap to viewport height */
  transition: max-height 0.4s ease-in-out;
  margin-bottom: 20px !important;
}




.row {
  display: grid;
  grid-template-columns: 100px 1fr; /* label fixed width, tags expand */
  align-items: start;              /* top-align */
  gap: 10px;                       /* optional spacing */
}

.row label {
  font-weight: bold;
}

.row .tags {
  text-align: left; /* or justify if needed */
}




.waveform-img img {
    display: block;
    width: 100%;     /* scale to column width */
    height: auto;    /* keep true aspect ratio */
    object-fit: contain;
    aspect-ratio: auto;  /* remove forced aspect ratio */
}


.row {
  display: grid;
  grid-template-columns: 150px 1fr; /* fixed label, flexible tags */
  gap: 8px;
}