/* =====================================================================
   veinhost — patch: SVG sizing + Paymenter integration fixes
   Loaded after app.css. Constrains inline <svg><use> that have no
   explicit width/height (otherwise browsers default to 300x150).
   ===================================================================== */

/* Feature icons — fit inside the 52px .ic slot */
.feat .ic svg { width: 28px; height: 28px; }

/* Plan tier block icons — fit inside the .slot (56px) */
.tier .icon-slot svg,
.tier .icon-slot.slot svg { width: 32px; height: 32px; }

/* Generic inventory slot icon */
.slot svg { width: 32px; height: 32px; }

/* Testimonial / quote cube icon */
.quote-slot svg,
.panel > .slot svg { width: 36px; height: 36px; }

/* Product detail option icons */
.opt .ic svg,
.opt .box svg { width: 24px; height: 24px; }

/* Breadcrumb / small inline icons */
.crumb svg { width: 12px; height: 12px; }
.tag svg { width: 11px; height: 11px; }

/* Server favicon */
.srv .favicon svg { width: 40px; height: 40px; }

/* Heart/star rating icons */
.heart { width: 16px; height: 16px; }

/* Ping location svg already has inline 16x16, but enforce */
.ping svg { width: 16px; height: 16px; flex: none; }

/* =====================================================================
   Paymenter form overrides — tame Livewire/Tailwind leakage
   Paymenter ships Tailwind reset; our voxel inputs need to win.
   ===================================================================== */
.input, .select, .textarea {
  -webkit-appearance: none;
  appearance: none;
  background: #0c1020 !important;
  color: var(--fg) !important;
  border: 3px solid var(--border-dk) !important;
  padding: 13px 14px !important;
  font-size: 20px !important;
  font-family: var(--font-body) !important;
  box-shadow: inset 3px 3px 0 rgba(0,0,0,.45) !important;
  border-radius: 0 !important;
}
.input:focus, .select:focus, .textarea:focus {
  outline: 3px solid var(--grass) !important;
  border-color: var(--grass) !important;
}
label { font-family: var(--font-body) !important; }

/* Livewire validation errors */
input[type="text"].border-red-500,
input[type="email"].border-red-500,
input[type="password"].border-red-500 {
  border-color: var(--redstone) !important;
}

/* Alert / flash messages from Paymenter */
.alert-success, .alert-danger, .alert-info,
[data-validation-error],
.text-red-500 { color: var(--redstone) !important; font-family: var(--font-body) !important; }

/* =====================================================================
   Page main wrapper — Paymenter injects <main>, ensure flow
   ===================================================================== */
main { display: block; min-height: 60vh; }

/* =====================================================================
   LAYOUT CLASSES missing from base CSS — voxel component definitions
   ===================================================================== */

/* Product detail page (2-col: content + sticky summary) */
.pdp { display: grid; grid-template-columns: 1.5fr .9fr; gap: 28px; align-items: start; margin-top: 8px; }
@media (max-width: 860px) { .pdp { grid-template-columns: 1fr; } .pdp .summary { position: static !important; margin-top: 18px; } }

/* Page header */
.page-head { padding: 18px 0 0; }

/* Big cart icon */
.big-cart { opacity: .12; }

/* Cart summary line */
.sum-line { display: flex; justify-content: space-between; padding: 8px 0; font-size: 20px; }
.sum-line.total { font-family: var(--font-display); font-size: 14px; border-top: 3px dashed var(--border); margin-top: 8px; padding-top: 16px; }
.permo { font-size: 16px; color: var(--muted); text-align: right; margin-top: 4px; }

/* Version tags */
.vtag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 10px; letter-spacing: 1px; padding: 10px 14px; background: var(--surface); border: 3px solid var(--border); box-shadow: var(--sh-xs); }
.vtag b { color: var(--grass-lt); }

/* Auth forms */
.auth-wrap { min-height: 70vh; display: grid; place-items: center; }
.auth-form { padding: 40px; }
.auth-back { font-family: var(--font-display); font-size: 9px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 24px; }
.auth-form h1 { margin-bottom: 6px; }
.form-stack { display: flex; flex-direction: column; gap: 16px; }
.checkrow { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }

/* Auth perks (left side) */
.perk { display: flex; align-items: center; gap: 14px; margin: 18px 0; font-size: 19px; }
.perk .slot { flex: none; }
.perk b { color: var(--fg); }
.auth-foot { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 3px solid var(--border-dk); }
.st { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 8px; letter-spacing: 1px; color: var(--muted); }
.st svg { width: 14px; height: 14px; }
.auth-perks .deco { position: absolute; bottom: -20px; right: -20px; width: 140px; opacity: .12; pointer-events: none; }
.auth-perks { position: relative; overflow: hidden; }

/* Password field with toggle */
.pw { position: relative; display: flex; align-items: center; }
.pw .input { padding-right: 70px; }
.pw .toggle { position: absolute; right: 8px; background: var(--surface-3); border: 3px solid #000; font-family: var(--font-display); font-size: 8px; padding: 8px 10px; cursor: pointer; color: var(--muted); }
.pw .toggle:hover { color: var(--fg); }

/* Social login */
.social { display: flex; gap: 10px; }
.social .btn { flex: 1; }

/* Quote / testimonial */
.quote { font-size: 21px; line-height: 1.5; max-width: 60ch; }

/* Review card */
.review { border-bottom: 3px solid var(--border-dk); padding: 20px 0; }
.review:last-child { border-bottom: 0; }
.who { display: flex; align-items: center; gap: 12px; margin-top: 14px; }

/* Config option grids (product checkout) */
.opt-group { margin: 18px 0; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.opt { cursor: pointer; display: block; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .box { background: #0c1020; border: 3px solid var(--border-dk); padding: 14px 10px; text-align: center; box-shadow: var(--sh-xs); transition: border-color .08s steps(2); }
.opt .box .k { font-family: var(--font-display); font-size: 10px; margin-bottom: 6px; }
.opt .box .v { font-size: 16px; color: var(--muted); }
.opt input:checked + .box { border-color: var(--grass); background: rgba(108,187,60,.12); box-shadow: var(--sh-xs), inset 0 0 0 2px var(--grass); }
.opt input:checked + .box .v { color: var(--grass-lt); }
@media (max-width: 560px) { .opt .box { min-width: 0; } }

/* Ping mini (in option boxes) */
.ping-mini { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 9px; }
.ping-mini .bars { height: 10px; }
.ping-mini .bars i { width: 3px; }
.ping-mini .bars i:nth-child(1){height:4px}.ping-mini .bars i:nth-child(2){height:6px}.ping-mini .bars i:nth-child(3){height:8px}.ping-mini .bars i:nth-child(4){height:10px}

/* Filter bar */
.filter-bar { display: flex; flex-direction: column; gap: 14px; }
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-row .lbl { font-family: var(--font-display); font-size: 9px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; min-width: 70px; }
.search { display: flex; align-items: center; gap: 8px; background: #0c1020; border: 3px solid var(--border-dk); padding: 0 12px; box-shadow: inset 3px 3px 0 rgba(0,0,0,.45); }
.search svg { width: 16px; height: 16px; color: var(--muted); }
.search input { background: none; border: 0; color: var(--fg); font-size: 19px; padding: 10px 0; outline: none; font-family: var(--font-body); }
.results-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }

/* Product grid (category listing) */
.grid-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1080px) { .grid-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-products { grid-template-columns: 1fr; } }

/* Server meta / metrics (dashboard) */
.srv-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.metric { display: grid; grid-template-columns: 50px 1fr auto; gap: 12px; align-items: center; margin: 8px 0; }
.metric .lbl { font-family: var(--font-display); font-size: 8px; letter-spacing: 1px; color: var(--muted); }
.metric .meter { max-width: 200px; }

/* Server console (dashboard) */
.console { background: #060912; border: 3px solid #000; padding: 12px; margin-top: 12px; font-family: var(--font-display); font-size: 8px; line-height: 2; color: var(--grass-lt); }
.console .dim { color: var(--muted); }

/* Players list (dashboard) */
.players { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pl { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; background: var(--surface-2); padding: 6px 10px; border: 3px solid #000; box-shadow: var(--sh-xs); }
.pl svg { color: var(--grass-lt); }
.pl button { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 0; }
.pl button:hover { color: var(--redstone); }

/* Segmented control (dashboard filter) */
.seg { display: inline-flex; border: 3px solid #000; box-shadow: var(--sh-xs); }
.seg button { font-family: var(--font-display); font-size: 9px; letter-spacing: 1px; padding: 10px 14px; background: var(--surface); border: 0; color: var(--muted); cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--grass); color: #0a1106; }

/* Payment methods grid */
.pm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 620px) { .pm-grid { grid-template-columns: 1fr; } }
.pm { cursor: pointer; display: block; }
.pm input { position: absolute; opacity: 0; pointer-events: none; }
.pm .box { background: #0c1020; border: 3px solid var(--border-dk); padding: 14px; text-align: center; box-shadow: var(--sh-xs); }
.pm .box .k { font-family: var(--font-display); font-size: 11px; margin-bottom: 6px; }
.pm .box .v { font-size: 16px; color: var(--muted); }
.pm input:checked + .box { border-color: var(--diamond); background: rgba(79,214,204,.10); box-shadow: var(--sh-xs), inset 0 0 0 2px var(--diamond); }

/* Empty state */
.empty { text-align: center; padding: 40px 20px; }

/* Error text */
.err { color: var(--redstone); font-size: 16px; margin-top: 4px; }

/* Feature highlight classes */
.feat.boost .ic { background: rgba(255,122,46,.12); }
.feat.guard .ic { background: rgba(39,210,122,.12); }