/* ============================================================================
   PRODUCT CONTROL CENTER  (.cc-*)
   ----------------------------------------------------------------------------
   A reusable demo "control center" screen + guided spotlight tour for the 12
   product marketing pages. This is a faithful port of the HOME-PAGE control
   center (`.hm-cc` / `.hm-tablet` / `.hm-tour-*` in home.css) into a neutral
   namespace so the home page itself is never touched.

   Theming: inherits the page-wide accent vars the product hero already sets on
   `<main class="<ns>">` — `--pt-accent`, `--pt-grad-from`, `--pt-grad-to`,
   `--pt-glow` — so each product's control center glows in its own colour and
   sits natively beside the page's hero tablet. The guided-tour UI stays cyan
   (the shared tertiary accent) exactly like the home page.

   Loaded once per page by partials/product_control_center.php.
   ============================================================================ */

/* ---- section shell + header ------------------------------------------------ */
.cc-section { padding: 4rem 1.25rem 4.5rem; text-align: center; }
.cc-head { max-width: 60ch; margin: 0 auto 2rem; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.cc-section-label {  /* picks up the shared [class*="-section-label"] glow + sheen */
  display: inline-block; font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em; font-size: .95rem; color: var(--pt-accent, var(--accent-cyan));
  background: color-mix(in srgb, var(--pt-grad-from, var(--accent-violet)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--pt-grad-from, var(--accent-violet)) 34%, transparent);
}
.cc-h2 {  /* override the global `h2` rule (uppercase + orange border-bottom + inline-block) */
  font-family: var(--font-display); font-weight: 700; line-height: 1.18;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); color: var(--heading-color);
  margin: 0; padding: 0; border-bottom: none; display: block;
  text-transform: none; letter-spacing: normal;
}
.cc-sub { font-size: clamp(1rem, 1.7vw, 1.18rem); color: var(--text-secondary); line-height: 1.6; margin: 0; max-width: 56ch; }
/* The "play tour" button is just a JS hook + <button> reset; it wears the shared
   .pt-cta look like every other hero button (identical colour / size / shape). */
.cc-tour-btn { font-family: inherit; }

/* ---- hero buttons: SAME .pt-cta base — only the hover EFFECT differs (for fun) ---- */
.pt-cta.cc-fx-rise:hover {           /* lifts straight up */
  transform: translateY(-6px) scale(1.02); filter: brightness(1.05);
  box-shadow: 0 26px 56px -10px var(--pt-glow), inset 0 1px 0 rgba(255,255,255,.25);
  animation-play-state: paused;
}
.pt-cta.cc-fx-pop:hover {            /* springy pop + a tiny tilt */
  transform: scale(1.1) rotate(-1.5deg); filter: brightness(1.08);
  animation-play-state: paused;
}
.pt-cta.cc-fx-pop:hover i { transform: rotate(90deg) scale(1.12); }  /* spin the play icon */

/* RTL (Hebrew): the "play tour" triangle points in the reading direction (left). */
[dir="rtl"] .cc-tour-btn .fa-play-circle-o { transform: scaleX(-1); }
[dir="rtl"] .pt-cta.cc-fx-pop:hover .fa-play-circle-o { transform: scaleX(-1) rotate(90deg) scale(1.12); }

/* ---- tablet wrapping the control center (mirrors .hm-tablet / .pt-tablet) --- */
.cc-stage { width: min(94vw, 1040px); max-width: 100%; margin: 0 auto; position: relative; }
/* lower the tablet a touch when it sits inside the hero (below the buttons) */
.pt-hero .cc-stage { margin-top: 2rem; }
.cc-tablet {  /* glow identical to the page's screenshot tablet (.pt-tablet) + the phone — page accent via --pt-glow */
  position: relative; padding: clamp(10px,1.6vw,20px); border-radius: clamp(20px,2.6vw,34px);
  background: linear-gradient(155deg, #2b303b 0%, #15181f 58%, #1f232d 100%);
  box-shadow: 0 30px 70px rgba(0,0,0,.55),
              0 0 60px var(--pt-glow, color-mix(in srgb, var(--accent-violet) 45%, transparent)),
              inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.05);
}
.cc-tablet::after {  /* front-camera dot */
  content: ''; position: absolute; top: clamp(5px,0.8vw,10px); left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #5b6472, #0a0c10); z-index: 5;
}
.cc-tablet::before {  /* colourful cycling LED strip on the frame */
  content: ''; position: absolute; top: clamp(6px,1vw,12px); left: 16%; right: 16%; height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--secondary-color), var(--accent-violet), var(--accent-amber), var(--accent-cyan));
  background-size: 200% 100%; animation: navGradientFlow 8s linear infinite; z-index: 5;
}

/* ---- the "screen": demo control center ------------------------------------- */
.cc-screen {
  position: relative; background: var(--surface-elevated); border: none;
  border-radius: 12px; padding: 1.1rem; overflow: hidden; text-align: start;
}
.cc-bar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.cc-dots { display: inline-flex; gap: 5px; }
.cc-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--glass-border-hover); }
.cc-dots i:nth-child(1){ background: #ff5f57; } .cc-dots i:nth-child(2){ background: #febc2e; } .cc-dots i:nth-child(3){ background: #28c840; }
.cc-title { font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--heading-color); margin-inline-end: auto; }
.cc-badges { display: inline-flex; align-items: center; gap: .45rem; }
.cc-live { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; color: var(--accent-emerald); }
.cc-demo {
  font-size: .62rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-amber); padding: .12rem .45rem; border-radius: 6px;
  background: color-mix(in srgb, var(--accent-amber) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-amber) 32%, transparent);
}
/* status dots: the bar "live" bulb stays locked green; connection dots each take
   a different colour (--dotc, set per-pill) with a staggered pulse (--i). */
.cc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dotc, var(--accent-emerald));
  animation: ccDotPulse 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.3s); }
@keyframes ccDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dotc, var(--accent-emerald)) 60%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--dotc, var(--accent-emerald)) 0%, transparent); }
}

/* zone label (tiny heading above flow / action blocks) */
.cc-zone-label { display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .04em; }
.cc-zone-label i { color: var(--pt-grad-from, var(--accent-violet)); }

/* KPIs — "what's happening now" */
.cc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-bottom: .7rem; }
.cc-kpi { display: flex; align-items: center; gap: .55rem; padding: .6rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; }
.cc-kpi-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--kc); background: color-mix(in srgb, var(--kc) 15%, transparent); font-size: .9rem; }
.cc-kpi-meta { display: flex; flex-direction: column; min-width: 0; }
.cc-kpi-label { font-size: .68rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-kpi-val { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--heading-color); }
.cc-kpi-sub { font-size: .6rem; color: var(--text-secondary); opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .05rem; }

/* Flow strip — the product's path / funnel / pipeline */
.cc-flow-wrap { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: .65rem .75rem; margin-bottom: .7rem; }
.cc-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .15rem; }
.cc-flow-step { display: inline-flex; align-items: center; white-space: nowrap; gap: .35rem; font-size: .72rem; font-weight: 600; color: var(--text-color); padding: .3rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--pt-grad-from, var(--accent-violet)) 9%, transparent); border: 1px solid color-mix(in srgb, var(--pt-grad-from, var(--accent-violet)) 22%, transparent); }
.cc-flow-step i { color: var(--pt-grad-from, var(--accent-violet)); font-size: .74rem; }
.cc-flow-sep { color: var(--text-secondary); opacity: .55; font-size: .72rem; padding: 0 .05rem; }
html:not([dir="rtl"]) .cc-flow-sep { transform: scaleX(-1); }  /* arrow points forward in LTR */
[dir="rtl"] .cc-flow-step .fa-sign-in { transform: scaleX(-1); }  /* "enter site" arrow points left = with the RTL flow */

/* the path "walks": a travelling accent highlight sweeps step -> arrow -> step,
   giving a sense of progression along the axis (per-step delay via --i). */
.cc-flow-step { animation: ccFlowWalk 4.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.44s); }
.cc-flow-sep  { animation: ccFlowSepWalk 4.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.44s + .22s); }
@keyframes ccFlowWalk {
  0%, 60%, 100% { background: color-mix(in srgb, var(--pt-grad-from, var(--accent-violet)) 9%, transparent);
                  border-color: color-mix(in srgb, var(--pt-grad-from, var(--accent-violet)) 22%, transparent);
                  color: var(--text-color); box-shadow: none; }
  12%, 22%      { background: color-mix(in srgb, var(--pt-grad-from, var(--accent-violet)) 34%, transparent);
                  border-color: var(--pt-grad-from, var(--accent-violet));
                  color: var(--heading-color); box-shadow: 0 0 16px var(--pt-glow, transparent); }
}
@keyframes ccFlowSepWalk {
  0%, 60%, 100% { color: var(--text-secondary); opacity: .5; }
  14%, 20%      { color: var(--pt-grad-from, var(--accent-violet)); opacity: 1; }
}

/* Action / opportunity block — "the problem the system identifies + items to act on" */
.cc-block { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: .65rem .75rem; margin-bottom: .7rem; }
.cc-block-head { display: flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 700; color: var(--accent-amber); margin-bottom: .55rem; }
.cc-task { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .5rem 0; border-top: 1px solid var(--glass-border); text-align: start; }
.cc-task:first-of-type { border-top: none; }
.cc-task-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .12rem; align-items: flex-start; }
.cc-task-text { font-size: .8rem; color: var(--text-color); }
.cc-task-sub { font-size: .68rem; color: var(--text-secondary); opacity: .9; line-height: 1.35; }
.cc-task-btn { flex: 0 0 auto; min-width: 7.5rem; justify-content: center; display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; color: #fff; padding: .3rem .6rem; border-radius: 12px; background: var(--accent-emerald); box-shadow: 0 4px 12px var(--accent-emerald-glow); }
@media (max-width: 992px) {
  .cc-task-btn { min-width: 6rem; padding-inline: .5rem; }
  /* Keep the recommendation sentences aligned to the start (right in RTL), not
     centered. The global `main [class*="-text"] { margin-inline: auto }` rule
     (styles.css) matches .cc-task-text — a flex item, so it shrinks to content and
     the auto inline-margins center it. width:100% removes the free space so the
     auto-margin collapses to 0. Mirrors the home page's .hm-cc-task mobile fix. */
  .cc-task-meta { align-items: flex-start; text-align: start; }
  .cc-task-text, .cc-task-sub { width: 100%; text-align: start; }
}

/* Roby recommends — insight bar */
.cc-insight { display: flex; align-items: flex-start; gap: .55rem; padding: .6rem .7rem; margin-bottom: .7rem; border-radius: 12px;
  background: color-mix(in srgb, var(--secondary-color) 12%, transparent); border: 1px solid color-mix(in srgb, var(--secondary-color) 26%, transparent); }
.cc-insight > i { color: var(--accent-amber); margin-top: 2px; }
.cc-insight-body { display: flex; flex-direction: column; gap: .1rem; }
.cc-insight-label { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--secondary-color); }
.cc-insight-text { font-size: .8rem; color: var(--text-color); line-height: 1.4; }

/* Connections — system pills */
.cc-status { display: flex; flex-wrap: wrap; gap: .4rem; }
.cc-sys { display: inline-flex; align-items: center; white-space: nowrap; gap: .35rem; font-size: .72rem; font-weight: 600; color: var(--text-secondary);
  padding: .3rem .55rem; border-radius: 12px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.cc-sys i { color: var(--text-secondary); font-size: .8rem; }

/* "message the screen proves" — closing line under the tablet */
.cc-proof { max-width: 60ch; margin: 1.4rem auto 0; font-size: .95rem; line-height: 1.6; color: var(--text-secondary); }
.cc-proof strong { color: var(--heading-color); font-weight: 700; }

/* ---- guided tour (mirrors .hm-tour-*) -------------------------------------- */
.cc-screen.cc-tour-dim > * { transition: opacity .45s ease, filter .45s ease; opacity: .25; filter: blur(1.5px); }
.cc-screen.cc-tour-dim > .cc-spot {
  opacity: 1; filter: none; position: relative; z-index: 2; border-radius: 12px;
  box-shadow: 0 0 0 2px var(--accent-cyan), 0 0 0 6px color-mix(in srgb, var(--accent-cyan) 22%, transparent), 0 0 30px var(--accent-cyan-glow);
}
.cc-tour-ui { width: min(94vw, 1040px); max-width: 100%; margin: 1.2rem auto 0; text-align: center; }
.cc-tour-progress { display: flex; gap: 7px; justify-content: center; margin-bottom: .9rem; }
.cc-tour-progress span { width: 34px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.16); overflow: hidden; position: relative; }
.cc-tour-progress span.is-done { background: var(--accent-cyan); }
.cc-tour-progress span.is-active::after { content: ''; position: absolute; inset: 0; background: var(--accent-cyan); transform-origin: left; animation: hmTourFill 4s linear forwards; }
[dir="rtl"] .cc-tour-progress span.is-active::after { transform-origin: right; }
.cc-tour-cap { font-family: var(--font-display); font-weight: 600; font-size: clamp(.95rem,1.6vw,1.18rem); color: var(--accent-cyan); line-height: 1.5; margin: 0 auto .9rem; max-width: 60ch; min-height: 3em; }
.cc-tour-controls { display: inline-flex; gap: .6rem; }
.cc-tour-skip, .cc-tour-next { font-family: var(--font-display); font-weight: 700; font-size: .9rem; padding: .55rem 1.4rem; border-radius: 12px; cursor: pointer; transition: transform .2s, box-shadow .25s, filter .2s; }
.cc-tour-skip { background: transparent; color: var(--text-secondary); border: 1px solid var(--glass-border-hover); }
.cc-tour-skip:hover { color: var(--heading-color); transform: translateY(-2px); }
/* page-accent gradient (NOT the site-wide reddish --gradient-primary, which intruded
   a coral #e0564f into otherwise-uniform pages when the tour ran). */
.cc-tour-next { color: #fff; border: none; background: linear-gradient(135deg, var(--pt-grad-from, var(--primary-color)), var(--pt-grad-to, var(--accent-orange))); box-shadow: 0 10px 26px var(--pt-glow, rgba(249,115,22,.4)); }
.cc-tour-next:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 14px 34px var(--pt-glow, rgba(249,115,22,.5)); }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* neutralise the global `main [class*="-text"|-head|-wrap|-narrative]{margin-inline:auto}`
     (styles.css) which would otherwise CENTER the control center's start-aligned
     text (e.g. .cc-task-text / .cc-insight-text / .cc-block-head) on mobile. */
  .cc-screen [class*="-text"], .cc-screen [class*="-head"], .cc-screen [class*="-wrap"] {
    margin-inline: 0 !important; text-align: start; width: 100%;
  }
}
@media (max-width: 640px) {
  .cc-section { padding: 3rem 1rem 3.4rem; }
  .cc-kpis { grid-template-columns: repeat(2, 1fr); }
  .cc-tablet { padding: 9px; border-radius: 20px; }
  .cc-task { flex-wrap: wrap; }
  .cc-task-btn { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-tour-progress span.is-active::after { animation: none; transform: scaleX(1); }
  .cc-tablet::before, .cc-flow-step, .cc-flow-sep, .cc-dot { animation: none; }
}


/* In-tablet view TABS + "how to use" screen. Adds a 2nd view to the product
   hero tablet (control center <-> how-to), gated by $cc['howto']. Additive
   only: the existing control-center screen and its guided tour are unchanged. */
.cc-tabs { display: flex; width: fit-content; gap: .35rem; margin: 0 auto 1rem; padding: .3rem; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.cc-tab { display: inline-flex; align-items: center; white-space: nowrap; gap: .4rem; font: inherit; font-size: .82rem; font-weight: 600; color: var(--text-secondary); background: transparent; border: 0; border-radius: 999px; padding: .42rem .95rem; cursor: pointer; transition: color .2s ease, background .2s ease; }
.cc-tab i { font-size: .8rem; }
.cc-tab.is-active { color: #fff; background: linear-gradient(135deg, var(--pt-grad-from, var(--accent-violet)), var(--pt-grad-to, var(--accent-cyan))); }
.cc-howto { text-align: start; }
.cc-howto-intro { font-size: .92rem; color: var(--text-secondary); margin: 0 0 1.2rem; }
.cc-howto-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.cc-howto-step { display: flex; gap: .85rem; align-items: flex-start; }
.cc-howto-num { flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 11px; font-weight: 800; font-size: .88rem; color: var(--pt-grad-from, var(--accent-violet)); background: color-mix(in srgb, var(--pt-grad-from, var(--accent-violet)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pt-grad-from, var(--accent-violet)) 26%, transparent); }
.cc-howto-body { display: flex; flex-direction: column; gap: .2rem; }
.cc-howto-title { font-weight: 700; color: var(--heading-color); font-size: .98rem; }
.cc-howto-text { color: var(--text-secondary); font-size: .89rem; line-height: 1.55; }
/* how-to screen during the tour: the steps sit inside the <ol>, not as direct
   children of .cc-screen, so the generic dim/spot rules can't reach them — give
   them their own (matches the control-center spotlight look). */
.cc-howto.cc-tour-dim > .cc-bar, .cc-howto.cc-tour-dim > .cc-howto-intro { opacity: 1; filter: none; }
.cc-howto.cc-tour-dim > .cc-howto-steps { opacity: 1; filter: none; }
.cc-howto.cc-tour-dim .cc-howto-step { transition: opacity .45s ease, filter .45s ease; opacity: .25; filter: blur(1.5px); }
.cc-howto.cc-tour-dim .cc-howto-step.cc-spot {
  opacity: 1; filter: none; position: relative; z-index: 2; border-radius: 12px;
  padding: .5rem .6rem; margin: -.5rem -.6rem;
  box-shadow: 0 0 0 2px var(--accent-cyan), 0 0 0 6px color-mix(in srgb, var(--accent-cyan) 22%, transparent), 0 0 30px var(--accent-cyan-glow);
}