.tmd-extra-fields-wrapper {
  margin: 0 0 14px;
}

.tmd-extra-fields {
  position: relative;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 16px 14px 12px;
}

.tmd-extra-fields-wrapper .tmd-extra-fields {
  position: relative !important;
  overflow: visible !important;
}

.tmd-extra-fields {
  --tmd-badge-color: #dbeafe;
  --tmd-badge-bg-1: #3b5f7f;
  --tmd-badge-bg-2: #29435a;
  --tmd-badge-border: rgba(191, 219, 254, 0.5);
}

.tmd-extra-fields::after {
  content: none !important;
}

.tmd-extra-fields .tmd-extra-fields-badge-label {
  position: absolute;
  top: -1px;
  right: 10px;
  display: inline-block;
  padding: 2px 9px;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--tmd-badge-color);
  background: linear-gradient(180deg, var(--tmd-badge-bg-1) 0%, var(--tmd-badge-bg-2) 100%);
  border: 1px solid var(--tmd-badge-border);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
  text-transform: uppercase;
}

.tmd-extra-fields .tmd-extra-fields-badge {
  display: none !important;
}

.tmd-extra-field-row,
.tmd-extra-fields .extrafiled {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding: 2px 0;
  line-height: 1.35;
}

.tmd-extra-field-name,
.tmd-extra-fields .extrafiled b {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tmd-extra-field-value,
.tmd-extra-fields .extrafiled span {
  margin: 0;
  font-weight: 500;
}

.tmd-extra-fields--default {
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.18);
}

.tmd-extra-fields--v1 {
  border: 1px solid rgba(96, 165, 250, 0.45);
  background: linear-gradient(135deg, rgba(3, 24, 48, 0.82), rgba(2, 38, 72, 0.88));
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.15);
}

.tmd-extra-fields--v2 {
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(248, 250, 252, 0.95);
  --tmd-badge-color: #fefcf7;
  --tmd-badge-bg-1: #8f6a33;
  --tmd-badge-bg-2: #795428;
  --tmd-badge-border: rgba(47, 28, 6, 0.25);
}

.tmd-extra-fields--v2 .tmd-extra-field-name,
.tmd-extra-fields--v2 .extrafiled b,
.tmd-extra-fields--v2 .tmd-extra-field-value,
.tmd-extra-fields--v2 .extrafiled span {
  color: #0f172a;
}

.tmd-extra-fields--v3 {
  border: 1px solid rgba(45, 212, 191, 0.45);
  background: linear-gradient(140deg, rgba(3, 24, 31, 0.88), rgba(12, 36, 42, 0.92));
  box-shadow: 0 0 18px rgba(45, 212, 191, 0.12);
  --tmd-badge-color: #d5f9ff;
  --tmd-badge-bg-1: #135a66;
  --tmd-badge-bg-2: #0f4a55;
  --tmd-badge-border: rgba(57, 193, 214, 0.35);
}

.tmd-extra-fields--v3 .tmd-extra-field-name,
.tmd-extra-fields--v3 .extrafiled b {
  color: #67e8f9;
}

.tmd-extra-fields--jeans {
  position: relative;
  border: 1px solid #2a4f78;
  background: linear-gradient(145deg, #12395f, #0b2740);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 20px rgba(2, 18, 35, 0.35);
}

.tmd-extra-fields--jeans::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(191, 219, 254, 0.35);
  border-radius: 7px;
  pointer-events: none;
}

.tmd-extra-fields--jeans .tmd-extra-field-name,
.tmd-extra-fields--jeans .extrafiled b {
  color: #8fd0ff;
}

.tmd-extra-fields--jeans {
  --tmd-badge-border: rgba(180, 212, 247, 0.6);
  --tmd-badge-bg-1: rgba(20, 66, 106, 0.95);
  --tmd-badge-bg-2: rgba(20, 66, 106, 0.95);
}

@media (max-width: 767px) {
  .tmd-extra-fields-wrapper {
    margin-bottom: 12px;
  }

  .tmd-extra-fields {
    padding: 14px 12px 10px;
  }

  .tmd-extra-fields .tmd-extra-fields-badge-label {
    right: 8px;
    font-size: 9px;
  }
}