/* ============================================================
   SALONIQA — Trial Enforcement P3 (subscription/paywall UX)
   Additive styles. Uses existing design tokens; dir-agnostic (logical props);
   respects prefers-reduced-motion; visible focus; mobile + desktop.
   ============================================================ */

.sq-sub-banner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 24px;
  font-family:var(--font-body, inherit); font-size:14px; line-height:1.4;
  border-block-end:1px solid var(--line, #e6e0d8);
}
.sq-sub-banner[hidden]{ display:none; }
.sq-sub-banner .sq-sub-txt{ flex:1 1 auto; min-inline-size:0; }

/* active trial — discreet, non-alarming */
.sq-sub-banner.is-trial{
  background:var(--gold-soft, #fbf4e3);
  color:var(--ink, #2b2622);
}
.sq-sub-banner.is-trial .sq-sub-txt strong{ font-weight:700; }

/* expired — clear but not destructive-red panic; uses danger accent sparingly */
.sq-sub-banner.is-expired{
  background:var(--sq-danger-bg, #fdecec);
  color:var(--sq-danger, #b3261e);
}
.sq-sub-banner.is-expired .sq-sub-txt{ color:var(--ink, #2b2622); }
.sq-sub-banner.is-expired .sq-sub-txt strong{ color:var(--sq-danger, #b3261e); }

/* CTA — shared with the emerald action language */
.sq-sub-cta{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 16px; border-radius:999px;
  background:var(--emerald, #1f6b53); color:#fff; text-decoration:none;
  font-weight:600; font-size:13px; white-space:nowrap;
  transition:background var(--sq-dur-1, .15s) ease;
}
.sq-sub-cta:hover{ background:var(--emerald-deep, #164e3c); }
.sq-sub-cta:focus-visible{ outline:2px solid var(--emerald, #1f6b53); outline-offset:2px; }

/* settings Abonnement card enrichment */
.sq-sub-status-line{
  margin-block-start:10px; font-size:14px; color:var(--ink-70, #5a534c);
}
.sq-sub-status-line .sq-sub-k{ font-weight:600; color:var(--ink, #2b2622); }
.sq-sub-choose{
  display:inline-flex; margin-block-start:12px; padding:8px 16px; border-radius:999px;
  background:var(--emerald, #1f6b53); color:#fff; text-decoration:none; font-weight:600; font-size:13px;
}
.sq-sub-choose:hover{ background:var(--emerald-deep, #164e3c); }
.sq-sub-choose:focus-visible{ outline:2px solid var(--emerald, #1f6b53); outline-offset:2px; }

/* expired: visually mark disabled write forms/controls that opt in via [data-sq-write] */
:root.sq-sub-expired [data-sq-write]{
  opacity:.55; pointer-events:none; cursor:not-allowed;
}
/* locked write controls (JS-driven, accessible) — reads/nav are never locked */
.sq-locked,
[aria-disabled="true"].sq-locked{
  opacity:.55; cursor:not-allowed;
}
.sq-locked:not(:disabled){ pointer-events:none; }  /* non-<button> controls that use aria-disabled */

/* small screens */
@media (max-width:768px){
  .sq-sub-banner{ padding:9px 16px; font-size:13px; }
}
@media (max-width:375px){
  .sq-sub-banner{ gap:8px; }
  .sq-sub-cta{ inline-size:100%; }
}

@media (prefers-reduced-motion: reduce){
  .sq-sub-cta{ transition:none; }
}