/* The searchable country and phone-code picker (static/combo.js): ink on cream, the chosen
   one ticked in palm green, a sheet from the bottom on a phone. */
.combo{position:relative}
.combo__native{position:absolute !important;width:1px !important;height:1px !important;min-height:0 !important;padding:0 !important;
  border:0 !important;opacity:0;pointer-events:none;clip:rect(0 0 0 0);overflow:hidden}
.combo__btn{display:flex;align-items:center;gap:.8rem;width:100%;min-height:5.6rem;padding:1.4rem 4.4rem 1.4rem 1.6rem;
  font:inherit;font-size:1.6rem;font-weight:400;color:var(--ink);text-align:start;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1C19' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1.4rem center/1.8rem;
  border:.1rem solid var(--hair);-webkit-appearance:none;appearance:none}
[dir=rtl] .combo__btn{background-position:left 1.4rem center;padding:1.4rem 1.6rem 1.4rem 4.4rem}
/* the phone code sits in a left-to-right row on both pages, its digits in the Latin face
   on both: the Arabic face's wider figures cut "+973" to "+9…" on a phone */
.row--phone .combo__btn,[dir=rtl] .row--phone .combo__btn{background-position:right 1.2rem center;padding:1.4rem 3.8rem 1.4rem 1.4rem;
  font-family:'Outfit',sans-serif;font-variant-numeric:tabular-nums}
.combo__btn:focus-visible,.combo.is-open .combo__btn{outline:0;border-color:var(--palm);box-shadow:inset 0 0 0 .1rem var(--palm)}
.field--err .combo__btn{border-color:var(--copper-ink);box-shadow:inset 0 0 0 .1rem var(--copper-ink)}
.combo__flag{flex:none;font-size:1.8rem;line-height:1}
.combo__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.combo__panel{position:absolute;z-index:60;top:calc(100% + .4rem);inset-inline-start:0;width:max(100%,32rem)}
.row--phone .combo__panel{left:0;right:auto}
.combo__scrim{display:none}
.combo__box{display:flex;flex-direction:column;max-height:40rem;background:#FBF9F4;border:.1rem solid var(--hair);
  box-shadow:0 1.2rem 3.2rem rgba(30,28,25,.16)}
/* inside a .field the shop's own input style (width 100%, 5.6rem tall) would also reach
   the search box, and with its margins push it past the panel's edge */
.combo .combo__search{box-sizing:border-box;width:auto;align-self:stretch;margin:1rem 1rem .6rem;min-height:4.4rem;
  padding:1rem 1.4rem;font:inherit;font-size:1.6rem;color:var(--ink);background:#fff;border:.1rem solid var(--hair);
  box-shadow:none;-webkit-appearance:none;appearance:none}
.combo .combo__search:focus{outline:0;border-color:var(--palm);box-shadow:inset 0 0 0 .1rem var(--palm)}
.combo__list{list-style:none;margin:0;padding:0 0 .8rem;overflow-y:auto;overscroll-behavior:contain}
.combo__group{padding:1.2rem 1.6rem .4rem;font-size:1.1rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
[dir=rtl] .combo__group{font-size:1.25rem;text-transform:none}
.combo__opt{display:flex;align-items:center;gap:1rem;min-height:4.4rem;padding:.8rem 1.6rem;font-size:1.5rem;color:var(--ink);cursor:pointer}
.combo__opt.is-active{background:#EEF3F0}
.combo__opt[aria-selected=true]{font-weight:500}
.combo__dial{margin-inline-start:auto;color:var(--muted);font-variant-numeric:tabular-nums}
.combo__tick{width:1.8rem;height:1.8rem;flex:none;stroke:var(--palm);fill:none;stroke-width:1.8}
.combo__opt .combo__dial + .combo__tick{margin-inline-start:0}
.combo__name + .combo__tick{margin-inline-start:auto}
.combo__none{padding:1.6rem;font-size:1.4rem;color:var(--muted)}

@media (max-width:520px){
  .combo__panel,.row--phone .combo__panel{position:fixed;inset:0;width:auto;top:0}
  .combo__scrim{display:block;position:absolute;inset:0;background:rgba(20,18,15,.42)}
  .combo__box{position:absolute;inset:auto 0 0 0;max-height:82vh;border:0;border-radius:1.2rem 1.2rem 0 0;
    padding-bottom:env(safe-area-inset-bottom)}
}
html.combo-lock{overflow:hidden}
/* the browser's own clear button, in the house ink rather than its blue */
.combo__search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:1.6rem;height:1.6rem;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B665E' stroke-width='1.8'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") no-repeat center/1.6rem}