/* =========================================================================
   CodesDen Apps — software suite pages (/apps)
   Loaded on top of style.css and built from its tokens, so the suite reads as
   part of the same site rather than a bolted-on portal.
   ========================================================================= */

.apps-shell { background: var(--slate-50); }

/* ---------- Scrolling promo strip (home page, above the hero) ----------
   Loaded from apps.css so the marketing pages that don't show it don't pay for
   it — index.php pulls this stylesheet in only when the strip renders. */
.promo-strip {
  display: block;
  overflow: hidden;
  background: linear-gradient(90deg, var(--slate-900) 0%, var(--brand-800) 50%, var(--slate-900) 100%);
  color: #fff;
  padding: 0.625rem 0;
  position: relative;
  /* Keeps the text off the very edge of a phone screen without clipping the
     animation, which needs the full width to travel across. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.promo-strip:hover { color: #fff; }

.promo-strip__track {
  display: flex;
  width: max-content;
  /* 2 identical runs sit side by side; translating by exactly -50% lands the
     second run precisely where the first began, so the loop has no seam. */
  animation: promo-scroll 34s linear infinite;
}
.promo-strip:hover .promo-strip__track { animation-play-state: paused; }

.promo-strip__run { display: flex; align-items: center; flex-shrink: 0; }

.promo-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.promo-strip__item svg { color: var(--amber-400); flex-shrink: 0; }
.promo-strip__dot { margin: 0 1.25rem; color: rgba(255, 255, 255, 0.35); }

@keyframes promo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Motion sickness and vestibular disorders are real, and a permanently moving
   band is one of the worst offenders. Honour the OS setting: same strip, same
   message, standing still and centred. */
@media (prefers-reduced-motion: reduce) {
  .promo-strip__track { animation: none; width: 100%; justify-content: center; }
  .promo-strip__run:nth-child(2) { display: none; }
  .promo-strip__run { flex-wrap: wrap; justify-content: center; row-gap: .25rem; }
  .promo-strip__run > .promo-strip__dot:last-child { display: none; }
}

/* ---------- Section scaffolding ---------------------------------------- */
.apps-section { padding: 4rem 0; }
.apps-section--tight { padding: 2.5rem 0; }

.apps-head { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
.apps-head__eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 0.75rem;
}
.apps-head h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.15; }
.apps-head h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.2; }
.apps-head p { margin-top: 1rem; color: var(--slate-600); font-size: 1.0625rem; }

/* ---------- Launch-offer hero ------------------------------------------ */
.apps-hero {
  background: linear-gradient(135deg, var(--slate-900) 0%, #16233b 55%, var(--brand-950) 100%);
  color: #fff;
  padding: 4rem 0 5rem;
}
.apps-hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.12; }
.apps-hero p { color: rgba(255, 255, 255, 0.78); font-size: 1.0625rem; margin-top: 1rem; max-width: 40rem; }

.apps-hero__inner { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62rem) {
  .apps-hero__inner { grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; }
}

/* The scarcity counter. Deliberately understated — a real number, not a
   blinking sales badge, because the audience is small-business owners who have
   seen every fake countdown on the internet. */
.apps-hero__offer {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.apps-hero__offer strong { color: var(--amber-400); }

.apps-hero__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2rem; }

.apps-hero__points { margin-top: 2rem; display: grid; gap: 0.75rem; }
.apps-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9375rem;
}
.apps-hero__points svg { color: var(--emerald-400); flex-shrink: 0; margin-top: 0.15rem; }

/* Glass panel on the hero's right — holds the offer summary. */
.apps-hero__card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  backdrop-filter: blur(8px);
}
.apps-hero__card h3 { color: #fff; font-size: 1.125rem; }
.apps-hero__card ol { display: grid; gap: 1.125rem; margin-top: 1.25rem; counter-reset: step; }
.apps-hero__card li {
  display: flex;
  gap: 0.875rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.apps-hero__step {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--brand-600);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* ---------- App cards --------------------------------------------------- */
.apps-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.app-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.app-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--slate-200); }
.app-card--soon { background: #fcfcfd; }

.app-card__top { display: flex; align-items: flex-start; gap: 1rem; }
.app-card__icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand-600);
}
.app-card--soon .app-card__icon { background: var(--slate-100); color: var(--slate-500); }

.app-card__name { font-size: 1.125rem; line-height: 1.3; }
.app-card__tagline { color: var(--slate-500); font-size: 0.875rem; margin-top: 0.25rem; }
.app-card__desc { color: var(--slate-600); font-size: 0.9375rem; margin-top: 1.125rem; line-height: 1.6; }

.app-card__features { margin-top: 1.25rem; display: grid; gap: 0.5rem; }
.app-card__features li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--slate-600);
}
.app-card__features svg { color: var(--emerald-600); flex-shrink: 0; margin-top: 0.2rem; }

.app-card__audience {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
  font-size: 0.8125rem;
  color: var(--slate-500);
}
.app-card__audience strong { color: var(--slate-700); font-weight: 600; }

/* Price sits directly above the button, pushed to the card's bottom so every
   card in a row lines its call-to-action up regardless of feature count. */
.app-card__foot { margin-top: auto; padding-top: 1.5rem; }
.app-card__price { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.app-card__price-now { font-size: 1.5rem; font-weight: 800; color: var(--slate-900); }
.app-card__price-was { font-size: 0.9375rem; color: var(--slate-400); text-decoration: line-through; }
.app-card__price-per { font-size: 0.875rem; color: var(--slate-500); }
.app-card__price-note { font-size: 0.8125rem; color: var(--emerald-600); font-weight: 600; margin-top: 0.375rem; }

.app-card__cta { margin-top: 1.125rem; display: flex; gap: 0.625rem; flex-wrap: wrap; }
.app-card__cta > * { flex: 1 1 auto; justify-content: center; }

/* ---------- Status pills ------------------------------------------------ */
.app-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.app-badge--trial   { background: var(--brand-50);    color: var(--brand-700); }
.app-badge--active  { background: var(--emerald-50);  color: var(--emerald-600); }
.app-badge--pending { background: #fffbeb;            color: #b45309; }
.app-badge--expired { background: var(--slate-100);   color: var(--slate-500); }
.app-badge--soon    { background: var(--slate-100);   color: var(--slate-500); }

/* ---------- Auth forms (login / register) ------------------------------- */
.apps-auth { padding: 3.5rem 0 5rem; }
.apps-auth__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) {
  .apps-auth__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.apps-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}
@media (min-width: 40rem) { .apps-card { padding: 2.5rem; } }

.apps-form { display: grid; gap: 1.125rem; margin-top: 1.5rem; }
.apps-form__row { display: grid; gap: 1.125rem; }
@media (min-width: 34rem) { .apps-form__row { grid-template-columns: 1fr 1fr; } }

.apps-field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-700);
  margin-bottom: 0.4375rem;
}
.apps-field__hint { font-weight: 400; color: var(--slate-400); }
.apps-field input[type="text"],
.apps-field input[type="email"],
.apps-field input[type="tel"],
.apps-field input[type="password"],
.apps-field select {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--slate-200);
  border-radius: 0.625rem;
  background: #fff;
  font-size: 0.9375rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.apps-field input:focus,
.apps-field select:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px var(--brand-50);
}

.apps-check { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.875rem; color: var(--slate-600); }
.apps-check input { margin-top: 0.2rem; flex-shrink: 0; }
.apps-check a { color: var(--brand-600); font-weight: 600; text-decoration: underline; }

.apps-alert {
  padding: 0.875rem 1rem;
  border-radius: 0.625rem;
  font-size: 0.9375rem;
  border: 1px solid transparent;
}
.apps-alert--error   { background: var(--brand-50);   border-color: var(--brand-200); color: var(--brand-800); }
.apps-alert--success { background: var(--emerald-50); border-color: var(--emerald-100); color: #065f46; }
.apps-alert--info    { background: #eff6ff;           border-color: #bfdbfe; color: #1e40af; }

.apps-form__submit { width: 100%; justify-content: center; margin-top: 0.25rem; }
.apps-form__foot { margin-top: 1.5rem; text-align: center; font-size: 0.9375rem; color: var(--slate-500); }
.apps-form__foot a { color: var(--brand-600); font-weight: 600; }

/* ---------- Sign in with Google ----------------------------------------
   Deliberately NOT styled as .btn-primary. Google's branding terms require
   their mark to sit on a plain white or plain grey surface, and a brand-red
   button with a four-colour logo in it would look wrong anyway. White with the
   same border and radius as the inputs below reads as "another way in" rather
   than as the main call to action, which is exactly its role. */
.apps-google-btn {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.6875rem 1rem;
  border: 1px solid var(--slate-200);
  border-radius: 0.625rem;
  background: #fff;
  color: var(--slate-700);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.apps-google-btn:hover { border-color: var(--slate-300); background: var(--slate-50); }
.apps-google-btn:focus-visible {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px var(--brand-50);
}
.apps-google-btn svg { flex-shrink: 0; }

/* "ya" between the two ways of signing in, with a rule either side. */
.apps-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  font-size: 0.8125rem;
  color: var(--slate-400);
}
.apps-or::before,
.apps-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--slate-200);
}

/* The divider already provides the gap, so the form must not add its own. */
.apps-or + .apps-form { margin-top: 0; }

/* ---------- Language switcher ------------------------------------------
   Two options, so a pill of two links rather than a dropdown — one tap on a
   phone instead of open, scroll, choose. */
.lang-switch {
  display: inline-flex;
  padding: 0.1875rem;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  background: var(--slate-50);
  font-size: 0.8125rem;
  line-height: 1;
}
.lang-switch__opt {
  padding: 0.4375rem 0.875rem;
  border-radius: 999px;
  color: var(--slate-500);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-switch__opt:hover { color: var(--slate-700); }
.lang-switch__opt.is-on {
  background: #fff;
  color: var(--slate-900);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}
.lang-switch__opt:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 1px;
}

/* Top-right of the /free-software hero. That hero is dark, so the pill is
   restyled for it rather than reusing the light version — a white pill there
   would pull the eye before the headline does. */
.apps-hero__lang { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; }
.apps-hero__lang .lang-switch {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
  font-size: 0.75rem;
}
.apps-hero__lang .lang-switch__opt { color: rgba(255, 255, 255, 0.65); padding: 0.375rem 0.75rem; }
.apps-hero__lang .lang-switch__opt:hover { color: #fff; }
.apps-hero__lang .lang-switch__opt.is-on {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: none;
}

/* Reassurance column beside the signup form — the objections a shop owner
   actually has, answered before they fill anything in. */
.apps-why { display: grid; gap: 1.5rem; }
.apps-why__item { display: flex; gap: 1rem; }
.apps-why__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--brand-600);
}
.apps-why__item h3 { font-size: 1rem; }
.apps-why__item p { color: var(--slate-600); font-size: 0.9375rem; margin-top: 0.25rem; line-height: 1.55; }

/* ---------- Dashboard --------------------------------------------------- */
.apps-dash__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0 2rem;
}
.apps-dash__hello h1 { font-size: 1.5rem; }
.apps-dash__hello p { color: var(--slate-500); font-size: 0.9375rem; margin-top: 0.25rem; }
.apps-dash__actions { display: flex; gap: 0.625rem; flex-wrap: wrap; }

/* ---------- Payment / activation --------------------------------------- */
.apps-pay { display: grid; gap: 2rem; }
@media (min-width: 55rem) { .apps-pay { grid-template-columns: 0.9fr 1.1fr; gap: 3rem; } }

.apps-qr {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.apps-qr img {
  width: 100%;
  max-width: 15rem;
  margin: 1rem auto;
  border-radius: 0.75rem;
}
.apps-qr__upi {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.625rem;
  word-break: break-all;
  color: var(--slate-700);
}
.apps-steps { display: grid; gap: 1.25rem; counter-reset: paystep; }
.apps-steps li { display: flex; gap: 1rem; }
.apps-steps li h3 { font-size: 1rem; }
.apps-steps li p { color: var(--slate-600); font-size: 0.9375rem; margin-top: 0.25rem; line-height: 1.55; }

/* ---------- Support strip ---------------------------------------------- */
.apps-support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
}
.apps-support h3 { font-size: 1.0625rem; }
.apps-support p { color: var(--slate-500); font-size: 0.875rem; margin-top: 0.25rem; }
.apps-support__hours { font-size: 0.8125rem; color: var(--slate-400); margin-top: 0.5rem; }