/* ===== BASE ===== */
*{box-sizing:border-box}

body{
  margin:0;
  font-family:'Raleway',system-ui,sans-serif;
  background:#2f2f2f;
  font-size:18px;
  line-height:1.65;
  color:#111;
  padding-bottom:90px;
}



/* ===== LAYOUT ===== */
.wrapper{padding:40px}

.card{
  max-width:690px;
  min-height:660px;
  margin:0 auto;
  background:#fff;
  border-radius:24px;
  overflow:visible;
  animation:cardIn .64s ease both;
  box-shadow:0 18px 36px rgba(0,0,0,.14);
  }

@keyframes cardIn{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:none;
  }
}


.card-clip{
  overflow:hidden
  
  }

/* ===== COVER ===== */
.cover{
  position:relative;
  background:#f5f5f5;
  border-radius:24px 24px 0 0;
}

/* cover image */
.cover .cover-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  border-radius:24px 24px 0 0;
  margin-top:-2px;
}

/* empty cover */
.cover.empty{
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* badge */
.badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:4px;
  font-size:12px;
  font-weight:500;
  transform:rotate(-5deg);
  margin:10px 0;
}

/* home button */
.home-link{
  position: absolute;
  top: 14px;
  left: 14px;

  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  border-radius: 50%;
  z-index: 5;
  transition: background .2s ease;
}

.home-link:hover{
  background: rgba(0,0,0,.66);
}

.home-link img{
  width: 18px;
  height: 18px;
  display: block;
  filter: invert(1);
}


/* ===== CONTENT ===== */
.content{
  padding:48px 48px 24px 48px;
  }

.content hr{
  border:0;
  height:1px;
  margin:36px 0;
  background:linear-gradient(
    to right,
    transparent,
    rgba(0,0,0,.15),
    transparent
  );
}

.content h1{
  font-size:38px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-0.01em;
  margin:0 0 24px 0;
}

.content h2{
  font-size:26px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-0.005em;
  margin: 0 0 24px 0;
}

.content h3{
  font-size:21px;
  font-weight:500;
  line-height:1.35;
  margin:26px 0 12px;
}

.content p{margin:18px 0}
.content a{color:inherit}

.content img{
  max-width:100%;
  margin:20px 0;
  border-radius:14px;
}

/* muted */
.content .muted{
  color:#777;
  font-size:17px;
}

/* lists */
.content ul{
  margin:18px 0;
  padding-left:20px;
  list-style-position:outside;
}

.content li{
  margin:8px 0;
}


/* ======================================================
   TWO-COLUMN TEMPLATE STYLES
   ====================================================== */

.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 16px 0;
}

.cols-2 .col {
  min-height: 80px;
  box-sizing: border-box;
}

/* правая колонка: убираем внутренний бордер, добавляем отступ */
.cols-2 .col:last-child {
  padding-left: 24px;
}

/* подсветка границ в режиме редактора */
body.editing .cols-2 .col {
  border: 1.5px dashed #d9d9d9;
  margin: -1.5px;
  background: rgba(0, 0, 0, 0.01);
  position: relative;
  z-index: 1;
}

/* правая колонка: убираем внутренний бордер, добавляем отступ */
body.editing .cols-2 .col:last-child {
  border-left: none;
}

/* мобильная версия: одна колонка */
@media (max-width: 768px) {
  .cols-2 {
    grid-template-columns: 1fr;
  }
  .cols-2 .col:last-child {
  padding-left: 0px;
}
  body.editing .cols-2 .col:last-child {
    border-left: 1.5px dashed #d9d9d9;
    padding-left: 0;
  }
}



/* ===== BUTTONS ===== */
.content .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  border-radius:10px;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;

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

.content .btn:active{
  transform:translateY(1px);
}

/* text sizes */
.content .btn-sm-text,
.content .btn-md-text,
.content .btn-lg-text{
  display:inline-block;
  line-height:1.2;
}

.content .btn-sm-text{
  font-size:13px;
  font-weight:500;
}

.content .btn-md-text{
  font-size:15px;
  font-weight:600;
}

.content .btn-lg-text{
  font-size:20px;
  font-weight:600;
}

/* small */
.content .btn-sm{
  padding:6px 10px;
  border-radius:8px;
  background:var(--btn-sm-bg);
  color:var(--btn-sm-text);
}

/* medium */
.content .btn-md{
  padding:10px 16px;
  border-radius:10px;
  background:#1DA1F2;
  color:#FFF;
}


/* large CTA */
.content .btn-lg{
  display:block;
  position:relative;

  padding:24px 28px;
  margin:28px 0 18px;
  border-radius:14px;

  text-align:center;
  text-decoration:none;
  color:#000;

  background:
    linear-gradient(
      135deg,
      #ffd400 0%,
      #ffdd38 32%,
      #f2c200 58%,
      #ffd400 100%
    );

  text-shadow:
    0 1px 0 rgba(255,255,255,.35),
    0 -1px 0 rgba(0,0,0,.18);

  box-shadow:
    0 6px 10px rgba(0,0,0,.16),
    inset 0 -1px 0 rgba(0,0,0,.14);

  overflow:hidden;
  
  white-space:normal;
  line-height:1.25;
}




/* shine */
.content .btn-lg::after{
  content:"";
  position:absolute;
  inset:-70%;

  background:
    linear-gradient(
      120deg,
      transparent 44%,
      rgba(255,255,255,.85) 50%,
      transparent 56%
    );

  animation:btnShine 4.5s linear infinite;
  
}

/* keyframes */
@keyframes btnShine{
  0%{
    transform:translateX(-120%);
  }
  25%{
    transform:translateX(-120%);
  }
  100%{
    transform:translateX(120%);
  }
}



/* ===== FORM ===== */
.content .form{
  margin:32px 0;
  padding:24px;
  background:#f7f7f7;
  border-radius:16px;
  display:grid;
  gap:18px;
}

.content .form-field{
  display:grid;
  gap:6px;
}

.content .form-label{
  font-size:12px;
  font-weight:600;
  color:#777;
}

.content .form-input,
.content .form-textarea{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid #ddd;
  font-size:16px;
  font-family:inherit;
  background:#fff;
}

.content .form-textarea{
  min-height:120px;
  resize:vertical;
}

.content .form-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  color:#555;
}

.content .form-submit .btn-lg{
  width:100%;
  margin:0;
  border:0;
}

.ch{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ===== MEDIA ===== */
.video-container{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
}

.video-container iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  border-radius:12px;
}

.frame-container{
  width:100%;
  margin:1em 0;
}

.frame-container iframe{
  width:100%;
  aspect-ratio:16 / 9;
  border:0;
}

/* ===== TABLE ===== */
.table-wrap{
  width:100%;
  overflow-x:auto;
}

.content table{
  border-collapse:collapse;
  margin:12px 0;
  font-size:14px;
  min-width:100%;
}

.content td,
.content th{
  border:1px solid rgba(0,0,0,.18);
  padding:6px 8px;
  min-width:44px;
  vertical-align:top;
}

/* == VIDEO PLAYER == */

.video-file{
  margin:24px 0;
  border-radius:16px;
  overflow:hidden;
}

.video-file video{
  display:block;
  width:100%;
  height:auto;
}

.video-file video,
.audio-file audio{
  width:100%;
  display:block;
}



/* ===== FOOTER ===== */
.footer{
  max-width:660px;
  margin:24px auto 0;
  padding:12px 16px 24px;
  text-align:center;
  font-size:14px;
  line-height:1.55;
  color:#b5b5b5;
}

.footer p{margin:6px 0}

.footer small{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:#8f8f8f;
}

.footer a{
  color:#b5b5b5;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.25);
}

.footer a:hover{
  color:#d0d0d0;
  border-bottom-color:rgba(255,255,255,.45);
}

.footer .copyright{
  margin-top:10px;
  font-size:12px;
  color:#8a8a8a;
}

/* ===== COOKIE ===== */
#cookie{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  z-index:9999;

  width:100%;
  max-width:690px;
  padding:12px 0;

  background:rgba(0,0,0,.92);
  color:#fff;
  font-size:14px;
}

#cookie > *{
  max-width:690px;
  margin:0 auto;
  padding:0 16px;

  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}

#cookie button{
  border:0;
  border-radius:8px;
  padding:6px 10px;
  font:inherit;
  cursor:pointer;
  background:#fff;
  color:#111;
}

#cookie button:hover{
  background:#f0f0f0;
}


/* == TOAST == */

.toast{
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 9999;

  background:#8BC34A;
  color:#fff;
  padding: 10px 18px;
  border-radius: 10px;

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

  box-shadow: 0 6px 18px rgba(0,0,0,.18);

  opacity: 0;
  transition:
    opacity .2s ease,
    transform .2s ease;
}

.toast.is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* == TOAST TYPES == */

.toast-success{
  background:#8BC34A;
}

.toast-error{
  background:#8f2e2e;
}

.toast-info{
  background:#2f80ed;
}


.bottom-button-wrapper {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottom-button-wrapper a {
  border: none;
  cursor: default;
  display: block;
}

.bottom-button-wrapper img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ===== MOBILE ===== */
@media(max-width:720px){
  body{background:#fff}
  .wrapper{padding:0}
  .card{border-radius:0}
  .cover{border-radius:0}
  .content{padding:20px}
  .content img{border-radius:12px}

  .content h1{font-size:26px}
  .content h2{font-size:24px}
  .content h3{font-size:21px}
  
  #cookie{font-size:13px;}
}