/* 02-ui-kit — Buttons, cards, badges, inputs, header search bar.
   Loaded on every page in file-name order (see inc/core/assets.php). */

/* ---------- 3. BUTTONS ---------------------------------------------- */
.btn{
  --pad:12px 22px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:var(--pad); border-radius:var(--r-pill); font-size:14px; font-weight:600;
  font-family:inherit; cursor:pointer; border:1px solid transparent; position:relative;
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease), filter var(--fast) var(--ease);
  white-space:nowrap; overflow:hidden; will-change:transform;
}
.btn svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0;}
.btn:active{transform:scale(.97);}
.btn-blue{background:linear-gradient(160deg,var(--blue),var(--blue-deep)); color:#fff; box-shadow:var(--shadow-blue);}
.btn-blue::before{content:""; position:absolute; inset:0 0 auto 0; height:52%; background:linear-gradient(180deg,rgba(255,255,255,.32),transparent); pointer-events:none;}
.btn-blue:hover{transform:translateY(-2px); filter:brightness(1.06);}
.btn-gold{background:linear-gradient(160deg,var(--gold-2),var(--gold)); color:#5a4415; box-shadow:var(--shadow-gold);}
.btn-gold:hover{transform:translateY(-2px); filter:brightness(1.04);}
.btn-dark{background:var(--ink); color:#fff;}
.btn-dark:hover{transform:translateY(-2px); background:var(--ink-2);}
.btn-outline{background:var(--surface); color:var(--text); border-color:var(--line-2); box-shadow:var(--shadow-sm);}
.btn-outline:hover{transform:translateY(-2px); border-color:var(--blue); color:var(--blue);}
.btn-ghost{background:transparent; color:var(--text-soft);}
.btn-ghost:hover{background:var(--cream-2); color:var(--ink);}
.btn-sm{--pad:8px 15px; font-size:13px;}
.btn-lg{--pad:16px 30px; font-size:15.5px;}
.btn-icon{width:42px; height:42px; padding:0; border-radius:50%;}
.btn-block{width:100%;}
.magnetic{transition:transform .18s var(--ease);}
/* ---------- 4. CARDS ------------------------------------------------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease), border-color var(--med) var(--ease);
  position:relative; overflow:hidden;
}
.card-hover:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--line-2);}
.card-3d{transform-style:preserve-3d; transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease);}
.glass{
  background:var(--glass); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,0.5); box-shadow:var(--shadow-md), var(--glass-top); border-radius:var(--r-lg);
}
[data-theme="dark"] .glass{border-color:rgba(255,255,255,0.1);}
.pad4{padding:var(--s4);}
.pad5{padding:var(--s5);}
.pad6{padding:var(--s6);}
/* ---------- 5. BADGES / PILLS --------------------------------------- */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:var(--r-pill); letter-spacing:.01em;}
.badge svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.2;}
.badge-verified{background:rgba(30,158,106,.12); color:var(--green);}
.badge-gold{background:rgba(199,169,107,.16); color:#96712e;}
.badge-blue{background:var(--blue-pale); color:var(--blue-deep);}
.badge-urgent{background:rgba(214,69,69,.12); color:var(--red);}
.badge-neutral{background:var(--cream-2); color:var(--text-soft);}
.dot{width:7px; height:7px; border-radius:50%; display:inline-block;}
.pulse{animation:pulseRing 2s infinite;}
/* ---------- 6. INPUTS ------------------------------------------------ */
.field{display:flex; flex-direction:column; gap:7px;}
.field label{font-size:12.5px; font-weight:600; color:var(--text-soft);}
.input, .select, .textarea{
  width:100%; padding:12px 15px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text); font-family:inherit; font-size:14px; outline:none;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.input:focus,.select:focus,.textarea:focus{border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-pale);}
.textarea{resize:vertical; min-height:110px;}
.input::placeholder{color:var(--muted-2);}
/* search bar (header) */
.searchbar{
  flex:1; display:flex; align-items:stretch; height:50px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface);
  box-shadow:0 2px 10px rgba(14,26,56,.06), var(--glass-top);
  transition:box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.searchbar:focus-within{border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-pale), 0 10px 24px rgba(62,111,242,.16);}
.searchbar select{border:none; background:var(--cream-2); padding:0 30px 0 18px; font-family:inherit; font-size:13px; font-weight:500; border-right:1px solid var(--line); color:var(--text); cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223357' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; background-size:13px;}
.searchbar input{flex:1; border:none; padding:0 18px; font-size:14.5px; background:transparent; outline:none; font-family:inherit; color:var(--text);}
.searchbar input::placeholder{color:var(--muted-2);}
.searchbar .go{display:flex; align-items:center; gap:8px; background:linear-gradient(160deg,var(--blue),var(--blue-deep)); border:none; padding:0 24px; font-weight:600; cursor:pointer; color:#fff; font-size:14px; font-family:inherit;}
.searchbar .go svg{width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2.2;}
.search-tool{display:flex; align-items:center; justify-content:center; width:44px; border-left:1px solid var(--line); cursor:pointer; color:var(--muted); background:var(--surface-2); transition:color var(--fast);}
.search-tool:hover{color:var(--blue);}
.search-tool svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9;}