/* Readyby storefront picker styles.
   ONE source, TWO delivery paths - the same arrangement choosebox.js/.css has:
     1. the theme app block, which loads this through asset_url
     2. the manual snippet for themes whose sections do not accept app blocks, which loads it from
        /apps/readyby/asset/readyby.css through the app proxy
   Lifted verbatim out of blocks/readyby.liquid on 1 Oct 2026, where it was an inline <style>.
   Nothing about the rules changed in the move. Edit here, never in the block. */
.readyby{font-family:inherit;color:var(--rb-text,inherit);max-width:var(--rb-maxw,520px);margin:16px 0}
.readyby .rb-loading{opacity:.6;font-size:14px}
.readyby .rb-box{border:var(--rb-bw,1px) solid var(--rb-card-border,rgba(128,128,140,.25));border-radius:var(--rb-radius,12px);padding:16px 18px;background:var(--rb-card-bg,transparent)}
.readyby.rb-flat .rb-box{border:none;padding:0;background:transparent}
.readyby .rb-h{font-size:16px;font-weight:800;margin-bottom:12px}
.readyby .rb-methods{display:flex;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.readyby .rb-m{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;cursor:pointer}
.readyby input[type=radio]{accent-color:var(--rb-accent,#066bfd)}
.readyby .rb-lbl{display:block;font-size:12.5px;font-weight:700;opacity:.75;margin:12px 0 5px}
/* 0.18.16: own the whole control. Themes style every <select> on the page (Alchemy sets its own height,
   line-height and a background-image arrow); our padding on top of their height pushed the text low,
   and background:inherit wiped their arrow so ours had none. Height and line-height are reset, and the
   arrow is drawn here from currentColor so it matches the text on any theme, light or dark. */
.readyby select{width:100%;box-sizing:border-box;height:auto;min-height:0;margin:0;line-height:1.3;padding:10px 34px 10px 11px;font-size:14px;border:var(--rb-bw,1px) solid var(--rb-card-border,rgba(128,128,140,.35));border-radius:var(--rb-radius,9px);color:inherit;font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.readyby select:focus{outline:2px solid var(--rb-accent,#066bfd);outline-offset:1px}
.readyby .rb-lead{font-size:12px;font-weight:500;opacity:.65;margin:0 0 6px}
.readyby .rb-none{font-size:13.5px;opacity:.7}
.readyby .rb-zip{width:100%;box-sizing:border-box;padding:10px 11px;font-size:14px;border:var(--rb-bw,1px) solid var(--rb-card-border,rgba(128,128,140,.35));border-radius:var(--rb-radius,9px);background:inherit;color:inherit;font-family:inherit}
.readyby .rb-zip:focus{outline:2px solid var(--rb-accent,#066bfd);outline-offset:1px}
.readyby .rb-zipmsg{font-size:12.5px;font-weight:600;margin:6px 0 0;min-height:1em;opacity:.85}
.readyby .rb-zipmsg.ok{color:#137a3e}
.readyby .rb-zipmsg.bad{color:#c0322b}
.readyby .rb-fee{font-size:13px;margin:10px 0 0;opacity:.85}
.readyby .rb-msg{font-size:13px;font-weight:700;color:inherit;margin:12px 0 0;min-height:1em}
/* Empty: take no room (0.18.16). Collapsed rather than display:none so the live region stays in the
   accessibility tree and the "choose a date" message is still announced when it fills. */
.readyby .rb-msg:empty{margin:0;min-height:0}
.readyby .rb-msg.rb-quiet{opacity:.75;font-weight:600}
.readyby .rb-msg.bad{color:#c0322b}
.readyby .rb-confirm{font-size:12px;font-weight:500;opacity:.6;margin:-2px 0 10px}
.readyby .rb-credit{font-size:11px;opacity:.5;margin:12px 0 0}
.readyby .rb-credit a{color:inherit}

/* Visible keyboard focus. Added 4 Oct 2026, same reasoning as Choosebox: selects and the postal
   code box already had an outline, the radio buttons and any button inside the picker did not, and
   a theme shipping a global `*:focus{outline:none}` removes the browser default from under us.
   Scoped to .readyby, specific enough to beat that reset without !important. */
.readyby input[type=radio]:focus-visible,
.readyby button:focus-visible,
.readyby [tabindex]:focus-visible{
  outline:2px solid var(--rb-accent,#066bfd);
  outline-offset:2px;
}
.readyby select:focus-visible,
.readyby .rb-zip:focus-visible{
  outline:2px solid var(--rb-accent,#066bfd);
  outline-offset:1px;
}