/* Vehicle Fragments Collector – Front-end theme */
.vfc-spin-wrapper, .vfc-collection-wrapper, .vfc-balance-wrapper{
  /* Give the UI more room so fragment cards don't get clipped in narrow layouts */
  max-width:1200px;
  margin:18px auto;
  padding:0 16px;
  font-family:'Bebas Neue', sans-serif;
  color:#fff;
}
.vfc-spin-wrapper *, .vfc-collection-wrapper *, .vfc-balance-wrapper *{
  font-family:'Bebas Neue', sans-serif;
  font-weight:400 !important; /* user requested: nothing bold */
}

.vfc-card{
  background:#000;
  color:#fff;
  border:1px solid #fff;
  padding:18px;
  box-sizing:border-box;
}

.vfc-title{
  margin:0 0 14px;
  font-size:22px;
  letter-spacing:0.5px;
  font-weight:400 !important;
}

/* Spin form layout: name + code on the same line */
.vfc-spin-form .vfc-spin-row{
  display:flex;
  gap:10px;
  align-items:stretch;
}
.vfc-spin-form .vfc-spin-row .vfc-field{margin:0;flex:1;}

@media (max-width: 560px){
  .vfc-spin-form .vfc-spin-row{flex-direction:column;}
}

/* Utility */
.vfc-hidden{display:none !important;}

.vfc-field{margin:0 0 10px;}
.vfc-field input{
  width:100%;
  box-sizing:border-box;
  background:#000;
  color:#fff;
  border:1px solid #fff;
  padding:10px 12px;
  border-radius:0;
  outline:none;
}
.vfc-field input:focus{
  outline:none;
  box-shadow:none;
}

/* Buttons */
.vfc-card .vfc-btn{
  background:#000 !important;
  color:#fff !important;
  border:1px solid #fff !important;
  padding:10px 12px;
  border-radius:0;
  cursor:pointer;
  text-decoration:none !important;
}
.vfc-card .vfc-btn:hover,
.vfc-card .vfc-btn:focus,
.vfc-card .vfc-btn:active{
  background:#000 !important;
  color:#fff !important; /* prevent theme hover red */
  border-color:#fff !important;
  opacity:0.92;
}

/* Extra specificity against aggressive themes */
.vfc-spin-wrapper .vfc-btn:hover,
.vfc-spin-wrapper .vfc-btn:focus,
.vfc-spin-wrapper .vfc-btn:active,
.vfc-collection-wrapper .vfc-btn:hover,
.vfc-collection-wrapper .vfc-btn:focus,
.vfc-collection-wrapper .vfc-btn:active,
.vfc-balance-wrapper .vfc-btn:hover,
.vfc-balance-wrapper .vfc-btn:focus,
.vfc-balance-wrapper .vfc-btn:active{
  color:#fff !important;
}
.vfc-spin-button.is-loading{opacity:0.6;cursor:not-allowed;}

/* Center the submit button and place it slightly lower when it appears */
.vfc-spin-form .vfc-spin-button{
  display:block;
  margin:14px auto 0;
  min-width:240px;
  text-align:center;
}
.vfc-spin-form .vfc-spin-button:not(.vfc-hidden){
  transform: translateY(4px);
}

.vfc-spin-message{margin-top:12px;min-height:20px;}
.vfc-text-muted{opacity:0.85;}

/* Keep links neutral inside plugin UI */
.vfc-spin-wrapper a, .vfc-collection-wrapper a, .vfc-balance-wrapper a{
  color:#fff !important;
  text-decoration:underline;
}
.vfc-spin-wrapper a:hover, .vfc-collection-wrapper a:hover, .vfc-balance-wrapper a:hover{
  color:#fff !important;
}

/* Scratch ticket (inspired by Scratch VIP) */
.vfc-ticket{
  width:100%;
  max-width:320px;
  margin:14px auto 0;
}

.vfc-ticket-frame{
  background: radial-gradient(circle at top, #222 0, #111 45%, #000 92%);
  border:1px solid rgba(255,255,255,0.20);
  border-radius:24px;
  padding:14px 16px 12px;
  box-shadow:0 18px 40px rgba(0,0,0,0.90);
}

.vfc-ticket-top{
  text-align:center;
  font-size:18px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  opacity:0.90;
  margin:2px 0 10px;
}

.vfc-scratch-zone{
  position:relative;
  width:100%;
  max-width:260px; /* smaller zone */
  min-height:210px;
  margin:0 auto;
  /* slightly taller scratch area */
  aspect-ratio: 16 / 14;
  border-radius:16px;
  overflow:hidden;
  background: radial-gradient(circle at top, #3a3a3a 0, #1b1b1b 55%, #090909 100%);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 12px 26px rgba(0,0,0,0.90);
}

.vfc-scratch-under{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  box-sizing:border-box;
}

.vfc-scratch-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  display:block;
  cursor:grab;
}

.vfc-scratch-wrap.is-scratching .vfc-scratch-canvas{cursor:grabbing;}

.vfc-scratch-hint{
  margin-top:10px;
  text-align:center;
  font-size:14px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  opacity:0.85;
}

.vfc-scratch-wrap.is-revealed .vfc-scratch-canvas,
.vfc-scratch-wrap.is-revealed .vfc-scratch-hint{display:none;}

/* Reward card (default styles) */
.vfc-frag-card{
  height:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  box-sizing:border-box;
}
.vfc-frag-card-photo{
  width:96px;
  height:96px;
  border:1px solid #fff;
  background:#111;
  background-size:cover;
  background-position:center;
  flex:0 0 auto;
}
.vfc-frag-card-body{display:flex;flex-direction:column;gap:6px;}
.vfc-frag-card-body{min-width:0;}
.vfc-frag-card-title{font-size:22px;letter-spacing:0.5px;}
.vfc-frag-card-sub{font-size:16px;opacity:0.88;}

/* --- Collection fragment cards: stronger alignment (fix text appearing above image) --- */
.vfc-fragment-list .vfc-frag-card{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  height:auto !important;
  min-height:96px;
}

.vfc-fragment-list .vfc-frag-card-photo{
  flex:0 0 96px;
}

.vfc-fragment-list .vfc-frag-card-body{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:4px;
}

.vfc-fragment-list .vfc-frag-card-title,
.vfc-fragment-list .vfc-frag-card-sub{
  margin:0 !important;
  padding:0 !important;
  line-height:1.05;
}


/* Reward card inside scratch zone (centered) */
.vfc-scratch-under .vfc-frag-card{
  height:auto;
  width:100%;
  max-width:240px;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0;
  gap:12px;
}
.vfc-scratch-under .vfc-frag-card-photo{width:84px;height:84px;}
.vfc-scratch-under .vfc-frag-card-title{font-size:20px;}
.vfc-scratch-under .vfc-frag-card-sub{font-size:14px;}

.vfc-ticket-top-img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
}

/* Collection */
.vfc-collection-result{margin-top:14px;}
.vfc-collection{overflow:visible;}
.vfc-collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:12px;}
.vfc-collection-item{border:1px solid #fff;padding:14px;box-sizing:border-box;width:100%;}
.vfc-collection-header{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.vfc-progress-pill{border:1px solid #fff;padding:4px 8px;font-size:14px;}
.vfc-progress-bar{border:1px solid #fff;height:10px;margin:10px 0;}
.vfc-progress-fill{height:100%;background:#fff;}
.vfc-fragment-list{
  display:grid;
  /* The fragment card has a fixed image; give it enough width so nothing overflows */
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
}
.vfc-frag-card-small .vfc-frag-card-photo{width:70px;height:70px;}
.vfc-frag-card-owned{opacity:1;}
.vfc-frag-card-missing{opacity:0.45;}

.vfc-balance-display{margin-top:12px;border:1px solid #fff;padding:10px 12px;display:inline-block;}
.vfc-balance-label{margin-right:6px;}

/* ===== Luxury Gold Pack (no admin options) ===== */
.vfc-spin-wrapper, .vfc-collection-wrapper, .vfc-balance-wrapper{
  color: rgba(255,255,255,0.92) !important;
}

/* Panels – premium stroke + subtle gold highlight */
.vfc-card{
  background: linear-gradient(180deg, #0b0b10 0%, #06060a 100%) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,0.82) !important;
  position: relative;
  overflow: hidden;
}
.vfc-card:before{
  content:'';
  position:absolute;
  inset:10px;
  border:1px solid rgba(255,255,255,0.07);
  pointer-events:none;
}
.vfc-card:after{
  content:'';
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: rgba(201,162,74,0.45);
  pointer-events:none;
}

/* Titles – a bit more luxury spacing */
.vfc-title{
  letter-spacing:0.12em !important;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92) !important;
}

/* Inputs – clean focus (gold) */
.vfc-field input{
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.92) !important;
}
.vfc-field input:focus{
  border-color: rgba(201,162,74,0.60) !important;
  box-shadow: 0 0 0 3px rgba(201,162,74,0.10) !important;
  outline: none !important;
}

/* Buttons – keep black/white, add ultra subtle gold glow */
.vfc-card .vfc-btn{
  letter-spacing:0.12em !important;
  text-transform: uppercase;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, opacity 180ms ease-out, border-color 180ms ease-out;
}
.vfc-card .vfc-btn:hover,
.vfc-card .vfc-btn:focus,
.vfc-card .vfc-btn:active{
  color:#fff !important;
  border-color: rgba(255,255,255,0.95) !important;
  box-shadow: 0 0 0 3px rgba(201,162,74,0.08) !important;
  transform: translateY(-1px);
}

/* Collection cards – more air + premium hover */
.vfc-frag-card{
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.62) !important;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
}
.vfc-frag-card:hover{
  transform: translateY(-2px);
  border-color: rgba(201,162,74,0.35) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.72) !important;
}
.vfc-frag-card-photo{
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45);
}

/* Ticket – add premium gold stroke without changing sizes */
.vfc-ticket-frame{
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.85) !important;
  position: relative;
}
.vfc-ticket-frame:after{
  content:'';
  position:absolute;
  inset:10px;
  border:1px solid rgba(201,162,74,0.18);
  border-radius:18px;
  pointer-events:none;
}

/* Links never go red */
.vfc-spin-wrapper a:hover,
.vfc-collection-wrapper a:hover,
.vfc-balance-wrapper a:hover{
  color: rgba(255,255,255,0.92) !important;
}