/* MLC Portal - shared styles for the interaction layer added on top of the
   theme's bundle.css. Kept in its own file so the theme CSS stays untouched. */

:root {
  --mlc-yellow: #ffdb46;
  --mlc-yellow-deep: #e5b800;
}

/* ---------- toast ---------- */
.mlc-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px);
  background: #141310; color: #fff; font: 600 13.5px/1.4 system-ui, sans-serif;
  padding: 11px 20px; border-radius: 999px; z-index: 10000;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 8px 28px rgba(0,0,0,.24); max-width: 90vw; text-align: center;
}
.mlc-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.mlc-toast.is-warn { background: #9a5b00; }

/* ---------- header logo ----------
   bundle.css sizes .logo at 175px, but the live site renders it at a constant
   125px (measured at 480px and 1280px viewports) because production loads ~28
   stylesheets on top of bundle.css and we load only that one. Rather than pull
   in the whole WordPress plugin CSS stack, pin the value the real site ends up
   with. Scoped to .navbar-brand so the Brand Kit logo is unaffected. */
.navbar-brand .logo { width: 125px; }

/* ---------- primary asset categories ----------
   Eight destinations need an intentional 4 + 4 layout on wide screens. The
   theme's flex-wrap left Brand Kit alone on a third line depending on label
   widths and viewport zoom. Keep template sub-category filters untouched. */
#search-block {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
}
#search-block > .container { order: 1; width: 100%; }
#search-block > .mlc_presentations_filter { order: 2; }
/* Search suggestions were useful during discovery, but Recent/Popular duplicate
   the main search affordance and add visual noise to every hero. */
#search-block .mlc-chips { display: none !important; }
#search-block > .mlc_presentations_filter ul {
  display: grid !important;
  grid-template-columns: repeat(4, max-content);
  justify-content: center;
  align-items: center;
  gap: 9px 14px;
  width: max-content;
  max-width: 100%;
  margin: 12px auto 0 !important;
  padding: 0 !important;
}
#search-block > .mlc_presentations_filter li { margin: 0 !important; }
#search-block > .mlc_presentations_filter a {
  display: block;
  width: 100%;
  min-width: 0 !important;
  padding: 6px 17px !important;
  box-sizing: border-box;
  font-size: 13px !important;
  line-height: 1.15 !important;
}
/* Asset destinations behave like compact visual tabs rather than generic
   white pills. Symbols stay monochrome and inherit the active text colour. */
#search-block > .mlc_presentations_filter a:not([href="/account"]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.58) !important;
  background: rgba(255,255,255,.93) !important;
  color: #141310 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.72) inset;
  backdrop-filter: blur(5px);
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
#search-block > .mlc_presentations_filter a:not([href="/account"])::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  color: currentColor;
  font: 800 15px/1 Arial,sans-serif;
}
#search-block a[href="/"]::before { content: "▧"; }
#search-block a[href="/powerpoint-templates"]::before { content: "▤"; }
#search-block a[href="/vector-icons"]::before { content: "◇"; }
#search-block a[href="/brand-logos"]::before { content: "◎"; }
#search-block a[href="/flags"]::before { content: "⚑"; }
#search-block a[href="/maps"]::before { content: "⌖"; }
#search-block a[href="/illustrations"]::before { content: "✎"; }
#search-block > .mlc_presentations_filter a:not([href="/account"]):hover {
  transform: translateY(-2px);
  border-color: var(--mlc-yellow) !important;
  background: #fff !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.22), 0 0 0 2px rgba(255,219,70,.28);
}
#search-block > .mlc_presentations_filter a:not([href="/account"]).current_page {
  border-color: var(--mlc-yellow) !important;
  background: var(--mlc-yellow) !important;
  box-shadow: 0 5px 18px rgba(229,184,0,.28);
}
/* Brand Kit is the user's workspace, not an eighth asset collection. */
#search-block > .mlc_presentations_filter a[href="/account"] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  border: 2px solid var(--mlc-yellow) !important;
  background: #141310 !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset;
}
#search-block > .mlc_presentations_filter a[href="/account"]::before {
  content: "WORKSPACE";
  display: block;
  margin-bottom: 2px;
  color: var(--mlc-yellow);
  font: 800 7px/1 system-ui,sans-serif;
  letter-spacing: .14em;
}
#search-block > .mlc_presentations_filter a[href="/account"]:hover,
#search-block > .mlc_presentations_filter a[href="/account"].current_page {
  border-color: #141310 !important;
  background: var(--mlc-yellow) !important;
  color: #141310 !important;
}
#search-block > .mlc_presentations_filter a[href="/account"]:hover::before,
#search-block > .mlc_presentations_filter a[href="/account"].current_page::before { color: #141310; }
@media (max-width: 1099px) {
  #search-block > .mlc_presentations_filter ul { grid-template-columns: repeat(3, max-content); gap: 9px 12px; }
}
@media (max-width: 759px) {
  #search-block > .mlc_presentations_filter ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 520px);
    gap: 8px;
  }
  #search-block > .mlc_presentations_filter a { padding-left: 10px !important; padding-right: 10px !important; }
}

/* ---------- identified-access gate ---------- */
body.mlc-auth-pending { overflow: hidden; }
body.mlc-auth-pending > *:not(.mlc-lead-gate) { visibility: hidden; }
.mlc-lead-gate {
  position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15,15,14,.82); backdrop-filter: blur(5px); visibility: visible;
}
.mlc-lead-gate__modal {
  position: relative;
  width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: auto;
  padding: 30px; border-radius: 18px; background: #fff; color: #141310;
  box-shadow: 0 28px 80px rgba(0,0,0,.35); border-top: 6px solid var(--mlc-yellow);
}
.mlc-lead-gate__close {
  position: absolute; top: 12px; right: 14px; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: #f3f3f1; color: #141310;
  font: 400 25px/1 system-ui,sans-serif; cursor: pointer;
}
.mlc-lead-gate__close:hover { background: var(--mlc-yellow); }
.mlc-lead-gate__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.mlc-lead-gate__brand img { width: 124px; height: auto; }
.mlc-lead-gate__eyebrow {
  display: inline-block; margin-bottom: 10px; padding: 5px 10px; border-radius: 999px;
  background: #fff8d6; color: #6c5700; font: 800 10px/1 system-ui,sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
}
.mlc-lead-gate h2 { margin: 0 0 7px; font: 800 25px/1.15 system-ui,sans-serif; color: #141310; }
.mlc-lead-gate__sub { margin: 0 0 20px; color: #6f6f6f; font: 400 13px/1.5 system-ui,sans-serif; }
.mlc-lead-gate__row { display: flex; gap: 10px; }
.mlc-lead-gate__field { flex: 1; margin-bottom: 12px; }
.mlc-lead-gate__field label {
  display: block; margin-bottom: 5px; color: #777; font: 700 10px/1 system-ui,sans-serif;
  letter-spacing: .07em; text-transform: uppercase;
}
.mlc-lead-gate__field input {
  width: 100%; padding: 11px 12px; border: 1px solid #dedede; border-radius: 9px;
  color: #141310; background: #fff; font: 400 14px/1.3 system-ui,sans-serif;
}
.mlc-lead-gate__field input:focus { outline: 2px solid rgba(255,219,70,.55); border-color: #c4a300; }
.mlc-lead-gate__consent { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 16px; color: #6f6f6f; font: 400 12px/1.45 system-ui,sans-serif; }
.mlc-lead-gate__consent input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--mlc-yellow-deep); }
.mlc-lead-gate__consent a { text-decoration: underline; }
.mlc-lead-gate__submit {
  width: 100%; border: 0; border-radius: 999px; padding: 12px 20px; background: var(--mlc-yellow);
  color: #141310; font: 800 14px/1 system-ui,sans-serif; cursor: pointer;
}
.mlc-lead-gate__submit:disabled { opacity: .55; cursor: wait; }
.mlc-lead-gate__error { display: none; margin: 0 0 12px; padding: 9px 11px; border-radius: 8px; background: #fff0f0; color: #9e2929; font: 600 12px/1.4 system-ui,sans-serif; }
.mlc-lead-gate__error.is-visible { display: block; }
@media (max-width: 520px) {
  .mlc-lead-gate { padding: 12px; }
  .mlc-lead-gate__modal { padding: 22px 18px; }
  .mlc-lead-gate__row { display: block; }
}

/* ---------- toolbar above the grids ---------- */
.mlc-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 14px 0 18px; margin-bottom: 6px; border-bottom: 1px solid #ececec;
  min-height: 68px;
  /* Centred to match the hero above. Pages that end their toolbar with a
     __spacer (images, illustrations) are unaffected: the spacer eats the free
     space, so there is none left for justify-content to distribute. */
  justify-content: center;
}
.mlc-toolbar__group { display: flex; align-items: center; gap: 8px; }
.mlc-toolbar__label {
  font: 700 11px/1 system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .08em; color: #8a8a8a; white-space: nowrap;
}
.mlc-toolbar__spacer { flex: 1 1 auto; }

@media (max-width: 760px) {
  /* The collection selector is hydrated asynchronously. Reserve its second
     row so revealing it cannot push the first asset row down. */
  .mlc-toolbar { min-height: 107px; }
}

/* icon-set picker: too many options for a segmented control, so a select.
   Sized and rounded to sit level with .mlc-seg next to it. */
.mlc-styleseg {
  border: 1px solid #ddd; border-radius: 999px; background: #fff;
  font: 600 13px/1 system-ui, sans-serif; color: #444;
  padding: 7px 30px 7px 15px; cursor: pointer; max-width: 230px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23888' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.mlc-styleseg:hover { background-color: #fafafa; }
.mlc-styleseg.is-filtered { background-color: #fff; color: #141310; border-color: #141310; }
.mlc-styleseg option { background: #fff; color: #141310; }

/* segmented control (asset type, format) */
.mlc-seg { display: inline-flex; border: 1px solid #ddd; border-radius: 999px; overflow: hidden; background: #fff; }
.mlc-seg button {
  border: 0; background: transparent; cursor: pointer; padding: 7px 15px;
  font: 600 13px/1 system-ui, sans-serif; color: #444; white-space: nowrap;
}
.mlc-seg button + button { border-left: 1px solid #eee; }
.mlc-seg button:hover { background: #fafafa; }
.mlc-seg button.is-active { background: var(--mlc-yellow); color: #141310; }

/* colour filter */
.mlc-swatches { display: flex; align-items: center; gap: 6px; }
.mlc-swatch {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,.14);
  cursor: pointer; padding: 0; position: relative;
}
.mlc-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #141310; }
.mlc-swatch--none { background: #fff; }
.mlc-swatch--none::after {
  content: ""; position: absolute; inset: 4px; border-top: 2px solid #d33; transform: rotate(45deg);
}
.mlc-swatch--custom { overflow: hidden; padding: 0; }
.mlc-swatch--custom input[type=color] {
  width: 200%; height: 200%; margin: -25%; border: 0; padding: 0; cursor: pointer; background: none;
}

/* ---------- advanced colour picker ---------- */
.mlc-cp {
  position: absolute; z-index: 10001; background: #fff; border: 1px solid #e2e2e2;
  border-radius: 14px; padding: 16px; width: 232px;
  box-shadow: 0 14px 40px rgba(0,0,0,.18); font: 13px/1.4 system-ui, sans-serif;
}
.mlc-cp__wheelwrap { position: relative; width: 180px; height: 180px; margin: 0 auto 12px; }
.mlc-cp__wheel { display: block; cursor: crosshair; border-radius: 50%; touch-action: none; }
.mlc-cp__cursor {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35);
  transform: translate(-50%, -50%); pointer-events: none;
}
.mlc-cp__row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mlc-cp__row span { font-weight: 700; font-size: 11px; color: #8a8a8a; width: 12px; }
.mlc-cp__row input[type=range] { flex: 1; accent-color: #141310; }
.mlc-cp__fields { display: grid; grid-template-columns: 1fr; gap: 8px; }
.mlc-cp__fields { grid-template-columns: 2fr 1fr 1fr 1fr; }
.mlc-cp__f { display: flex; flex-direction: column; gap: 3px; }
.mlc-cp__f span { font: 700 9.5px/1 system-ui, sans-serif; color: #9a9a9a; letter-spacing: .06em; }
.mlc-cp__f input {
  width: 100%; border: 1px solid #e2e2e2; border-radius: 7px; padding: 6px 6px;
  font: 600 11.5px/1 ui-monospace, monospace; color: #141310; min-width: 0;
}
.mlc-cp__f input:focus { outline: 2px solid #ffdb46; outline-offset: -1px; border-color: #ffdb46; }
.mlc-cp__f--n input { text-align: center; padding: 6px 2px; }
/* number spinners steal width in a 4-up row */
.mlc-cp__f--n input::-webkit-outer-spin-button,
.mlc-cp__f--n input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mlc-cp__f--n input { -moz-appearance: textfield; }
.mlc-cp__actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.mlc-cp__preview { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(0,0,0,.12); flex: none; }
.mlc-cp__apply {
  flex: 1; border: 0; border-radius: 999px; background: #ffdb46; color: #141310;
  font: 700 12.5px/1 system-ui, sans-serif; padding: 9px 12px; cursor: pointer;
}
.mlc-cp__apply:hover { opacity: .85; }

/* the swatch that opens the picker */
.mlc-swatch--wheel {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  position: relative;
}
.mlc-swatch--wheel::after {
  content: ""; position: absolute; inset: 7px; background: #fff; border-radius: 50%;
}

/* ---------- popular / recent searches ---------- */
.mlc-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 12px; }
.mlc-chips__label {
  font: 600 11px/22px system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .07em; color: rgba(255,255,255,.55); margin-right: 2px;
}
.mlc-chip {
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06);
  color: #fff; border-radius: 999px; padding: 4px 13px; cursor: pointer;
  font: 500 12.5px/1.4 system-ui, sans-serif; transition: background .15s ease, border-color .15s ease;
}
.mlc-chip:hover { background: var(--mlc-yellow); border-color: var(--mlc-yellow); color: #141310; }
.mlc-chip--recent { border-style: dashed; }
.mlc-template-intents { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0 auto 14px; }
.mlc-template-intents .mlc-chip { background: #fff; color: #141310; }
.mlc-template-intents .mlc-chip.is-active { background: var(--mlc-yellow); border-color: var(--mlc-yellow); }
.mlc-template-meta { display: block; margin: -4px 0 7px; color: #777; font: 600 10px/1.2 system-ui,sans-serif;
  text-transform: uppercase; letter-spacing: .06em; }
.mlc-logo-notice { max-width: 980px; margin: 16px auto 0; padding: 10px 14px; border: 1px solid #e5e5e5;
  border-radius: 9px; background: #fafafa; color: #666; font: 500 12px/1.45 system-ui, sans-serif; text-align: center; }
.mlc-addin-promo { padding: 34px 0; background: var(--mlc-yellow); color: #141310; }
.mlc-addin-promo__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.mlc-addin-promo__eyebrow { font: 700 11px/1 system-ui,sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.mlc-addin-promo h2 { margin: 7px 0 6px; font: 700 25px/1.15 system-ui,sans-serif; }
.mlc-addin-promo p { margin: 0; font: 500 14px/1.45 system-ui,sans-serif; }
.mlc-addin-promo__cta { flex: 0 0 auto; padding: 13px 19px; border: 2px solid #141310; border-radius: 999px;
  background: #141310; color: #fff !important; font: 700 13px/1 system-ui,sans-serif; text-decoration: none !important; }
.mlc-addin-promo__cta:hover { background: #fff; color: #141310 !important; }
@media (max-width: 760px) { .mlc-addin-promo__inner { align-items: flex-start; flex-direction: column; } }

/* ---------- card actions (copy / download / select) ---------- */
.mlc-card-actions {
  position: absolute; inset: auto 0 0 0; display: flex; gap: 6px; justify-content: center;
  padding: 8px; opacity: 0; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.mlc-pt-card:hover .mlc-card-actions,
.one-image:hover .mlc-card-actions { opacity: 1; transform: none; }
.mlc-act {
  border: 0; border-radius: 999px; cursor: pointer; background: #fff; color: #141310;
  font: 700 11.5px/1 system-ui, sans-serif; padding: 7px 13px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.mlc-act:hover { background: var(--mlc-yellow); }
.mlc-act:disabled { opacity: .5; cursor: default; }
.mlc-preview-trigger {
  position: absolute; top: 8px; right: 8px; z-index: 4; width: 32px; height: 32px;
  display: grid; place-items: center; border: 1px solid rgba(20,19,16,.12); border-radius: 50%;
  background: rgba(255,255,255,.94); color: #141310; cursor: pointer; opacity: 0;
  transform: translateY(-3px); transition: opacity .16s ease, transform .16s ease, background .16s ease;
  box-shadow: 0 3px 12px rgba(0,0,0,.12);
}
.mlc-preview-trigger svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mlc-pt-card:hover .mlc-preview-trigger,.uni-card:hover .mlc-preview-trigger,.mlc-preview-trigger:focus { opacity: 1; transform: none; }
.mlc-preview-trigger:hover { background: var(--mlc-yellow); }
@media (hover:none) { .mlc-preview-trigger { opacity: 1; transform: none; } }

/* ---------- asset detail preview ---------- */
body.mlc-preview-open { overflow: hidden; }
.mlc-asset-preview {
  position: fixed; inset: 0; z-index: 10040; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15,15,14,.78); backdrop-filter: blur(7px);
}
.mlc-asset-preview__panel {
  position: relative; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr);
  width: min(1040px,100%); max-height: calc(100vh - 48px); overflow: hidden;
  border-radius: 22px; background: #fff; color: #141310; box-shadow: 0 30px 90px rgba(0,0,0,.42);
}
.mlc-asset-preview__close {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.94); color: #141310;
  font: 400 27px/1 system-ui,sans-serif; cursor: pointer; box-shadow: 0 3px 14px rgba(0,0,0,.12);
}
.mlc-asset-preview__close:hover { background: var(--mlc-yellow); }
.mlc-asset-preview__visual {
  min-height: 480px; padding: 44px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg,#f8f8f5,#eeeeea);
}
.mlc-asset-preview__visual img { display: block; max-width: 100%; max-height: 68vh; object-fit: contain; }
.mlc-asset-preview__info { align-self: center; padding: 58px 38px 42px; min-width: 0; }
.mlc-asset-preview__eyebrow { color: #967500; font: 800 10px/1 system-ui,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.mlc-asset-preview__info h2 { margin: 12px 0 10px; color: #141310; font: 800 27px/1.18 system-ui,sans-serif; overflow-wrap: anywhere; }
.mlc-asset-preview__source { display: inline-block; color: #777; font: 600 11px/1.4 system-ui,sans-serif; text-decoration: none; }
a.mlc-asset-preview__source:hover { color: #141310; text-decoration: underline; }
.mlc-asset-preview__actions { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 30px; }
.mlc-asset-preview__button { border: 0; border-radius: 12px; padding: 13px 16px; cursor: pointer; font: 800 13px/1 system-ui,sans-serif; }
.mlc-asset-preview__button small { display: block; margin-top: 5px; opacity: .62; font: 500 9px/1.2 system-ui,sans-serif; }
.mlc-asset-preview__button.is-dark { grid-column: 1 / -1; background: #141310; color: #fff; }
.mlc-asset-preview__button.is-yellow { background: var(--mlc-yellow); color: #141310; }
.mlc-asset-preview__button:disabled { opacity: .55; cursor: wait; }
.mlc-asset-preview__favourite { width: 44px; border: 1px solid #ddd; border-radius: 12px; background: #fff; color: #777; cursor: pointer; font-size: 18px; }
.mlc-asset-preview__favourite:hover,.mlc-asset-preview__favourite.is-active { border-color: var(--mlc-yellow); background: var(--mlc-yellow); color: #141310; }
@media (max-width: 760px) {
  .mlc-asset-preview { padding: 12px; align-items: flex-end; }
  .mlc-asset-preview__panel { grid-template-columns: 1fr; max-height: calc(100vh - 24px); overflow: auto; border-radius: 18px; }
  .mlc-asset-preview__visual { min-height: 300px; padding: 34px 24px; }
  .mlc-asset-preview__visual img { max-height: 42vh; }
  .mlc-asset-preview__info { padding: 26px 22px 24px; }
}

/* selection checkbox */
.mlc-select {
  position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; z-index: 3;
  cursor: pointer; accent-color: var(--mlc-yellow-deep);
  opacity: 0; transition: opacity .16s ease;
}
.mlc-pt-card:hover .mlc-select, .mlc-select:checked { opacity: 1; }
.mlc-pt-card-container.is-selected .mlc-pt-card { outline: 3px solid var(--mlc-yellow); outline-offset: -3px; }

/* selection action bar */
.mlc-selbar {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 90px);
  background: #141310; color: #fff; border-radius: 999px; padding: 10px 12px 10px 20px;
  display: flex; align-items: center; gap: 14px; z-index: 9999;
  box-shadow: 0 10px 34px rgba(0,0,0,.3); transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.mlc-selbar.is-visible { transform: translate(-50%, 0); }
.mlc-selbar__count { font: 600 13.5px/1 system-ui, sans-serif; white-space: nowrap; }
.mlc-selbar button {
  border: 0; border-radius: 999px; cursor: pointer; padding: 8px 16px;
  font: 700 12.5px/1 system-ui, sans-serif; background: var(--mlc-yellow); color: #141310;
}
.mlc-selbar button.is-ghost { background: transparent; color: rgba(255,255,255,.6); padding: 8px 6px; }
.mlc-selbar button:hover { opacity: .88; }

/* ---------- skeleton loading ---------- */
@keyframes mlc-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
.mlc-skeleton {
  background: #f0f0f0;
  background-image: linear-gradient(90deg, #f0f0f0 0px, #f7f7f7 210px, #f0f0f0 420px);
  background-size: 840px 100%;
  animation: mlc-shimmer 1.25s linear infinite;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) { .mlc-skeleton { animation: none; } }

/* ---------- branded grid loader ----------
   The first version rendered one grey skeleton per icon. The vector layout
   caps cards at 90px, while those placeholders were 150px tall, so navigation
   briefly showed a wall of stretched grey boxes. A single, full-width loader
   keeps the grid stable and uses the circular mark from the official MLC logo. */
@keyframes mlc-loader-spin { to { transform: rotate(360deg); } }
@keyframes mlc-loader-bar { 0% { transform: translateX(-105%); } 55%, 100% { transform: translateX(305%); } }
.mlc-grid-loader {
  flex: 0 0 100%; width: 100%; min-height: 260px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: #777; font: 600 12px/1.3 system-ui, sans-serif;
  letter-spacing: .035em; text-align: center;
}
.mlc-grid-loader__mark {
  width: 54px; height: 54px; overflow: hidden; border-radius: 50%;
  animation: mlc-loader-spin 1.25s cubic-bezier(.55,.12,.45,.88) infinite;
}
.mlc-grid-loader__mark img {
  display: block; height: 54px; width: auto; max-width: none;
}
.mlc-lead-gate__success { margin: 18px 0 4px; padding: 14px; border-radius: 10px; background: #f4faef;
  border: 1px solid #b9d7a8; color: #244b18; font: 600 14px/1.45 system-ui,sans-serif; text-align: center; }
.mlc-grid-loader__track {
  width: 150px; height: 4px; overflow: hidden; border-radius: 99px; background: #ececec;
}
.mlc-grid-loader__bar {
  display: block; width: 38%; height: 100%; border-radius: inherit;
  background: var(--mlc-yellow); animation: mlc-loader-bar 1.35s ease-in-out infinite;
}
.mlc-pt-cards.has-grid-loader { min-height: 340px; }
@media (prefers-reduced-motion: reduce) {
  .mlc-grid-loader__mark, .mlc-grid-loader__bar { animation-duration: 3s; }
}

/* ---------- stable image grid ----------
   CSS columns rebalance whenever a lazy-loaded image reveals its intrinsic
   height. A fixed preview ratio prevents cumulative layout shift and gives the
   portal a calmer, presentation-library rhythm. */
.images.is-masonry {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  /* Keep the editorial section below the first viewport while the initial
     API response replaces the branded loader with the real grid. */
  min-height: 620px;
}
.images.is-masonry .one-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 0;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background-color: #eee;
}
.images.is-masonry .mlc-grid-loader { grid-column: 1 / -1; }
@media (max-width: 1400px) { .images.is-masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .images.is-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 520px; } }
@media (max-width: 560px)  { .images.is-masonry { grid-template-columns: 1fr; min-height: 460px; } }

/* video results reuse the image grid */
.mlc-video { position: relative; width: 100%; height: 100%; background: #111; }
.mlc-video video { width: 100%; height: 100%; display: block; object-fit: cover; }
.mlc-video__badge {
  position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.7); color: #fff;
  font: 700 10.5px/1 system-ui, sans-serif; padding: 5px 9px; border-radius: 999px; letter-spacing: .04em;
}

/* ---------- cards need positioning context for overlays ---------- */
.mlc-pt-card, .one-image { position: relative; }

/* unified search: source label on each card */
.mlc-source {
  position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.94); color: #444;
  font: 700 10px/1 system-ui, sans-serif; padding: 4px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .05em; z-index: 2;
}

/* empty / error state */
.mlc-empty { text-align: center; padding: 56px 20px; color: #999; font: 500 15px/1.5 system-ui, sans-serif; }

/* ---------- visible search submit ----------
   The legacy control was a transparent Font Awesome icon. When that icon font
   was unavailable the submit target existed but looked completely absent. */
#search-block .form-search {
  position: relative;
}
#search-block .form-search .form-control {
  padding-right: 76px;
}
#search-block .form-search .search-click {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 10;
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mlc-yellow, #ffd943) !important;
  color: #141310 !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .16);
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
  cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#search-block .form-search .search-click:hover {
  background: #fff1a3;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .22);
  text-decoration: none;
  transform: translateY(-50%) scale(1.04);
}
#search-block .form-search .search-click:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #141310;
}
#search-block .form-search .search-click svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.2;
}
@media (max-width: 560px) {
  #search-block .form-search .form-control { padding-right: 65px; }
  #search-block .form-search .search-click { right: 6px; width: 44px; height: 44px; }
}

/* ---------- crawlable collection guidance / FAQ ---------- */
.mlc-seo { padding: 58px 0 62px; background: #fff; color: #292724; border-top: 1px solid #eee; }
.mlc-seo .container { max-width: 1120px; }
.mlc-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; color: #777;
  font: 600 12px/1.4 system-ui,sans-serif; }
.mlc-breadcrumb a { color: #777; text-decoration: underline; text-underline-offset: 3px; }
.mlc-seo__intro { max-width: 820px; }
.mlc-seo__eyebrow { margin: 0 0 8px !important; color: #9a7300; font: 700 11px/1 system-ui,sans-serif !important;
  letter-spacing: .11em; text-transform: uppercase; }
.mlc-seo h2 { margin: 0 0 14px; color: #141310; font: 700 31px/1.15 system-ui,sans-serif; letter-spacing: -.025em; }
.mlc-seo__intro > p:last-child { margin: 0; color: #555; font: 400 17px/1.65 system-ui,sans-serif; }
.mlc-seo__points { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin: 34px 0 44px; }
.mlc-seo__points article { padding: 23px; border: 1px solid #e8e8e8; border-radius: 14px; background: #fafafa; }
.mlc-seo__points h3 { margin: 0 0 8px; color: #141310; font: 700 17px/1.25 system-ui,sans-serif; }
.mlc-seo__points p { margin: 0; color: #626262; font: 400 14px/1.55 system-ui,sans-serif; }
.mlc-seo__faq { max-width: 880px; }
.mlc-seo__faq h2 { margin-bottom: 12px; font-size: 24px; }
.mlc-seo__faq details { border-bottom: 1px solid #e7e7e7; }
.mlc-seo__faq summary { padding: 17px 30px 17px 0; cursor: pointer; color: #141310;
  font: 700 15px/1.4 system-ui,sans-serif; }
.mlc-seo__faq details p { max-width: 760px; margin: -3px 0 18px; color: #5f5f5f; font: 400 14px/1.6 system-ui,sans-serif; }
.mlc-seo__related { margin: 34px 0 0 !important; font: 400 14px/1.65 system-ui,sans-serif !important; }
.mlc-seo__related a { color: #725900; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .mlc-seo { padding: 42px 0; }
  .mlc-seo h2 { font-size: 26px; }
  .mlc-seo__points { grid-template-columns: 1fr; }
}