/* ══════════════════════════════════════════════════════════════════════════
   ClassPhoto Suite — the shared license gate.

   Loaded by all four apps alongside /shared/suite-license.js. The look is
   lifted straight from the original ClassPhoto gate (white card on a cool
   gradient, DM Sans / Outfit, blue-500 accents) so a photographer who has
   seen one of these screens recognises the other three instantly.

   Everything is prefixed .cps- so it cannot collide with an app's own CSS.
   The apps hide their own container until the gate unlocks them.
   ══════════════════════════════════════════════════════════════════════════ */

.cps-gate {
  position: fixed; inset: 0; z-index: 10000;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f5f6f8 0%, #e8ecf1 100%);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  padding: 20px;
  overflow-y: auto;
}
.cps-gate[hidden] { display: none; }
.cps-gate * { box-sizing: border-box; }

.cps-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.06);
  padding: 44px 40px 30px;
  max-width: 460px; width: 100%;
  text-align: center;
  margin: auto;
}
/* While the stored key is being re-checked against LemonSqueezy the card
   stays put but goes quiet, so nobody starts typing over a check that is
   about to let them in anyway. */
.cps-card.cps-checking { opacity: .55; pointer-events: none; }

.cps-logo { width: 80px; height: 62px; margin: 0 auto 22px; }
.cps-logo svg { width: 100%; height: 100%; display: block; }

.cps-card h1 {
  font-size: 27px; font-weight: 700; color: #0F172A;
  letter-spacing: -0.5px; margin: 0 0 8px; line-height: 1.2;
}
.cps-desc {
  font-family: 'Outfit', -apple-system, sans-serif;
  font-size: 15px; color: #64748B; line-height: 1.5; margin: 0 0 24px;
}
.cps-desc strong { color: #334155; font-weight: 600; }

/* ── Lock panel: expired / disabled / wrong product / offline too long ── */
.cps-lock {
  background: #FEF2F2; border: 1px solid #FECACA; border-radius: 10px;
  padding: 14px 16px; margin: 0 0 20px; text-align: left;
}
.cps-lock[hidden] { display: none; }
.cps-lock-title {
  font-size: 14px; font-weight: 700; color: #991B1B; margin-bottom: 4px;
}
.cps-lock-msg {
  font-family: 'Outfit', -apple-system, sans-serif;
  font-size: 13.5px; color: #7F1D1D; line-height: 1.5;
}
.cps-lock-cta { margin-top: 8px; }
.cps-lock-cta a {
  color: #B91C1C; font-weight: 600; font-size: 13px; text-decoration: none;
}
.cps-lock-cta a:hover { text-decoration: underline; }

/* ── Key field and the button ── */
.cps-field { position: relative; margin-bottom: 14px; }
.cps-input {
  width: 100%; padding: 14px 16px;
  border: 1.5px solid #E2E8F0; border-radius: 8px;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 15px; color: #0F172A; letter-spacing: .5px;
  transition: border-color .2s, box-shadow .2s;
}
.cps-input:focus { outline: none; border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.cps-input-error { border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,.1); }

.cps-btn {
  width: 100%; padding: 14px; border: none; border-radius: 8px;
  background: #1E293B; color: #fff;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: all .25s ease;
}
.cps-btn:hover { background: #0F172A; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,.2); }
.cps-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

.cps-spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: cpsSpin .6s linear infinite;
  vertical-align: middle; margin-right: 8px;
}
@keyframes cpsSpin { to { transform: rotate(360deg); } }

.cps-err {
  color: #EF4444; font-size: 13px; margin-top: 12px; line-height: 1.45;
  font-family: 'Outfit', -apple-system, sans-serif; display: none;
}
.cps-err.show { display: block; }

/* ── Help row, buy line, Suite upsell ── */
.cps-help { margin-top: 18px; font-size: 13px; font-family: 'Outfit', -apple-system, sans-serif; }
.cps-help a, .cps-buy a, .cps-upsell a, .cps-switch a {
  color: #3B82F6; text-decoration: none;
}
.cps-help a:hover, .cps-buy a:hover, .cps-upsell a:hover, .cps-switch a:hover { text-decoration: underline; }
.cps-dot { color: #CBD5E1; margin: 0 8px; }

.cps-buy {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid #F1F5F9;
  font-size: 14px; font-weight: 600; font-family: 'Outfit', -apple-system, sans-serif;
}
.cps-upsell {
  margin-top: 7px; font-size: 12.5px; color: #94A3B8;
  font-family: 'Outfit', -apple-system, sans-serif;
}

/* ── Product switcher: the other three apps are one click away ── */
.cps-switch {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid #F1F5F9;
  font-size: 12.5px; font-family: 'Outfit', -apple-system, sans-serif;
  color: #94A3B8;
}
.cps-here { color: #0F172A; font-weight: 600; }

.cps-foot {
  margin-top: 12px; font-size: 11.5px; color: #CBD5E1;
  font-family: 'Outfit', -apple-system, sans-serif; letter-spacing: .2px;
}

/* ── Trial banner, pinned to the top of the app once it unlocks ── */
.cps-banner {
  background: #1a2d4d; color: #fff; text-align: center;
  padding: 9px 16px; font-size: .92em;
  position: sticky; top: 0; z-index: 900;
  font-family: 'DM Sans', -apple-system, sans-serif;
}
.cps-banner[hidden] { display: none; }
.cps-banner strong { font-weight: 700; }
.cps-banner-link { color: #ffd28a; font-weight: 700; text-decoration: none; }
.cps-banner-link:hover { text-decoration: underline; }
.cps-banner .cps-dot { color: rgba(255,255,255,.4); }

/* ── Deactivate, bottom-right corner, faded ── */
.cps-logout {
  position: fixed; bottom: 14px; right: 14px; z-index: 9999;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 8px;
  padding: 6px 12px;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 12px; color: #94A3B8; cursor: pointer; opacity: .6;
  transition: all .2s; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.cps-logout[hidden] { display: none; }
.cps-logout:hover { color: #EF4444; border-color: #EF4444; opacity: 1; }
.cps-logout-offline { color: #B45309; border-color: #FDE68A; opacity: .85; cursor: default; }

/* The Principal's Book drawer, its modals and its progress box all land in
   this same corner, and a fixed button at z-index 9999 wins every hit test.
   book/app/ui.js puts .overlay-open on <body> whenever one of them is up;
   without this a principal paging through a class hits "Deactivate" instead
   of "Next ›". Harmless in the other three apps, which never set the class. */
body.overlay-open .cps-logout { display: none !important; }

@media (max-width: 520px) {
  .cps-card { padding: 32px 22px 24px; }
  .cps-card h1 { font-size: 23px; }
}

.cps-lock-note {
  margin-top: 8px; font-size: 12.5px; color: #7F1D1D; opacity: .85;
  font-family: 'Outfit', -apple-system, sans-serif; line-height: 1.45;
}

/* ── "Add another key", shown over a running app ── */
.cps-cancel { margin-top: 16px; font-size: 13px; font-family: 'Outfit', -apple-system, sans-serif; }
.cps-cancel[hidden] { display: none; }
.cps-cancel a { color: #64748B; text-decoration: none; }
.cps-cancel a:hover { color: #3B82F6; text-decoration: underline; }

.cps-addkey {
  position: fixed; bottom: 14px; right: 158px; z-index: 9999;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 8px;
  padding: 6px 12px;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 12px; color: #94A3B8; cursor: pointer; opacity: .6;
  transition: all .2s; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.cps-addkey[hidden] { display: none; }
.cps-addkey:hover { color: #3B82F6; border-color: #3B82F6; opacity: 1; }
/* Same corner, same overlay problem as the Deactivate button. */
body.overlay-open .cps-addkey { display: none !important; }

/* ── Offline notice: a line the customer can actually read ──────────────
   The faded corner button changing its label is not a notice, it is a
   rumour. This says what happened and how long they have. */
.cps-offline {
  background: #FEF3C7; color: #78350F; text-align: center;
  padding: 9px 16px; font-size: .88em; line-height: 1.4;
  position: sticky; top: 0; z-index: 899;
  border-bottom: 1px solid #FDE68A;
  font-family: 'DM Sans', -apple-system, sans-serif;
}
.cps-offline[hidden] { display: none; }
.cps-offline strong { font-weight: 700; }

/* ── Page-level lock, for an app with no single container to hide ───────
   ClassPhoto IDs puts its header, main, footer and overlays straight on
   <body>, so there is nothing for the gate to flip. It ships with
   class="cps-locked" on <body> instead — every child is hidden except the
   gate's own chrome — and suite-license.js removes the class on unlock. */
body.cps-locked > *:not(.cps-gate):not(.cps-banner):not(.cps-logout):not(.cps-addkey):not(.cps-offline) {
  display: none !important;
}