/* ============================================================
   Shrine UI — the additive layer
   ============================================================
   Rules here only do things style.css does not already do.

   Nothing in this file re-sizes images, re-flows grids, or
   re-styles components that already have a definition — an
   earlier version did, and it cropped product images that
   style.css deliberately shows uncropped. Every selector below
   was checked against style.css before it was added.

   What lives here:
     1. the mobile tab bar        (a component that did not exist)
     2. phone ergonomics          (tap sizes, iOS zoom, safe area)
     3. the password reveal       (a control that did not exist)
     4. focus states              (accessibility, previously absent)
     5. small system polish       (scrollbar, selection, reduced motion)
   ============================================================ */

:root {
  --sh-green:#1D9E75;
  --sh-line:rgba(255,255,255,.08);
  --sh-faint:rgba(255,255,255,.32);
  --sh-safe:env(safe-area-inset-bottom, 0px);
}

/* ------------------------------------------------------------
   1. The mobile tab bar
   A new component. Hidden entirely above 860px, so desktop is
   exactly as it was.
   ------------------------------------------------------------ */
.sh-tabbar { display:none; }

@media (max-width: 860px) {
  .sh-tabbar {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90;
    background:rgba(8,10,9,.94); backdrop-filter:blur(14px);
    border-top:1px solid var(--sh-line);
    padding:7px 4px calc(7px + var(--sh-safe));
  }
  .sh-tabbar a {
    position:relative; flex:1;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 2px; text-decoration:none;
    color:var(--sh-faint); font-size:10.5px; font-weight:600;
    -webkit-tap-highlight-color:transparent;
  }
  .sh-tabbar a svg { width:21px; height:21px; stroke-width:1.9; }
  .sh-tabbar a.on { color:var(--sh-green); }
  .sh-tabbar a.on::before {
    content:''; position:absolute; top:0; width:26px; height:2px;
    border-radius:0 0 3px 3px; background:var(--sh-green);
  }
  .sh-tabbar a:active { transform:scale(.94); }

  /* Room for the bar so it never covers the end of a page. */
  body { padding-bottom:calc(66px + var(--sh-safe)); }
}

/* ------------------------------------------------------------
   2. Phone ergonomics
   Only properties style.css leaves unset at these sizes.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  /* iOS zooms the page when a field's text is under 16px. */
  input, select, textarea { font-size:16px; }

  /* A comfortable thumb target is 44px; this raises only what falls short. */
  input[type=submit], button[type=submit] { min-height:46px; }
}

/* ------------------------------------------------------------
   3. Password reveal
   New control on the login and register forms.
   ------------------------------------------------------------ */
.pw-wrap { position:relative; }
.pw-wrap input { padding-right:60px; }
.pw-toggle {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:9px 12px;
  color:var(--sh-faint); font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
}
.pw-toggle:hover { color:#fff; }

/* ------------------------------------------------------------
   4. Focus states
   Keyboard users could not see where they were. :focus-visible
   only shows for keyboard navigation, so mouse users see no change.
   ------------------------------------------------------------ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--sh-green);
  outline-offset:2px;
  border-radius:6px;
}

/* ------------------------------------------------------------
   5. System polish
   ------------------------------------------------------------ */
::selection { background:rgba(29,158,117,.32); color:#fff; }

* { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:100px; }
*::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.24); }

/* Anyone who has asked their device for less motion gets it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* A skeleton class for loading states. Does nothing unless applied. */
.sk {
  background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 37%,rgba(255,255,255,.04) 63%);
  background-size:400% 100%;
  animation:sh-wave 1.4s ease infinite;
  border-radius:10px;
}
@keyframes sh-wave { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }

/* ------------------------------------------------------------
   6. The page loader
   A new component — no selector here exists in style.css.
   Hidden by default: only the script in page-loader.php reveals
   it, so a visitor without JavaScript never sees it at all.
   ------------------------------------------------------------ */
.sh-loader {
  position:fixed; inset:0; z-index:9999;
  display:none;
  align-items:center; justify-content:center;
  background:#080a09;
}
.sh-loading .sh-loader { display:flex; }

.sh-loader-out { opacity:0; transition:opacity .4s ease; pointer-events:none; }

/* Nothing behind the loader scrolls while it is up. */
.sh-loading { overflow:hidden; }

.sh-loader-inner {
  display:flex; flex-direction:column; align-items:center; gap:17px;
  animation:sh-loader-in .45s ease both;
}
@keyframes sh-loader-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* The mark: a ring that turns, and the bolt from the Shrine button. */
.sh-mark { width:54px; height:54px; color:#1D9E75; }
.sh-mark svg { width:100%; height:100%; display:block; }
.sh-mark-arc { transform-origin:50% 50%; animation:sh-spin 1.15s cubic-bezier(.62,.05,.36,.95) infinite; }
@keyframes sh-spin { to { transform:rotate(360deg); } }
.sh-mark-bolt { animation:sh-bolt 1.8s ease-in-out infinite; transform-origin:50% 50%; }
@keyframes sh-bolt { 0%,100% { opacity:.55; } 50% { opacity:1; } }

.sh-loader-word {
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-size:14.5px; font-weight:700; letter-spacing:-.01em;
  color:rgba(255,255,255,.9);
}
.sh-loader-word span { color:#1D9E75; }

/* A bar that shows movement without pretending to know the percentage —
   an honest indeterminate sweep rather than a fake progress figure. */
.sh-loader-bar {
  width:132px; height:3px; border-radius:100px;
  background:rgba(255,255,255,.07); overflow:hidden;
}
.sh-loader-bar > i {
  display:block; width:42%; height:100%; border-radius:100px;
  background:linear-gradient(90deg, transparent, #1D9E75 45%, #43d6a3 55%, transparent);
  animation:sh-sweep 1.25s ease-in-out infinite;
}
@keyframes sh-sweep {
  0%   { transform:translateX(-115%); }
  100% { transform:translateX(275%); }
}

/* Reduced motion: keep the loader, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .sh-mark-arc, .sh-mark-bolt, .sh-loader-bar > i, .sh-loader-inner { animation:none; }
  .sh-loader-bar > i { width:100%; background:#1D9E75; opacity:.6; }
}