/* Smúz Klub — szebb űrlapelemek: megszólítás- és nem-választó csempék,
   születésnap három legördülővel, egységes legördülő, automatikus kitöltés. */

/* Legördülő: saját nyíl, a böngésző alapja helyett */
.field select{appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23EE6338' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px}
.field select:invalid,.field select.ures{color:var(--muted)}
.field select option{color:var(--ink)}

/* A böngésző sárga automatikus kitöltése helyett a saját színeink */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 60px var(--bg) inset; -webkit-text-fill-color:var(--ink); caret-color:var(--ink); transition:background-color 9999s}

/* Választócsempék (rádiógomb helyett) */
/* A csempék a tartalmukhoz igazodnak, és sorba törnek — szó közben soha. */
.csempek{display:flex; flex-wrap:wrap; gap:8px}
.field label.csempe{position:relative; display:block; cursor:pointer; flex:1 1 auto; min-width:0;
  font:inherit; letter-spacing:normal; text-transform:none; color:inherit}
.csempe input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.csempe span{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:58px; text-align:center;
  padding:9px 6px; border-radius:14px; border:1.5px solid var(--line); background:var(--bg); transition:border-color .15s, background .15s, transform .1s}
.csempe span{padding:9px 14px}
.csempe b{font-size:15px; font-weight:700; color:var(--ink); line-height:1.15; white-space:nowrap; hyphens:none}
.csempe small{font-size:11.5px; color:var(--muted); line-height:1.2; white-space:nowrap}
.csempe.kicsi span{min-height:46px}
.csempe.kicsi b{font-size:14px}
.csempe:hover span{border-color:var(--accent)}
.csempe input:checked + span{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent)}
.csempe input:checked + span b{color:var(--accent)}
.csempe input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.csempe:active span{transform:scale(.98)}

/* Születésnap: év · hónap · nap */
.szulsor{display:grid; grid-template-columns:1fr 1.35fr 1fr; gap:8px}
.szulsor select{padding-left:12px; padding-right:32px; background-position:right 9px center}
.szul-jel{font-size:12px; color:var(--muted); margin:2px 0 0}

/* „Már van kártyád?” — a kártya linkje e-mailben */
.van{background:var(--surface); border-radius:16px; padding:12px 14px; display:flex; flex-direction:column; gap:10px}
.van-nyit{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; width:100%; font-size:14px; color:var(--ink)}
.van-nyit b{color:var(--accent); font-weight:700; white-space:nowrap}
.van-nyit b i{font-style:normal; display:inline-block; transition:transform .15s}
.van-nyit:hover b{text-decoration:underline; text-underline-offset:3px}
.van-nyit:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.van-panel{all:unset; display:flex; flex-direction:column; gap:10px}
.van-panel[hidden]{display:none}
.van-panel p{margin:0; font-size:13.5px; color:var(--muted)}
.van-sor{display:flex; gap:8px}
.van-sor input{flex:1 1 auto; min-width:0}
.van-sor .btn{flex:0 0 auto; padding:11px 16px}
.van-ok{margin:0; font-size:13.5px; font-weight:600; color:var(--ink); background:var(--green-soft); border-radius:12px; padding:10px 12px}
.van-ok::before{content:"✓ "; color:var(--green); font-weight:800}
.van-link{all:unset; cursor:pointer; color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:3px}
.van-link:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.van-link[disabled]{opacity:.6; cursor:wait}