/* BazaarKit admin — Add-ons + Settings */
.bazaarkit-wrap { max-width: 1100px; }
.bazaarkit-title { display: flex; align-items: center; gap: 8px; }
.bazaarkit-title .dashicons { font-size: 30px; width: 30px; height: 30px; color: #2271b1; }
.bazaarkit-sub { font-size: 13px; font-weight: 400; color: #646970; }
.bazaarkit-intro { font-size: 14px; color: #3c434a; max-width: 760px; }

.bazaarkit-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 8px; }
.bazaarkit-tier { background: #fff; border: 1px solid #dcdcde; border-radius: 8px; padding: 14px 16px; font-size: 13px; line-height: 1.5; }
.bazaarkit-tier-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: #2271b1; color: #fff; font-weight: 600; font-size: 12px; margin-right: 6px; }
.bazaarkit-tier strong { display: block; margin: 4px 0 2px; }

.bazaarkit-h2 { margin-top: 28px; display: flex; align-items: center; gap: 10px; }
.bazaarkit-badge-soon { background: #f0f0f1; color: #646970; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 3px 10px; }

.bazaarkit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 12px; }
.bazaarkit-card { background: #fff; border: 1px solid #dcdcde; border-radius: 10px; padding: 18px; display: flex; flex-direction: column; }
.bazaarkit-card--coming_soon { opacity: .92; }
.bazaarkit-card-icon .dashicons { font-size: 26px; width: 26px; height: 26px; color: #2271b1; }
.bazaarkit-card h3 { margin: 10px 0 6px; font-size: 15px; }
.bazaarkit-card p { margin: 0 0 14px; color: #50575e; font-size: 13px; line-height: 1.55; flex: 1; }
.bazaarkit-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bazaarkit-pill { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.bazaarkit-pill--active { background: #edfaef; color: #00794f; border: 1px solid #b6e6c5; }
.bazaarkit-price { font-size: 12px; color: #646970; }

/* The third tier. Painted in the BRAND's deep night (#2B2644 → #242038) rather
   than wp-admin's greys (#1d2327 → #2c3338), which is what it used to be: sitting
   directly under the bundle block, two dark cards in two unrelated darks read as
   a mistake rather than a set. */
.bazaarkit-custom { margin-top: 30px; background: linear-gradient(135deg, #2B2644, #242038); color: #fff; border-radius: 16px; padding: 26px 28px; }
.bazaarkit-custom h2 { color: #fff; margin-top: 0; }
.bazaarkit-custom p { color: rgba(255,255,255,.72); max-width: 680px; font-size: 14px; line-height: 1.6; }
.bazaarkit-custom .bzk-cta { margin-top: 6px; }

.bazaarkit-currency { font-weight: 600; margin-right: 4px; }

/* module enable/disable toggle + license lock */
.bazaarkit-card-icon { position: relative; display: inline-flex; }
.bazaarkit-lockbadge { position: absolute; right: -7px; top: -6px; font-size: 13px; width: 13px; height: 13px; line-height: 13px; color: #8a6d3b; background: #fbf0d8; border-radius: 50%; padding: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.bazaarkit-card.is-locked .bazaarkit-card-icon > .dashicons:first-child { color: #9aa0a6; }
.bazaarkit-toggle-form { display: flex; align-items: center; gap: 9px; margin: 0; }
.bazaarkit-switch { position: relative; width: 42px; height: 24px; border-radius: 999px; border: none; background: #c3c4c7; cursor: pointer; padding: 0; transition: background .2s ease; flex-shrink: 0; }
.bazaarkit-switch.on { background: #1a8a7e; }
.bazaarkit-switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .2s ease; }
.bazaarkit-switch.on .bazaarkit-switch-knob { left: 21px; }
.bazaarkit-switch:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }
.bazaarkit-switch-label { font-size: 12px; font-weight: 600; color: #50575e; }
.bazaarkit-price .dashicons-lock { font-size: 14px; width: 14px; height: 14px; vertical-align: text-bottom; }

@media (max-width: 782px) {
	.bazaarkit-tiers { grid-template-columns: 1fr; }
}

/* --- Locked add-on settings ------------------------------------------------
   A settings section that belongs to an add-on this site cannot use. Greyed and
   padlocked in place rather than hidden, so an owner can see the setting exists,
   see which add-on owns it, and tell "switched off" apart from "not bought". */
.bazaarkit-locked-h { display: flex; align-items: center; gap: 8px; color: #646970; }
.bazaarkit-locked-h .dashicons-lock { color: #956400; }
.bazaarkit-locked-tag {
  font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  background: #f0f0f1; color: #646970; border-radius: 999px; padding: 3px 10px;
}
.bazaarkit-locked {
  border: 1px solid #dcdcde; border-left: 3px solid #956400; border-radius: 6px;
  background: #f6f7f7; padding: 14px 18px; max-width: 720px; margin: 0 0 26px;
}
.bazaarkit-locked p { margin: 0 0 10px; }
.bazaarkit-locked p:last-child { margin-bottom: 0; }
.bazaarkit-locked-list { margin: 4px 0 14px; color: #646970; }
.bazaarkit-locked-list li { margin: 0 0 4px; display: flex; align-items: flex-start; gap: 4px; }
.bazaarkit-locked-list .dashicons { font-size: 16px; width: 16px; height: 16px; opacity: .6; }

/* --- The buy path ----------------------------------------------------------
   Mirrors bazaarkit.online so the plugin and the site read as one product:
   ink #0A0A0A, hover #1F2937, night card #2B2644 → #242038, and #7FD1C0 for
   ticks on the dark card (the brand teal #0E7A6E is unreadable on night — the
   site makes the same substitution).

   Hanken Grotesk is the site's face and is NAMED here but never LOADED. Pulling
   a webfont into wp-admin is an external request the free core has no business
   making, so it degrades to the same system sans the site itself falls back to.

   Everything is scoped under .bazaarkit-wrap — the Add-ons page, the Settings
   page and the padlocked sections add-ons draw inside it are all wrapped in it,
   and nothing of ours renders anywhere else. `a.bzk-cta` rather than `.bzk-cta`
   because wp-admin colours anchors, and a buy button that inherits the admin
   link blue is the exact problem this replaces. */

.bazaarkit-wrap a.bzk-cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none;
  padding: 5px 5px 5px 20px; border: 0; border-radius: 999px;
  background: #0A0A0A; color: #fff;
  transition: background .2s ease;
}
.bazaarkit-wrap a.bzk-cta:hover,
.bazaarkit-wrap a.bzk-cta:focus,
.bazaarkit-wrap a.bzk-cta:active { background: #1F2937; color: #fff; box-shadow: none; }
.bazaarkit-wrap a.bzk-cta:focus-visible { outline: 2px solid #0A0A0A; outline-offset: 2px; }
.bazaarkit-wrap .bzk-cta__cir {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 999px; background: #fff;
  display: grid; place-items: center; transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.bazaarkit-wrap .bzk-cta__cir svg {
  width: 16px; height: 16px; display: block;
  fill: none; stroke: #0A0A0A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.bazaarkit-wrap a.bzk-cta:hover .bzk-cta__cir { transform: translateX(2px); }

/* On a dark card the pill inverts, and so does the circle inside it. */
.bazaarkit-wrap a.bzk-cta--light { background: #fff; color: #0A0A0A; }
.bazaarkit-wrap a.bzk-cta--light:hover,
.bazaarkit-wrap a.bzk-cta--light:focus,
.bazaarkit-wrap a.bzk-cta--light:active { background: #ECECEC; color: #0A0A0A; }
.bazaarkit-wrap a.bzk-cta--light:focus-visible { outline-color: #fff; }
.bazaarkit-wrap .bzk-cta--light .bzk-cta__cir { background: #0A0A0A; }
.bazaarkit-wrap .bzk-cta--light .bzk-cta__cir svg { stroke: #fff; }

/* Secondary: a real action, but not the one we are asking for. */
.bazaarkit-wrap a.bzk-cta--ghost { background: transparent; color: #0A0A0A; border: 1px solid rgba(10,10,10,.18); padding: 4px 4px 4px 19px; }
.bazaarkit-wrap a.bzk-cta--ghost:hover,
.bazaarkit-wrap a.bzk-cta--ghost:focus,
.bazaarkit-wrap a.bzk-cta--ghost:active { background: rgba(10,10,10,.05); color: #0A0A0A; }
.bazaarkit-wrap .bzk-cta--ghost .bzk-cta__cir { background: #0A0A0A; }
.bazaarkit-wrap .bzk-cta--ghost .bzk-cta__cir svg { stroke: #fff; }

@media (prefers-reduced-motion: reduce) {
  .bazaarkit-wrap a.bzk-cta,
  .bazaarkit-wrap .bzk-cta__cir { transition: none; }
}

/* A card that can be BOUGHT stacks its foot: price on its own line, then the
   pill. Side by side they do not fit — the cards are 280px at their narrowest
   and the price alone runs to "£7 / $7 per month for both · cancel anytime". */
.bazaarkit-card-foot { flex-wrap: wrap; }
.bazaarkit-card-foot--buy { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; }
.bazaarkit-card-foot--buy .bazaarkit-price { font-size: 13px; font-weight: 500; color: #0A0A0A; }
.bazaarkit-card-foot--buy .bazaarkit-price .dashicons-lock { color: #956400; }

/* --- The lifetime bundle block --------------------------------------------- */
.bzk-bundle {
  margin: 30px 0 0; padding: 28px 30px; border-radius: 16px;
  background: linear-gradient(135deg, #2B2644, #242038); color: #fff;
  font-family: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; align-items: center;
}
.bzk-bundle__eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7FD1C0; }
.bzk-bundle h2 { margin: 0 0 10px; padding: 0; color: #fff; font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.bzk-bundle__lead { margin: 0 0 16px; max-width: 56ch; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.72); }
.bzk-bundle__list { margin: 0; display: grid; gap: 8px; font-size: 13.5px; color: rgba(255,255,255,.72); }
.bzk-bundle__list li { margin: 0; display: flex; align-items: flex-start; gap: 10px; }
.bzk-bundle__list svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 4px; fill: none; stroke: #7FD1C0; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bzk-bundle__price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 16px; }
.bzk-bundle__price .n { font-size: 42px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.bzk-bundle__price .u { font-size: 13px; color: rgba(255,255,255,.55); }
.bzk-bundle__price .was { font-size: 19px; font-weight: 500; text-decoration: line-through; color: rgba(255,255,255,.5); }
.bzk-bundle__founder { margin: -8px 0 16px; font-size: 12.5px; font-weight: 600; color: #7FD1C0; }
.bzk-bundle__note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.62); }
.bzk-bundle__fine { margin: 10px 0 0; font-size: 12.5px; color: rgba(255,255,255,.55); }
.bzk-bundle__more { display: inline-block; margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.72); text-decoration: underline; text-underline-offset: 3px; }
.bazaarkit-wrap .bzk-bundle__more:hover,
.bazaarkit-wrap .bzk-bundle__more:focus { color: #fff; }

/* --- Locked settings section: ends in the offer ---------------------------- */
.bazaarkit-locked-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 14px 0 0; }
.bazaarkit-locked-price { font-size: 13px; font-weight: 500; color: #0A0A0A; }

@media (max-width: 782px) {
  .bzk-bundle { grid-template-columns: 1fr; padding: 22px; gap: 22px; }
  .bzk-bundle h2 { font-size: 22px; }
}