/*
 * VBS Personalization Profile Bar
 * Athletic · Compact · Mobile-first
 */

:root {
  --vbs-bg         : #000000;
  --vbs-bg-light   : #1a1a1a;
  --vbs-border     : #2a2a2a;
  --vbs-accent     : #d12032;
  --vbs-accent-dim : #a81828;
  --vbs-text       : #e8edf2;
  --vbs-muted      : #7a9ab5;
  --vbs-ok         : #2dbd74;
  --vbs-warn       : #e8a825;
  --vbs-radius     : 10px;
  --vbs-radius-sm  : 6px;
  --vbs-font       : 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --vbs-body       : 'Barlow', 'DM Sans', system-ui, sans-serif;
  --vbs-transition : 160ms ease;
}

/* ── Wrapper ── */
.vbs-profile-bar {
  font-family   : var(--vbs-body);
  background    : var(--vbs-bg);
  border        : 1.5px solid var(--vbs-border);
  border-radius : var(--vbs-radius);
  padding       : 14px 16px 12px;
  margin-bottom : 20px;
  position      : relative;
  max-width     : 520px;
  box-shadow    : 0 4px 18px rgba(0,0,0,.5);
}

/* ── Header ── */
.vbs-bar-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  margin-bottom   : 10px;
}

.vbs-bar-title {
  font-family    : var(--vbs-font);
  font-size      : 13px;
  font-weight    : 700;
  letter-spacing : .08em;
  text-transform : uppercase;
  color          : #a5a5a5;
  display        : flex;
  align-items    : center;
  gap            : 6px;
}

.vbs-icon {
  width       : 16px;
  height      : 16px;
  color       : var(--vbs-accent);
  flex-shrink : 0;
}

/* ── Manage button ── */
.vbs-btn-manage {
  background     : transparent !important;
  color          : #7a9ab5 !important;
  border         : 1px solid #3a3a3a !important;
  padding        : 3px 8px !important;
  border-radius  : 4px !important;
  font-size      : 11px !important;
  font-weight    : 700 !important;
  letter-spacing : .05em !important;
  font-family    : var(--vbs-body) !important;
  cursor         : pointer !important;
  line-height    : 1 !important;
  transition     : color var(--vbs-transition), border-color var(--vbs-transition) !important;
}

.vbs-btn-manage:hover {
  color        : #c8d8e8 !important;
  border-color : #5a7a94 !important;
}

/* ── Instructions ── */
.vbs-instructions {
  margin-bottom : 10px;
  padding-bottom: 10px;
  border-bottom : 1px solid #1a1a1a;
  display       : flex;
  flex-direction: column;
  gap           : 0px;
}

.vbs-instructions p {
  font-size  : 11px;
  color      : #a5a5a5;
  line-height: 1.55;
}

.vbs-instr-step {
  color       : var(--vbs-accent);
  font-weight : 700;
  font-size   : 10px;
  margin-right: 5px;
}

.vbs-instructions b {
  color      : #ffffff;
  font-weight: 700;
}

/* ── Hint ── */
.vbs-hint {
  font-size  : 13px;
  color      : var(--vbs-muted);
  margin     : 0;
  line-height: 1.45;
}

/* ── Single-profile checkbox ── */
.vbs-single-profile {
  display     : flex;
  align-items : center;
  gap         : 10px;
  cursor      : pointer;
  user-select : none;
}

.vbs-apply-check {
  appearance         : none;
  -webkit-appearance : none;
  width              : 20px;
  height             : 20px;
  border             : 2px solid var(--vbs-border);
  border-radius      : 4px;
  background         : var(--vbs-bg-light);
  cursor             : pointer;
  flex-shrink        : 0;
  position           : relative;
  transition         : border-color var(--vbs-transition), background var(--vbs-transition);
}

.vbs-apply-check:checked {
  background   : var(--vbs-accent);
  border-color : var(--vbs-accent);
}

.vbs-apply-check:checked::after {
  content    : '';
  position   : absolute;
  left       : 4px;
  top        : 2px;
  width      : 6px;
  height     : 10px;
  border     : 2px solid #fff;
  border-top : 0;
  border-left: 0;
  transform  : rotate(45deg);
}

.vbs-label-chip {
  font-family    : var(--vbs-font);
  font-size      : 16px;
  font-weight    : 700;
  letter-spacing : .04em;
  color          : var(--vbs-text);
}

.vbs-apply-hint {
  font-size  : 12px;
  color      : var(--vbs-muted);
  margin-left: auto;
}

/* ── Dropdown row ── */
.vbs-profile-row {
  display     : flex;
  gap         : 8px;
  align-items : center;
}

.vbs-profile-select {
  flex          : 1;
  background    : var(--vbs-bg-light);
  border        : 1.5px solid var(--vbs-border);
  border-radius : var(--vbs-radius-sm);
  color         : var(--vbs-text);
  font-family   : var(--vbs-font);
  font-size     : 15px;
  font-weight   : 600;
  padding       : 8px 10px;
  cursor        : pointer;
  outline       : none;
  transition    : border-color var(--vbs-transition);
  appearance    : auto;
}

.vbs-profile-select:focus { border-color: var(--vbs-accent); }

/* ── Action buttons ── */
.vbs-bar-actions {
  display    : flex;
  gap        : 8px;
  margin-top : 12px;
  flex-wrap  : wrap;
}

.vbs-btn-save {
  font-family    : var(--vbs-font) !important;
  font-size      : 14px !important;
  font-weight    : 700 !important;
  letter-spacing : .06em !important;
  text-transform : uppercase !important;
  padding        : 9px 18px !important;
  background     : #d12032 !important;
  color          : #ffffff !important;
  border         : none !important;
  border-radius  : var(--vbs-radius-sm) !important;
  cursor         : pointer !important;
  line-height    : 1 !important;
  white-space    : nowrap !important;
  transition     : background var(--vbs-transition) !important;
}

.vbs-btn-save:hover  { background: #a81828 !important; }
.vbs-btn-save:active { transform: scale(.97); }

.vbs-btn-apply {
  font-family    : var(--vbs-font) !important;
  font-size      : 14px !important;
  font-weight    : 700 !important;
  letter-spacing : .06em !important;
  text-transform : uppercase !important;
  padding        : 8px 16px !important;
  background     : #d12032 !important;
  color          : #ffffff !important;
  border         : none !important;
  border-radius  : var(--vbs-radius-sm) !important;
  cursor         : pointer !important;
  line-height    : 1 !important;
  white-space    : nowrap !important;
  transition     : background var(--vbs-transition) !important;
}

.vbs-btn-apply:hover { background: #a81828 !important; }

.vbs-btn-new {
  font-family    : var(--vbs-font) !important;
  font-size      : 13px !important;
  font-weight    : 600 !important;
  letter-spacing : .05em !important;
  text-transform : uppercase !important;
  padding        : 8px 14px !important;
  background     : transparent !important;
  color          : #7a9ab5 !important;
  border         : 1.5px solid #2a2a2a !important;
  border-radius  : var(--vbs-radius-sm) !important;
  cursor         : pointer !important;
  line-height    : 1 !important;
  white-space    : nowrap !important;
  transition     : color var(--vbs-transition), border-color var(--vbs-transition) !important;
}

.vbs-btn-new:hover {
  color        : #e8edf2 !important;
  border-color : #7a9ab5 !important;
}

/* ── Manage panel ── */
.vbs-manage-panel {
  margin-top  : 12px;
  border-top  : 1px solid var(--vbs-border);
  padding-top : 10px;
}

.vbs-manage-title {
  font-size      : 10px;
  font-weight    : 700;
  letter-spacing : .08em;
  text-transform : uppercase;
  color          : #5a7a94;
  margin-bottom  : 7px;
}

.vbs-manage-list {
  list-style     : none;
  padding        : 0;
  margin         : 0;
  display        : flex;
  flex-direction : column;
  gap            : 4px;
}

.vbs-manage-item {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 7px 10px;
  background      : var(--vbs-bg-light);
  border-radius   : var(--vbs-radius-sm);
}

.vbs-manage-label {
  font-family    : var(--vbs-font);
  font-size      : 15px;
  font-weight    : 700;
  color          : var(--vbs-text);
  letter-spacing : .03em;
}

.vbs-btn-delete {
  background    : transparent !important;
  border        : none !important;
  padding       : 4px !important;
  cursor        : pointer !important;
  color         : var(--vbs-muted) !important;
  border-radius : 4px;
  line-height   : 0;
  transition    : color var(--vbs-transition);
}

.vbs-btn-delete svg { width: 16px; height: 16px; display: block; }
.vbs-btn-delete:hover { color: #ff6b6b !important; }

/* ── Flash ── */
.vbs-flash {
  font-size     : 12px;
  font-weight   : 600;
  padding       : 6px 10px;
  border-radius : var(--vbs-radius-sm);
  margin-top    : 8px;
  opacity       : 0;
  max-height    : 0;
  overflow      : hidden;
  transition    : opacity 220ms ease, max-height 220ms ease;
}

.vbs-flash--visible { opacity: 1; max-height: 40px; }
.vbs-flash--ok      { background: rgba(45,189,116,.15); color: #2dbd74; }
.vbs-flash--warn    { background: rgba(232,168,37,.15);  color: #e8a825; }

/* ── Responsive ── */
@media (max-width: 420px) {
  .vbs-profile-bar  { padding: 12px 12px 10px; border-radius: 8px; }
  .vbs-bar-actions  { gap: 6px; }
  .vbs-btn-save,
  .vbs-btn-new      { padding: 9px 12px !important; font-size: 13px !important; }
  .vbs-label-chip   { font-size: 15px; }
}