/* ==========================================================
   BuddySocial v10.24 - PLAYER STUDIO BEAUTIFY
   Alleen Merklogo & eigen website-player.
   ========================================================== */

.player-studio-v1024{
  border:1px solid #a9c8dc !important;
  border-radius:10px !important;
  background:rgba(247,252,255,.95) !important;
  box-shadow:0 6px 18px rgba(37,91,128,.10) !important;
  overflow:hidden !important;
}

.player-studio-head{
  min-height:68px !important;
  padding:11px 14px !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(224,242,252,.96)) !important;
  border-bottom:1px solid #b9d3e3 !important;
}

.player-studio-title{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  min-width:0 !important;
}

.player-studio-icon{
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:11px !important;
  background:linear-gradient(145deg,#4b8fc1,#2f6fa8) !important;
  color:#fff !important;
  font-size:21px !important;
  box-shadow:0 4px 10px rgba(47,111,168,.22) !important;
}

.player-studio-title small{
  display:block !important;
  margin-bottom:1px !important;
  color:#6b8597 !important;
  font-size:8px !important;
  font-weight:800 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
}

.player-studio-title b{
  display:block !important;
  color:#245b82 !important;
  font-size:14px !important;
}

.player-studio-title p{
  margin:3px 0 0 !important;
  color:#637b8c !important;
  line-height:1.35 !important;
  font-size:9px !important;
}

.player-studio-ready{
  flex:0 0 auto !important;
  padding:5px 8px !important;
  border:1px solid #a9d2b2 !important;
  border-radius:999px !important;
  background:linear-gradient(#f2fff5,#e5f8e9) !important;
  color:#3b7649 !important;
  font-size:8px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

.player-studio-grid{
  gap:14px !important;
  padding:14px !important;
  background:
    linear-gradient(rgba(255,255,255,.76),rgba(255,255,255,.76)),
    radial-gradient(circle at 5% 10%,rgba(243,154,19,.08),transparent 25%),
    radial-gradient(circle at 95% 90%,rgba(47,111,168,.08),transparent 28%) !important;
}

.player-studio-card{
  border:1px solid #c4d8e4 !important;
  border-radius:9px !important;
  background:#fff !important;
  box-shadow:0 3px 10px rgba(36,82,112,.07) !important;
  overflow:hidden !important;
}

.player-studio-card-head{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  min-height:48px !important;
  margin:-12px -12px 12px !important;
  padding:9px 11px !important;
  border-bottom:1px solid #d4e3eb !important;
  background:linear-gradient(180deg,#f9fcfe,#edf6fb) !important;
}

.player-studio-card-head>span{
  width:34px !important;
  height:34px !important;
  flex:0 0 34px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:8px !important;
  background:#e5f2fa !important;
  border:1px solid #c2dae8 !important;
  font-size:16px !important;
}

.player-studio-card-head b,
.player-studio-card-head small{
  display:block !important;
}

.player-studio-card-head b{
  color:#285e82 !important;
  font-size:11px !important;
}

.player-studio-card-head small{
  margin-top:2px !important;
  color:#718696 !important;
  font-size:8px !important;
}

.player-studio-fields{
  display:grid !important;
  gap:10px !important;
}

.player-studio-field{
  display:block !important;
  margin:0 !important;
}

.player-studio-field>span{
  display:block !important;
  margin-bottom:2px !important;
  color:#345f7c !important;
  font-weight:800 !important;
  font-size:9px !important;
}

.player-studio-field>small{
  display:block !important;
  margin:0 0 5px !important;
  color:#7a8d9b !important;
  font-size:7.5px !important;
}

.player-studio-field input{
  width:100% !important;
  min-height:34px !important;
  box-sizing:border-box !important;
  border:1px solid #b9cedc !important;
  border-radius:7px !important;
  background:#fbfdfe !important;
  color:#2b465a !important;
  padding:7px 9px !important;
  box-shadow:inset 0 1px 2px rgba(27,61,84,.04) !important;
}

.player-studio-field input:focus{
  outline:none !important;
  border-color:#4c90c2 !important;
  box-shadow:0 0 0 3px rgba(76,144,194,.12) !important;
}

.player-logo-upload{
  position:relative !important;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) !important;
  gap:9px !important;
  align-items:center !important;
  min-height:64px !important;
  padding:9px !important;
  border:1px dashed #9cbfd5 !important;
  border-radius:8px !important;
  background:linear-gradient(180deg,#fbfdff,#f1f8fc) !important;
  cursor:pointer !important;
  overflow:hidden !important;
}

.player-logo-upload:hover{
  border-color:#4c90c2 !important;
  background:#eef7fd !important;
}

.player-logo-upload-icon{
  width:40px !important;
  height:40px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:8px !important;
  background:#fff !important;
  border:1px solid #d0e0e9 !important;
  font-size:18px !important;
}

.player-logo-upload b,
.player-logo-upload small{
  display:block !important;
}

.player-logo-upload b{
  color:#305f7f !important;
  font-size:9px !important;
}

.player-logo-upload small{
  margin-top:2px !important;
  color:#758a99 !important;
  font-size:7px !important;
}

.player-logo-upload input[type=file]{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0 !important;
  cursor:pointer !important;
}

.player-logo-current{
  grid-template-columns:82px minmax(0,1fr) !important;
  padding:8px !important;
  border:1px solid #d1e0e9 !important;
  border-radius:8px !important;
  background:#f8fbfd !important;
}

.player-logo-image{
  width:78px !important;
  height:58px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid #d1e0e9 !important;
  border-radius:7px !important;
  background:#fff !important;
}

.player-logo-image img{
  width:70px !important;
  height:50px !important;
  object-fit:contain !important;
  border:0 !important;
  background:transparent !important;
}

.player-logo-current b,
.player-logo-current small{
  display:block !important;
}

.player-logo-current b{
  color:#315f7e !important;
  font-size:9px !important;
}

.player-logo-current small{
  margin-top:2px !important;
  color:#7a8c99 !important;
  font-size:7px !important;
}

.remove-logo-check{
  margin-top:7px !important;
  color:#8b5555 !important;
  font-size:8px !important;
}

.player-studio-switches{
  display:grid !important;
  gap:6px !important;
}

.player-studio-switch{
  display:grid !important;
  grid-template-columns:auto auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:8px !important;
  min-height:48px !important;
  padding:7px 8px !important;
  margin:0 !important;
  border:1px solid #d3e1e9 !important;
  border-radius:8px !important;
  background:#f9fcfd !important;
  cursor:pointer !important;
}

.player-studio-switch>input{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.switch-ui{
  position:relative !important;
  width:34px !important;
  height:19px !important;
  display:block !important;
  border-radius:999px !important;
  background:#bdcad3 !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.10) !important;
  transition:.18s ease !important;
}

.switch-ui::after{
  content:"" !important;
  position:absolute !important;
  top:3px !important;
  left:3px !important;
  width:13px !important;
  height:13px !important;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 1px 3px rgba(0,0,0,.20) !important;
  transition:.18s ease !important;
}

.player-studio-switch>input:checked + .switch-ui{
  background:#3d8fc4 !important;
}

.player-studio-switch>input:checked + .switch-ui::after{
  transform:translateX(15px) !important;
}

.player-studio-switch>span:last-child b,
.player-studio-switch>span:last-child small{
  display:block !important;
}

.player-studio-switch>span:last-child b{
  color:#315e7c !important;
  font-size:8.5px !important;
}

.player-studio-switch>span:last-child small{
  margin-top:1px !important;
  color:#778b99 !important;
  font-size:7px !important;
}

.player-studio-save{
  width:100% !important;
  min-height:36px !important;
  margin-top:11px !important;
  border-radius:7px !important;
  font-weight:900 !important;
}

.player-embed-steps{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:6px !important;
  margin-bottom:10px !important;
}

.player-embed-steps>span{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  min-width:0 !important;
  padding:6px !important;
  border:1px solid #d2e1ea !important;
  border-radius:7px !important;
  background:#f8fbfd !important;
  color:#597385 !important;
  font-size:7.5px !important;
}

.player-embed-steps>span>b{
  width:19px !important;
  height:19px !important;
  flex:0 0 19px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  background:#2f6fa8 !important;
  color:#fff !important;
  font-size:7px !important;
}

.player-code-card{
  overflow:hidden !important;
  border:1px solid #263d4c !important;
  border-radius:8px !important;
  background:#132530 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.player-code-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  min-height:31px !important;
  padding:5px 8px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  background:#1b3342 !important;
}

.player-code-head span{
  color:#9cd9ff !important;
  font-size:7px !important;
  font-weight:900 !important;
  letter-spacing:.06em !important;
}

.player-code-head small{
  color:#829eaf !important;
  font-size:7px !important;
}

.player-code-card textarea{
  width:100% !important;
  min-height:145px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#132530 !important;
  color:#d8ecf7 !important;
  padding:10px !important;
  font:9px/1.55 Consolas,"Courier New",monospace !important;
  box-shadow:none !important;
  resize:vertical !important;
}

.player-studio-actions{
  margin:9px 0 !important;
}

.player-copy-button{
  min-width:170px !important;
  min-height:36px !important;
  border-radius:7px !important;
  font-weight:900 !important;
}

.player-preview-button{
  min-height:36px !important;
  border-radius:7px !important;
}

.player-embed-info{
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) !important;
  gap:8px !important;
  align-items:start !important;
  margin-top:auto !important;
  padding:8px !important;
  border:1px solid #cfe0e9 !important;
  border-radius:8px !important;
  background:#f3f9fc !important;
}

.player-embed-info>span{
  width:32px !important;
  height:32px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:8px !important;
  background:#fff !important;
  border:1px solid #d5e4ec !important;
}

.player-embed-info p{
  margin:0 !important;
}

.player-embed-info b,
.player-embed-info small{
  display:block !important;
}

.player-embed-info b{
  color:#315f7e !important;
  font-size:8.5px !important;
}

.player-embed-info small{
  margin-top:2px !important;
  color:#6f8493 !important;
  line-height:1.4 !important;
  font-size:7.5px !important;
}

@media(max-width:1050px){
  .player-studio-grid{
    grid-template-columns:minmax(300px,.9fr) minmax(400px,1.1fr) !important;
  }
}

@media(max-width:900px){
  .player-studio-head{
    align-items:flex-start !important;
  }

  .player-studio-grid{
    grid-template-columns:1fr !important;
  }

  .player-embed-steps{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:560px){
  .player-studio-head{
    flex-direction:column !important;
    gap:8px !important;
  }

  .player-studio-title{
    align-items:flex-start !important;
  }

  .player-studio-icon{
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
  }

  .player-studio-grid{
    padding:8px !important;
    gap:8px !important;
  }

  .player-logo-current{
    grid-template-columns:64px minmax(0,1fr) !important;
  }

  .player-logo-image{
    width:60px !important;
    height:48px !important;
  }

  .player-logo-image img{
    width:54px !important;
    height:42px !important;
  }

  .player-copy-button,
  .player-preview-button{
    width:100% !important;
  }

  .player-studio-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
}