* {
    box-sizing: border-box;
}

p, body {
    margin: 0;
}

body {
    background-color: #bbbfb9;
}

.header {
    width: 100%;
    height: 130px;
    background: url("imajes/листья\ темные.jpg") center/cover no-repeat;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;

    h1 {
        text-shadow: 2px 2px 13px #000;
        user-select: none; /*выделение текста запрещено (например, для заголовков или кнопок).*/
    }

}

.add-input-container {
        width: 100%;
        max-width: 600px;
        height: 50px;
        margin: 30px auto;
        padding: 0 10px;
        display: flex;
        justify-self: start;
        align-items: stretch;
        gap: 10px;

    .add-todo-btn {
        font-size: 20px;
        flex-grow: 1;
        user-select: none;
    }
}

.search-input-container {
width: 100%;
max-width: 600px;
height: 50px;
margin: 0 auto 30px;
padding: 0 10px;
display: flex;
justify-content: flex-start;
align-items: stretch;
gap: 10px;
}

.add-todo-input,
.search-todo-input {
    border: none;
    font-size: 24px;
    flex-grow: 3;
}

.todo-list-container {
width: 100%;
max-width: 580px;
margin: 0 auto 30px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 15px;

.todo {
height: 60px;
padding: 0 10px;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
background-color: #e0e4bd;
box-shadow: 0 0 15px 3px #00000055;
}

.todo-checkbox {
accent-color: #3db86a;
width: 25px;
height: 25px;
}

.todo-info {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin: 0;

.todo-text {
margin: 0 0 3px 0;
}

.todo-creation-date {
font-size: 12px;
font-style: italic;
}
}

.remove-todo-btn {
background-color: #b5a2a2;
border: none;
color: #fff;
padding: 5px 10px;
background-color: #b83d3d;
cursor: pointer;

&:disabled {
background-color: #b79999;
cursor: not-allowed;
}
}

.todo:has(.todo-checkbox:checked) {
background-color: #6acb8e;
}

.todo-checkbox:checked ~ .todo-info {
text-decoration: line-through;
}
}

.todo-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.clear-completed-btn {
        font-size: 20px;
        user-select: none;
        padding: 20px;
        max-width: 200px;
    }

.shine-bar {
  position: relative;
  width: 100%;          /* растянуть на всю ширину */
  text-align: center;   /* выровнять текст по центру */
  padding: 10px 0;      /* чуть больше вертикальных отступов */
  font-family: "Arial Black", sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  border-radius: 0;     /* убираем скругление, если нужна прямая полоса */
  overflow: hidden;
  color: #000;
  background: linear-gradient(
    135deg,
    #d9d9d9,
    #f0f0f0,
    #bfbfbf,
    #e6e6e6,
    #a6a6a6
  );
  background-size: 400% 400%;
  box-shadow: 0 5px 25px rgba(255, 255, 255, 0.3),
              inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

    /* Сам блик */
    .shine-bar::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -30%;
      width: 50%;
      height: 200%;
      background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      transform: skewX(-20deg);
      animation: shine 3s infinite;
    }

    @keyframes shine {
      0%   { left: -50%; }
      100% { left: 120%; }
    }

html, body {
  height: 100%;       /* растягиваем на всю высоту окна */
  margin: 0;          /* убираем отступы */
  display: flex;
  flex-direction: column; /* вертикальная колонка */
}

main {
  flex: 1;  /* занимает всё свободное место */
}

footer {
    margin-top: 30px;
    height: 60px;
    background: #333;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.todo-stats {
    font-size: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}