/* Cap.guru demo: styles for the content area only.
   Header, sidebar menu and footer keep the original design from 1.css and bot.css. */

.box_inner_content{
  --cg-blue:#3598dc;
  --cg-blue-dark:#1f6fae;
  --cg-blue-light:#eaf4fb;
  --cg-text:#1f2933;
  --cg-muted:#5f6b76;
  --cg-border:#e3e9ef;
  --cg-bg:#f5f8fb;
  padding:24px 28px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--cg-text);
}

/* Heading and intro */
.demo-h1{font-size:26px;line-height:1.25;font-weight:700;margin:0 0 10px;color:var(--cg-text)}
.demo-intro{font-size:15px;line-height:1.65;color:var(--cg-muted);margin:0 0 20px;max-width:760px}
.demo-intro a{color:var(--cg-blue);font-weight:600}

.box_inner_content h3{
  font-family:inherit;
  font-size:17px;
  font-weight:700;
  border-bottom:1px solid var(--cg-border);
  padding-bottom:12px;
  margin-bottom:14px;
}
.box_inner_content h3 b{color:var(--cg-muted);font-weight:500}

.box_inner_content .error_text:not(:empty){
  margin:8px 0 14px;
  padding:10px 14px;
  border-radius:8px;
  background:#fff5f5;
  color:#b42318;
  font-size:14px;
}

/* Variant buttons (Easy, Moderate, Hard...) */
.box_inner_content .menu_ex_cap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;color:var(--cg-muted);font-size:14px}
.box_inner_content .menu_ex_cap a{
  padding:7px 14px;
  border:1px solid var(--cg-border);
  border-radius:999px;
  background:#fff;
  color:var(--cg-text);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  transition:all .15s;
}
.box_inner_content .menu_ex_cap a:hover{border-color:var(--cg-blue);color:var(--cg-blue)}
.box_inner_content .menu_ex_cap a.active{background:var(--cg-blue);border-color:var(--cg-blue);color:#fff}

/* Captcha area */
.box_inner_content .demo_cap{display:flex;flex-wrap:wrap;gap:20px;width:100%}
.box_inner_content .demo_cap>div{
  display:block;
  max-width:100%;
  padding:16px;
  border:1px solid var(--cg-border);
  border-radius:12px;
  background-color:#fff;
  background-position:center;
}
.box_inner_content .demo_cap>div:not(:has(iframe)){height:auto !important;min-height:180px}
.box_inner_content .demo_cap>div:has(iframe){padding-bottom:40px}
.box_inner_content .demo_cap>div>strong{display:block;font-size:14px;margin-bottom:12px;color:var(--cg-text)}
.box_inner_content .demo_cap iframe{border-radius:8px}
.box_inner_content .demo_cap textarea{
  margin-top:12px;
  padding:10px;
  border:1px solid var(--cg-border);
  border-radius:8px;
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--cg-muted);
  background:var(--cg-bg);
  resize:vertical;
}
.box_inner_content .demo_cap .sendVerif{
  margin-top:10px;
  padding:9px 20px;
  border:0;
  border-radius:8px;
  background:var(--cg-blue);
  color:#fff;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:background .15s;
}
.box_inner_content .demo_cap .sendVerif:hover{background:var(--cg-blue-dark)}
.box_inner_content .demo_cap .otvetOk{display:block;margin-top:12px;font-size:13px;color:var(--cg-muted);word-break:break-all}

/* Call to action under the demo */
.box_inner_content .demo-cta{
  margin-top:24px;
  padding:16px 20px;
  border-radius:12px;
  background:var(--cg-blue-light);
  color:var(--cg-text);
  font-size:14px;
  line-height:1.6;
}
.box_inner_content .demo-cta a{color:var(--cg-blue-dark);font-weight:700}

/* Language switcher in the sidebar (new block, styled to fit the old menu) */
.demo-langs{margin:16px 0 0;padding:12px 14px;border:1px double #72c1f5;border-radius:2px;background:#fff;font-size:13px;line-height:1.9;max-width:250px}
.demo-langs b{display:block;color:#777;font-weight:600;margin-bottom:4px}
.demo-langs a{display:inline-block;margin-right:10px;color:#2f74a2;text-decoration:none}
.demo-langs a:hover{color:#003868}
.demo-langs a.active{color:#003868;font-weight:700}

/* Phones: the captcha fits the screen */
@media (max-width:767px){
  .box_inner_content{padding:18px 16px}
  .demo-h1{font-size:22px}
  .box_inner_content .demo_cap>div{width:100% !important}
  .box_inner_content .demo_cap>div:has(iframe){height:auto !important}
  .box_inner_content .demo_cap>div:has(iframe) iframe{height:520px}
}

/* "Coming soon" note for demos without data yet */
.box_inner_content .demo-soon{
  width:100%;
  padding:14px 18px;
  border:1px dashed #9cc9ec;
  border-radius:12px;
  background:#f8fcff;
  color:#1f2933;
  font-size:14px;
  line-height:1.6;
}