/* DANGYLSIRL_SHARED_INSTALL_INSTRUCTION_STYLE_V3 */

.dgl-install-guide{
  position:relative;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      rgba(15,18,18,.98),
      rgba(7,9,10,.98)
    );

  color:#fff;
}


/* Na karcie Poradnika */

.dgl-guide-card > .dgl-install-guide{
  grid-column:1 / -1;

  width:100%;

  margin:0;

  border-left:0;
  border-right:0;
  border-bottom:0;

  border-radius:
    0
    0
    23px
    23px;
}


/* Na stronie Pobieranie */

.dgl-download-video > .dgl-install-guide{
  width:min(
    1180px,
    calc(100% - 32px)
  );

  margin:
    20px
    auto
    0;
}


/* ==========================================================
   PRZYCISK
   ========================================================== */

.dgl-install-toggle{
  width:100%;

  min-height:60px;

  display:flex;

  align-items:center;

  gap:12px;

  padding:
    15px
    20px;

  border:0;

  background:
    rgba(255,255,255,.012);

  color:#fff;

  font:inherit;

  font-size:14px;
  font-weight:850;

  cursor:pointer;

  text-align:left;

  transition:
    background .18s ease;
}


.dgl-install-toggle:hover{
  background:
    rgba(255,255,255,.035);
}


.dgl-install-toggle-icon{
  flex:0 0 auto;

  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border-radius:9px;

  border:
    1px solid
    rgba(202,255,60,.18);

  background:
    rgba(202,255,60,.06);

  color:#d9ff67;

  font-size:11px;
}


.dgl-install-toggle-arrow{
  margin-left:auto;

  color:
    rgba(255,255,255,.45);

  transition:
    transform .2s ease;
}


.dgl-install-guide.is-open
.dgl-install-toggle-arrow{
  transform:
    rotate(180deg);
}


/* ==========================================================
   PANEL
   ========================================================== */

.dgl-install-panel[hidden]{
  display:none !important;
}


.dgl-install-panel{
  border-top:
    1px solid
    rgba(255,255,255,.07);
}


.dgl-install-inner{
  width:min(
    1050px,
    100%
  );

  margin:
    0
    auto;

  padding:
    clamp(
      24px,
      4vw,
      46px
    );
}


/* ==========================================================
   INTRO
   ========================================================== */

.dgl-install-intro{
  max-width:760px;

  margin-bottom:38px;
}


.dgl-install-kicker{
  margin-bottom:9px;

  color:#d4ff59;

  font-size:10px;
  font-weight:900;

  letter-spacing:.14em;
}


.dgl-install-intro h2{
  margin:
    0
    0
    12px;

  color:#fff;

  font-size:
    clamp(
      26px,
      3.3vw,
      38px
    );

  line-height:1.08;

  letter-spacing:-.04em;
}


.dgl-install-intro p{
  max-width:720px;

  margin:0;

  color:
    rgba(255,255,255,.61);

  font-size:14px;

  line-height:1.7;
}


/* ==========================================================
   SEKCJE
   ========================================================== */

.dgl-install-section{
  margin-top:48px;
}


.dgl-install-section:first-of-type{
  margin-top:0;
}


.dgl-install-section-head{
  display:flex;

  align-items:flex-start;

  gap:14px;

  margin-bottom:18px;
}


.dgl-install-section-number{
  flex:0 0 auto;

  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  border-radius:11px;

  border:
    1px solid
    rgba(202,255,60,.20);

  background:
    rgba(202,255,60,.065);

  color:#d8ff65;

  font-size:13px;
  font-weight:900;
}


.dgl-install-section-head h3{
  margin:
    2px
    0
    5px;

  color:#fff;

  font-size:
    clamp(
      20px,
      2.5vw,
      27px
    );

  line-height:1.15;

  letter-spacing:-.03em;
}


.dgl-install-section-head p{
  margin:0;

  color:
    rgba(255,255,255,.54);

  font-size:13px;

  line-height:1.6;
}


/* ==========================================================
   CHECKLIST
   ========================================================== */

.dgl-install-checklist{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:9px;

  margin-top:18px;
}


.dgl-install-checklist > div{
  display:flex;

  gap:9px;

  align-items:flex-start;

  padding:
    11px
    13px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:10px;

  background:
    rgba(255,255,255,.018);

  color:
    rgba(255,255,255,.67);

  font-size:13px;
}


.dgl-install-checklist span{
  color:#d6ff5d;

  font-weight:900;
}


/* ==========================================================
   KROKI
   ========================================================== */

.dgl-install-steps{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:11px;
}


.dgl-install-step{
  display:flex;

  align-items:flex-start;

  gap:15px;

  min-width:0;

  padding:19px;

  border:
    1px solid
    rgba(255,255,255,.072);

  border-radius:14px;

  background:
    rgba(255,255,255,.019);
}


.dgl-install-step-number{
  flex:0 0 auto;

  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border-radius:10px;

  border:
    1px solid
    rgba(202,255,60,.17);

  background:
    rgba(202,255,60,.052);

  color:#d9ff69;

  font-size:10px;
  font-weight:900;
}


.dgl-install-step-content{
  min-width:0;
}


.dgl-install-step h4{
  margin:
    3px
    0
    8px;

  color:#fff;

  font-size:15px;

  line-height:1.3;
}


.dgl-install-step p{
  margin:0;

  color:
    rgba(255,255,255,.56);

  font-size:13px;

  line-height:1.64;
}


.dgl-install-step p + p{
  margin-top:8px;
}


.dgl-install-step strong{
  color:
    rgba(255,255,255,.90);
}


.dgl-install-step a{
  color:#d6ff61;

  text-decoration:none;
}


.dgl-install-link{
  display:inline-block;

  margin-top:11px;

  color:#d6ff61 !important;

  font-size:12px;
  font-weight:850;
}


.dgl-install-code{
  display:inline-block;

  max-width:100%;

  margin:
    7px
    0;

  padding:
    7px
    10px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:8px;

  background:
    rgba(0,0,0,.32);

  color:#daff6b;

  font:
    12px
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  overflow-wrap:anywhere;
}


/* ==========================================================
   INFO / WARNING
   ========================================================== */

.dgl-install-notice{
  margin-top:16px;

  padding:
    17px
    18px;

  border-radius:13px;
}


.dgl-install-notice.tip{
  border:
    1px solid
    rgba(202,255,60,.14);

  background:
    rgba(202,255,60,.035);
}


.dgl-install-notice.warning{
  border:
    1px solid
    rgba(255,184,75,.17);

  background:
    rgba(255,184,75,.045);
}


.dgl-install-notice.tip strong{
  color:#dcff73;
}


.dgl-install-notice.warning strong{
  color:#ffd387;
}


.dgl-install-notice p{
  margin:
    7px
    0
    0;

  color:
    rgba(255,255,255,.58);

  font-size:13px;

  line-height:1.65;
}


/* ==========================================================
   PROBLEMY
   ========================================================== */

.dgl-install-problems{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:10px;
}


.dgl-install-problems article{
  padding:17px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:13px;

  background:
    rgba(255,255,255,.018);
}


.dgl-install-problems strong{
  color:#fff;

  font-size:13px;
}


.dgl-install-problems p{
  margin:
    7px
    0
    0;

  color:
    rgba(255,255,255,.55);

  font-size:12.5px;

  line-height:1.62;
}


/* ==========================================================
   KONIEC
   ========================================================== */

.dgl-install-finish{
  display:flex;

  align-items:flex-start;

  gap:14px;

  margin-top:30px;

  padding:19px;

  border:
    1px solid
    rgba(202,255,60,.15);

  border-radius:14px;

  background:
    rgba(202,255,60,.037);
}


.dgl-install-finish-icon{
  flex:0 0 auto;

  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#caff3d;

  color:#101500;

  font-weight:950;
}


.dgl-install-finish strong{
  color:#fff;
}


.dgl-install-finish p{
  margin:
    5px
    0
    0;

  color:
    rgba(255,255,255,.57);

  font-size:13px;

  line-height:1.62;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:800px){

  .dgl-install-steps,
  .dgl-install-checklist,
  .dgl-install-problems{
    grid-template-columns:1fr;
  }

}


/* ==========================================================
   TELEFON
   ========================================================== */

@media(max-width:600px){

  .dgl-download-video > .dgl-install-guide{
    width:
      calc(100% - 20px);

    margin-top:14px;
  }


  .dgl-guide-card > .dgl-install-guide{
    border-radius:
      0
      0
      17px
      17px;
  }


  .dgl-install-toggle{
    min-height:56px;

    padding:
      13px
      15px;

    font-size:13px;
  }


  .dgl-install-inner{
    padding:
      23px
      15px
      28px;
  }


  .dgl-install-intro{
    margin-bottom:30px;
  }


  .dgl-install-section{
    margin-top:38px;
  }


  .dgl-install-step{
    padding:16px;
  }


  .dgl-install-section-number{
    width:36px;
    height:36px;
  }

}


/* END_DANGYLSIRL_SHARED_INSTALL_INSTRUCTION_STYLE_V3 */

/* DANGYLSIRL_OBS_PLUGIN_INSTRUCTION_WIDTH_V1 */

/*
 * Tylko /obs-plugin.
 * Instrukcja ma tę samą szerokość co film,
 * zamiast rozciągać się na cały viewport.
 */
body[data-page="obs-plugin"]
[data-dgl-obs-plugin-shared-instruction="1"] {
  width:
    min(
      1180px,
      calc(100% - 40px)
    ) !important;

  max-width:
    1180px !important;

  margin:
    28px auto 0 !important;

  box-sizing:
    border-box;
}


/*
 * Sam przycisk nadal zajmuje 100%,
 * ale tylko wewnątrz powyższego kontenera.
 */
body[data-page="obs-plugin"]
[data-dgl-obs-plugin-shared-instruction="1"]
.dgl-install-toggle {
  width:
    100% !important;
}


@media(max-width:700px){

  body[data-page="obs-plugin"]
  [data-dgl-obs-plugin-shared-instruction="1"] {
    width:
      calc(100% - 28px)
      !important;

    margin-top:
      20px !important;
  }

}

/* END_DANGYLSIRL_OBS_PLUGIN_INSTRUCTION_WIDTH_V1 */