/* Start:/local/templates/konsultaciya-psihiatra.ru/assets/bdi/bdi.css?177089332212463*/
/* =========================================================
   Beck test widget - FULL CSS (final + center decor)
   ========================================================= */

#cbTest,
#cbTest *{
  box-sizing: border-box;
  font-family: inherit;
}

#cbTest{
  --cb-text: #133A66;
  --cb-muted: rgba(19,58,102,.72);
  --cb-muted2: rgba(19,58,102,.55);

  --cb-green: #6CBDA0;
  --cb-green-soft: rgba(108,189,160,.18);

  --cb-bg: #EEF3FF;
  --cb-card: rgba(255,255,255,.90);
  --cb-stroke: rgba(18,58,102,.10);
  --cb-shadow: 0 10px 26px rgba(18,58,102,.08);

  --cb-radius-lg: 22px;
  --cb-radius-md: 18px;

  width: 100%;
  max-width: 100%;

  margin: 0 0 44px;
}

/* =========================================================
   PANEL (top spacing solved here)
   ========================================================= */

#cbTest .cbTest__panel{
  position: relative;
  width: 100%;
  background: var(--cb-bg);
  border: 1px solid var(--cb-stroke);
  border-radius: var(--cb-radius-lg);

  /* IMPORTANT: stable top spacing */
  padding: 52px 40px 40px;

  overflow: hidden; /* for decor */
}

/* center decor - subtle, behind content */
#cbTest .cbTest__panel::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .9;
  background:
    radial-gradient(520px 520px at 55% 38%, rgba(108,189,160,.18) 0%, rgba(108,189,160,0) 62%),
    radial-gradient(460px 460px at 48% 60%, rgba(19,58,102,.10) 0%, rgba(19,58,102,0) 62%),
    radial-gradient(320px 320px at 66% 55%, rgba(108,189,160,.14) 0%, rgba(108,189,160,0) 60%),
    linear-gradient(transparent, transparent);
}

#cbTest .cbTest__panel::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    linear-gradient(to right, rgba(19,58,102,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(19,58,102,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(520px 420px at 55% 48%, #000 0%, transparent 70%);
}

#cbTest .cbTest__panel > *{
  position: relative;
  z-index: 1;
}

@media (max-width: 980px){
  #cbTest{
    margin: 18px 0 26px;
  }
  #cbTest .cbTest__panel{
    padding: 28px 20px 20px;
  }
}

/* =========================================================
   HERO layout
   ========================================================= */

#cbTest .cbTest__hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 28px;
  align-items: start;
}

@media (max-width: 1100px){
  #cbTest .cbTest__hero{
    grid-template-columns: 1fr;
  }
}

/* left */
#cbTest .cbTest__heroLeft{
  min-width: 0;
}

/* headings */
#cbTest .cbTest__h{
  margin: 0 0 14px 0;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--cb-text);
  font-weight: 800;
  font-size: 56px;
}

#cbTest .cbTest__hAccent{
  display: block;
  margin-top: 6px;
  color: rgba(19,58,102,.45);
  font-weight: 700;
}

@media (max-width: 980px){
  #cbTest .cbTest__h{ font-size: 38px; }
}

/* instruction card - narrower */
#cbTest .cbTest__notice{
  background: var(--cb-card);
  border: 1px solid var(--cb-stroke);
  border-radius: var(--cb-radius-md);
  padding: 18px 18px;
  max-width: 720px;
  box-shadow: var(--cb-shadow);
}

#cbTest .cbTest__notice > b{
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--cb-text);
}

#cbTest .cbTest__intro{
  font-size: 14px;
  line-height: 1.45;
  color: var(--cb-muted);
}

/* details button (summary) */
#cbTest .cbTest__details{
  margin-top: 10px;
}

#cbTest .cbTest__detailsBtn{
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 10px;
  padding: 10px 14px;

  border-radius: 14px;
  border: 1px solid rgba(108,189,160,.40);
  background: rgba(108,189,160,.12);

  font-weight: 800;
  font-size: 13px;
  color: rgba(19,58,102,.86);

  cursor: pointer;
  user-select: none;
}

#cbTest .cbTest__detailsBtn::-webkit-details-marker{
  display: none;
}

#cbTest .cbTest__detailsBtn:hover{
  background: rgba(108,189,160,.16);
  border-color: rgba(108,189,160,.52);
}

#cbTest .cbTest__chev{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(19,58,102,.55);
  border-bottom: 2px solid rgba(19,58,102,.55);
  transform: rotate(45deg);
  transition: transform .16s ease;
}

#cbTest .cbTest__details[open] .cbTest__chev{
  transform: rotate(-135deg);
}

#cbTest .cbTest__ol{
  margin: 10px 0 0 0;
  padding-left: 18px;
}

#cbTest .cbTest__ol li{
  margin: 6px 0;
  line-height: 1.45;
  font-size: 14px;
  color: var(--cb-muted);
}

/* field row */
#cbTest .cbTest__fieldRow{
  margin-top: 16px;
}

#cbTest .cbTest__label{
  display: block;
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--cb-muted);
}

/* select */
#cbTest .cbTest__select{
  width: min(520px, 100%);
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--cb-stroke);
  background: rgba(255,255,255,.92);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--cb-text);
  outline: none;
}

#cbTest .cbTest__select:focus{
  border-color: rgba(108,189,160,.85);
  box-shadow: 0 0 0 4px rgba(108,189,160,.20);
}

/* buttons */
#cbTest .cbBtn{
  appearance: none;
  border: 0;
  cursor: pointer;
  height: 54px;
  padding: 0 26px;
  border-radius: 16px;
  font-weight: 800;
  font-size: 14px;
  line-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .08s ease, box-shadow .12s ease, opacity .12s ease;
}

#cbTest .cbBtn:active{
  transform: translateY(1px);
}

#cbTest .cbBtn--primary{
  background: var(--cb-green);
  color: #fff;
  box-shadow: 0 12px 28px rgba(108,189,160,.20);
}

#cbTest .cbBtn--primary:hover{
  box-shadow: 0 16px 34px rgba(108,189,160,.26);
}

#cbTest .cbBtn--ghost{
  background: rgba(255,255,255,.80);
  border: 1px solid var(--cb-stroke);
  color: var(--cb-text);
}

#cbTest .cbBtn[disabled],
#cbTest .cbBtn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* spacing for the start button */
#cbTest .cbTest__heroLeft .cbBtn--primary{
  margin-top: 12px;
}

/* small note */
#cbTest .cbTest__small{
  margin: 10px 0 0 0;
  font-size: 13px;
  color: var(--cb-muted);
  line-height: 1.4;
}

/* =========================================================
   right stats bigger + nicer
   ========================================================= */

#cbTest .cbTest__heroRight{
  display: grid;
  gap: 16px;
}

#cbTest .cbStat{
  position: relative;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--cb-stroke);
  border-radius: 20px;
  padding: 22px 22px;
  box-shadow: var(--cb-shadow);
  overflow: hidden;
}

#cbTest .cbStat::before{
  content: "";
  position: absolute;
  inset: -40px -40px auto auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(108,189,160,.14);
  filter: blur(0.2px);
}

#cbTest .cbStat__dot{
  position: absolute;
  right: 16px;
  top: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(108,189,160,.22);
  border: 2px solid rgba(108,189,160,.32);
}

#cbTest .cbStat__big{
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(19,58,102,.52);
  line-height: 1;
}

#cbTest .cbStat__txt{
  margin-top: 10px;
  font-size: 14px;
  color: var(--cb-muted);
}

/* =========================================================
   QUIZ
   ========================================================= */

#cbTest .cbTest__quiz{
  margin-top: 18px;
}

#cbTest .cbTest__quizHead{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

#cbTest .cbTest__title{
  font-weight: 900;
  color: var(--cb-text);
  font-size: 18px;
  margin-bottom: 6px;
}

#cbTest .cbTest__subtitle{
  font-size: 13px;
  color: var(--cb-muted);
  line-height: 1.4;
}

#cbTest .cbTest__meta{
  display: inline-block;
  margin-left: 8px;
  color: var(--cb-muted2);
  font-weight: 700;
}

#cbTest .cbTest__progressWrap{
  min-width: 260px;
}

#cbTest .cbTest__bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(19,58,102,.08);
  overflow: hidden;
  margin: 2px 0 8px 0;
}

#cbTest .cbTest__barFill{
  height: 100%;
  width: 0%;
  background: rgba(108,189,160,.95);
  border-radius: 999px;
  transition: width .18s ease;
}

#cbTest .cbTest__step{
  font-size: 13px;
  color: var(--cb-muted);
  text-align: right;
}

/* question card */
#cbTest .cbCard{
  background: var(--cb-card);
  border: 1px solid var(--cb-stroke);
  border-radius: var(--cb-radius-md);
  padding: 16px 16px;
  box-shadow: var(--cb-shadow);
}

/* injected by JS */
#cbTest .cbQTitle{
  font-size: 18px;
  font-weight: 900;
  color: var(--cb-text);
  margin: 0 0 12px 0;
}

#cbTest .cbOptions{
  display: grid;
  gap: 10px;
}

#cbTest .cbOption{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  background: rgba(255,255,255,.86);
  border: 1px solid var(--cb-stroke);
  border-radius: 14px;
  padding: 12px 12px;
  cursor: pointer;
}

#cbTest .cbOption:hover{
  border-color: rgba(108,189,160,.55);
}

#cbTest .cbOption input{
  margin-top: 3px;
}

/* controls */
#cbTest .cbTest__controls{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#cbTest .cbTest__foot{
  margin-top: 8px;
}

#cbTest .cbLink{
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: rgba(19,58,102,.75);
  font-weight: 800;
  font-size: 13px;
  text-decoration: underline;
}

#cbTest .cbLink:hover{
  color: var(--cb-text);
}

/* =========================================================
   RESULT
   ========================================================= */

#cbTest .cbTest__result{
  margin-top: 18px;
}

#cbTest .cbResultGrid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 28px;
  align-items: start;
}

#cbTest .cbResultRow{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

#cbTest .cbResultBox{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--cb-stroke);
  border-radius: var(--cb-radius-md);
  padding: 16px 16px;
  box-shadow: var(--cb-shadow);
}

#cbTest .cbResultBox__label{
  font-size: 13px;
  color: var(--cb-muted);
  font-weight: 700;
}

#cbTest .cbResultBox__value{
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(19,58,102,.52);
  line-height: 1;
  margin-top: 8px;
}

#cbTest .cbResultBox__sub{
  margin-top: 6px;
  font-size: 13px;
  color: var(--cb-muted);
}

#cbTest .cbResultText{
  background: var(--cb-card);
  border: 1px solid var(--cb-stroke);
  border-radius: var(--cb-radius-md);
  padding: 16px 16px;
  color: var(--cb-muted);
  line-height: 1.45;
  font-size: 14px;
}

/* danger */
#cbTest .cbDanger{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(220,38,38,.25);
  background: rgba(220,38,38,.08);
  color: rgba(153,27,27,.95);
  font-size: 14px;
  line-height: 1.4;
}

/* details */
#cbTest .cbDetails{
  margin-top: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--cb-stroke);
  border-radius: var(--cb-radius-md);
  padding: 12px 14px;
}

#cbTest .cbDetails summary{
  cursor: pointer;
  font-weight: 900;
  color: var(--cb-text);
  font-size: 14px;
}

#cbTest .cbDetails[open] summary{
  margin-bottom: 10px;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1100px){
  #cbTest .cbTest__quizHead{
    flex-direction: column;
  }
  #cbTest .cbTest__step{
    text-align: left;
  }
  #cbTest .cbTest__progressWrap{
    min-width: 0;
    width: 100%;
  }
  #cbTest .cbResultGrid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px){
  #cbTest .cbBtn{
    width: 100%;
  }
  #cbTest .cbResultRow{
    grid-template-columns: 1fr;
  }
}

#cbTest .cbBtn--primary{
  background: #6cbda0 !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(108,189,160,.22) !important;
}

#cbTest .cbBtn--primary:hover{
  background: #63b498 !important;
  box-shadow: 0 16px 34px rgba(108,189,160,.28) !important;
}

#cbTest .cbBtn--primary:active{
  background: #5aa98f !important;
}

#cbTest .cbBtn--primary[disabled],
#cbTest .cbBtn--primary:disabled{
  background: rgba(108,189,160,.45) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: none !important;
}


/* End */
/* /local/templates/konsultaciya-psihiatra.ru/assets/bdi/bdi.css?177089332212463 */