/* gads-packages/budget.css — LIVE, applied 2026-09-23.
   The Ad Budget + Currency control above the package cards.
   Chosen from /doctor/gads-pkg-easy20-e4k/ as version A4, "Native picker":
   a label, the operating system's own list, and two words for the currency.

   Nothing here touches the cards. It adds one line above them and, on a
   phone, one 30px cap welded to the top of the package switch so there is
   still only ONE pinned object.

   The law it keeps, from the section it sits in:
     · square corners, as the cards and the buttons already are
     · white paper = chosen, the section floor #EDEFF1 = everything else
     · navy #004594 — the page's own button colour — the single accent
     · a budget level is its NAME and nothing else: no price under it, no
       sub-label, no second currency list
   Scoped to #gads-packages.bsel, so a page that does not carry that class
   is untouched.                                                            */

#gads-packages.bsel{
  --bz-ink:#0E1E35;
  --bz-mut:#4F5968;      /* the label, 6.1:1 on the floor          */
  --bz-fade:#5B6573;     /* the currency not chosen, 5.1:1         */
  --bz-line:#D7DDE6;
  --bz-line2:#E4E8EE;
  --bz-paper:#FFFFFF;
  --bz-floor:#EDEFF1;
  --bz-sel:#004594;      /* View Package & Get Quote               */
  --bz-ring:#0760C6;
}

#gads-packages.bsel .bz{ position:relative; margin:14px 0 20px; }
#gads-packages.bsel .bz *{ box-sizing:border-box; }
#gads-packages.bsel .bz select,
#gads-packages.bsel .bz button,
#gads-packages.bsel .k-sw .bz-cap select,
#gads-packages.bsel .k-sw .bz-cap button{ font-family:inherit; cursor:pointer; }
#gads-packages.bsel .bz :focus-visible,
#gads-packages.bsel .k-sw :focus-visible{ outline:2px solid var(--bz-ring); outline-offset:2px; }

#gads-packages.bsel .bz-row{ display:flex; align-items:center; gap:8px 18px; }
#gads-packages.bsel .bz-lab{ font-size:13.5px; font-weight:600; color:var(--bz-mut); white-space:nowrap; }
#gads-packages.bsel .bz-k{ margin:0; font-size:10.5px; font-weight:800; line-height:1.3; letter-spacing:.13em;
  text-transform:uppercase; color:var(--bz-mut); white-space:nowrap; }

/* the picker: the browser's own list, given the section's square white paper */
#gads-packages.bsel .bz-sel{
  height:38px; padding:0 34px 0 12px; border:0; border-radius:0;
  appearance:none; -webkit-appearance:none;
  background:var(--bz-paper) no-repeat right 12px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%234F5968'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 0 1px var(--bz-line);
  font-size:15px; font-weight:750; color:var(--bz-ink);
}
#gads-packages.bsel .bz-sel:hover{ box-shadow:inset 0 0 0 1px #A9B4C2; }

/* a page with no ad budget carries the currency alone; the label rides
   with it at the end of the line so the pair reads as one small utility */
#gads-packages.bsel .bz-only{ display:flex; align-items:baseline; gap:12px; margin-left:auto; }
#gads-packages.bsel .bz-only .bz-cur{ margin-left:0; }

/* currency: two words, the chosen one in navy under a 2px rule */
#gads-packages.bsel .bz-cur{ display:flex; align-items:baseline; gap:12px; margin-left:auto; }
#gads-packages.bsel .bz-cur button{ padding:1px 0 3px; border:0; background:none;
  font-size:12.5px; font-weight:700; color:var(--bz-fade); font-variant-numeric:tabular-nums;
  box-shadow:inset 0 -2px 0 transparent; white-space:nowrap; }
#gads-packages.bsel .bz-cur button:hover{ color:#39414E; }
#gads-packages.bsel .bz-cur button.is-on{ color:var(--bz-ink); box-shadow:inset 0 -2px 0 var(--bz-sel); }

@media (prefers-reduced-motion:no-preference){
  #gads-packages.bsel .bz-cur button{ transition:color .16s ease, box-shadow .16s ease; }
}

/* ---------------------------------------------------------------- phone
   The cap lives INSIDE .k-sw, which the section only shows below a 720px
   container, so one object stays pinned under the site header rather than
   two stacked bars.                                                       */
#gads-packages.bsel .bz-cap{ display:none; }

@container kx (max-width:720px){
  #gads-packages.bsel .bz{ margin:12px 0 14px; }
  #gads-packages.bsel .bz-row{ flex-wrap:wrap; }

  #gads-packages.bsel .bz-cap{
    position:relative; display:flex; align-items:stretch; height:30px;
    background:var(--bz-floor); box-shadow:inset 0 -1px 0 var(--bz-line);
  }
  #gads-packages.bsel .bz-selwrap{ flex:1 1 auto; display:flex; align-items:center; gap:8px;
    min-width:0; padding:0 10px; }
  #gads-packages.bsel .bz-only{ margin-left:auto; }
  #gads-packages.bsel .bz-cap .bz-k{ font-size:9px; letter-spacing:.11em; color:var(--bz-fade); }
  #gads-packages.bsel .bz-cap .bz-sel{ height:22px; padding:0 22px 0 8px; font-size:12.5px;
    background-position:right 6px center; }
  #gads-packages.bsel .bz-cap-cur{ display:flex; align-items:stretch; box-shadow:inset 1px 0 0 var(--bz-line); }
  #gads-packages.bsel .bz-cap-cur button{ min-width:28px; padding:0 8px; border:0; background:none;
    font-size:12.5px; font-weight:800; color:var(--bz-fade); }
  #gads-packages.bsel .bz-cap-cur button.is-on{ background:var(--bz-paper); color:var(--bz-sel);
    box-shadow:inset 0 -2px 0 var(--bz-sel); }

  /* the switch's 6px seam cap takes the tier's colour, not white */
  #gads-packages.bsel .k-sw::before{ background:var(--bz-floor); }
}
@container kx (max-width:352px){
  #gads-packages.bsel .bz-cap .bz-k{ display:none; }
}

/* the scoped band prices every package to the account, so the phone switch
   has no list price to strike through — the row goes rather than sit empty */
#gads-packages.bsel[data-band="b5"] .k-sw .s-was{ display:none; }