/* ux-shop: the visitor and buying surfaces, after the UX review (UX-1, UX-3, UX-7, UX-8, UX-13, UX-16, UX-17). */

/* ---- UX-3: the headline is focused on arrival, for the skip link and screen readers. That focus must not paint the
   browser's ring. Only elements the script focuses carry tabindex="-1" — Tab never reaches them — so every control a
   keyboard user can actually reach keeps the ring it had. (Chrome counts a scripted focus as :focus-visible, so the
   rule has to be on :focus itself.) ---- */
[tabindex="-1"]:focus { outline: none; }

/* ---- UX-7: cards in the shape of the real ones while the list loads, instead of a bare "…". ---- */
.uxsk { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.uxsk__art { height: 128px; background: var(--surface-3); }
.uxsk__body { padding: 14px; display: grid; gap: 8px; }
.uxsk__line { height: 10px; border-radius: 6px; background: var(--surface-3); }
.uxsk__line--title { height: 14px; width: 80%; background: var(--surface-4); }
.uxsk__line--short { width: 45%; }
.uxsk__line--tiny { width: 30%; height: 8px; }
.uxsk__art, .uxsk__line { animation: uxsk-pulse 1.4s ease-in-out infinite; }
.uxsk__body .uxsk__line:nth-child(2) { animation-delay: .15s; }
.uxsk__body .uxsk__line:nth-child(3) { animation-delay: .3s; }

@keyframes uxsk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .uxsk__art, .uxsk__line { animation: none; } }

/* The course page while it loads: the buy box beside the text, as it will be. */
.uxsk-landing { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.uxsk-landing__main { display: grid; gap: 12px; }
.uxsk-landing__main .uxsk__line--title { height: 26px; width: 65%; }
.uxsk-landing__buy { display: grid; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.uxsk-landing__buy .uxsk__art { border-radius: 12px; height: 150px; }
@media (max-width: 900px) { .uxsk-landing { grid-template-columns: 1fr; } }

/* ---- UX-8: an empty result is a place to carry on from, not a dead end. ---- */
.uxempty { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 34px 18px; }
.uxempty__title { font-size: 18px; font-weight: 800; }
.uxempty__hint { color: var(--muted); font-size: 14px; max-width: 46ch; margin: 0; }
.uxempty__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.uxempty__more { width: 100%; margin-top: 18px; text-align: left; }

/* The number of courses behind a category, so nobody walks into an empty one. */
.uxcat__count { color: var(--muted); font-weight: 600; font-size: 12px; margin-left: 4px; }

/* ---- UX-13: the language control in the visitor header, beside Sign in. ---- */
.uxlang { gap: 6px; font-size: 13px; }
.uxlang .langpick__label { color: var(--muted); }
.uxlang select { background: var(--input-bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; font: inherit; }
@media (max-width: 900px) { .uxlang { width: 100%; justify-content: flex-start; } }

/* The course's own language, said plainly when the interface is in another one. */
.uxtaught { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2);
  background: var(--tint-info); border: 1px solid var(--info-line); border-radius: 999px; padding: 4px 12px; margin: 10px 0 0; }
:root[data-theme="dark"] .uxtaught { color: var(--ink); }

/* ---- UX-16: the "Enrolled" mark under the cover art, where it covers nothing. ---- */
.uxenrolled { justify-self: start; display: inline-flex; align-items: center; gap: 5px;
  background: var(--tint-success); color: var(--success-ink); border: 1px solid var(--success-line);
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }

/* ---- UX-17: one search box on a phone — the header's. ---- */
@media (max-width: 720px) { .pubhero__search { display: none; } }
/* …and above it the page search is the only one: the top bar hides its own, so a learner never meets two. */
@media (min-width: 721px) { .search-wrap--page-has-search { display: none; } }

/* ---- UX-1: on a phone the price and the main action ride along at the bottom of the screen.
   The bar is the last thing inside the page's text column, so it stops — and never covers the
   real buy box, the footer, or anything below the course. ---- */
.uxbuy { display: none; }

@media (max-width: 900px) {
  .uxbuy {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
    position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 4;
    margin: 22px 0 0; padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px;
    box-shadow: var(--shadow);
  }
  .uxbuy__price { flex: 1 1 auto; min-width: 0; font-size: 20px; font-weight: 800; }
  .uxbuy__price .sell-price { font-size: inherit; }
  .uxbuy__price .sell-countdown { display: block; font-size: 12px; font-weight: 600; }
  .uxbuy__cta { flex: 0 0 auto; justify-content: center; padding: 11px 18px; font-size: 14px; text-decoration: none; min-height: 44px; }
  .uxbuy__member { display: block; font-size: 12px; font-weight: 600; color: var(--brand-ink); text-decoration: none; }
  .uxbuy__note { flex: 1 0 100%; margin: 0; font-size: 12px; color: var(--muted); }
  .uxbuy__note a { color: var(--brand-ink); }
}

@media print { .uxbuy { display: none !important; } }