:root{
  /* Defaults (safe fallback) */
  --botb-text: #ffffff;
  --botb-panel-bg: #111111;
  --botb-stats-bg: rgba(255,255,255,0.07);
  --botb-stats-text: #ffb6c1;

  --botb-btn-bg: #ff4d6d;
  --botb-btn-bg-hover: #c2185b;
  --botb-btn-text: #ffffff;

  --botb-vs-grad-a: #ff4d6d;
  --botb-vs-grad-b: #c2185b;

  --botb-like-off: #a3a3a3;
  --botb-like-hover: #d1d5db;
  --botb-like-on: #34d399;
  --botb-like-on-hover: #2ecc71;
}

body {
  margin: 0;
  padding: 0;
  color: var(--botb-text);
  font-family: 'ABeeZee', sans-serif;
}

form { background: transparent; margin: 0; padding: 0; }

.battle-container{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:stretch;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  gap:0;
  background:transparent;
  padding:0;
  box-sizing:border-box;
  position:relative;
}

.vote-side{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:stretch;
  align-items:stretch;
  background:var(--botb-panel-bg);
  margin:0;
  padding:0;
  box-sizing:border-box;
  overflow:hidden;
}

.vote-content{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  width:100%;
  overflow:hidden;
  min-height:0;
}

.hover-preview-container{
  position:relative;
  width:100%;
  flex:1 1 auto;
  display:flex;
  min-height:0;
}

.hover-preview{
  width:100%;
  flex:1 1 auto;
  display:flex;
  min-height:0;
}

.hover-preview img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  margin:0;
  flex:1 1 auto;
}

/* Admin stats */
.statistics{
  background:var(--botb-stats-bg);
  color:var(--botb-stats-text);
  font-size:1em;
  padding:8px 10px;
  width:100%;
  text-align:center;
  box-sizing:border-box;
  margin:0;
  flex:0 0 auto;
  font-weight:bold;
}

/* Like row (optional) */
.botb-like-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  background:rgba(255,255,255,0.05);
  flex:0 0 auto;
}

.botb-like-btn{
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  padding:6px 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--botb-like-off);
  transition:transform .15s ease, color .15s ease;
}
.botb-like-btn:hover{ transform:scale(1.08); color:var(--botb-like-hover); }
.botb-like-btn.is-on{ color:var(--botb-like-on); }
.botb-like-btn.is-on:hover{ color:var(--botb-like-on-hover); }
.botb-like-btn:disabled{ cursor:default; opacity:1; }

.botb-like-count{
  color:var(--botb-text);
  font-size:1em;
  font-weight:700;
  min-width:32px;
  text-align:left;
}

/* Vote button */
.votebutton{
  width:100%;
  border:none;
  padding:20px;
  font-size:2em;
  background-color:var(--botb-btn-bg);
  color:var(--botb-btn-text);
  cursor:pointer;
  margin:0;
  box-sizing:border-box;
  flex:0 0 auto;
  font-family:'ABeeZee', sans-serif;
  font-weight:700;
  border-radius:0;
  transition:background .3s ease;
}
.votebutton:hover{ background-color:var(--botb-btn-bg-hover); }

.vote-side.left{ border-top-left-radius:12px; border-bottom-left-radius:12px; }
.vote-side.right{ border-top-right-radius:12px; border-bottom-right-radius:12px; }
.vote-side.left .votebutton{ border-radius:0 0 0 12px; }
.vote-side.right .votebutton{ border-radius:0 0 12px 0; }

/* VS */
.vs-banner{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-10deg);
  background:linear-gradient(to right,var(--botb-vs-grad-a),var(--botb-vs-grad-b));
  color:#fff;
  font-weight:bold;
  font-size:1.4em;
  padding:10px 28px;
  border-radius:50px;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
  z-index:10;
  pointer-events:none;
  text-shadow:0 0 4px rgba(0,0,0,.4);
  letter-spacing:1px;
}

.view-link{
  position:absolute;
  bottom:6px;
  right:6px;
  background:rgba(255,255,255,0.2);
  color:rgba(0,0,0,0.6);
  padding:2px 6px;
  border-radius:4px;
  text-decoration:none;
  font-size:14px;
  z-index:20;
  transition:background .2s ease-in-out,color .2s ease-in-out;
}
.view-link:hover{
  background:rgba(255,255,255,0.5);
  color:rgba(0,0,0,0.9);
}

@media screen and (max-width:768px){
  .battle-container{ flex-direction:row; }
  .hover-preview-container{ min-height:45vh; }
  .vs-banner{ font-size:1em; padding:8px 20px; }
  .votebutton{ font-size:1.5em; padding:16px; }
}

.gallery-link-container{ text-align:center; margin-top:20px; }
.gallery-link-button{
  padding:12px 24px;
  font-size:1.3em;
  font-weight:bold;
  background-color:var(--botb-btn-bg);
  color:var(--botb-btn-text);
  border:none;
  border-radius:6px;
  font-family:'ABeeZee', sans-serif;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,0.3);
  transition:background-color .3s ease;
}
.gallery-link-button:hover{ background-color:var(--botb-btn-bg-hover); }

/* ---------------------------------------------------------
   Per-site overrides (match your existing css-sites palettes)
   Apply by adding a class on the wrapper or body.
   If your shortcode outputs .loveboobs-style etc, use that.
   --------------------------------------------------------- */

/* love-boobs.com */
.loveboobs-style{
  --botb-panel-bg:#111111;
  --botb-stats-text:#ffb6c1;
  --botb-btn-bg:#ff4d6d;
  --botb-btn-bg-hover:#c2185b;
  --botb-vs-grad-a:#ff4d6d;
  --botb-vs-grad-b:#c2185b;
}

/* worlds-best-boobs.com (example — adjust to your real palette) */
.wbb-style{
  --botb-panel-bg:#0b0b10;
  --botb-stats-text:#ffd1dc;
  --botb-btn-bg:#e91e63;
  --botb-btn-bg-hover:#ad1457;
  --botb-vs-grad-a:#e91e63;
  --botb-vs-grad-b:#ad1457;
}

/* knockoutknockers.com (example — adjust to your real palette) */
.knockout-style{
  --botb-panel-bg:#0d0d0d;
  --botb-stats-text:#ffb6c1;
  --botb-btn-bg:#ff2d55;
  --botb-btn-bg-hover:#b0002a;
  --botb-vs-grad-a:#ff2d55;
  --botb-vs-grad-b:#b0002a;
}

/* Nuclear override: any vote submit buttons inside the battle container */
.battle-container button,
.battle-container button[type="submit"],
.battle-container input[type="submit"]{
  background: #ff4d6d !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.battle-container button:hover,
.battle-container button[type="submit"]:hover,
.battle-container input[type="submit"]:hover{
  background: #c2185b !important;
}

