/* DANGYLSIRL_PUBLIC_GUIDES_V3 */


/* ==========================================================
   GŁÓWNA SEKCJA
   ========================================================== */

.dgl-guides-public{
  position:relative;

  padding-top:12px;
  padding-bottom:90px;
}


.dgl-guides-public::before{
  content:"";

  position:absolute;
  left:50%;
  top:0;

  width:min(1000px,90vw);
  height:420px;

  transform:translateX(-50%);

  pointer-events:none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(180,255,30,.045),
      transparent 68%
    );

  filter:blur(10px);
}


/* ==========================================================
   KATEGORIA
   ========================================================== */

.dgl-guide-category{
  position:relative;

  margin-bottom:68px;
}


.dgl-guide-category:last-child{
  margin-bottom:0;
}


.dgl-guide-category > h2{
  position:relative;

  margin:
    0
    0
    24px;

  padding-left:18px;

  font-size:
    clamp(
      24px,
      3vw,
      34px
    );

  font-weight:800;

  letter-spacing:-.035em;

  color:#fff;
}


.dgl-guide-category > h2::before{
  content:"";

  position:absolute;

  left:0;
  top:5px;
  bottom:5px;

  width:4px;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      #d7ff39,
      #8ecf19
    );

  box-shadow:
    0 0 18px
    rgba(190,255,38,.28);
}


/* ==========================================================
   GŁÓWNA KARTA
   ========================================================== */

.dgl-guide-card{
  position:relative;

  display:grid;

  grid-template-columns:
    minmax(300px,.72fr)
    minmax(0,1.28fr);

  overflow:hidden;

  min-height:330px;

  margin-bottom:20px;

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

  border-radius:24px;

  background:
    radial-gradient(
      circle at 0 0,
      rgba(196,255,46,.06),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(20,24,24,.96),
      rgba(10,13,14,.98)
    );

  box-shadow:
    0 24px 70px
    rgba(0,0,0,.24);

  transition:
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}


.dgl-guide-card:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(196,255,46,.20);

  box-shadow:
    0 28px 80px
    rgba(0,0,0,.30);
}


.dgl-guide-card:last-child{
  margin-bottom:0;
}


/* ==========================================================
   TEKST
   ========================================================== */

.dgl-guide-card-copy{
  position:relative;

  z-index:2;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:
    clamp(
      25px,
      3.3vw,
      42px
    );
}


.dgl-guide-card-head{
  display:flex;
  flex-direction:column;

  align-items:flex-start;

  gap:18px;
}


.dgl-guide-card h3{
  max-width:520px;

  margin:0;

  color:#fff;

  font-size:
    clamp(
      24px,
      2.5vw,
      36px
    );

  font-weight:850;

  line-height:1.08;

  letter-spacing:-.045em;
}


.dgl-guide-card p{
  max-width:520px;

  margin:0;

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

  font-size:
    clamp(
      14px,
      1.2vw,
      16px
    );

  line-height:1.7;
}


/* ==========================================================
   STATUS
   ========================================================== */

.dgl-guide-status{
  order:-1;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:7px;

  min-height:29px;

  padding:
    5px
    10px;

  border-radius:999px;

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

  line-height:1;

  letter-spacing:.085em;

  text-transform:uppercase;
}


.dgl-guide-status::before{
  content:"";

  width:6px;
  height:6px;

  border-radius:50%;
}


.dgl-guide-status.available{
  color:#d9ff69;

  border:
    1px solid
    rgba(194,255,52,.20);

  background:
    rgba(194,255,52,.075);
}


.dgl-guide-status.available::before{
  background:#caff3c;

  box-shadow:
    0 0 10px
    rgba(202,255,60,.65);
}


.dgl-guide-status.soon{
  color:
    rgba(255,255,255,.60);

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

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


.dgl-guide-status.soon::before{
  background:
    rgba(255,255,255,.34);
}


/* ==========================================================
   YOUTUBE
   ========================================================== */

.dgl-guide-video{
  position:relative;

  width:100%;
  min-width:0;

  aspect-ratio:auto;

  min-height:330px;

  overflow:hidden;

  background:#040505;

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


.dgl-guide-video::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  pointer-events:none;

  box-shadow:
    inset 32px 0 60px
    rgba(7,10,10,.26);
}


.dgl-guide-video iframe{
  position:absolute;

  inset:0;

  z-index:0;

  width:100%;
  height:100%;

  border:0;

  background:#000;
}


/* ==========================================================
   DOSTĘPNE WKRÓTCE
   ========================================================== */

.dgl-guide-card.soon{
  display:flex;

  min-height:150px;

  background:
    radial-gradient(
      circle at 0 50%,
      rgba(255,255,255,.028),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(17,20,21,.94),
      rgba(10,12,13,.96)
    );

  box-shadow:none;
}


.dgl-guide-card.soon::after{
  content:"";

  position:absolute;

  right:28px;
  top:50%;

  width:48px;
  height:48px;

  transform:
    translateY(-50%);

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

  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.015)
    );
}


.dgl-guide-card.soon .dgl-guide-card-copy{
  width:100%;

  padding:
    25px
    95px
    25px
    28px;
}


.dgl-guide-card.soon h3{
  font-size:
    clamp(
      19px,
      2vw,
      25px
    );
}


.dgl-guide-card.soon:hover{
  transform:none;

  border-color:
    rgba(255,255,255,.14);

  box-shadow:none;
}


/* ==========================================================
   BRAK DANYCH
   ========================================================== */

.dgl-guides-empty{
  position:relative;

  padding:
    42px
    24px;

  border:
    1px dashed
    rgba(255,255,255,.12);

  border-radius:18px;

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

  text-align:center;

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


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

@media
  (max-width:900px)
{

  .dgl-guide-card{
    grid-template-columns:1fr;
  }


  .dgl-guide-video{
    min-height:0;

    aspect-ratio:16 / 9;

    border-left:0;

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


  .dgl-guide-video::after{
    display:none;
  }


  .dgl-guide-card-copy{
    padding:
      24px;
  }

}


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

@media
  (max-width:600px)
{

  .dgl-guides-public{
    padding-bottom:55px;
  }


  .dgl-guide-category{
    margin-bottom:44px;
  }


  .dgl-guide-category > h2{
    margin-bottom:17px;

    font-size:23px;
  }


  .dgl-guide-card{
    min-height:0;

    border-radius:18px;
  }


  .dgl-guide-card-copy{
    padding:
      20px;
  }


  .dgl-guide-card h3{
    font-size:24px;
  }


  .dgl-guide-card p{
    font-size:14px;
  }


  .dgl-guide-card.soon{
    min-height:130px;
  }


  .dgl-guide-card.soon .dgl-guide-card-copy{
    padding:
      20px
      64px
      20px
      20px;
  }


  .dgl-guide-card.soon::after{
    right:16px;

    width:36px;
    height:36px;

    border-radius:11px;
  }

}


/* END_DANGYLSIRL_PUBLIC_GUIDES_V3 */


/* DANGYLSIRL_GUIDE_INSTRUCTION_STYLE_V1 */


.dgl-guide-instruction{
  grid-column:
    1 / -1;

  border-top:
    1px solid
    rgba(255,255,255,.075);

  background:
    rgba(5,7,7,.72);
}


/* BUTTON */

.dgl-guide-instruction-button{
  width:100%;

  display:flex;
  align-items:center;

  gap:11px;

  padding:
    17px
    22px;

  border:0;

  background:
    transparent;

  color:#fff;

  font:inherit;

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

  text-align:left;

  cursor:pointer;

  transition:
    background .18s ease;
}


.dgl-guide-instruction-button:hover{
  background:
    rgba(255,255,255,.025);
}


.dgl-guide-instruction-button-icon{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(200,255,47,.18);

  border-radius:8px;

  background:
    rgba(200,255,47,.065);

  color:#d8ff68;

  font-size:12px;
}


.dgl-guide-instruction-chevron{
  margin-left:auto;

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

  transition:
    transform .2s ease;
}


.dgl-guide-instruction.is-open
.dgl-guide-instruction-chevron{
  transform:
    rotate(180deg);
}


/* PANEL */

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


.dgl-guide-instruction-panel{
  border-top:
    1px solid
    rgba(255,255,255,.065);
}


.dgl-guide-instruction-inner{
  padding:
    clamp(
      22px,
      4vw,
      42px
    );
}


/* HEAD */

.dgl-guide-instruction-head{
  max-width:720px;

  margin-bottom:30px;
}


.dgl-guide-instruction-kicker{
  margin-bottom:8px;

  color:#cfff45;

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

  letter-spacing:.13em;
}


.dgl-guide-instruction-head h3{
  margin:
    0
    0
    10px;

  font-size:
    clamp(
      23px,
      3vw,
      32px
    );

  letter-spacing:-.035em;
}


.dgl-guide-instruction-head p{
  margin:0;

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

  line-height:1.65;
}


/* STEPS */

.dgl-guide-steps{
  display:grid;

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

  gap:12px;
}


.dgl-guide-step{
  display:flex;

  gap:15px;

  padding:20px;

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

  border-radius:15px;

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


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

  width:35px;
  height:35px;

  display:grid;
  place-items:center;

  border-radius:10px;

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

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

  color:#d9ff70;

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


.dgl-guide-step h4{
  margin:
    3px
    0
    7px;

  color:#fff;

  font-size:15px;
}


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

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

  font-size:13px;

  line-height:1.62;
}


.dgl-guide-step strong{
  color:
    rgba(255,255,255,.88);
}


.dgl-guide-step a{
  color:#d5ff63;

  text-decoration:none;
}


.dgl-guide-step-link{
  display:inline-block;

  margin-top:10px;

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


/* FINISH */

.dgl-guide-instruction-finish{
  display:flex;

  align-items:flex-start;

  gap:14px;

  margin-top:18px;

  padding:18px;

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

  border-radius:14px;

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


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

  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#c9ff3b;

  color:#101500;

  font-weight:950;
}


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


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

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

  font-size:13px;

  line-height:1.6;
}


/* MOBILE */

@media(max-width:700px){

  .dgl-guide-instruction-button{
    padding:
      15px
      17px;
  }


  .dgl-guide-instruction-inner{
    padding:
      20px
      16px;
  }


  .dgl-guide-steps{
    grid-template-columns:1fr;
  }


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

}


/* END_DANGYLSIRL_GUIDE_INSTRUCTION_STYLE_V1 */


/* DANGYLSIRL_GUIDE_INSTRUCTION_STYLE_V2 */


.dgl-guide-instruction-section{
  display:flex;
  align-items:flex-start;

  gap:14px;

  margin:
    42px
    0
    18px;

  padding-top:5px;
}


.dgl-guide-instruction-section:first-of-type{
  margin-top:25px;
}


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

  width:39px;
  height:39px;

  display:grid;
  place-items:center;

  border-radius:11px;

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

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

  color:#d8ff65;

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


.dgl-guide-instruction-section h3{
  margin:
    2px
    0
    5px;

  color:#fff;

  font-size:
    clamp(
      19px,
      2.2vw,
      25px
    );

  letter-spacing:-.025em;
}


.dgl-guide-instruction-section p{
  margin:0;

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

  font-size:13px;

  line-height:1.6;
}


.dgl-guide-checklist{
  display:grid;

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

  gap:9px;

  margin-bottom:16px;
}


.dgl-guide-checklist > div{
  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,.68);

  font-size:13px;
}


.dgl-guide-tip,
.dgl-guide-warning{
  margin:
    16px
    0;

  padding:
    17px
    18px;

  border-radius:13px;
}


.dgl-guide-tip{
  border:
    1px solid
    rgba(202,255,60,.13);

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


.dgl-guide-warning{
  border:
    1px solid
    rgba(255,184,75,.16);

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


.dgl-guide-tip strong{
  color:#dbff71;
}


.dgl-guide-warning strong{
  color:#ffd286;
}


.dgl-guide-tip p,
.dgl-guide-warning p{
  margin:
    7px
    0
    0;

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

  font-size:13px;

  line-height:1.65;
}


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

  margin:
    7px
    0;

  padding:
    7px
    10px;

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

  border-radius:8px;

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

  color:#d7ff69;

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

  font-size:12px;
}


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


.dgl-guide-troubleshooting{
  display:grid;

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

  gap:10px;
}


.dgl-guide-troubleshooting article{
  padding:17px;

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

  border-radius:13px;

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


.dgl-guide-troubleshooting strong{
  color:#fff;

  font-size:13px;
}


.dgl-guide-troubleshooting p{
  margin:
    7px
    0
    0;

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

  font-size:12.5px;

  line-height:1.6;
}


@media(max-width:700px){

  .dgl-guide-checklist,
  .dgl-guide-troubleshooting{
    grid-template-columns:1fr;
  }


  .dgl-guide-instruction-section{
    margin-top:34px;
  }

}


/* END_DANGYLSIRL_GUIDE_INSTRUCTION_STYLE_V2 */


/* DANGYLSIRL_GUIDES_HIDE_AVAILABLE_V1 */

/*
 * Opublikowany poradnik z filmem nie potrzebuje
 * dodatkowej plakietki "Dostępny".
 *
 * Status "Dostępne wkrótce" pozostaje bez zmian.
 */
.dgl-guide-card:not(.soon)
.dgl-guide-status.available{
  display:none !important;
}

/* END_DANGYLSIRL_GUIDES_HIDE_AVAILABLE_V1 */