/* ============================================================
   qb.picker.css — choice "radio card" picker (canonical skin).
   Re-skinned 2026-07-16 onto the main-site mk-* language.

   Loaded by: account/newpage.php, account/new_pub.php, account/pub.php,
   new_pub.php (the PUBLIC/anonymous wizard), manage/assets.php.

   PURE SKIN SWAP — class names/markup/JS unchanged, so no wizard logic moved.

   NOTE: qb.picker.plans.css defines the SAME six selectors (.inputGroup,
   .inputGroup_sm, .plantitle, .planprice, .plantitle1, .planprice1). That
   duplication is exactly why the account wizard and the public wizard drifted:
   a page loading only one of the two files got a different look. Both files now
   carry the SAME mk-* values, so they agree whichever loads (and whichever wins
   on load order). TODO: dedupe into a single file.

   Replaced: #f10075 magenta titles, #ffc107 amber tick, #fd7e14 orange tick,
   #97a3b9 grey flood-fill, #0168fa Dashforge blue flood-fill, padding-top:20%
   and percentage border-radius (both warp with card size).
   ============================================================ */

:root {
  --pk-accent: #2563eb;
  --pk-accent-2: #1d4ed8;
  --pk-tint: #eff6ff;
  --pk-ink: #111827;
  --pk-ink-2: #1f2937;
  --pk-muted: #64748b;
  --pk-border: #e5e7eb;
  --pk-border-hi: #dbe3ef;
  --pk-shadow: 0 8px 18px rgba(15, 23, 42, .06);
  --pk-shadow-h: 0 12px 24px rgba(15, 23, 42, .10);
}

/* ---------- large choice card ---------- */

.inputGroup {
  background-color: transparent;
  display: block;
  margin: 0 0 12px;
  position: relative;
  /* No height:100% here. .inputGroup IS the Bootstrap column and its parent .row is
     display:flex, so columns already stretch to equal height (align-items:stretch).
     Adding height:100% made the column resolve against the row's own content height
     and overflow it by ~52px, pushing cards over the next section's heading. */
}

.inputGroup label {
  padding: 18px 46px 18px 18px; /* right padding reserves room for the tick */
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--pk-border);
  border-radius: 14px;
  background-color: #fff;
  box-shadow: var(--pk-shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  color: var(--pk-ink-2);
  cursor: pointer;
  position: relative;
  z-index: 2;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
.inputGroup label:hover {
  border-color: var(--pk-border-hi);
  box-shadow: var(--pk-shadow-h);
  transform: translateY(-2px);
}
.inputGroup label:before { content: none; display: none; }

.inputGroup label:after {
  width: 22px; height: 22px; content: '';
  border: 2px solid var(--pk-border);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: 1px 1px;
  border-radius: 50%;
  z-index: 2; position: absolute; right: 14px; top: 16px; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

.inputGroup input:checked ~ label {
  border-color: var(--pk-accent);
  background-color: var(--pk-tint);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
  color: var(--pk-ink-2);
}
.inputGroup input:checked ~ label:after {
  background-color: var(--pk-accent);
  border-color: var(--pk-accent);
}

.plantitle { color: var(--pk-ink); font-weight: 700; display: flex; justify-content: center; }
.planprice { color: var(--pk-accent); display: flex; justify-content: center; }
.inputGroup input:checked ~ label .plantitle { color: var(--pk-ink); }
.inputGroup input:checked ~ label .planprice { color: var(--pk-accent-2); }

.inputGroup input {
  width: 22px; height: 22px; order: 1; z-index: 2;
  position: absolute; right: 14px; top: 16px;
  cursor: pointer; opacity: 0; margin: 0; /* opacity (not visibility) keeps it focusable */
}
.inputGroup input:focus-visible ~ label { outline: 2px solid var(--pk-accent); outline-offset: 2px; }

/* Icon-led choice card (page type / section pickers). Replaces the inline
   font-size:3rem / 4rem + min-height:18vh / 22vh those pages used to carry —
   inline styles would have overridden this skin. */
.inputGroup label.pk-choice { align-items: center; text-align: center; padding: 22px 18px; min-height: 150px; }
.pk-choice .plantitle { margin-bottom: 10px; font-size: .95rem; }
.pk-choice-icon { font-size: 2.25rem; line-height: 1; margin: 0; }

/* ---------- small choice row ---------- */

.inputGroup_sm {
  background-color: transparent; display: block; position: relative; margin-bottom: 8px;
}
.inputGroup_sm label {
  width: 100%;
  padding: 11px 42px 11px 14px;
  border: 1px solid var(--pk-border);
  border-radius: 12px;
  background-color: #fff;
  display: flex; align-items: center; text-align: left;
  color: var(--pk-ink-2); cursor: pointer; position: relative; z-index: 2; overflow: hidden;
  transition: border-color .18s ease, background-color .18s ease;
}
.inputGroup_sm label:hover { border-color: var(--pk-border-hi); background-color: #f8fafc; }
.inputGroup_sm label:before { content: none; display: none; }

.inputGroup_sm label:after {
  width: 18px; height: 18px; content: '';
  border: 2px solid var(--pk-border);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 14px 14px; background-position: 1px 1px;
  border-radius: 50%; z-index: 2; position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%); cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.inputGroup_sm input:checked ~ label {
  border-color: var(--pk-accent); background-color: var(--pk-tint); color: var(--pk-ink-2);
}
.inputGroup_sm input:checked ~ label:after {
  background-color: var(--pk-accent); border-color: var(--pk-accent);
}

.plantitle1 { color: var(--pk-ink); font-weight: 700; }
.planprice1 { color: var(--pk-ink-2); margin-left: 0; }
.inputGroup_sm input:checked ~ label .plantitle1 { color: var(--pk-ink); }
.inputGroup_sm input:checked ~ label .planprice1 { color: var(--pk-accent-2); }

.inputGroup_sm input {
  width: 18px; height: 18px; order: 1; z-index: 2;
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  cursor: pointer; opacity: 0; margin: 0;
}
.inputGroup_sm input:focus-visible ~ label { outline: 2px solid var(--pk-accent); outline-offset: 2px; }

/* ---------- small choice row, muted variant ----------
   Was a grey (#97a3b9) flood-fill with an ORANGE (#fd7e14) tick — a third
   unrelated accent on the same screen. Now the same card, just quieter until
   selected, then the standard accent. */

.inputGroup_sm_light {
  background-color: transparent; display: block; position: relative; margin-bottom: 8px;
}
.inputGroup_sm_light label {
  width: 100%;
  padding: 11px 42px 11px 14px;
  border: 1px solid var(--pk-border);
  border-radius: 12px;
  background-color: #fff;
  display: flex; align-items: center; text-align: left;
  color: var(--pk-muted); cursor: pointer; position: relative; z-index: 2; overflow: hidden;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.inputGroup_sm_light label:hover { border-color: var(--pk-border-hi); background-color: #f8fafc; color: var(--pk-ink-2); }
.inputGroup_sm_light label:before { content: none; display: none; }

.inputGroup_sm_light label:after {
  width: 18px; height: 18px; content: '';
  border: 2px solid var(--pk-border);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 14px 14px; background-position: 1px 1px;
  border-radius: 50%; z-index: 2; position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%); cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.inputGroup_sm_light input:checked ~ label {
  border-color: var(--pk-accent); background-color: var(--pk-tint); color: var(--pk-ink-2);
}
.inputGroup_sm_light input:checked ~ label:after {
  background-color: var(--pk-accent); border-color: var(--pk-accent);
}
.inputGroup_sm_light input {
  width: 18px; height: 18px; order: 1; z-index: 2;
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  cursor: pointer; opacity: 0; margin: 0;
}
.inputGroup_sm_light input:focus-visible ~ label { outline: 2px solid var(--pk-accent); outline-offset: 2px; }