/* TippFlug · guest.css — guest mode (5 minutes a day without sign-up), free sign-up, call-outs */

/* "Gratis" lock chip for guests (teal) next to the gold PRO chip */
.pro-chip.free-chip { background: var(--grad); color: #fff; }

/* floating guest clock with the free sign-up */
.guest-pill { position: fixed; left: 16px; bottom: 16px; z-index: 45; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px 8px 12px;
  border-radius: 99px; border: 1px solid color-mix(in srgb, var(--primary-2) 45%, transparent); cursor: pointer; font: inherit; color: var(--text);
  background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow); }
.guest-pill .ic { color: var(--primary-2); }
.guest-pill .gp-time { font-weight: 900; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.guest-pill .gp-label { color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.guest-pill .gp-cta { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 4px; padding: 4px 10px; border-radius: 99px; background: var(--grad); color: #fff; font-weight: 900; font-size: 0.82rem; }
.guest-pill .gp-cta .ic { color: #fff; width: 0.95em; height: 0.95em; }
.guest-pill:hover { border-color: var(--primary-2); }
.guest-pill.low { border-color: #fbbf24; animation: pillPulse 1.4s ease-in-out infinite; }
.guest-pill.low .gp-time { color: #fde68a; }
@keyframes pillPulse { 50% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.18), var(--shadow); } }
/* desktop: next to the sidebar; Bibo keeps the opposite corner (also in right-to-left mode) */
.guest-pill { left: 266px; }
[dir="rtl"] .guest-pill { left: auto; right: 266px; }
[dir="rtl"] .bibo { right: auto; left: 22px; }
[dir="rtl"] .bibo.compact { transform-origin: bottom left; }
[dir="rtl"] .bibo-bubble { transform-origin: bottom left; border-radius: 18px 18px 18px 4px; }

/* home bar for guests is a button */
button.plan-bar { width: 100%; font: inherit; cursor: pointer; text-align: start; }
.plan-bar.guest { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 26%, transparent), color-mix(in srgb, #10b981 18%, transparent)); border-color: color-mix(in srgb, var(--primary-2) 45%, transparent); }
.plan-bar.guest > .ic { color: var(--primary-2); }
.plan-bar.guest .plan-bar-cta { color: var(--primary-2); }
.plan-bar .gp-left { font-variant-numeric: tabular-nums; }

/* plans: guest note + highlighted free card */
.plan-guest { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px;
  background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: 0.9rem; text-align: center; }
.plan-guest .ic { color: var(--primary-2); }
.plan.free-plan { border: 2px solid color-mix(in srgb, var(--primary-2) 60%, transparent); box-shadow: 0 0 28px rgba(45, 212, 191, 0.18); }

/* free sign-up window */
.promo.signup h2 { max-width: 30ch; }
.signup-benefits { list-style: none; padding: 0; margin: 6px auto 4px; display: flex; flex-direction: column; gap: 6px; width: fit-content; max-width: 100%; text-align: start; }
.signup-benefits li { display: flex; align-items: flex-start; gap: 8px; font-weight: 800; color: var(--text); }
.signup-benefits .ic { margin-top: 3px; }
.signup-benefits .ic { color: var(--primary-2); }
.signup-form { width: min(560px, 100%); display: flex; flex-direction: column; gap: 10px; margin-top: 10px; text-align: start; }
.signup-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.signup-form input[type="email"], .signup-form input[type="text"], .signup-form input[type="tel"] { font: inherit; font-weight: 700; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 12px; padding: 10px 14px; min-height: 46px; width: 100%; }
.signup-form input:focus { outline: none; border-color: var(--primary-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-2) 25%, transparent); }
.signup-form .check { justify-content: flex-start; align-items: flex-start; min-height: 32px; font-size: 0.92rem; }
.signup-form .check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; }
.signup-form .check a { color: var(--primary-2); }
.signup-error { min-height: 1.3em; color: var(--err); font-weight: 800; font-size: 0.92rem; }
.signup-note { display: flex; gap: 6px; align-items: center; justify-content: center; color: var(--muted); font-size: 0.85rem; margin-top: 8px; }
.signup-note .ic { color: var(--ok); }

/* call-out inside result windows */
.guest-callout { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; text-align: start; width: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, #10b981 14%, transparent)); border: 1px solid color-mix(in srgb, var(--primary-2) 40%, transparent); }
.guest-callout .gc-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.guest-callout .gc-text span { color: var(--muted); font-size: 0.9rem; }

/* free version: ads for Pro (gold accent, labelled as advertising) */
.ad-callout { position: relative; padding-top: 22px;
  background: linear-gradient(90deg, color-mix(in srgb, #f59e0b 16%, transparent), color-mix(in srgb, var(--primary) 14%, transparent)); border-color: color-mix(in srgb, #fbbf24 45%, transparent); }
.ad-label { position: absolute; top: 6px; inset-inline-start: 16px; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.guest-pill.free { border-color: color-mix(in srgb, #fbbf24 55%, transparent); }
.guest-pill.free > .ic { color: #fbbf24; }
.guest-pill.free .gp-cta { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #3b2300; }
.guest-pill.free .gp-cta .ic { color: #3b2300; }

@media (max-width: 860px) {
  .guest-pill { bottom: 84px; left: 10px; }
  [dir="rtl"] .guest-pill { right: 10px; left: auto; }
  [dir="rtl"] .bibo { left: 10px; right: auto; }
  .guest-pill .gp-label { display: none; }
}
@media (max-width: 560px) {
  .signup-row { grid-template-columns: 1fr; }
  .guest-callout { flex-direction: column; align-items: stretch; text-align: center; }
}