/*
 * Convert Forms #49: the "Try Pro" demo creator form (layouts/tassos/products/try.php).
 * Loaded by DemoForm::display() (demo-form.php). Edit here, not in the form's Custom CSS.
 * The #cf_49 id is kept on purpose: Convert Forms emits its own per-form rules with the same id,
 * so a class selector would lose to them.
 * Colors use the template variables from css/src/index.css (:root); greys are plain values.
 */
/* ---------- Card ---------- */
#cf_49 {
  position:relative;
}

#cf_49 .cf-fields {
  --control-gap: 5px;
}

#cf_49 .cf-btn {
  background:var(--color-default);
}

#cf_49 .cf-grow-0 {
    max-width: max-content !important;
}

#cf_49 .cf-form-wrap {
  padding:0;
}

/* ---------- Header copy ---------- */
/* A div, not an h2: the docs pages turn every h2 into an anchor link */
#cf_49 .ji-title{
  margin:0 0 10px;
  font-size:26px; line-height:1.2; font-weight:700; letter-spacing:-.015em;
  color:var(--color-default); text-wrap:balance;
}
#cf_49 .ji-copy-product p,
#cf_49 .ji-copy-builder p{
  margin:0;
  font-size:16px; line-height:1.55; color:#64748b;
}

/* Product copy by default; a wrapper with
   data-ji-extension="convert-forms-builder-v2" swaps in the builder copy */
#cf_49 .ji-copy-builder{ display:none; }
[data-ji-extension="convert-forms-builder-v2"] #cf_49 .ji-copy-builder{ display:block; }
[data-ji-extension="convert-forms-builder-v2"] #cf_49 span.ji-copy-builder{ display:inline; }
[data-ji-extension="convert-forms-builder-v2"] #cf_49 .ji-copy-product{ display:none; }

/* ---------- Fields ---------- */

#cf_49 .cf-input{
  color:var(--color-default); background:#fff;
  box-shadow:0 1px 2px 0 rgba(0, 0, 0, .05);   /* same as Tailwind shadow-sm */
}

#cf_49 .cf-input:focus{
  outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* ---------- State row: working / success / error ---------- */
/* The row is laid over the fields (same box as input + button), so the form keeps its
   height in every state and nothing on the page moves. */
#cf_49 .cf-fields{ position:relative; }
#cf_49.cfdemo-active .cf-fields > .cf-control-group{ visibility:hidden; }
#cf_49.cfdemo-active .cf-response{ display:none !important; }
#cf_49.cf-success.cf-success-hideform .cf-fields{ display:flex; }  /* CF hides the fields on success; the row needs them */

#cf_49 .cfdemo-screen{
  position:absolute; inset:var(--control-gap);  /* lines up with the input and button edges */
  display:flex; align-items:center; gap:12px;
  padding:0 16px; box-sizing:border-box;
  border-radius:var(--input-border-radius);
  background:#f4f4f5;
  color:var(--color-default); font-size:16px; font-weight:500; line-height:1.3;
}
#cf_49 .cfdemo-screen--success{ background:color-mix(in srgb, var(--color-success) 8%, #fff); }
#cf_49 .cfdemo-screen--error{ background:color-mix(in srgb, var(--color-alert) 7%, #fff); }

#cf_49 .cfdemo-screen__icon{ flex:none; width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
#cf_49 .cfdemo-screen__icon svg{ width:22px; height:22px; fill:currentColor; }
#cf_49 .cfdemo-screen__text{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#cf_49 .cfdemo-spinner{
  width:18px; height:18px; border-radius:50%;
  border:2px solid transparent; border-top-color:currentColor; border-right-color:currentColor;
  animation:cfdemo-spin .8s linear infinite;
}
@keyframes cfdemo-spin{ to{ transform:rotate(360deg); } }

#cf_49 .cfdemo-retry{
  flex:none; width:auto; max-width:none;   /* CF gives every button width:100% */
  margin:0; padding:0; border:0; background:none;
  font:inherit; font-weight:600; color:var(--color-default); text-decoration:underline; cursor:pointer;
}
#cf_49 .cfdemo-retry:hover{ text-decoration:none; }
#cf_49 .cfdemo-retry:focus-visible{ outline:3px solid color-mix(in srgb, var(--color-primary) 18%, transparent); outline-offset:2px; border-radius:3px; }

/* ---------- Small screens ---------- */
@media (max-width:480px){
  #cf_49 .ji-title{ font-size:23px; }
  #cf_49 .cfdemo-screen{ padding:0 12px; font-size:15px; }
}

@media (prefers-reduced-motion:reduce){
  #cf_49 .cfdemo-spinner{ animation:none; border-color:currentColor; opacity:.5; }
}