@import 'styles.css';

.draw-wrapper {
   padding: var(--section_padding);
   height: 85vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   box-sizing: border-box;
}
.draw-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(28vw, 30vw));
   grid-template-rows: minmax(45vh, 48vh);
   gap: 20px;
}
.draw-item-upload {
   grid-area: 1 / 1 / 2 / 2;
   padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
.draw-upload-wrapper {
   width: 100%;
   height: 100%;
   border-radius: var(--btn_border_rad);
   /* border: var(--color_14) 1px dashed; */
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   box-sizing: border-box;
   cursor: pointer;
}
.upload-text-content {
    pointer-events: none; 
    padding: 20px;
}
.draw-upload-wrapper span {
   font-size: clamp(1rem, 1vw, 3rem);
   font-family: Pragmatica Medium, sans-serif;
   line-height: 1.4;
   color: var(--color_text);
}
.draw-item-result {
   grid-area: 1 / 2 / 2 / 3;
   width: minmax(28vw, 30vw);
   height: minmax(45vh, 48vh);
}
.draw-grid-item {
   border: solid var(--color_12) 1px;
   border-radius: var(--base_wrp_brdr_rad);
   background-color: var(--color_12);
   box-sizing: border-box;
   /* aspect-ratio: 1 / 1;  */
}
.draw-upload-wrapper-active {
   border: var(--color_35) 2px solid;
   background-color: var(--color_12);
}
.draw-file-input {
   opacity: 0;
}
.draw-input-image {
   width: clamp(100px, 200px, 280px);
   height: minmax(80px, 280px);
   object-fit: contain;    
   display: block;
}
.draw-btn-submit {
   width: 100%;
   cursor: pointer;
   text-align: center;
   font-size: clamp(1.25rem, 1vw, 1.5rem);
   font-family: Pragmatica Medium;
   padding: clamp(0.75rem, 1vw, 1.25rem);
   border-radius: var(--base_wrp_brdr_rad);
   background-color: var(--color_14);
   color: var(--color_25);
}
.draw-btn-width-adapt {
   width: clamp(5rem, 1vw, 6.5rem);
}
.draw-result-wrapper {
   gap: 1rem;
   flex-wrap: wrap;
   display: flex;
   padding: 10px;
   height: auto;
}
.draw-result-image {
   width: calc(48% - 1rem);
   height: calc(50vh * 0.5);
   padding: 1rem;
   object-fit: contain;
   display: inline-block;
   cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   border-radius: 16px;
   background: #fff;
}
.draw-alert {
   position: absolute;
   bottom: 5vh;
   right: 5vw;
   padding: 6px 16px;
   opacity: 1;
   display: none;
   border-radius: var(--btn_border_rad);
   min-width: 20vw;
   max-width: 30vw;
   height: auto;
   animation: fadeEffect 5s ease-in-out forwards;
   font-family: Pragmatica Book;
}
.draw-alert-header {
   display: flex;
   gap: 16px;
   padding: 6px;
   color: var(--color_14);
   font-size: var(--main_font_size_20);
}
.draw-alert-body {
   color: var(--color_14);
   font-size: var(--main_font_size_20);
}
.draw-alert-info {
   background-color: #2196F3;
   border: #E3F2FD solid 1px;
}
.draw-alert-warning {
   background-color: #FFF9C4;
   border: #FFF9C4 solid 1px;
}
.draw-alert-error {
   background-color: #fff;
   border: #e98074 solid 1px;
   border-radius: var(--btn_border_rad);
}
.draw-alert-success {
   background-color: #fff;
   border: #53ED32 solid 1px;
   border-radius: var(--btn_border_rad);
}

@keyframes fadeEffect {
   0% { opacity: 0; transform: translateY(-10px); }   /* Скрыт и чуть смещен */
   15% { opacity: 1; transform: translateY(0); }      /* Полностью появился */
   85% { opacity: 1; transform: translateY(0); }      /* Держится (пауза) */
   100% { opacity: 0; transform: translateY(-10px);} /* Плавно исчез */
}
.draw-result-image:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.draw-result-image.image-load-error {
    opacity: 0.6;
    filter: grayscale(100%);
}


@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.draw-grade-wrapper {
   display: flex;
}
.draw-subtitle-check {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   font-size: clamp(0.5rem, 1vw, 1rem);
}
.draw-button {
   padding: 6px;
   border: none;
   background-color: var(--color_25);
}
.draw-image-hero {
   width: 70vw;
   height: 80vh;
   object-fit: contain;
   z-index: 26;
}
.draw-controls {
    display: flex;
    gap: 10px;
    padding: 10px 0;
}
.draw-image-viewer-header {
   width: 100%;
   display: flex;
   /* align-items: end; */
   justify-content: end;
}
.draw-image-viewer-controls {
    padding: 6px;
}
.draw-image-viewer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    padding: 10px;
    
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Фон: полупрозрачный чёрный */
    background: rgba(0, 0, 0, 0.85);
    
    /* Анимация появления */
    animation: modalFadeIn 0.2s ease;
}
.draw-image-viewer-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
}
.draw-image-viewer-button {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: var(--btn_padding);
    font-size: var(--main_font_size_20);
    font-family: Pragmatica Medium;
    border-radius: var(--btn_border_rad);
    color: var(--color_7);
    display: flex;
    gap: 3px;
    align-items: center;
}
.draw-image-viewer-button img {
    width: var(--btn_icon_w);
    height: var(--btn_icon_h);
}
.draw-modal-close {
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
   line-height: 1;
   padding: 3px 6px;
   /* position: absolute;
   right: 20px;
   top: 20px; */
}
.draw-loader-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}
/* .draw-button-icon {
   width: 32px;
   height: 32px;
} */
.draw-button-icon {
   width: 32px;
   height: 32px;
   font-size: 2rem;
   cursor: pointer;
   border: 2px solid transparent;
   border-radius: 10px;
   display: inline-block;
   transition: all 0.2s;
}
.radio-icons-active {
   display: flex;
   transform: scale(1.1);
   transition: all 0.2s ease;
}
.radio-icons {
   display: none;
}
.radio-icons .icon-radio input {
  /* Скрываем стандартный input, не удаляя его из доступности */
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
}

#goodGrade, #badGrade {
    transition: all 0.2s ease;
    cursor: pointer;
}

#goodGrade:hover:not(:disabled),
#badGrade:hover:not(:disabled) {
    transform: scale(1.05);
}

.alert-grade {
    animation: slideIn 0.3s ease;
    border: none;
    border-radius: 8px;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}