/* Fast Track Host • Billing Picker (exact requested colors)
   Requires HTML structure: input[type=radio] + label inside .billing-picker-main */

/* Top side wrapper that makes sure the width is not excesive*/
.wrapper-billing-picker-top
{
   display:block !important;
   width:fit-content;
   max-width:310px;
   background:transparent;
   font-size:.8rem;
   line-height:.8rem;
}

/* Middle and Bottom side wrapper that makes sure the width is 100%
   and adds backround color*/
.wrapper-billing-picker-mid,
.wrapper-billing-picker-bottom
{
   display:block !important;
   width:100%;
   margin:0px auto;
   padding:15px 0px;
   background:#15212a;
   font-size:1rem;
   line-height:1rem;
}

/* Centered container with your background */
.section-billing-picker
{
   display:block !important;
   width:100%;
   /*background:#15212a;*/
   user-select:none;
   -webkit-tap-highlight-color:transparent;
}

.container-billing-picker
{
   display:flex !important;
   width:fit-content;
   flex-direction: column; /*Make divs go down as a column, one beneath the other*/
   margin:0px auto;
   padding:6px;
   gap:6px;
   background:#a5215e;                    /* picker background */
   border-radius:15px;
   box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
   color:rgb(0,0,0);                       /* default text color */
   font:inherit;
   line-height:inherit;
   user-select:none;
   -webkit-tap-highlight-color:transparent;
}

.wrapper-billing-picker-top .container-billing-picker
{
   flex-direction: row; /*make labels go down when not enough space*/
   flex-wrap: wrap;     /*make labels go down when not enough space*/
   width:100%;
   border-radius:15px;
   padding:6px 15px;
}

.billing-picker-top
{
   display:flex;
   width:fit-content;
   margin:0px auto;
   color:#ffffff;
   font-size:1rem;
   line-height:1.2rem;
   text-align:center;
}

.billing-picker-bottom
{
   display:flex;
   width:fit-content;
   margin:0px auto;
   padding:0px 5px;
   color:#ffffff;
   font-size:1rem;
   line-height:1.2rem;
   text-align:center;
}

.billing-picker-main
{
   display:flex !important;
   flex-wrap: wrap;
   flex-direction:row; /*make labels go down when not enough space*/
   flex-wrap:wrap;     /*make labels go down when not enough space*/
   width:fit-content;
   margin:0px auto;
   padding:6px;
   gap:6px;
   background:#a5215e;                    /* picker background */
   border-radius:999px;
   box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
   color:rgb(0,0,0);                       /* default text color */
   font:inherit;
   line-height:inherit;
   user-select:none;
   -webkit-tap-highlight-color:transparent;
}

.wrapper-billing-picker-top .billing-picker-main
{
   width:100%;/*The first picker on page must adjust to available space*/
}

@supports not (width:fit-content){ .container-billing-picker{ width:max-content; } }

/* Accessibly hide radios */
.billing-picker-main input[type="radio"]
{
   position:absolute !important;
   opacity:0 !important;
   width:1px; height:1px;
   margin:-1px; padding:0; border:0;
   clip:rect(0 0 0 0); clip-path:inset(50%);
   overflow:hidden; pointer-events:none;
}

/* Pills = your yellow buttons with black text and yellow border */
.billing-picker-main label{
  position:relative;
  display:inline-block !important;
  align-items:center;
  padding:.55rem .95rem;
  margin:3px 0px;
  border-radius:999px;
  border:1px solid transparent;       /* button border */
  background:#fff;                /* button background */
  color:rgb(0,0,0);               /* text color */
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .06s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Optional cadence sublabel like /mo, /yr */
.billing-picker-main label::after{
  content:attr(data-sublabel);
  margin-left:.4rem;
  font-size:.8rem;
  font-weight:700;
  color:rgb(0,0,0);
  opacity:.8;
}

/* Hover and focus */
.billing-picker-main label:hover{
   background:rgb(253,215,0);
   box-shadow:0 2px 8px rgba(0,0,0,.12);
}



/* Checked state: same palette, with subtle lift */
.billing-picker-main input[type="radio"]:focus + label,
.billing-picker-main input[type="radio"]:checked + label
{
   outline:2px solid #fff;     /* neutral ring to keep your palette intact */
   outline-offset:2px;
   background:rgb(253,215,0);
   transform:translateY(-1px);
   box-shadow:inset 0 -1px 0 rgba(0,0,0,.15), 0 3px 10px rgba(0,0,0,.18);
}

/* Compact and full-width variants (optional) */
.billing-picker-main.billing-picker-main--compact label{ padding:.45rem .75rem; }
.billing-picker-main.billing-picker-main--full{ width:100%; justify-content:center; }

/* Mobile trim */
@media (max-width:640px){
  .billing-picker-main label{ padding:.48rem .8rem; }
  .billing-picker-main label::after{ display:none; }
}

/* Safety: never let utilities hide labels */
.billing-picker-main label,
.billing-picker-main input[type="radio"] + label{
  visibility:visible !important;
  opacity:1 !important;
}