/* =========================================================
   APCORN Vehicle Search, stable CSS for existing widget markup
   Goals:
   1) Restore purple branded frame
   2) Ensure ONE screen at a time (tabs)
   3) Keep existing IDs and classes used by JS
   ========================================================= */

/* Outer frame */
.apcorn-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:28px 18px 34px;
  border-radius:34px;
  background:
    radial-gradient(1200px 520px at 50% 20%, rgba(255,255,255,0.16), rgba(255,255,255,0.0) 50%),
    linear-gradient(180deg, #4b19d6 0%, #2a0e6f 100%);
  box-shadow:0 18px 48px rgba(0,0,0,0.25);
  box-sizing:border-box;
}

/* Tabs bar */
.apcorn-tabs{
  display:flex;
  gap:0;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(0,0,0,0.18);
  max-width:920px;
  margin:0 auto 14px;
}

.apcorn-tabs button{
  flex:1;
  padding:14px 16px;
  font-size:16px;
  font-weight:800;
  letter-spacing:0.8px;
  text-transform:uppercase;
  border:0;
  cursor:pointer;
  color:rgba(255,255,255,0.92);
  background:rgba(83, 32, 208, 0.65);
}

.apcorn-tabs button[data-tab="license-plate"]{
  background:rgba(241, 19, 54, 0.75);
}

.apcorn-tabs .apcorn-active{
  background:rgba(83, 32, 208, 0.95);
}

.apcorn-tabs button[data-tab="license-plate"].apcorn-active{
  background:rgba(241, 19, 54, 0.95);
}

/* Ensure tab panels behave as one-screen UI */
.apcorn-form-content{display:none !important;}
.apcorn-form-content.apcorn-active{display:block !important;}

/* White content card */
.apcorn-form-content{
  max-width:920px;
  margin:0 auto;
  padding:22px 22px 20px;
  background:rgba(255,255,255,0.88);
  border-radius:12px;
  box-sizing:border-box;
}

/* Title icon/image */
.apcorn_title_img{
  display:flex;
  justify-content:center;
  padding:10px 0 10px;
}
.apcorn_title_img img{
  max-width:110px;
  height:auto;
}

/* Message area */
#apcorn_vin_msg, #apcorn_plate_msg{
  min-height:22px;
  font-size:14px;
  font-weight:700;
  color:#111;
  margin-bottom:8px;
}

/* Input rows */
.apcorn-input-row{
  width:100%;
  box-sizing:border-box;
}

.apcorn-input-field,
.apcorn-input-field-border,
.apcorn-full-width select,
.apcorn-full-width{
  width:100%;
  box-sizing:border-box;
}

.apcorn-input-field,
.apcorn-input-field-border,
select{
  padding:14px 14px;
  font-size:18px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.25);
  background:#fff;
}

/* Link */
.apcorn-link-button{
  display:inline-block;
  margin-top:10px;
  margin-bottom:12px;
  font-size:16px;
  font-weight:700;
  color:#222;
  text-decoration:underline;
}

/* Buttons */
.apcorn-search-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  border-radius:8px;
  border:0;
  font-weight:900;
  letter-spacing:0.8px;
  text-transform:uppercase;
  cursor:pointer;
  background:rgba(83, 32, 208, 0.95);
  color:#fff;
}

.apcorn-button-success{
  background:rgba(83, 32, 208, 0.95);
  color:#fff;
}

.apcorn-button-danger{
  background:rgba(241, 19, 54, 0.95);
  color:#fff;
}

/* Result container stays hidden until JS shows it */
#apcorn-result{
  display:none;
  max-width:920px;
  margin:14px auto 0;
  padding:18px 18px 14px;
  border-radius:12px;
  background:rgba(255,255,255,0.88);
  box-sizing:border-box;
}

/* Responsive */
@media (max-width:880px){
  .apcorn-container{padding:22px 12px 26px; border-radius:26px;}
  .apcorn-tabs button{font-size:14px; padding:12px 12px;}
  .apcorn-form-content{padding:18px 14px 16px;}
}